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

@@ -7,6 +7,19 @@ import { Navbar } from "@/components/layout/Navbar";
 import { Footer } from "@/components/layout/Footer";
 import { Sidebar, MobileSidebar } from "@/components/layout/Sidebar";
 
+// The sidebar shows only on these exact routes — each role's dashboard root,
+// plus Profile & Security and Site Settings (matching the redesign
+// mockups). Every other /dashboard/* route relies on the global floating
+// help button instead of sidebar nav, same as before this redesign.
+const SIDEBAR_ROUTES = [
+  "/dashboard/admin",
+  "/dashboard/supervisor",
+  "/dashboard/staff",
+  "/dashboard/user",
+  "/dashboard/user/profile",
+  "/dashboard/admin/settings",
+];
+
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth();
   const router = useRouter();
@@ -63,31 +76,31 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     );
   }
 
-  // Sub-pages within staff/supervisor/admin (e.g. /dashboard/supervisor/reports,
-  // /dashboard/admin/cashup/[id]) are full-width workspaces with their own internal navigation
-  // and header — the dashboard sidebar's section links (My Events, Profile, Admin, etc.) would
-  // just crowd them. The sidebar stays visible only on each role's root landing page; every
-  // deeper sub-page hides it. Navigating back is never a dead end: Navbar's "Dashboard" link is
-  // always present and /dashboard auto-redirects to the role root.
-  const SIDEBAR_ROOTS = ["/dashboard/staff", "/dashboard/supervisor", "/dashboard/admin"];
-  const hideSidebar = !!pathname && SIDEBAR_ROOTS.some(root => pathname !== root && pathname.startsWith(root + "/"));
+  const showSidebar = !!pathname && SIDEBAR_ROUTES.includes(pathname);
+
+  if (showSidebar) {
+    // App-shell layout: the whole viewport is claimed (h-screen, no body
+    // scroll) so the sidebar can be a plain sibling column that never
+    // scrolls — only the content column (main + footer) scrolls internally.
+    return (
+      <div className="h-screen flex flex-col overflow-hidden">
+        <Navbar />
+        <MobileSidebar />
+        <div className="flex-1 flex min-h-0">
+          <Sidebar />
+          <div className="flex-1 min-w-0 flex flex-col overflow-y-auto">
+            <main className="flex-1 p-6 bg-gray-50">{children}</main>
+            <Footer />
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen flex flex-col">
       <Navbar />
-      <div className="flex-1 flex flex-col md:flex-row">
-        {!hideSidebar && (
-          <>
-            {/* Mobile dropdown navigation */}
-            <MobileSidebar />
-            {/* Desktop sidebar */}
-            <div className="hidden md:block">
-              <Sidebar />
-            </div>
-          </>
-        )}
-        <main className="flex-1 p-6 bg-gray-50">{children}</main>
-      </div>
+      <main className="flex-1 p-6 bg-gray-50">{children}</main>
       <Footer />
     </div>
   );