stage 1

app/op/layout.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { requireOperator } from "@/lib/auth";
+import LogoutButton from "@/components/LogoutButton";
+
+export default async function OperatorLayout({ children }: { children: React.ReactNode }) {
+  const user = await requireOperator();
+
+  return (
+    <div className="min-h-dvh flex flex-col">
+      <header className="border-b border-slate-200 bg-white">
+        <div className="mx-auto max-w-3xl px-4 py-3 flex items-center gap-3">
+          <Link href="/op" className="font-semibold tracking-tight">
+            MRP
+          </Link>
+          <span className="ml-auto text-sm text-slate-500">{user.name}</span>
+          <LogoutButton />
+        </div>
+      </header>
+      <main className="flex-1">{children}</main>
+    </div>
+  );
+}

app/op/page.tsx

@@ -0,0 +1,16 @@
+export default function OperatorHomePage() {
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-10 text-center space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold">Scan a traveler QR code</h1>
+        <p className="text-slate-500 mt-2">
+          Use your phone camera to scan the QR on a step card. It will open the step here so you can
+          start, log time, and close out.
+        </p>
+      </div>
+      <div className="rounded-xl bg-white border border-slate-200 p-6 text-slate-500 text-sm">
+        <p>Your active steps will appear here once you claim them.</p>
+      </div>
+    </div>
+  );
+}