@nano133/nanoterra 0.3.2 → 0.5.0

package/src/admin/panel/mount.ts

@@ -1,14 +1,23 @@
 // The admin panel: orders, owned looks, totals and the two game switches, from the game's own database. Only the game's owner can read them (the
 // handler checks it on every call); this page only shows them. `mountAdmin(element, options)` draws the panel into `element`.
+//
+// The page: a top bar (who is signed in, Live or Test mode, Sign out), what is still off (one banner), four numbers (earned, open now, to send back, players;
+// each opens its list), then five tabs: Overview, Cosmetics (the Shelf), Orders, Players and Settings (the Game card, the sign-ins, the facts). Every tab is
+// made once; a new read of the summary fills them again and keeps the chosen tab, the Shelf's draft, a search and the Game card.
 
 import type { Look } from "../../looks/look.js";
 import type { AdminSummary } from "../store.js";
 import type { GameState } from "../switches.js";
 import { ApiError, createApi, type Api } from "./api.js";
-import { h, shortAddress } from "./dom.js";
+import { copyKey, h, plural, shortAddress } from "./dom.js";
 import { gameCard } from "./gameCard.js";
+import { icon, type IconName } from "./icons.js";
+import { ordersView, type OrderFilter } from "./orders.js";
+import { overviewView } from "./overview.js";
+import { playersView } from "./players.js";
 import { shelfView } from "./shelf.js";
 import { signinsCard } from "./signins.js";
+import { tabBar, type TabId } from "./tabs.js";
 
 export type MountOptions = {
   /** The game's looks now (its looks.json). The Shelf starts from them. */
@@ -40,35 +49,51 @@ export type MountedAdmin = {
   ready: Promise<void>;
 };
 
-const STATUS_WORDS: Record<string, string> = { open: "Open", paid: "Paid", expired: "Expired", paid_late: "Paid late" };
-const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
 const when = (ms: number | null) => (ms ? new Date(ms).toLocaleString() : "");
 
+/** The drawn page, made at the first read that the owner may see. */
+type Dashboard = { update(s: AdminSummary): void; setGame(state: GameState | null): void };
+
 export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdmin {
   const api: Api = createApi(options.api ?? "/api/admin", options.fetch);
-  const gate = h("section", { id: "n133-gate", class: "admin-card", "aria-live": "polite" });
+  const gate = h("section", { id: "n133-gate", class: "admin-card gate", "aria-live": "polite" });
   const data = h("section", { id: "n133-data" });
   data.hidden = true;
   root.classList.add("n133-admin");
   root.replaceChildren(gate, data);
 
-  let filter = "all";
   /** The Shelf keeps its draft while the page redraws (a tab, a payment check): one view for the life of the page. */
   let shelf: ReturnType<typeof shelfView> | null = null;
   /** The "Game" card keeps its own state for the life of the page (a payment check redraws the rest, not this). */
   let game: HTMLElement | null = null;
+  let gameState: GameState | null = null;
+  let dash: Dashboard | null = null;
 
   /** The card, made once. A fault in reading the two switches must not hide the orders: the card is left out and the rest still shows. */
   async function gameSection(): Promise<HTMLElement | null> {
     if (game) return game;
     try {
-      game = gameCard(api, await api.get<GameState>("/game"), options.defaultsFile);
+      gameState = await api.get<GameState>("/game");
+      game = gameCard(api, gameState, options.defaultsFile, (state) => {
+        gameState = state;
+        dash?.setGame(state);
+      });
     } catch {
       game = null;
+      gameState = null;
     }
     return game;
   }
 
+  /** The gate's screen: an icon, a title and what to do. The data drawn before goes (a signed-out page holds none); the Shelf's draft and the Game card stay in memory. */
+  function showGate(kind: IconName, title: string, ...body: (Node | null)[]) {
+    data.hidden = true;
+    data.replaceChildren();
+    dash = null;
+    gate.hidden = false;
+    gate.replaceChildren(h("div", { class: "gate-icon", "aria-hidden": "true" }, icon(kind, 28)), h("h2", {}, title), ...body.filter((b): b is Node => b !== null));
+  }
+
   async function load(): Promise<void> {
     try {
       const s = await api.get<AdminSummary>("/summary");
@@ -77,43 +102,34 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
       render(s);
     } catch (e) {
       if (!(e instanceof ApiError)) {
+        // The data already drawn (if any) stays: a failed new read does not take it away.
         gate.hidden = false;
-        gate.replaceChildren(h("p", {}, "The game's server did not answer. Try again."));
+        gate.replaceChildren(h("div", { class: "gate-icon", "aria-hidden": "true" }, icon("alert", 28)), h("p", {}, "The game's server did not answer. Try again."), h("button", { class: "btn", type: "button", onclick: () => void load() }, "Try again"));
         return;
       }
-      data.hidden = true;
-      gate.hidden = false;
       if (e.status === 403 && e.body.signedInAs) {
-        gate.replaceChildren(
-          h("h2", {}, "Not the game's address"),
-          h("p", {}, `You are signed in as ${shortAddress(String(e.body.signedInAs))}. Only the game's owner address can open this page.`),
-          signOutButton(),
-        );
+        showGate("lock", "Not the game's address", h("p", {}, `You are signed in as ${shortAddress(String(e.body.signedInAs))}. Only the game's owner address can open this page.`), signOutButton());
         return;
       }
       if (e.status === 403 && e.body.reason === "nanoterra") {
-        gate.replaceChildren(
-          h("h2", {}, "You signed in from Nanoterra"),
-          h("p", {}, "A Nanoterra sign-in names your address but proves no key, so it cannot open this page. Sign out, then sign in with the wallet that holds your game's address."),
-          signOutButton(),
-        );
+        showGate("lock", "You signed in from Nanoterra", h("p", {}, "A Nanoterra sign-in names your address but proves no key, so it cannot open this page. Sign out, then sign in with the wallet that holds your game's address."), signOutButton());
         return;
       }
       if (e.status === 403 && e.body.reason === "no_address") {
-        gate.replaceChildren(h("h2", {}, "No owner address yet"), h("p", {}, e.message), h("p", { class: "fine" }, options.noAddressHelp ?? "Set the game's owner address, then deploy again."));
+        showGate("alert", "No owner address yet", h("p", {}, e.message), h("p", { class: "fine" }, options.noAddressHelp ?? "Set the game's owner address, then deploy again."));
         return;
       }
       if (e.status === 403) {
-        gate.replaceChildren(h("h2", {}, "This page is closed to you"), h("p", {}, e.message), signOutButton());
+        showGate("lock", "This page is closed to you", h("p", {}, e.message), signOutButton());
         return;
       }
       if (e.status === 401) {
-        const into = h("div", {});
-        gate.replaceChildren(h("h2", {}, "Sign in with your game's address"), h("p", {}, e.message), into);
+        const into = h("div", { class: "gate-signin" });
+        showGate("lock", "Sign in with your game's address", h("p", {}, e.message), into);
         options.signIn(into, () => void load());
         return;
       }
-      gate.replaceChildren(h("p", {}, e.message));
+      showGate("alert", "Something went wrong", h("p", {}, e.message));
     }
   }
 
@@ -128,6 +144,7 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
           void load();
         },
       },
+      icon("out", 18),
       "Sign out",
     );
   }
@@ -139,89 +156,91 @@ export function mountAdmin(root: HTMLElement, options: MountOptions): MountedAdm
     return shelf.el;
   }
 
-  function render(s: AdminSummary): void {
-    data.hidden = false;
-    const check = h("button", { class: "btn btn-primary", type: "button" }, "Check payments now");
-    const checkNote = h("span", { class: "fine", role: "status" });
-    check.addEventListener("click", async () => {
-      check.disabled = true;
-      checkNote.textContent = "Checking…";
-      try {
-        const r = await api.post<{ scan: { scanned: boolean; settled: unknown[]; error?: string }; summary: AdminSummary }>("/check");
-        render(r.summary);
-      } catch (e) {
-        checkNote.textContent = e instanceof Error ? e.message : "The check failed.";
-        check.disabled = false;
-      }
-    });
-
-    const tabs = h("div", { class: "tabs", role: "group", "aria-label": "Show orders" });
-    for (const key of ["all", "open", "paid", "expired", "paid_late"]) {
-      const n = key === "all" ? s.orders.length : s.counts[key as keyof AdminSummary["counts"]];
-      tabs.append(
-        h(
-          "button",
-          {
-            class: `tab${filter === key ? " tab-on" : ""}`,
-            type: "button",
-            "aria-pressed": filter === key ? "true" : "false",
-            onclick: () => {
-              filter = key;
-              render(s);
-            },
-          },
-          `${key === "all" ? "All" : STATUS_WORDS[key]} (${n})`,
-        ),
+  /** An outfit's body colour, while the game still has the look (for the dots in the lists); none for an item of another wear slot. */
+  const colourOf = (id: string): string | null => options.looks.find((l) => l.id === id)?.change?.body ?? null;
+
+  function build(): Dashboard {
+    const tabs = tabBar("overview");
+    const go = (tab: TabId, filter?: OrderFilter) => {
+      if (filter) orders.setFilter(filter);
+      tabs.select(tab);
+    };
+    const overview = overviewView(options.looks, colourOf, go);
+    const orders = ordersView(api, colourOf, (s) => render(s));
+    const players = playersView(colourOf);
+    tabs.panels.overview.append(overview.el);
+    tabs.panels.orders.append(orders.el);
+    tabs.panels.players.append(players.el);
+
+    const who = h("div", { class: "who" });
+    const chips = h("div", { class: "chips" });
+    const top = h("header", { class: "topbar" }, h("div", { class: "who-mark", "aria-hidden": "true" }, icon("lock", 18)), who, chips, h("div", { class: "topbar-keys" }, signOutButton()));
+    const banner = h("div", { class: "banner warnings", role: "alert" });
+    const kpis = h("div", { class: "kpis", role: "group", "aria-label": "Your game in numbers" });
+    const settings = h("div", { class: "settings-grid" });
+    tabs.panels.settings.append(settings);
+    data.replaceChildren(top, banner, kpis, tabs.bar, ...Object.values(tabs.panels));
+
+    const kpi = (cls: string, mark: IconName, label: string, value: string, sub: string, open: () => void, alert = false) =>
+      h("button", { class: `kpi kpi-${cls}${alert ? " is-alert" : ""}`, type: "button", onclick: open }, h("span", { class: "kpi-top" }, h("span", { class: "kpi-icon", "aria-hidden": "true" }, icon(mark, 18)), h("span", { class: "kpi-label" }, label)), h("strong", { class: "kpi-value" }, value), h("span", { class: "kpi-sub" }, sub));
+
+    function about(s: AdminSummary): HTMLElement {
+      const facts: [string, Node | string][] = [];
+      if (s.address) facts.push(["Signed in as", h("span", { class: "fact-address" }, h("code", {}, s.address), copyKey(s.address, "Copy your address", icon("copy", 14)))]);
+      facts.push(["Mode", s.testMode ? "Test mode: payments are not real" : "Live: payments are real"]);
+      if (s.turnstile !== undefined) facts.push(["Bot check", s.turnstile ? "On" : "Off"]);
+      if (s.nodes?.length) facts.push(["Payments are checked on", s.nodes.join(", ")]);
+      if (s.rate) facts.push(["Last price", `$${s.rate.usd} per XNO (${s.rate.sources.join(", ")}), ${when(s.rate.at)}`]);
+      return h(
+        "section",
+        { class: "admin-card about-card", "aria-labelledby": "n133-about-title" },
+        h("h2", { id: "n133-about-title" }, "About this admin"),
+        h("dl", { class: "facts" }, ...facts.map(([k, v]) => h("div", {}, h("dt", {}, k), h("dd", {}, v)))),
+        signOutButton(),
       );
     }
 
-    const rows = s.orders.filter((o) => filter === "all" || o.status === filter);
-    const orders = h("div", { class: "orders" });
-    if (!rows.length) orders.append(h("p", { class: "fine" }, "No orders here yet."));
-    for (const o of rows) {
-      orders.append(
-        h(
-          "article",
-          { class: `order order-${o.status}` },
-          h("div", { class: "order-top" }, h("strong", {}, o.look), h("span", { class: `badge badge-${o.status}` }, STATUS_WORDS[o.status] ?? o.status)),
-          h("div", { class: "order-amount" }, `${o.xno} XNO · $${o.usd}`),
-          h("div", { class: "fine" }, `Player ${shortAddress(o.player)} · made ${when(o.createdAt)}`),
-          o.paidAt ? h("div", { class: "fine" }, `Payment seen ${when(o.paidAt)}${o.payer ? ` from ${shortAddress(o.payer)}` : ""}`) : null,
-          o.status === "paid_late" && o.payer ? h("div", { class: "late-note" }, "Send this amount back by hand to ", h("code", {}, o.payer), ". The game holds no key, so it cannot send it.") : null,
-          o.hash ? h("div", { class: "fine hash" }, `Block ${o.hash}`) : null,
-        ),
-      );
-    }
+    return {
+      setGame: (state) => overview.setGame(state),
+      update(s) {
+        who.replaceChildren(h("span", { class: "who-label" }, "Signed in as"), s.address ? h("span", { class: "who-address" }, h("code", { title: s.address }, shortAddress(s.address)), copyKey(s.address, "Copy your address", icon("copy", 14))) : h("span", {}, "the game's owner"));
+        chips.replaceChildren(
+          h("span", { class: `chip ${s.testMode ? "chip-warn" : "chip-ok"}`, title: s.testMode ? "Payments are not real" : "Payments are real" }, h("span", { class: "chip-dot", "aria-hidden": "true" }), s.testMode ? "Test mode" : "Live"),
+          s.turnstile === undefined ? "" : h("span", { class: `chip ${s.turnstile ? "chip-ok" : "chip-warn"}` }, h("span", { class: "chip-dot", "aria-hidden": "true" }), s.turnstile ? "Bot check on" : "Bot check off"),
+        );
+        banner.hidden = !s.warnings.length;
+        banner.replaceChildren(h("div", { class: "banner-icon", "aria-hidden": "true" }, icon("alert", 20)), h("div", {}, h("h2", {}, "Check these"), h("ul", {}, ...s.warnings.map((w) => h("li", {}, w)))));
+
+        const ownedLooks = s.players.reduce((n, p) => n + p.looks.length, 0);
+        const late = s.totals.paidLate.count;
+        kpis.replaceChildren(
+          kpi("earned", "coin", "Earned", `${s.totals.paid.xno} XNO`, `$${s.totals.paid.usd} · ${plural(s.totals.paid.count, "order")}`, () => go("orders", "paid")),
+          kpi("open", "clock", "Open now", String(s.counts.open), `${s.counts.expired} expired`, () => go("orders", "open")),
+          kpi("late", "back", "To send back", `${s.totals.paidLate.xno} XNO`, late ? `$${s.totals.paidLate.usd} · ${plural(late, "order")}` : "Nothing to send back", () => go("orders", "paid_late"), late > 0),
+          kpi("players", "players", "Players", String(s.players.length), `${plural(ownedLooks, "look")} owned`, () => go("players")),
+        );
 
-    const players = h("div", { class: "players" });
-    if (!s.players.length) players.append(h("p", { class: "fine" }, "Nobody owns a paid look yet."));
-    for (const p of s.players) players.append(h("div", { class: "player" }, h("code", {}, p.player), h("span", {}, p.looks.map((l) => l.name).join(", "))));
+        tabs.setCount("cosmetics", options.looks.length);
+        tabs.setCount("orders", s.orders.length);
+        tabs.setCount("players", s.players.length);
+        overview.update(s);
+        overview.setGame(gameState);
+        const shelfEl = shelfCard(s);
+        if (shelfEl.parentNode !== tabs.panels.cosmetics) tabs.panels.cosmetics.replaceChildren(shelfEl);
+        orders.update(s);
+        players.update(s);
+        // The Game card is the same element at every redraw: moving it keeps its state.
+        settings.replaceChildren(...[game, signinsCard(s, api, () => void load(), options.loginsNote), about(s)].filter((p): p is HTMLElement => p !== null));
+      },
+    };
+  }
 
-    const parts: (Node | null)[] = [
-      s.warnings.length ? h("section", { class: "admin-card warnings", role: "alert" }, h("h2", {}, "Check these"), h("ul", {}, ...s.warnings.map((w) => h("li", {}, w)))) : null,
-      game,
-      h(
-        "section",
-        { class: "totals" },
-        h("div", { class: "total" }, h("span", {}, "Paid"), h("strong", {}, `${s.totals.paid.xno} XNO`), h("small", {}, `$${s.totals.paid.usd} · ${plural(s.totals.paid.count, "order")}`)),
-        h("div", { class: "total" }, h("span", {}, "Paid late (send back)"), h("strong", {}, `${s.totals.paidLate.xno} XNO`), h("small", {}, `$${s.totals.paidLate.usd} · ${plural(s.totals.paidLate.count, "order")}`)),
-        h("div", { class: "total" }, h("span", {}, "Open now"), h("strong", {}, String(s.counts.open)), h("small", {}, `${s.counts.expired} expired`)),
-      ),
-      shelfCard(s),
-      h("section", { class: "admin-card" }, h("div", { class: "card-head" }, h("h2", {}, "Orders"), h("div", {}, ...(s.canCheck === false ? [] : [check, " ", checkNote]))), tabs, orders),
-      h("section", { class: "admin-card" }, h("h2", {}, "Owned looks"), players),
-      signinsCard(s, api, () => void load(), options.loginsNote),
-      h(
-        "section",
-        { class: "admin-card fine" },
-        s.address ? h("p", {}, "Signed in as ", h("code", {}, s.address), ".") : null,
-        s.nodes?.length ? h("p", {}, `Payments are checked on: ${s.nodes.join(", ")}.`) : null,
-        s.rate ? h("p", {}, `Last price: $${s.rate.usd} per XNO (${s.rate.sources.join(", ")}), ${when(s.rate.at)}.`) : null,
-        signOutButton(),
-      ),
-    ];
-    data.replaceChildren(...parts.filter((p): p is Node => p !== null));
+  function render(s: AdminSummary): void {
+    data.hidden = false;
+    dash ??= build();
+    dash.update(s);
   }
 
   return { reload: () => load(), ready: load() };
 }
+

package/src/admin/panel/orders.ts

@@ -0,0 +1,172 @@
+// The Orders tab of /admin: every order of the game (the summary gives the newest 500), a filter by status with its count, a search (a look, a player's or a
+// payer's address, a block), and "Check payments now" when the game gave a check. A row is a card on a phone and a line of a table on a wide screen. A
+// payment that came after its order ran out says what to do: the game holds no key, so the owner sends the amount back by hand.
+
+import type { AdminOrder, AdminSummary } from "../store.js";
+import type { Api } from "./api.js";
+import { ago, copyKey, h, plural, shortAddress } from "./dom.js";
+import { icon } from "./icons.js";
+
+export type OrderFilter = "all" | "open" | "paid" | "expired" | "paid_late";
+
+/** How many orders the list draws at first, and how many more each "Show more" adds. */
+export const ORDERS_PAGE = 20;
+
+export const STATUS_WORDS: Record<string, string> = { open: "Open", paid: "Paid", expired: "Expired", paid_late: "Paid late" };
+const FILTERS: readonly OrderFilter[] = ["all", "paid", "open", "paid_late", "expired"];
+
+const when = (ms: number | null) => (ms ? new Date(ms).toLocaleString() : "");
+/** "A1B2C3D4…E5F6A7" */
+const shortHash = (hash: string) => (hash.length > 16 ? `${hash.slice(0, 8)}…${hash.slice(-6)}` : hash);
+
+/** Whether an order matches a search: its look's name or id, the player's or the payer's address, or its block. Upper or lower case does not matter. Pure. */
+export function orderMatches(o: AdminOrder, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  return [o.look, o.lookId, o.player, o.payer ?? "", o.hash ?? ""].some((v) => v.toLowerCase().includes(q));
+}
+
+/** A status as a coloured badge. */
+export const badge = (status: string) => h("span", { class: `badge badge-${status}` }, STATUS_WORDS[status] ?? status);
+
+/** One order: a card on a phone, a line of the table on a wide screen. `colourOf` gives the look's body colour for its dot, when the game still has the look. */
+export function orderRow(o: AdminOrder, colourOf: (lookId: string) => string | null, compact = false): HTMLElement {
+  const dot = h("span", { class: "look-dot", "aria-hidden": "true" });
+  const c = colourOf(o.lookId);
+  if (c) dot.style.setProperty("--swatch", c);
+  const row = h(
+    "article",
+    { class: `order order-${o.status}${compact ? " is-compact" : ""}` },
+    h("div", { class: "order-look" }, dot, h("strong", {}, o.look)),
+    h("div", { class: "order-status" }, badge(o.status)),
+    h("div", { class: "order-amount" }, h("strong", {}, `${o.xno} XNO`), h("span", { class: "fine" }, `$${o.usd}`)),
+    h("div", { class: "order-player" }, h("span", { class: "fine cell-label" }, "Player "), h("code", { title: o.player }, shortAddress(o.player)), compact ? null : copyKey(o.player, "Copy the player's address", icon("copy", 14))),
+    compact
+      ? h("div", { class: "order-when" }, o.paidAt ? h("span", { title: when(o.paidAt) }, `Paid ${ago(o.paidAt)}`) : h("span", { title: when(o.createdAt) }, `Made ${ago(o.createdAt)}`))
+      : h(
+          "div",
+          { class: "order-when" },
+          h("span", { title: when(o.createdAt) }, `Made ${ago(o.createdAt)}`),
+          o.paidAt ? h("span", { class: "fine", title: when(o.paidAt) }, `Paid ${ago(o.paidAt)}${o.payer && o.payer !== o.player ? ` from ${shortAddress(o.payer)}` : ""}`) : null,
+        ),
+  );
+  if (compact) return row;
+  if (o.status === "paid_late" && o.payer)
+    row.append(h("div", { class: "late-note order-extra" }, icon("back", 16), h("span", {}, "Send this amount back by hand to ", h("code", {}, o.payer), ". The game holds no key, so it cannot send it."), copyKey(o.payer, "Copy the address to send it back to", icon("copy", 14))));
+  if (o.hash) row.append(h("div", { class: "fine order-extra order-hash" }, h("span", {}, "Block "), h("code", { title: o.hash }, shortHash(o.hash)), copyKey(o.hash, "Copy the block hash", icon("copy", 14))));
+  return row;
+}
+
+export type OrdersView = {
+  el: HTMLElement;
+  update(s: AdminSummary): void;
+  /** Shows only one status (a press on a number of the Overview does it). */
+  setFilter(f: OrderFilter): void;
+};
+
+/**
+ * The tab's content, made once: its filter, its search and its check keep their state when the summary is read again. `colourOf` gives a look's body colour;
+ * `onSummary` hears the summary that "Check payments now" answers with (the panel draws it everywhere).
+ */
+export function ordersView(api: Api, colourOf: (lookId: string) => string | null, onSummary: (s: AdminSummary) => void): OrdersView {
+  let s: AdminSummary | null = null;
+  let filter: OrderFilter = "all";
+  let query = "";
+  let shown = ORDERS_PAGE;
+
+  const check = h("button", { class: "btn btn-primary", type: "button" }, icon("refresh", 18), "Check payments now");
+  const checkNote = h("span", { class: "fine", role: "status" });
+  check.addEventListener("click", async () => {
+    check.disabled = true;
+    checkNote.textContent = "Checking…";
+    try {
+      const r = await api.post<{ scan: { scanned: boolean; settled: unknown[]; error?: string }; summary: AdminSummary }>("/check");
+      checkNote.textContent = !r.scan?.scanned ? "The check did not finish. Try again in a moment." : r.scan.settled.length ? `Checked: ${plural(r.scan.settled.length, "payment")} found.` : "Checked: no new payment.";
+      onSummary(r.summary);
+    } catch (e) {
+      checkNote.textContent = e instanceof Error ? e.message : "The check failed.";
+    } finally {
+      check.disabled = false;
+    }
+  });
+
+  const seg = h("div", { class: "seg tabs", role: "group", "aria-label": "Show orders" });
+  const search = h("input", { class: "input search-input", type: "search", placeholder: "Look, address or block", "aria-label": "Search the orders", autocomplete: "off", spellcheck: false });
+  search.addEventListener("input", () => {
+    query = search.value;
+    shown = ORDERS_PAGE;
+    drawList();
+  });
+  const count = h("p", { class: "fine list-count", role: "status", "aria-live": "polite" });
+  const list = h("div", { class: "orders" });
+  // The check key is there only when the game gave a check (the summary's canCheck).
+  const keys = h("div", { class: "card-keys" });
+  const head = h("div", { class: "card-head" }, h("div", { class: "card-title" }, h("h2", {}, "Orders"), h("p", { class: "fine card-sub" }, "Every order your game made, newest first.")), keys);
+  const el = h(
+    "section",
+    { class: "admin-card orders-card" },
+    head,
+    h("div", { class: "toolbar" }, seg, h("label", { class: "search" }, icon("search", 18), search)),
+    count,
+    h("div", { class: "order-table-head", "aria-hidden": "true" }, h("span", {}, "Look"), h("span", {}, "Status"), h("span", {}, "Amount"), h("span", {}, "Player"), h("span", {}, "When")),
+    list,
+  );
+
+  function drawFilter() {
+    if (!s) return;
+    const sum = s;
+    seg.replaceChildren(
+      ...FILTERS.map((key) => {
+        const n = key === "all" ? sum.orders.length : sum.counts[key];
+        return h(
+          "button",
+          {
+            class: `seg-btn tab${filter === key ? " is-on tab-on" : ""}${key === "paid_late" && n > 0 ? " is-alert" : ""}`,
+            type: "button",
+            "aria-pressed": filter === key ? "true" : "false",
+            onclick: () => {
+              filter = key;
+              shown = ORDERS_PAGE;
+              drawFilter();
+              drawList();
+            },
+          },
+          `${key === "all" ? "All" : STATUS_WORDS[key]} (${n})`,
+        );
+      }),
+    );
+  }
+
+  function drawList() {
+    if (!s) return;
+    const rows = s.orders.filter((o) => (filter === "all" || o.status === filter) && orderMatches(o, query));
+    const total = s.orders.filter((o) => filter === "all" || o.status === filter).length;
+    count.textContent = query.trim() ? `${plural(rows.length, "order")} of ${total} match “${query.trim()}”.` : "";
+    count.hidden = !query.trim();
+    list.replaceChildren(...rows.slice(0, shown).map((o) => orderRow(o, colourOf)));
+    if (!rows.length) list.append(h("p", { class: "empty" }, query.trim() ? "No order matches your search." : "No orders here yet."));
+    if (rows.length > shown) {
+      const more = Math.min(ORDERS_PAGE, rows.length - shown);
+      list.append(
+        h("button", { class: "btn more-key", type: "button", onclick: () => ((shown += ORDERS_PAGE), drawList()) }, `Show ${more} more`, rows.length - shown > more ? h("span", { class: "fine" }, `of ${rows.length - shown}`) : null),
+      );
+    }
+  }
+
+  return {
+    el,
+    update(next) {
+      s = next;
+      if (next.canCheck === false) keys.replaceChildren();
+      else if (check.parentNode !== keys) keys.replaceChildren(check, checkNote);
+      drawFilter();
+      drawList();
+    },
+    setFilter(f) {
+      filter = f;
+      shown = ORDERS_PAGE;
+      drawFilter();
+      drawList();
+    },
+  };
+}

package/src/admin/panel/overview.ts

@@ -0,0 +1,134 @@
+// The Overview tab of /admin: the game at a glance. The best-selling looks with their share of the money, the last five orders, the two game switches as On or
+// Off, and the shelf in numbers; each part has a key to its own tab. A game with no sale yet gets three first steps instead of empty lists.
+
+import type { Look } from "../../looks/look.js";
+import { priceText } from "../../looks/ladder.js";
+import type { AdminSummary } from "../store.js";
+import { SWITCHES, stateOf, type GameState } from "../switches.js";
+import { dollars, h, plural } from "./dom.js";
+import { icon } from "./icons.js";
+import { orderRow, type OrderFilter } from "./orders.js";
+import { shelfStats } from "./shelfData.js";
+import type { TabId } from "./tabs.js";
+
+/** A best seller: a look id, its name, its paid orders and their cents, its owners. */
+export type BestSeller = { id: string; name: string; paid: number; cents: number; owners: number };
+
+/** The looks that sold, best first (by money, then by owners), at most `n`. A look that is no longer in looks.json keeps the name its orders give. Pure. */
+export function bestSellers(s: Pick<AdminSummary, "orders" | "players">, looks: readonly Look[], n = 5): BestSeller[] {
+  const names = new Map<string, string>();
+  for (const o of s.orders) names.set(o.lookId, o.look);
+  for (const l of looks) names.set(l.id, l.name);
+  return [...shelfStats(s.orders, s.players)]
+    .filter(([, st]) => st.paid > 0)
+    .map(([id, st]) => ({ id, name: names.get(id) ?? id, paid: st.paid, cents: st.paidCents, owners: st.owners }))
+    .sort((a, b) => b.cents - a.cents || b.owners - a.owners || a.name.localeCompare(b.name))
+    .slice(0, n);
+}
+
+export type OverviewView = {
+  el: HTMLElement;
+  update(s: AdminSummary): void;
+  /** The two switches as they are now (null: they could not be read). */
+  setGame(state: GameState | null): void;
+};
+
+export function overviewView(looks: readonly Look[], colourOf: (lookId: string) => string | null, go: (tab: TabId, filter?: OrderFilter) => void): OverviewView {
+  let game: GameState | null = null;
+  const sellers = h("section", { class: "admin-card best-card", "aria-labelledby": "n133-best-title" });
+  const recent = h("section", { class: "admin-card recent-card", "aria-labelledby": "n133-recent-title" });
+  const gameBox = h("section", { class: "admin-card glance-card", "aria-labelledby": "n133-glance-game" });
+  const shelfBox = h("section", { class: "admin-card glance-card", "aria-labelledby": "n133-glance-shelf" });
+  const start = h("section", { class: "admin-card start-card", "aria-labelledby": "n133-start-title" });
+  const main = h("div", { class: "overview-main" }, start, sellers, recent);
+  const side = h("div", { class: "overview-side" }, gameBox, shelfBox);
+  const el = h("div", { class: "overview" }, main, side);
+
+  const linkKey = (words: string, to: () => void) => h("button", { class: "btn btn-small btn-quiet link-key", type: "button", onclick: to }, words, h("span", { "aria-hidden": "true" }, "→"));
+
+  function drawGame() {
+    const rows = (["character", "signin"] as const).map((id) => {
+      const on = game ? stateOf(id, game) : null;
+      return h("li", {}, h("span", {}, SWITCHES[id].title), on === null ? h("span", { class: "pill" }, "Unknown") : h("span", { class: `pill ${on ? "pill-on" : "pill-off"}` }, on ? "On" : "Off"));
+    });
+    gameBox.replaceChildren(
+      h("div", { class: "card-head" }, h("h2", { id: "n133-glance-game" }, "Game switches"), linkKey("Change", () => go("settings"))),
+      game ? h("ul", { class: "glance-list" }, ...rows) : h("p", { class: "fine" }, "The two switches could not be read. Reload the page to try again."),
+    );
+  }
+
+  function drawShelf() {
+    const sale = looks.filter((l) => l.priceUsd > 0);
+    const prices = sale.map((l) => l.priceUsd);
+    const range = prices.length ? (Math.min(...prices) === Math.max(...prices) ? priceText(prices[0]) : `${priceText(Math.min(...prices))} to ${priceText(Math.max(...prices))}`) : "none";
+    shelfBox.replaceChildren(
+      h("div", { class: "card-head" }, h("h2", { id: "n133-glance-shelf" }, "Shelf"), linkKey("Open", () => go("cosmetics"))),
+      h(
+        "ul",
+        { class: "glance-list" },
+        h("li", {}, h("span", {}, "Looks"), h("strong", {}, String(looks.length))),
+        h("li", {}, h("span", {}, "For sale"), h("strong", {}, String(sale.length))),
+        h("li", {}, h("span", {}, "Prices"), h("strong", {}, range)),
+      ),
+    );
+  }
+
+  drawGame();
+  drawShelf();
+
+  return {
+    el,
+    setGame(state) {
+      game = state;
+      drawGame();
+    },
+    update(s) {
+      const best = bestSellers(s, looks);
+      const total = best.length ? [...shelfStats(s.orders, s.players).values()].reduce((n, x) => n + x.paidCents, 0) : 0;
+      start.hidden = s.orders.length > 0;
+      start.replaceChildren(
+        h("div", { class: "start-icon", "aria-hidden": "true" }, icon("sparkle", 28)),
+        h("h2", { id: "n133-start-title" }, "No sales yet"),
+        h("p", { class: "fine" }, "When a player buys a look, the money and the order show here. Three things to do first:"),
+        h(
+          "ol",
+          { class: "start-steps" },
+          h("li", {}, h("strong", {}, "Check your looks and prices."), " ", linkKey("Open the shelf", () => go("cosmetics"))),
+          h("li", {}, h("strong", {}, "Choose the two game switches."), " ", linkKey("Open the settings", () => go("settings"))),
+          h("li", {}, h("strong", {}, "Share your game's address"), " with your players."),
+        ),
+      );
+
+      sellers.hidden = !best.length;
+      sellers.replaceChildren(
+        h("div", { class: "card-head" }, h("h2", { id: "n133-best-title" }, "Best sellers"), linkKey("All looks", () => go("cosmetics"))),
+        h(
+          "ol",
+          { class: "best-list" },
+          ...best.map((b, i) => {
+            const share = total ? Math.round((b.cents / total) * 100) : 0;
+            const dot = h("span", { class: "look-dot", "aria-hidden": "true" });
+            const c = colourOf(b.id);
+            if (c) dot.style.setProperty("--swatch", c);
+            const bar = h("div", { class: "share-bar" });
+            bar.style.setProperty("--share", `${share}%`);
+            return h(
+              "li",
+              {},
+              h("span", { class: "best-rank" }, String(i + 1)),
+              dot,
+              h("div", { class: "best-main" }, h("div", { class: "best-top" }, h("strong", {}, b.name), h("span", { class: "best-money" }, dollars(b.cents))), h("div", { class: "share", title: `${share}% of the money from sales` }, bar, h("span", { class: "fine" }, `${plural(b.paid, "sale")} · ${share}%`))),
+            );
+          }),
+        ),
+      );
+
+      const last = s.orders.slice(0, 5);
+      recent.hidden = !last.length;
+      recent.replaceChildren(
+        h("div", { class: "card-head" }, h("h2", { id: "n133-recent-title" }, "Recent orders"), linkKey("See all orders", () => go("orders", "all"))),
+        h("div", { class: "orders is-compact" }, ...last.map((o) => orderRow(o, colourOf, true))),
+      );
+    },
+  };
+}