diff --git a/app/staff/report/page.tsx b/app/staff/report/page.tsx
new file mode 100644
index 0000000..88d6af9
--- /dev/null
+++ b/app/staff/report/page.tsx
@@ -0,0 +1,82 @@
+import { Suspense } from "react";
+import { StaffReportView } from "@/components/StaffReportView";
+import { SiteHeader, SiteFooter } from "@/components/SiteChrome";
+import { isStaffKeyValid } from "@/lib/staff-auth";
+
+interface PageProps {
+  searchParams: Promise<{ org?: string; key?: string }>;
+}
+
+export const metadata = {
+  title: "Staff report — Food Co-op Initiative",
+  robots: { index: false, follow: false },
+};
+
+export default async function StaffReportPage({ searchParams }: PageProps) {
+  const { org, key } = await searchParams;
+
+  // Generic "not found" if the key is missing or wrong — don't confirm
+  // route existence.
+  if (!isStaffKeyValid(key)) {
+    return <NotFound />;
+  }
+
+  const orgId = Number(org);
+  const orgValid = !!org && Number.isFinite(orgId) && orgId > 0;
+
+  return (
+    <>
+      <a
+        href="#main"
+        className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-paper focus:px-3 focus:py-2 focus:text-ink focus:shadow"
+      >
+        Skip to content
+      </a>
+      <SiteHeader />
+      <main id="main" className="flex-1">
+        <div className="mx-auto max-w-5xl px-4 py-10 sm:px-6 sm:py-14">
+          {orgValid ? (
+            <Suspense fallback={null}>
+              <StaffReportView org={orgId} authKey={key!} />
+            </Suspense>
+          ) : (
+            <MissingOrg />
+          )}
+        </div>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+
+function NotFound() {
+  return (
+    <>
+      <SiteHeader />
+      <main className="flex-1">
+        <div className="mx-auto max-w-2xl px-4 py-20 text-center">
+          <h1 className="font-display text-3xl text-ink">Not found</h1>
+          <p className="mt-3 text-ink-soft">
+            The page you requested doesn&apos;t exist.
+          </p>
+        </div>
+      </main>
+      <SiteFooter />
+    </>
+  );
+}
+
+function MissingOrg() {
+  return (
+    <div role="alert" className="rounded-lg border-2 border-clay-200 bg-clay-100/30 px-6 py-7">
+      <h2 className="font-display text-xl font-medium text-clay-700">
+        Missing or invalid org id.
+      </h2>
+      <p className="mt-3 leading-relaxed text-ink-soft">
+        Add <code className="font-mono">?org=&lt;civi-org-id&gt;</code> to the URL. The org
+        id is the Civi Contact id of the organization (visible in the URL when
+        viewing the org in CiviCRM).
+      </p>
+    </div>
+  );
+}