Phase 2 and Demo

packages/client/src/pages/staff/CheckInPage.tsx

@@ -1,5 +1,5 @@
 /**
- * Check-in station – search bidders, scan QR, assign paddle, confirm payment readiness.
+ * Check-in station — search bidders, scan QR, assign paddle, confirm payment readiness.
  *
  * TODO:
  *  - Search /api/bidders?eventId=&q=
@@ -9,10 +9,24 @@
  */
 export default function CheckInPage() {
   return (
-    <main className="p-4 space-y-4">
-      <h1 className="text-2xl font-bold">Check-In</h1>
-      <div className="border border-dashed border-gray-300 rounded-xl p-8 text-center text-gray-400 text-sm">
-        QR scan & bidder search — not yet implemented
+    <main className="min-h-screen bg-gray-50 p-4 space-y-4">
+      <div className="flex items-center gap-3">
+        <span className="text-3xl">✅</span>
+        <div>
+          <h1 className="text-2xl font-black text-gray-900">Check-In</h1>
+          <p className="text-sm text-gray-400">Scan QR or search bidder name / paddle</p>
+        </div>
+      </div>
+
+      <input
+        type="search"
+        placeholder="Search paddle # or bidder name…"
+        className="field"
+        disabled
+      />
+
+      <div className="card p-8 text-center text-gray-400 text-sm border-dashed border-2 border-gray-200 bg-gray-50/50">
+        QR scan &amp; bidder search — not yet implemented
       </div>
     </main>
   );