Implemented the customer installed-base view

src/features/install-base/view.js

@@ -0,0 +1,126 @@
+function createInstallBaseView({ MODAL_ID, createCloseIcon, formatOracleResponseDate, environment }) {
+  const { document } = environment;
+  let active = null;
+  const columns = [
+    ["partyName", "Customer"], ["productGroupName", "Product Group"], ["productName", "Product"],
+    ["currentSupport", "Current Support", "amount"], ["orderNumber", "Order Number"],
+    ["supportStatus", "Support Status", "status"], ["quantityType", "Quantity Type"],
+    ["quantity", "Quantity", "quantity"], ["supportStartDate", "Support Start Date", "date"],
+    ["supportEndDate", "Support End Date", "date"], ["licenseValue", "License Value", "amount"],
+    ["shipDate", "Ship Date", "date"]
+  ];
+  function element(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined) node.textContent = text;
+    return node;
+  }
+  function closeInstallBaseModal() {
+    if (!active) return false;
+    const previous = active;
+    active = null;
+    previous.modal.remove();
+    if (previous.trigger?.isConnected) previous.trigger.focus();
+    return true;
+  }
+  function createTable(items, loading = false) {
+    const table = element("table", "opportunities-extension-install-base-table");
+    table.setAttribute("aria-label", "Installed base items");
+    const head = element("thead");
+    const header = element("tr");
+    const group = element("colgroup");
+    columns.forEach(([key, label]) => {
+      const col = element("col");
+      col.className = `install-base-col-${key}`;
+      group.append(col);
+      const th = element("th", "", label);
+      th.scope = "col";
+      header.append(th);
+    });
+    head.append(header);
+    const body = element("tbody");
+    (loading ? Array.from({ length: 8 }, () => ({})) : items).forEach(item => {
+      const row = element("tr");
+      columns.forEach(([key, , type]) => {
+        const cell = element("td");
+        if (loading) {
+          const bar = element("span", "opportunities-extension-account-plans-skeleton-bar");
+          bar.setAttribute("aria-hidden", "true");
+          cell.append(bar);
+        } else {
+          const value = item[key];
+          const missing = value === null || value === undefined || value === "";
+          let text = missing ? "-" : String(value).trim();
+          if (!missing && type === "date") text = formatOracleResponseDate(value);
+          if (!missing && (type === "amount" || type === "quantity") && Number.isFinite(Number(value))) {
+            text = new Intl.NumberFormat("en-US", {
+              minimumFractionDigits: type === "amount" ? 2 : 0, maximumFractionDigits: type === "amount" ? 2 : 4
+            }).format(Number(value));
+          }
+          if (type === "status") {
+            const badge = element("span", "opportunities-extension-install-base-status", text);
+            badge.dataset.status = text.toUpperCase();
+            cell.append(badge);
+          } else cell.textContent = text;
+          if (type) cell.dataset.format = type;
+        }
+        row.append(cell);
+      });
+      body.append(row);
+    });
+    table.append(group, head, body);
+    return table;
+  }
+  function openInstallBaseModal(opportunity, trigger) {
+    closeInstallBaseModal();
+    const overlay = document.getElementById(MODAL_ID);
+    if (!overlay || overlay.hidden) return { render() {} };
+    const modal = element("section", "opportunities-extension-account-plans-modal");
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+    modal.setAttribute("aria-busy", "true");
+    modal.setAttribute("aria-labelledby", "opportunities-extension-install-base-title");
+    const dialog = element("div", "opportunities-extension-account-plans-dialog opportunities-extension-install-base-dialog");
+    const header = element("header", "opportunities-extension-account-plans-header");
+    const heading = element("div");
+    const title = element("h2", "", "Installed Base");
+    title.id = "opportunities-extension-install-base-title";
+    heading.append(title, element("p", "", opportunity.CustomerAccount?.PartyUniqueName || "Customer"));
+    const close = element("button", "opportunities-extension-icon-button");
+    close.type = "button";
+    close.title = "Close";
+    close.setAttribute("aria-label", "Close installed base");
+    close.append(createCloseIcon());
+    close.addEventListener("click", closeInstallBaseModal);
+    header.append(heading, close);
+    const content = element("div", "opportunities-extension-install-base-content");
+    content.tabIndex = 0;
+    content.setAttribute("role", "region");
+    content.setAttribute("aria-label", "Installed base results");
+    const status = element("p", "opportunities-extension-install-base-message", "Loading installed base...");
+    status.setAttribute("role", "status");
+    content.append(status, createTable([], true));
+    dialog.append(header, content);
+    modal.append(dialog);
+    overlay.append(modal);
+    active = { modal, trigger };
+    modal.addEventListener("keydown", event => {
+      if (event.key === "Tab") {
+        event.preventDefault();
+        (document.activeElement === close ? content : close).focus();
+      }
+    });
+    close.focus();
+    return { render(items, error = "") {
+      // A closed or replaced dialog must never receive a late response.
+      if (active?.modal !== modal || overlay.hidden) return;
+      modal.setAttribute("aria-busy", "false");
+      content.textContent = "";
+      status.textContent = error || (items.length ? `${items.length} installed base items` : "No installed base items found for this customer.");
+      status.setAttribute("role", error ? "alert" : "status");
+      content.append(status);
+      if (!error && items.length) content.append(createTable(items));
+    } };
+  }
+  return { openInstallBaseModal, closeInstallBaseModal, createTable };
+}