@blamejs/blamejs-shop 0.1.6 → 0.1.8

package/lib/admin.js

@@ -235,6 +235,24 @@ function mount(router, deps) {
     return _wrap(h, { expectedToken: expectedToken });
   };
 
+  // Content-negotiate one endpoint between the JSON API and the HTML
+  // console: a bearer token routes to `apiHandler` (the JSON contract,
+  // unchanged for tooling); a browser admin-cookie session routes to
+  // `htmlHandler` (the rendered console page). Unauthenticated GETs show
+  // the sign-in form; other methods bounce to /admin.
+  function _pageOrApi(isGet, apiHandler, htmlHandler) {
+    return async function (req, res) {
+      if (_authOk(_readBearer(req), expectedToken)) return apiHandler(req, res);
+      // Mirror _htmlAuthed: a missing vault makes the cookie check throw;
+      // treat that as "not authed" rather than 500-ing the route.
+      var cookieOk = false;
+      try { cookieOk = _adminCookieValid(req); } catch (_e) { cookieOk = false; }
+      if (cookieOk) return htmlHandler(req, res);
+      if (isGet) return _sendHtml(res, 200, renderAdminLogin({ shop_name: deps.shop_name }));
+      return _redirect(res, "/admin");
+    };
+  }
+
   function _json(res, status, obj) {
     res.status(status);
     if (res.setHeader) res.setHeader("content-type", "application/json; charset=utf-8");
@@ -244,11 +262,31 @@ function mount(router, deps) {
 
   // ---- products -------------------------------------------------------
 
-  router.post("/admin/products", W("product.create", async function (req, res) {
-    var p = await catalog.products.create(req.body || {});
-    _json(res, 201, p);
-    return p;
-  }));
+  router.post("/admin/products", _pageOrApi(false,
+    W("product.create", async function (req, res) {
+      var p = await catalog.products.create(req.body || {});
+      _json(res, 201, p);
+      return p;
+    }),
+    async function (req, res) {
+      // Browser form submit — create, then redirect (PRG). Bad input
+      // re-renders the products page with a notice, never a 500.
+      try {
+        await catalog.products.create(req.body || {});
+      } catch (e) {
+        if (e instanceof TypeError || e.code === "CATALOG_DUPLICATE" || /slug|exists|duplicate/i.test(e.message || "")) {
+          var page = await catalog.products.list({ limit: 100 });
+          return _sendHtml(res, 400, renderAdminProducts({
+            shop_name: deps.shop_name, products: page.rows || [],
+            notice: (e && e.message) || "Couldn't create that product.",
+          }));
+        }
+        throw e;
+      }
+      _b().audit.safeEmit({ action: AUDIT_NAMESPACE + ".product.create", outcome: "success", metadata: {} });
+      _redirect(res, "/admin/products?created=1");
+    },
+  ));
 
   router.get("/admin/products/search", R(async function (req, res) {
     var url = req.url ? new URL(req.url, "http://localhost") : null;
@@ -269,15 +307,23 @@ function mount(router, deps) {
     _json(res, 200, page);
   }));
 
-  router.get("/admin/products", R(async function (req, res) {
-    var url = req.url ? new URL(req.url, "http://localhost") : null;
-    var status = url && url.searchParams.get("status");
-    var cursor = url && url.searchParams.get("cursor");
-    var limitS = url && url.searchParams.get("limit");
-    var limit  = limitS == null ? 50 : parseInt(limitS, 10);
-    var page = await catalog.products.list({ status: status || undefined, cursor: cursor || undefined, limit: limit });
-    _json(res, 200, page);
-  }));
+  router.get("/admin/products", _pageOrApi(true,
+    R(async function (req, res) {
+      var url = req.url ? new URL(req.url, "http://localhost") : null;
+      var status = url && url.searchParams.get("status");
+      var cursor = url && url.searchParams.get("cursor");
+      var limitS = url && url.searchParams.get("limit");
+      var limit  = limitS == null ? 50 : parseInt(limitS, 10);
+      var page = await catalog.products.list({ status: status || undefined, cursor: cursor || undefined, limit: limit });
+      _json(res, 200, page);
+    }),
+    async function (req, res) {
+      var url = req.url ? new URL(req.url, "http://localhost") : null;
+      var created = !!(url && url.searchParams.get("created"));
+      var page = await catalog.products.list({ limit: 100 });
+      _sendHtml(res, 200, renderAdminProducts({ shop_name: deps.shop_name, products: page.rows || [], created: created }));
+    },
+  ));
 
   router.get("/admin/products/:id", R(async function (req, res) {
     var p = await catalog.products.get(req.params.id);
@@ -292,19 +338,26 @@ function mount(router, deps) {
     return p;
   }));
 
-  router.post("/admin/products/:id/archive", W("product.archive", async function (req, res) {
-    var p = await catalog.products.archive(req.params.id);
-    if (!p) return _problem(res, 404, "product-not-found");
-    _json(res, 200, p);
-    return p;
-  }));
-
-  router.post("/admin/products/:id/restore", W("product.restore", async function (req, res) {
-    var p = await catalog.products.restore(req.params.id);
-    if (!p) return _problem(res, 404, "product-not-found");
-    _json(res, 200, p);
-    return p;
-  }));
+  function _productStateAction(verb, op, audit) {
+    return _pageOrApi(false,
+      W(audit, async function (req, res) {
+        var p = await op(req.params.id);
+        if (!p) return _problem(res, 404, "product-not-found");
+        _json(res, 200, p);
+        return p;
+      }),
+      async function (req, res) {
+        // A bad/missing id is a no-op (fall through to the list); a real
+        // failure must NOT be reported as success — let it surface.
+        try { await op(req.params.id); }
+        catch (e) { if (!(e instanceof TypeError)) throw e; }
+        _b().audit.safeEmit({ action: AUDIT_NAMESPACE + "." + audit, outcome: "success", metadata: { id: req.params.id } });
+        _redirect(res, "/admin/products");
+      },
+    );
+  }
+  router.post("/admin/products/:id/archive", _productStateAction("archive", function (id) { return catalog.products.archive(id); }, "product.archive"));
+  router.post("/admin/products/:id/restore", _productStateAction("restore", function (id) { return catalog.products.restore(id); }, "product.restore"));
 
   // ---- variants -------------------------------------------------------
 
@@ -546,50 +599,152 @@ function mount(router, deps) {
 
   // ---- orders ---------------------------------------------------------
 
-  router.get("/admin/orders/:id", R(async function (req, res) {
-    var o = await order.get(req.params.id);
-    if (!o) return _problem(res, 404, "order-not-found");
-    _json(res, 200, o);
-  }));
-
-  router.post("/admin/orders/:id/transition", W("order.transition", async function (req, res) {
-    var body = req.body || {};
-    if (!body.event) throw new TypeError("admin.order.transition: body.event required");
-    var o = await order.transition(req.params.id, body.event, { reason: body.reason, metadata: body.metadata });
-    _json(res, 200, o);
-    return o;
-  }));
-
-  // ---- refunds --------------------------------------------------------
+  // Recent orders across all customers. Bearer → no list endpoint existed
+  // before, so this adds one (JSON); a signed-in browser gets the console.
+  router.get("/admin/orders", _pageOrApi(true,
+    R(async function (req, res) {
+      var url = req.url ? new URL(req.url, "http://localhost") : null;
+      var status = url && url.searchParams.get("status");
+      var limitS = url && url.searchParams.get("limit");
+      var limit  = limitS == null ? 50 : parseInt(limitS, 10);
+      var list = await order.listRecent({ status: status || undefined, limit: limit });
+      _json(res, 200, list);
+    }),
+    async function (req, res) {
+      var url = req.url ? new URL(req.url, "http://localhost") : null;
+      var statusRaw = url && url.searchParams.get("status");
+      // A bad ?status= filter falls back to "all" rather than erroring the
+      // page — the operator just sees everything, which is a safe default.
+      var status = null, notice = null;
+      if (statusRaw) {
+        try { await order.listRecent({ status: statusRaw, limit: 1 }); status = statusRaw; }
+        catch (_e) { notice = "Unknown status filter — showing all orders."; }
+      }
+      var list = await order.listRecent({ status: status || undefined, limit: 100 });
+      _sendHtml(res, 200, renderAdminOrders({
+        shop_name: deps.shop_name, orders: list.rows || [],
+        status: status, notice: notice,
+      }));
+    },
+  ));
 
-  if (payment) {
-    router.post("/admin/orders/:id/refund", W("order.refund", async function (req, res) {
+  router.get("/admin/orders/:id", _pageOrApi(true,
+    R(async function (req, res) {
       var o = await order.get(req.params.id);
       if (!o) return _problem(res, 404, "order-not-found");
-      if (!o.payment_intent_id) return _problem(res, 422, "no-payment-intent", "Order has no linked payment intent");
+      _json(res, 200, o);
+    }),
+    async function (req, res) {
+      var o;
+      // A malformed id throws (defensive id reader) — render 404, not 500.
+      try { o = await order.get(req.params.id); }
+      catch (e) { if (!(e instanceof TypeError)) throw e; o = null; }
+      if (!o) return _sendHtml(res, 404, renderAdminOrders({
+        shop_name: deps.shop_name, orders: [], notice: "Order not found.",
+      }));
+      var url = req.url ? new URL(req.url, "http://localhost") : null;
+      _sendHtml(res, 200, renderAdminOrder({
+        shop_name:   deps.shop_name,
+        order:       o,
+        transitions: order.transitionsFrom(o.status),
+        // Refund moves money, so the console only offers it when a payment
+        // provider is wired AND the order has a captured intent to refund.
+        can_refund:  !!(payment && o.payment_intent_id),
+        moved:       url && url.searchParams.get("moved"),
+        notice:      url && url.searchParams.get("err") ? "That action couldn't be completed for this order." : null,
+      }));
+    },
+  ));
+
+  router.post("/admin/orders/:id/transition", _pageOrApi(false,
+    W("order.transition", async function (req, res) {
       var body = req.body || {};
-      var refundIdempotencyKey = "refund:" + o.id + ":" + (body.idempotency_suffix || _b().uuid.v7());
-      var refund;
+      if (!body.event) throw new TypeError("admin.order.transition: body.event required");
+      var o = await order.transition(req.params.id, body.event, { reason: body.reason, metadata: body.metadata });
+      _json(res, 200, o);
+      return o;
+    }),
+    async function (req, res) {
+      // Browser form → run the transition, then redirect back to the
+      // detail (PRG). A bad id (TypeError) or an FSM refusal (the move
+      // isn't legal from this status) surfaces as a notice, not a 500;
+      // any other failure propagates.
+      var id = req.params.id;
+      var event = (req.body || {}).event;
+      if (!event) return _redirect(res, "/admin/orders/" + encodeURIComponent(id) + "?err=1");
       try {
-        refund = await payment.refund({
-          payment_intent: o.payment_intent_id,
-          amount_minor:   body.amount_minor || undefined,
-          reason:         body.reason || undefined,
-          metadata:       { order_id: o.id },
-        }, refundIdempotencyKey);
+        await order.transition(id, event, { reason: "admin:console" });
       } catch (e) {
-        return _problem(res, 502, "stripe-refund-failed", (e && e.message) || String(e));
+        if (e instanceof TypeError || (e && e.code && /FSM|TRANSITION|GUARD/i.test(e.code))) {
+          return _redirect(res, "/admin/orders/" + encodeURIComponent(id) + "?err=1");
+        }
+        throw e;
       }
+      _b().audit.safeEmit({ action: AUDIT_NAMESPACE + ".order.transition", outcome: "success", metadata: { id: id, event: event } });
+      _redirect(res, "/admin/orders/" + encodeURIComponent(id) + "?moved=1");
+    },
+  ));
+
+  // ---- refunds --------------------------------------------------------
+
+  if (payment) {
+    // Issue the actual payment-provider refund, then advance the order
+    // FSM. Shared by the JSON API and the browser console so a console
+    // "Refund" moves the money first (never a bare state change — that
+    // would mark an order refunded with the customer never paid back).
+    async function _refundOrder(o, body) {
+      var refundIdempotencyKey = "refund:" + o.id + ":" + (body.idempotency_suffix || _b().uuid.v7());
+      var refund = await payment.refund({
+        payment_intent: o.payment_intent_id,
+        amount_minor:   body.amount_minor || undefined,
+        reason:         body.reason || undefined,
+        metadata:       { order_id: o.id },
+      }, refundIdempotencyKey);
       try {
         await order.transition(o.id, "refund", {
           reason:   "admin:refund:" + (body.reason || "requested_by_customer"),
           metadata: { stripe_refund_id: refund.id, amount_minor: refund.amount },
         });
-      } catch (_e) { /* refund succeeded at Stripe; transition refusal logged, surface to operator via re-fetch */ }
-      var updated = await order.get(o.id);
-      _json(res, 200, { refund: refund, order: updated });
-      return { id: o.id };
-    }));
+      } catch (_e) { /* refund succeeded at the provider; transition refusal logged, surfaced via re-fetch */ }
+      return { refund: refund, order: await order.get(o.id) };
+    }
+
+    router.post("/admin/orders/:id/refund", _pageOrApi(false,
+      W("order.refund", async function (req, res) {
+        var o = await order.get(req.params.id);
+        if (!o) return _problem(res, 404, "order-not-found");
+        if (!o.payment_intent_id) return _problem(res, 422, "no-payment-intent", "Order has no linked payment intent");
+        var result;
+        try {
+          result = await _refundOrder(o, req.body || {});
+        } catch (e) {
+          return _problem(res, 502, "stripe-refund-failed", (e && e.message) || String(e));
+        }
+        _json(res, 200, result);
+        return { id: o.id };
+      }),
+      async function (req, res) {
+        // Browser console: full refund (partial refunds stay on the JSON
+        // API via amount_minor), then PRG back to the detail. A bad id or
+        // missing payment intent surfaces as a notice, never a 500.
+        var id = req.params.id;
+        var o;
+        try { o = await order.get(id); }
+        catch (e) { if (!(e instanceof TypeError)) throw e; o = null; }
+        if (!o || !o.payment_intent_id) {
+          return _redirect(res, "/admin/orders/" + encodeURIComponent(id) + "?err=1");
+        }
+        try {
+          await _refundOrder(o, { reason: "requested_by_customer" });
+        } catch (_e) {
+          // Provider refund failed — the order is untouched (the FSM
+          // transition only runs after a successful refund).
+          return _redirect(res, "/admin/orders/" + encodeURIComponent(id) + "?err=1");
+        }
+        _b().audit.safeEmit({ action: AUDIT_NAMESPACE + ".order.refund", outcome: "success", metadata: { id: id } });
+        _redirect(res, "/admin/orders/" + encodeURIComponent(id) + "?moved=1");
+      },
+    ));
   }
 
   // ---- reviews (moderation) -------------------------------------------
@@ -1179,6 +1334,15 @@ var DASHBOARD_LAYOUT =
   "    .btn:hover { background:var(--accent-d); border-color:var(--accent-d); }\n" +
   "    .btn--ghost { background:transparent; color:var(--ink); border-color:var(--ink); }\n" +
   "    .btn--ghost:hover { background:var(--ink); color:var(--paper); }\n" +
+  "    .btn--danger { background:transparent; color:var(--accent-d); border-color:var(--accent-d); }\n" +
+  "    .btn--danger:hover { background:var(--accent-d); color:var(--paper); }\n" +
+  "    .order-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }\n" +
+  "    .chip { display:inline-block; padding:.3rem .8rem; border-radius:999px; border:1px solid var(--hair); color:var(--ink-2); text-decoration:none; font-size:.78rem; text-transform:capitalize; }\n" +
+  "    .chip:hover { border-color:var(--accent); }\n" +
+  "    .chip--on { background:var(--ink); color:var(--paper); border-color:var(--ink); }\n" +
+  "    .order-totals { width:100%; }\n" +
+  "    .order-totals td { padding:.3rem 0; }\n" +
+  "    .order-actions { display:flex; flex-wrap:wrap; gap:.6rem; }\n" +
   "    .nav-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; }\n" +
   "    .nav-card { display:block; background:var(--paper); border:1px solid var(--hair); border-radius:8px; padding:1.4rem; text-decoration:none; color:var(--ink); }\n" +
   "    .nav-card:hover { border-color:var(--accent); box-shadow:0 8px 20px -12px rgba(0,0,0,.25); }\n" +
@@ -1189,6 +1353,11 @@ var DASHBOARD_LAYOUT =
   "    .banner--ok { background:#e9f5ec; border:1px solid #bfe1c9; color:#1f6b3a; }\n" +
   "    .banner--err { background:#fff1eb; border:1px solid #f6c5af; color:var(--accent-d); }\n" +
   "    .actions-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-top:1.5rem; }\n" +
+  "    .admin-nav { background:var(--paper); border-bottom:1px solid var(--hair); }\n" +
+  "    .admin-nav__inner { max-width:80rem; margin:0 auto; padding:0 1.5rem; display:flex; gap:.1rem; flex-wrap:wrap; }\n" +
+  "    .admin-nav a { display:inline-block; padding:.85rem .9rem; color:var(--ink-2); text-decoration:none; font-size:.84rem; font-weight:600; border-bottom:2px solid transparent; }\n" +
+  "    .admin-nav a:hover { color:var(--ink); }\n" +
+  "    .admin-nav a.active { color:var(--accent); border-bottom-color:var(--accent); }\n" +
   "  </style>\n" +
   "</head>\n" +
   "<body>\n" +
@@ -1198,6 +1367,7 @@ var DASHBOARD_LAYOUT =
   "      <span style=\"font-size:.8rem; color:var(--mute);\">{{window_label}}</span>\n" +
   "    </div>\n" +
   "  </header>\n" +
+  "  {{nav}}\n" +
   "  <main>{{body}}</main>\n" +
   "</body>\n" +
   "</html>\n";
@@ -1305,7 +1475,7 @@ function renderDashboard(opts) {
     ? recent.map(function (o) {
         var statusClass = _htmlEscape(o.status);
         return "<tr>" +
-          "<td><span class=\"order-id\">" + _htmlEscape(o.id.slice(0, 8)) + "</span></td>" +
+          "<td><a class=\"order-id\" href=\"/admin/orders/" + _htmlEscape(o.id) + "\">" + _htmlEscape(o.id.slice(0, 8)) + "</a></td>" +
           "<td><span class=\"status-pill " + statusClass + "\">" + _htmlEscape(o.status) + "</span></td>" +
           "<td class=\"num\">" + _htmlEscape(pricing.format(o.grand_total_minor, o.currency)) + "</td>" +
           "</tr>";
@@ -1326,12 +1496,12 @@ function renderDashboard(opts) {
 
   var body = statsBlock + otherCurrencies + spark + twoCol;
 
-  var html = _renderTemplate(DASHBOARD_LAYOUT, {
-    shop_name:    opts.shop_name || "blamejs.shop",
-    window_label: "Window: last 30 days (operator-tunable via ?since=&until=)",
-    body:         "RAW_BODY",
-  }).replace("RAW_BODY", body);
-  return html;
+  return _renderAdminShell(
+    opts.shop_name,
+    "Window: last 30 days (operator-tunable via ?since=&until=)",
+    body,
+    "dashboard",
+  );
 }
 
 function _statCard(label, value, accent) {
@@ -1341,12 +1511,33 @@ function _statCard(label, value, accent) {
 
 // ---- admin web pages (login / landing / setup wizard) -------------------
 
-function _renderAdminShell(shopName, subtitle, bodyHtml) {
+// Console nav — one entry per HTML console screen. `active` highlights
+// the current page; `null`/`false` (unauthenticated pages like the
+// sign-in form) renders no nav at all.
+var ADMIN_NAV_ITEMS = [
+  { key: "home",         href: "/admin",              label: "Home" },
+  { key: "dashboard",    href: "/admin/dashboard",    label: "Dashboard" },
+  { key: "products",     href: "/admin/products",     label: "Products" },
+  { key: "orders",       href: "/admin/orders",       label: "Orders" },
+  { key: "integrations", href: "/admin/integrations", label: "Integrations" },
+  { key: "setup",        href: "/admin/setup",        label: "Setup" },
+];
+function _adminNav(active) {
+  if (active === null || active === undefined || active === false) return "";
+  var links = ADMIN_NAV_ITEMS.map(function (it) {
+    return "<a href=\"" + it.href + "\"" + (it.key === active ? " class=\"active\"" : "") + ">" +
+      _htmlEscape(it.label) + "</a>";
+  }).join("");
+  return "<nav class=\"admin-nav\"><div class=\"admin-nav__inner\">" + links + "</div></nav>";
+}
+
+function _renderAdminShell(shopName, subtitle, bodyHtml, active) {
   return _renderTemplate(DASHBOARD_LAYOUT, {
     shop_name:    shopName || "blamejs.shop",
     window_label: subtitle || "",
+    nav:          "RAW_NAV",
     body:         "RAW_BODY",
-  }).replace("RAW_BODY", bodyHtml);
+  }).replace("RAW_NAV", _adminNav(active)).replace("RAW_BODY", bodyHtml);
 }
 
 function renderAdminLogin(opts) {
@@ -1365,7 +1556,7 @@ function renderAdminLogin(opts) {
         "<button type=\"submit\" class=\"btn\">Sign in</button>" +
       "</form>" +
     "</section>";
-  return _renderAdminShell(opts.shop_name, "Sign in", body);
+  return _renderAdminShell(opts.shop_name, "Sign in", body, null);
 }
 
 function renderAdminLanding(opts) {
@@ -1383,7 +1574,7 @@ function renderAdminLanding(opts) {
       "</div>" +
       "<div class=\"actions-row\"><form method=\"post\" action=\"/admin/logout\"><button type=\"submit\" class=\"btn btn--ghost\">Sign out</button></form></div>" +
     "</section>";
-  return _renderAdminShell(opts.shop_name, "", body);
+  return _renderAdminShell(opts.shop_name, "", body, "home");
 }
 
 function _setupField(label, name, value, type, hint, extra) {
@@ -1412,7 +1603,7 @@ function renderAdminSetup(opts) {
           "<a class=\"btn btn--ghost\" href=\"/admin\">Back</a></div>" +
       "</form>" +
     "</section>";
-  return _renderAdminShell(opts.shop_name, "Setup", body);
+  return _renderAdminShell(opts.shop_name, "Setup", body, "setup");
 }
 
 // Each integration is off until the operator supplies its credentials.
@@ -1464,7 +1655,166 @@ function renderAdminIntegrations(opts) {
       "<p class=\"meta\" style=\"margin-top:1.25rem;\">Sign in with Apple and PayPal are planned. “Sign in with Shop” / Shop Pay isn't available to a self-hosted store. See the README “Optional integrations” section for full setup steps.</p>" +
       "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin\">Back</a></div>" +
     "</section>";
-  return _renderAdminShell(opts.shop_name, "Integrations", body);
+  return _renderAdminShell(opts.shop_name, "Integrations", body, "integrations");
+}
+
+function renderAdminProducts(opts) {
+  opts = opts || {};
+  var products = opts.products || [];
+  var created = opts.created ? "<div class=\"banner banner--ok\">Product created.</div>" : "";
+  var notice  = opts.notice  ? "<div class=\"banner banner--err\">" + _htmlEscape(opts.notice) + "</div>" : "";
+  var rows = products.map(function (p) {
+    var cls = p.status === "active" ? "paid" : (p.status === "archived" ? "refunded" : "pending");
+    var action = p.status === "archived"
+      ? "<form method=\"post\" action=\"/admin/products/" + _htmlEscape(p.id) + "/restore\"><button class=\"btn btn--ghost\" type=\"submit\">Restore</button></form>"
+      : "<form method=\"post\" action=\"/admin/products/" + _htmlEscape(p.id) + "/archive\"><button class=\"btn btn--ghost\" type=\"submit\">Archive</button></form>";
+    return "<tr><td><strong>" + _htmlEscape(p.title) + "</strong></td>" +
+      "<td><code class=\"order-id\">" + _htmlEscape(p.slug) + "</code></td>" +
+      "<td><span class=\"status-pill " + cls + "\">" + _htmlEscape(p.status) + "</span></td>" +
+      "<td>" + action + "</td></tr>";
+  }).join("");
+  var table = products.length
+    ? "<div class=\"panel\"><table><thead><tr><th>Title</th><th>Slug</th><th>Status</th><th>Action</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    : "<p class=\"empty\">No products yet — create your first one below.</p>";
+  var body =
+    "<section><h2>Products</h2>" + created + notice + table +
+      "<div class=\"panel\" style=\"margin-top:1.5rem; max-width:34rem;\">" +
+        "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">New product</h3>" +
+        "<form method=\"post\" action=\"/admin/products\">" +
+          _setupField("Title", "title", "", "text", "", " maxlength=\"200\" required") +
+          _setupField("Slug", "slug", "", "text", "Lowercase, hyphenated — the storefront URL.", " maxlength=\"200\" required") +
+          "<label class=\"form-field\"><span>Status</span><select name=\"status\"><option value=\"draft\">Draft</option><option value=\"active\">Active</option></select></label>" +
+          _setupField("Description", "description", "", "text", "", " maxlength=\"2000\"") +
+          "<div class=\"actions-row\"><button class=\"btn\" type=\"submit\">Create product</button></div>" +
+        "</form>" +
+      "</div>" +
+    "</section>";
+  return _renderAdminShell(opts.shop_name, "Products", body, "products");
+}
+
+// created_at / updated_at are epoch-ms numbers (order._now()); render a
+// short, locale-neutral date. Guards against a string or a bad value so a
+// malformed row never throws inside the template.
+function _fmtDate(v) {
+  var n = typeof v === "number" ? v : Date.parse(v);
+  if (!isFinite(n)) return "—";
+  return new Date(n).toISOString().slice(0, 10);
+}
+
+// The status values an operator can filter the orders list by — drives the
+// filter chips. Kept in render-layer order (lifecycle, then terminal).
+var ORDER_STATUS_FILTERS = ["pending", "paid", "fulfilling", "shipped", "delivered", "refunded", "cancelled"];
+
+function renderAdminOrders(opts) {
+  opts = opts || {};
+  var orders = opts.orders || [];
+  var notice = opts.notice ? "<div class=\"banner banner--warn\">" + _htmlEscape(opts.notice) + "</div>" : "";
+  var active = opts.status || null;
+
+  var chips = "<div class=\"order-filters\">" +
+    "<a class=\"chip" + (active ? "" : " chip--on") + "\" href=\"/admin/orders\">All</a>" +
+    ORDER_STATUS_FILTERS.map(function (s) {
+      return "<a class=\"chip" + (active === s ? " chip--on" : "") + "\" href=\"/admin/orders?status=" + encodeURIComponent(s) + "\">" + _htmlEscape(s) + "</a>";
+    }).join("") +
+    "</div>";
+
+  var rows = orders.map(function (o) {
+    var items = (o.lines || []).reduce(function (n, l) { return n + (l.qty || 0); }, 0);
+    return "<tr>" +
+      "<td><a class=\"order-id\" href=\"/admin/orders/" + _htmlEscape(o.id) + "\">" + _htmlEscape(o.id.slice(0, 8)) + "</a></td>" +
+      "<td><span class=\"status-pill " + _htmlEscape(o.status) + "\">" + _htmlEscape(o.status) + "</span></td>" +
+      "<td class=\"num\">" + _htmlEscape(String(items)) + "</td>" +
+      "<td class=\"num\">" + _htmlEscape(pricing.format(o.grand_total_minor, o.currency)) + "</td>" +
+      "<td>" + _htmlEscape(_fmtDate(o.created_at)) + "</td>" +
+      "</tr>";
+  }).join("");
+
+  var table = orders.length
+    ? "<div class=\"panel\"><table><thead><tr><th>Order</th><th>Status</th><th class=\"num\">Items</th><th class=\"num\">Total</th><th>Placed</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    : "<p class=\"empty\">No orders" + (active ? " with status “" + _htmlEscape(active) + "”" : " yet") + ".</p>";
+
+  var body = "<section><h2>Orders</h2>" + notice + chips + table + "</section>";
+  return _renderAdminShell(opts.shop_name, "Orders", body, "orders");
+}
+
+function renderAdminOrder(opts) {
+  opts = opts || {};
+  var o = opts.order;
+  var transitions = opts.transitions || [];
+  var moved  = opts.moved  ? "<div class=\"banner banner--ok\">Order updated.</div>" : "";
+  var notice = opts.notice ? "<div class=\"banner banner--err\">" + _htmlEscape(opts.notice) + "</div>" : "";
+
+  var lineRows = (o.lines || []).map(function (l) {
+    return "<tr>" +
+      "<td>" + _htmlEscape(l.sku) + "</td>" +
+      "<td class=\"num\">" + _htmlEscape(String(l.qty)) + "</td>" +
+      "<td class=\"num\">" + _htmlEscape(pricing.format(l.unit_amount_minor, l.unit_currency)) + "</td>" +
+      "<td class=\"num\">" + _htmlEscape(pricing.format(l.line_total_minor, l.unit_currency)) + "</td>" +
+      "</tr>";
+  }).join("");
+  var linesTable = (o.lines && o.lines.length)
+    ? "<table><thead><tr><th>SKU</th><th class=\"num\">Qty</th><th class=\"num\">Unit</th><th class=\"num\">Line</th></tr></thead><tbody>" + lineRows + "</tbody></table>"
+    : "<p class=\"empty\">No line items recorded.</p>";
+
+  function _total(label, minor, strong) {
+    return "<tr><td>" + _htmlEscape(label) + "</td><td class=\"num\">" +
+      (strong ? "<strong>" : "") + _htmlEscape(pricing.format(minor, o.currency)) + (strong ? "</strong>" : "") +
+      "</td></tr>";
+  }
+  var totals = "<table class=\"order-totals\"><tbody>" +
+    _total("Subtotal", o.subtotal_minor, false) +
+    (o.discount_minor ? _total("Discount", -o.discount_minor, false) : "") +
+    _total("Tax", o.tax_minor, false) +
+    _total("Shipping", o.shipping_minor, false) +
+    _total("Total", o.grand_total_minor, true) +
+    "</tbody></table>";
+
+  var ship = o.ship_to || {};
+  var shipLines = [ship.name, ship.line1, ship.line2,
+    [ship.city, ship.region, ship.postal_code].filter(Boolean).join(", "), ship.country]
+    .filter(Boolean).map(function (s) { return _htmlEscape(String(s)); }).join("<br>");
+
+  // One form per legal next transition. `refund` is special: it moves
+  // money, so it posts to the payment-refund endpoint (which issues the
+  // provider refund THEN advances the FSM) rather than the bare
+  // state-transition endpoint — and only when there's a captured payment
+  // to refund. Every other move posts to /transition. A terminal status
+  // (empty list) shows a note instead of buttons.
+  var actionForms = transitions.map(function (t) {
+    if (t.on === "refund") {
+      if (!opts.can_refund) return "";  // no payment intent — nothing to refund here
+      return "<form method=\"post\" action=\"/admin/orders/" + _htmlEscape(o.id) + "/refund\" style=\"display:inline;\">" +
+        "<button class=\"btn btn--danger\" type=\"submit\">" + _htmlEscape(t.label) + "</button>" +
+        "</form>";
+    }
+    var danger = (t.on === "cancel");
+    return "<form method=\"post\" action=\"/admin/orders/" + _htmlEscape(o.id) + "/transition\" style=\"display:inline;\">" +
+      "<input type=\"hidden\" name=\"event\" value=\"" + _htmlEscape(t.on) + "\">" +
+      "<button class=\"btn" + (danger ? " btn--danger" : "") + "\" type=\"submit\">" + _htmlEscape(t.label) + "</button>" +
+      "</form>";
+  }).filter(Boolean).join(" ");
+  var actions = actionForms || "<span class=\"meta\">This order is in a final state — no further changes.</span>";
+
+  var body =
+    "<section style=\"max-width:48rem;\">" +
+      "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin/orders\">&larr; Orders</a></div>" +
+      "<h2>Order <code class=\"order-id\">" + _htmlEscape(o.id.slice(0, 8)) + "</code> " +
+        "<span class=\"status-pill " + _htmlEscape(o.status) + "\">" + _htmlEscape(o.status) + "</span></h2>" +
+      "<p class=\"meta\">Placed " + _htmlEscape(_fmtDate(o.created_at)) + " · last updated " + _htmlEscape(_fmtDate(o.updated_at)) +
+        (o.payment_intent_id ? " · payment <code class=\"order-id\">" + _htmlEscape(o.payment_intent_id) + "</code>" : "") + "</p>" +
+      moved + notice +
+      "<div class=\"two-col\">" +
+        "<div class=\"panel\"><h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Items</h3>" + linesTable + "</div>" +
+        "<div class=\"panel\"><h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Ship to</h3>" +
+          (shipLines || "<span class=\"meta\">No shipping address.</span>") +
+          "<h3 style=\"font-size:.95rem; margin:1.25rem 0 .75rem;\">Totals</h3>" + totals +
+        "</div>" +
+      "</div>" +
+      "<div class=\"panel\" style=\"margin-top:1.5rem;\"><h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Actions</h3>" +
+        "<div class=\"order-actions\">" + actions + "</div>" +
+      "</div>" +
+    "</section>";
+  return _renderAdminShell(opts.shop_name, "Order " + o.id.slice(0, 8), body, "orders");
 }
 
 module.exports = {
@@ -1475,4 +1825,7 @@ module.exports = {
   renderAdminLanding:      renderAdminLanding,
   renderAdminSetup:        renderAdminSetup,
   renderAdminIntegrations: renderAdminIntegrations,
+  renderAdminProducts:     renderAdminProducts,
+  renderAdminOrders:       renderAdminOrders,
+  renderAdminOrder:        renderAdminOrder,
 };