@tokenoftrust/storefront-runner 2.0.2 → 2.0.4

package/apps/storefront/src/components/admin/AdminCustomersTab.astro

@@ -1,593 +0,0 @@
----
-/**
- * Customers tab (baseline §Customers), wired to the live customers view
- * model (lib/admin/services/mock, from data-view-contracts) rather than
- * static prototype data. Cross-links to a customer's orders use the shell's
- * plain #orders hash route (no hard dependency on the orders-tab unit's
- * component code).
- */
-import { getCustomersViewModel } from "@/lib/admin/services/mock";
-import { formatDate } from "@/lib/format";
-import type { CustomerRow, VerificationState } from "@/lib/admin/viewmodels/customers";
-import type { AdminTenantEnvelope } from "@/lib/admin/envelope";
-
-interface Props {
-  envelope: AdminTenantEnvelope;
-}
-
-const { envelope } = Astro.props;
-const cspNonce = Astro.locals.cspNonce;
-
-const vm = getCustomersViewModel(envelope);
-
-const VERIFICATION_TONE: Record<VerificationState, string> = {
-  verified: "green",
-  pending: "amber",
-  blocked: "red",
-  not_required: "",
-};
-
-const VERIFICATION_LABEL: Record<VerificationState, string> = {
-  verified: "Verified",
-  pending: "Pending review",
-  blocked: "Blocked",
-  not_required: "Not required",
-};
-
-const SEGMENT_TONE: Record<CustomerRow["segment"], string> = {
-  vip: "violet",
-  returning: "teal",
-  new: "",
-};
-
-function viewKeysFor(row: CustomerRow): string[] {
-  const keys = ["all", row.segment];
-  if (row.verificationState === "blocked" || row.verificationState === "pending") keys.push("needs_review");
-  if (row.supportFlags.length > 0) keys.push("support_flagged");
-  return keys;
-}
-
-const totalValue = vm.directory.reduce((sum, c) => sum + c.lifetimeValue, 0);
-const vipCount = vm.directory.filter((c) => c.segment === "vip").length;
-
-const defaultRow = vm.directory.find((c) => c.id === vm.valuableButBlocked[0]?.customerId) ?? vm.directory[0] ?? null;
-
-const SAVED_VIEWS: { key: string; label: string }[] = [
-  { key: "all", label: "All customers" },
-  { key: "vip", label: "VIP" },
-  { key: "returning", label: "Returning" },
-  { key: "new", label: "New" },
-  { key: "needs_review", label: "Needs review" },
-  { key: "support_flagged", label: "Support flags" },
-];
----
-
-<section id="customers" class="band customers-tab" aria-labelledby="admin-tab-customers customers-title" data-admin-panel data-agent-scope="customers" role="tabpanel" data-customers-target-tenant={vm.targetTenant}>
-  <div class="section-title">
-    <div>
-      <h2 id="customers-title">Customers</h2>
-      <p>Buyer value, purchase history, support context, and account access in one working surface.</p>
-    </div>
-    <div class="actions">
-      <button class="btn" type="button"><svg><use href="#i-export"></use></svg>Export</button>
-      <button class="btn primary" type="button"><svg><use href="#i-users"></use></svg>Create segment</button>
-    </div>
-  </div>
-
-  <div class="grid cols-4">
-    <div class="metric"><span>Customers</span><strong>{vm.directory.length}</strong><small>In this directory</small></div>
-    <div class="metric"><span>Lifetime value</span><strong>${totalValue.toFixed(2)}</strong><small>Across all known buyers</small></div>
-    <div class="metric"><span>VIP customers</span><strong>{vipCount}</strong><small>7+ orders</small></div>
-    <div class="metric"><span>Valuable but blocked</span><strong>{vm.valuableButBlocked.length}</strong><small>Recoverable with a direct action</small></div>
-  </div>
-
-  {vm.valuableButBlocked.length > 0 && (
-    <div class="panel valuable-blocked-panel">
-      <div class="panel-head">
-        <h3><svg><use href="#i-ask"></use></svg>Valuable But Blocked</h3>
-        <span class="chip amber">Reach-out queue</span>
-      </div>
-      <div class="panel-body grid">
-        <div class="blocked-customer-grid">
-          {vm.valuableButBlocked.map((row) => (
-            <div class="blocked-customer">
-              <div>
-                <strong>{row.name}</strong>
-                <span class="subtle">${row.recoverableValue.toFixed(2)} recoverable value</span>
-              </div>
-              <div>
-                <span class="eyebrow">Blocker</span>
-                <strong>{row.blockerDetail}</strong>
-              </div>
-              <div>
-                <span class="eyebrow">Next action</span>
-                <strong>{row.action}</strong>
-              </div>
-              <button type="button" class="btn" data-customers-select-row={row.customerId}>View customer</button>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )}
-
-  <div class="panel">
-    <div class="panel-head">
-      <h3><svg><use href="#i-users"></use></svg>Customer Directory</h3>
-      <span class="chip teal">{vm.directory.length} customers</span>
-    </div>
-    <div class="panel-body grid">
-      <div class="tabs" role="tablist" aria-label="Customer saved views" data-customers-view-list>
-        {SAVED_VIEWS.map((view) => (
-          <button type="button" class:list={["tab", { active: view.key === "all" }]} data-customers-view-button data-view-key={view.key}>{view.label}</button>
-        ))}
-      </div>
-
-      <div class="customer-toolbar" aria-label="Customer filters">
-        <label class="customer-search">
-          <span>Search</span>
-          <input type="search" placeholder="Search customers, email" aria-label="Search customers" data-customers-search />
-        </label>
-        <label>
-          <span>Verification</span>
-          <select aria-label="Filter by verification" data-customers-verification-select>
-            <option value="">Any status</option>
-            <option value="verified">Verified</option>
-            <option value="pending">Pending review</option>
-            <option value="blocked">Blocked</option>
-          </select>
-        </label>
-      </div>
-
-      <div class="table-wrap">
-        <table class="customer-table">
-          <thead>
-            <tr>
-              <th>Customer</th>
-              <th>Customer value</th>
-              <th>Last purchase</th>
-              <th>Segment</th>
-              <th>Support</th>
-              <th>Verification</th>
-              <th class="action">Action</th>
-            </tr>
-          </thead>
-          <tbody data-customers-tbody>
-            {vm.directory.map((row) => (
-              <tr
-                class:list={[{ selected: row.id === defaultRow?.id }]}
-                data-customers-row
-                data-customer-id={row.id}
-                data-view-keys={viewKeysFor(row).join(" ")}
-                data-verification={row.verificationState}
-                data-search-haystack={`${row.name} ${row.email}`.toLowerCase()}
-              >
-                <td>
-                  <div class="customer-cell">
-                    <span class="customer-avatar" aria-hidden="true">{row.name.split(" ").map((p) => p[0]).join("").slice(0, 2).toUpperCase()}</span>
-                    <span>
-                      <strong>{row.name}</strong>
-                      <span class="subtle">{row.email}</span>
-                    </span>
-                  </div>
-                </td>
-                <td>
-                  <strong>${row.lifetimeValue.toFixed(2)}</strong>
-                  <span class="subtle">{row.orderCount} order{row.orderCount === 1 ? "" : "s"}</span>
-                </td>
-                <td><strong>{formatDate(row.lastOrderAt ?? undefined) || "—"}</strong></td>
-                <td><span class:list={["chip", SEGMENT_TONE[row.segment]]}>{row.segment[0]!.toUpperCase() + row.segment.slice(1)}</span></td>
-                <td>{row.supportFlags.length > 0 ? <span class="chip blue">{row.supportFlags[0]}</span> : <span class="subtle">Clear</span>}</td>
-                <td><span class:list={["chip", VERIFICATION_TONE[row.verificationState]]}>{VERIFICATION_LABEL[row.verificationState]}</span></td>
-                <td class="action"><button type="button" class="btn" data-customers-select-row={row.id}>Open</button></td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <p class="customers-empty-state" data-customers-empty hidden>No customers match the current filters.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="customer-detail-grid" data-customers-detail-root>
-    {vm.directory.map((row) => {
-      const detail = vm.detailsById[row.id]!;
-      return (
-        <div class="customer-detail-record" data-customers-detail-record={row.id} hidden={row.id !== defaultRow?.id}>
-          <div class="panel">
-            <div class="panel-head">
-              <h3><svg><use href="#i-card"></use></svg>{row.name}</h3>
-              <div class="actions">
-                <span class:list={["chip", SEGMENT_TONE[row.segment]]}>{row.segment[0]!.toUpperCase() + row.segment.slice(1)} buyer</span>
-                <span class:list={["chip", VERIFICATION_TONE[row.verificationState]]}>{VERIFICATION_LABEL[row.verificationState]}</span>
-              </div>
-            </div>
-            <div class="panel-body grid">
-              <div class="customer-profile-head">
-                <div class="customer-cell">
-                  <span class="customer-avatar large" aria-hidden="true">{row.name.split(" ").map((p) => p[0]).join("").slice(0, 2).toUpperCase()}</span>
-                  <span>
-                    <strong>{row.email}</strong>
-                    <span class="subtle">{row.orderCount} order{row.orderCount === 1 ? "" : "s"} - last purchase {formatDate(row.lastOrderAt ?? undefined) || "—"}</span>
-                  </span>
-                </div>
-              </div>
-
-              <details class="detail-section" open>
-                <summary class="detail-section-head"><h4>Profile</h4><span class="chip">{row.orderCount} orders</span></summary>
-                <div class="profile-facts">
-                  <div><span>Lifetime value</span><strong>${row.lifetimeValue.toFixed(2)}</strong></div>
-                  <div><span>Order count</span><strong>{row.orderCount}</strong></div>
-                  <div><span>Segment</span><strong>{row.segment[0]!.toUpperCase() + row.segment.slice(1)}</strong></div>
-                </div>
-              </details>
-
-              <details class="detail-section" open={detail.orders.length > 0}>
-                <summary class="detail-section-head"><h4>Orders</h4><span class="chip">{detail.orders.length}</span></summary>
-                <div class="table-wrap compact-table">
-                  <table>
-                    <thead><tr><th>Order</th><th>Date</th><th class="money">Total</th></tr></thead>
-                    <tbody>
-                      {detail.orders.map((order) => (
-                        <tr>
-                          <td><a class="btn" href="#orders">{order.orderId}</a></td>
-                          <td><strong>{formatDate(order.placedAt)}</strong></td>
-                          <td class="money"><strong>${order.total.toFixed(2)}</strong></td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </details>
-
-              <details class="detail-section">
-                <summary class="detail-section-head"><h4>Activity</h4><span class="chip">{detail.activity.length}</span></summary>
-                <div class="customer-activity-list">
-                  {detail.activity.map((event) => (
-                    <div>
-                      <time>{formatDate(event.at)}</time>
-                      <div><b>{event.title}</b><p>{event.detail}</p></div>
-                    </div>
-                  ))}
-                </div>
-              </details>
-
-              <details class="detail-section">
-                <summary class="detail-section-head"><h4>Verification</h4><span class:list={["chip", VERIFICATION_TONE[row.verificationState]]}>{VERIFICATION_LABEL[row.verificationState]}</span></summary>
-                <div class:list={["check-row", { blocking: row.verificationState === "blocked" || row.verificationState === "pending" }]}>
-                  <div><b>Identity and age</b><p>{row.verificationState === "verified" ? "Verification is current." : row.verificationState === "pending" ? "Verification needs a refresh before the next shipment." : "Verification is blocked — resolve before this customer can order again."}</p></div>
-                  <strong>{VERIFICATION_LABEL[row.verificationState]}</strong>
-                  <span class:list={["chip", VERIFICATION_TONE[row.verificationState]]}>{row.verificationState === "verified" ? "OK" : "Action"}</span>
-                </div>
-              </details>
-
-              <details class="detail-section">
-                <summary class="detail-section-head"><h4>Notes</h4><span class="chip">{detail.notes.length}</span></summary>
-                {detail.notes.length > 0 ? (
-                  <ul class="customer-notes-list">
-                    {detail.notes.map((note) => <li>{note}</li>)}
-                  </ul>
-                ) : (
-                  <p class="subtle">No notes yet.</p>
-                )}
-              </details>
-            </div>
-          </div>
-        </div>
-      );
-    })}
-  </div>
-</section>
-
-<script is:inline nonce={cspNonce}>
-  (() => {
-    const root = document.querySelector('[data-customers-target-tenant]');
-    if (!root) return;
-
-    const viewButtons = Array.from(root.querySelectorAll("[data-customers-view-button]"));
-    const verificationSelect = root.querySelector("[data-customers-verification-select]");
-    const searchInput = root.querySelector("[data-customers-search]");
-    const rows = Array.from(root.querySelectorAll("[data-customers-row]"));
-    const emptyState = root.querySelector("[data-customers-empty]");
-    const detailRoot = root.querySelector("[data-customers-detail-root]");
-    const detailRecords = detailRoot ? Array.from(detailRoot.querySelectorAll("[data-customers-detail-record]")) : [];
-
-    let activeView = "all";
-
-    const applyFilters = () => {
-      const verification = verificationSelect ? verificationSelect.value : "";
-      const term = searchInput ? searchInput.value.trim().toLowerCase() : "";
-      let visibleCount = 0;
-
-      for (const row of rows) {
-        const viewKeys = (row.dataset.viewKeys ?? "").split(" ");
-        const matchesView = viewKeys.includes(activeView);
-        const matchesVerification = !verification || row.dataset.verification === verification;
-        const matchesSearch = !term || (row.dataset.searchHaystack ?? "").includes(term);
-        const visible = matchesView && matchesVerification && matchesSearch;
-        row.hidden = !visible;
-        if (visible) visibleCount += 1;
-      }
-
-      if (emptyState) emptyState.hidden = visibleCount > 0;
-    };
-
-    const selectCustomer = (customerId) => {
-      for (const row of rows) {
-        row.classList.toggle("selected", row.dataset.customerId === customerId);
-      }
-      for (const record of detailRecords) {
-        record.hidden = record.dataset.customersDetailRecord !== customerId;
-      }
-      document.querySelector(`[data-customers-detail-record="${customerId}"]`)?.scrollIntoView({ block: "nearest" });
-    };
-
-    viewButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        activeView = button.dataset.viewKey ?? "all";
-        viewButtons.forEach((b) => b.classList.toggle("active", b === button));
-        applyFilters();
-      });
-    });
-
-    verificationSelect?.addEventListener("change", applyFilters);
-    searchInput?.addEventListener("input", applyFilters);
-
-    root.querySelectorAll("[data-customers-select-row]").forEach((button) => {
-      button.addEventListener("click", () => {
-        const customerId = button.dataset.customersSelectRow;
-        if (customerId) selectCustomer(customerId);
-      });
-    });
-
-    rows.forEach((row) => {
-      row.addEventListener("click", (event) => {
-        if (event.target instanceof Element && event.target.closest("[data-customers-select-row]")) return;
-        const customerId = row.dataset.customerId;
-        if (customerId) selectCustomer(customerId);
-      });
-    });
-
-    applyFilters();
-  })();
-</script>
-
-<style>
-  .customers-tab .section-title .actions {
-    align-items: center;
-  }
-
-  .valuable-blocked-panel {
-    border-color: #f1c883;
-    background: #fffdf8;
-  }
-
-  .blocked-customer-grid {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: 10px;
-  }
-
-  .blocked-customer {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.72fr) minmax(130px, 0.86fr) auto;
-    gap: 10px;
-    align-items: center;
-    min-width: 0;
-    padding: 11px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-  }
-
-  .blocked-customer > div {
-    min-width: 0;
-  }
-
-  .blocked-customer strong {
-    display: block;
-    overflow-wrap: anywhere;
-    font-size: 13px;
-  }
-
-  .blocked-customer .eyebrow {
-    display: block;
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-
-  .customer-toolbar {
-    display: grid;
-    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.8fr);
-    gap: 10px;
-    align-items: end;
-  }
-
-  .customer-toolbar label {
-    min-width: 0;
-    display: grid;
-    gap: 5px;
-  }
-
-  .customer-toolbar span,
-  .profile-facts span {
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-
-  .customer-toolbar input,
-  .customer-toolbar select {
-    width: 100%;
-    min-height: 38px;
-    padding: 0 10px;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-  }
-
-  .customer-table {
-    min-width: 1000px;
-  }
-
-  .customer-table tbody tr {
-    cursor: pointer;
-  }
-
-  .customer-table tr.selected td {
-    background: #fffaf0;
-  }
-
-  .customers-empty-state {
-    margin: 0;
-    padding: 24px 14px;
-    color: var(--admin-muted);
-    font-size: 13px;
-    text-align: center;
-  }
-
-  .customer-cell {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-  }
-
-  .customer-avatar {
-    width: 36px;
-    height: 36px;
-    display: grid;
-    place-items: center;
-    border-radius: 50%;
-    background: var(--admin-surface-tint);
-    color: var(--admin-teal-dark);
-    font-size: 12px;
-    font-weight: 780;
-  }
-
-  .customer-avatar.large {
-    width: 44px;
-    height: 44px;
-    font-size: 13px;
-  }
-
-  .customer-detail-grid {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: 12px;
-  }
-
-  .customer-profile-head {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    align-items: center;
-  }
-
-  .profile-facts {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 10px;
-  }
-
-  .profile-facts > div {
-    min-width: 0;
-    padding: 10px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-soft);
-  }
-
-  .profile-facts strong {
-    display: block;
-    margin-top: 4px;
-    font-size: 14px;
-  }
-
-  .compact-table table {
-    min-width: 400px;
-  }
-
-  .detail-section {
-    display: grid;
-    gap: 10px;
-    padding-top: 2px;
-  }
-
-  .detail-section + .detail-section {
-    padding-top: 12px;
-    border-top: 1px solid var(--admin-line);
-  }
-
-  .detail-section-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    cursor: pointer;
-    list-style: none;
-  }
-
-  .detail-section-head::-webkit-details-marker {
-    display: none;
-  }
-
-  .detail-section-head h4 {
-    margin: 0;
-    font-size: 13px;
-  }
-
-  .customer-activity-list {
-    display: grid;
-    gap: 10px;
-  }
-
-  .customer-activity-list > div {
-    display: grid;
-    grid-template-columns: 90px minmax(0, 1fr);
-    gap: 10px;
-  }
-
-  .customer-activity-list time {
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  .customer-activity-list p {
-    margin: 2px 0 0;
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  .customer-notes-list {
-    margin: 0;
-    padding-left: 18px;
-    font-size: 13px;
-  }
-
-  @media (max-width: 1120px) {
-    .customer-toolbar {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  @media (max-width: 760px) {
-    .blocked-customer {
-      grid-template-columns: 1fr;
-    }
-
-    .customer-toolbar,
-    .profile-facts {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    .customer-profile-head {
-      align-items: flex-start;
-      flex-direction: column;
-    }
-  }
-</style>