@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,597 @@
+---
+/**
+ * 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 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;
+}
+
+function formatDate(iso: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString([], { month: "short", day: "numeric", year: "numeric" });
+}
+
+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)}</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)}</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>