Phase 2 and Demo

packages/client/src/pages/admin/BiddersPage.tsx

@@ -1,22 +1,23 @@
 /**
- * Admin → Bidders – profiles, paddles, QR codes, CSV import.
+ * Admin → Bidders — profiles, paddles, QR codes, CSV import.
  * TODO: CRUD + bulk import via /api/bidders.
  */
 export default function AdminBiddersPage() {
   return (
-    <main className="p-6 space-y-4">
+    <div className="p-6 space-y-5 max-w-5xl mx-auto">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Bidder Manager</h1>
+        <div>
+          <h1 className="text-2xl font-black text-gray-900">Bidders</h1>
+          <p className="text-sm text-gray-400 mt-0.5">Profiles, paddles, QR codes</p>
+        </div>
         <div className="flex gap-2">
-          <button className="px-3 py-2 border rounded-lg text-sm">Import CSV</button>
-          <button className="px-3 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium">
-            + Add Bidder
-          </button>
+          <button className="btn-ghost text-sm">Import CSV</button>
+          <button className="btn-primary">+ Add Bidder</button>
         </div>
       </div>
-      <div className="border border-dashed border-gray-300 rounded-xl p-8 text-center text-gray-400 text-sm">
+      <div className="card p-8 text-center text-gray-400 text-sm border-dashed border-2 border-gray-200 bg-gray-50/50">
         Bidder list — not yet implemented
       </div>
-    </main>
+    </div>
   );
 }

packages/client/src/pages/admin/CheckoutPage.tsx

@@ -1,14 +1,23 @@
 /**
- * Admin → Checkout – cashier station; find bidder, take payment, print receipt.
+ * Admin → Checkout — cashier station; find bidder, take payment, print receipt.
  * TODO: search bidders, show invoice, call /api/checkout/:bidderId/capture.
  */
 export default function AdminCheckoutPage() {
   return (
-    <main className="p-6 space-y-4">
-      <h1 className="text-2xl font-bold">Checkout</h1>
-      <div className="border border-dashed border-gray-300 rounded-xl p-8 text-center text-gray-400 text-sm">
+    <div className="p-6 space-y-5 max-w-3xl mx-auto">
+      <div>
+        <h1 className="text-2xl font-black text-gray-900">Checkout</h1>
+        <p className="text-sm text-gray-400 mt-0.5">Cashier station — search by paddle or name</p>
+      </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">
         Cashier station — not yet implemented
       </div>
-    </main>
+    </div>
   );
 }

packages/client/src/pages/admin/DashboardPage.tsx

@@ -1,19 +1,41 @@
 /**
- * Admin dashboard – overview of events, recent bids, revenue snapshot.
+ * Admin dashboard — overview of events, recent bids, revenue snapshot.
  * TODO: fetch org summary from /api/reporting.
  */
 export default function AdminDashboard() {
+  const stats = [
+    { label: "Events",   value: "—", icon: "🗓️"  },
+    { label: "Bidders",  value: "—", icon: "🎟️"  },
+    { label: "Revenue",  value: "—", icon: "💰" },
+  ];
+
   return (
-    <main className="p-6 space-y-6">
-      <h1 className="text-2xl font-bold">Admin Dashboard</h1>
+    <div className="p-6 space-y-6 max-w-5xl mx-auto">
+      <div>
+        <h1 className="text-2xl font-black text-gray-900">Dashboard</h1>
+        <p className="text-sm text-gray-400 mt-0.5">Storybook Farm Auction Platform</p>
+      </div>
+
+      {/* Stat cards */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-        {["Events", "Bidders", "Revenue"].map((label) => (
-          <div key={label} className="border rounded-xl p-5 text-center">
-            <p className="text-gray-500 text-sm">{label}</p>
-            <p className="text-3xl font-bold mt-1">—</p>
+        {stats.map(({ label, value, icon }) => (
+          <div key={label} className="card p-5">
+            <div className="flex items-center gap-3 mb-3">
+              <span className="text-xl leading-none">{icon}</span>
+              <p className="text-sm font-semibold text-gray-500">{label}</p>
+            </div>
+            <p className="text-3xl font-black text-brand-700 tabular-nums">{value}</p>
           </div>
         ))}
       </div>
-    </main>
+
+      {/* Placeholder activity feed */}
+      <div className="card p-5">
+        <p className="section-title mb-4">Recent Activity</p>
+        <div className="border border-dashed border-gray-200 rounded-xl p-8 text-center text-gray-400 text-sm">
+          Activity feed — not yet implemented
+        </div>
+      </div>
+    </div>
   );
 }

packages/client/src/pages/admin/EventsPage.tsx

@@ -1,19 +1,22 @@
 /**
- * Admin → Events – list, create, edit events.
+ * Admin → Events — list, create, edit events.
  * TODO: CRUD via /api/events.
  */
 export default function AdminEventsPage() {
   return (
-    <main className="p-6 space-y-4">
+    <div className="p-6 space-y-5 max-w-5xl mx-auto">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Events</h1>
-        <button className="px-4 py-2 bg-brand-600 text-white rounded-lg text-sm font-medium">
+        <div>
+          <h1 className="text-2xl font-black text-gray-900">Events</h1>
+          <p className="text-sm text-gray-400 mt-0.5">Manage auctions and event settings</p>
+        </div>
+        <button className="btn-primary">
           + New Event
         </button>
       </div>
-      <div className="border border-dashed border-gray-300 rounded-xl p-8 text-center text-gray-400 text-sm">
+      <div className="card p-8 text-center text-gray-400 text-sm border-dashed border-2 border-gray-200 bg-gray-50/50">
         Events list — not yet implemented
       </div>
-    </main>
+    </div>
   );
 }

packages/client/src/pages/admin/FundANeedPage.tsx

@@ -1,14 +1,17 @@
 /**
- * Admin → Fund-a-Need / Paddle Raise – set tiers, open campaign, show live total.
+ * Admin → Fund-a-Need / Paddle Raise — set tiers, open campaign, show live total.
  * TODO: configure PaddleRaiseCampaign, subscribe to paddle_raise_update events.
  */
 export default function FundANeedPage() {
   return (
-    <main className="p-6 space-y-4">
-      <h1 className="text-2xl font-bold">Fund-a-Need</h1>
-      <div className="border border-dashed border-gray-300 rounded-xl p-8 text-center text-gray-400 text-sm">
-        Paddle raise setup & live totals — not yet implemented
+    <div className="p-6 space-y-5 max-w-3xl mx-auto">
+      <div>
+        <h1 className="text-2xl font-black text-gray-900">Fund-a-Need</h1>
+        <p className="text-sm text-gray-400 mt-0.5">Paddle raise setup &amp; live totals</p>
       </div>
-    </main>
+      <div className="card p-8 text-center text-gray-400 text-sm border-dashed border-2 border-gray-200 bg-gray-50/50">
+        Paddle raise setup &amp; live totals — not yet implemented
+      </div>
+    </div>
   );
 }

packages/client/src/pages/admin/ItemsPage.tsx

@@ -1,14 +1,22 @@
 /**
- * Admin → Items – manage lots, categories, media, donor info, increments.
+ * Admin → Items — manage lots, categories, media, donor info, increments.
  * TODO: CRUD via /api/items; file uploads via POST /api/media/upload (multipart).
  */
 export default function AdminItemsPage() {
   return (
-    <main className="p-6 space-y-4">
-      <h1 className="text-2xl font-bold">Item Manager</h1>
-      <div className="border border-dashed border-gray-300 rounded-xl p-8 text-center text-gray-400 text-sm">
-        Item list & editor — not yet implemented
+    <div className="p-6 space-y-5 max-w-5xl mx-auto">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-black text-gray-900">Items</h1>
+          <p className="text-sm text-gray-400 mt-0.5">Lots, media, donor info, bid increments</p>
+        </div>
+        <button className="btn-primary">
+          + Add Item
+        </button>
       </div>
-    </main>
+      <div className="card p-8 text-center text-gray-400 text-sm border-dashed border-2 border-gray-200 bg-gray-50/50">
+        Item list &amp; editor — not yet implemented
+      </div>
+    </div>
   );
 }

packages/client/src/pages/admin/ReportingPage.tsx

@@ -1,14 +1,17 @@
 /**
- * Admin → Reporting – revenue, sell-through, bidder activity, audit log.
+ * Admin → Reporting — revenue, sell-through, bidder activity, audit log.
  * TODO: fetch /api/reporting/events/:id/*.
  */
 export default function AdminReportingPage() {
   return (
-    <main className="p-6 space-y-4">
-      <h1 className="text-2xl font-bold">Reporting</h1>
-      <div className="border border-dashed border-gray-300 rounded-xl p-8 text-center text-gray-400 text-sm">
+    <div className="p-6 space-y-5 max-w-5xl mx-auto">
+      <div>
+        <h1 className="text-2xl font-black text-gray-900">Reporting</h1>
+        <p className="text-sm text-gray-400 mt-0.5">Revenue, sell-through, audit log</p>
+      </div>
+      <div className="card p-8 text-center text-gray-400 text-sm border-dashed border-2 border-gray-200 bg-gray-50/50">
         Reports — not yet implemented
       </div>
-    </main>
+    </div>
   );
 }