Added a badge to display the monthly ramp

src/features/opportunities/styles.css

@@ -92,6 +92,41 @@
   outline-offset: 2px;
 }
 
+.opportunities-extension-products-ramp {
+  display: inline-block;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0 6px;
+  border: 1px solid #bba5cf;
+  border-radius: 8px;
+  background: #f0e8f7;
+  color: #63358a;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-products-ramp {
+  background: #43334f;
+  color: #ead5fc;
+  border-color: #9372ac;
+}
+
+.opportunities-extension-products-ramp[data-missing="true"] {
+  background: #fde8e7;
+  color: #9f201b;
+  border-color: #c74640;
+}
+
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-products-ramp[data-missing="true"] {
+  background: #542824;
+  color: #ffd9d5;
+  border-color: #ef938b;
+}
+
 .opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 12px;

src/features/opportunities/table.js

@@ -9,6 +9,7 @@ function createOpportunitiesTable({
   createCopyOpportunityButton,
   createDetailLink,
   createProductsCountButton,
+  createProductsRampBadge,
   createProductsDetailRow,
   createStageBadge,
   createStatusBadge,
@@ -128,7 +129,11 @@ function createOpportunitiesTable({
               const productActions = document.createElement("span");
               productActions.className = "opportunities-extension-cell-actions";
               const productsResult = item.OptyNumber && productsContentState.opptyProductsByNumber.get(String(item.OptyNumber));
-              if (productsResult) productActions.append(createProductsCountButton(item.OptyNumber, productsResult));
+              if (productsResult) {
+                productActions.append(createProductsCountButton(item.OptyNumber, productsResult));
+                const rampBadge = createProductsRampBadge(productsResult);
+                if (rampBadge) productActions.append(rampBadge);
+              }
               nameCellContent.append(opportunityLink, productActions);
               cell.append(nameCellContent);
             } else if (column.key === "optyNumber" && item.OptyNumber) {

src/features/products/details.js

@@ -8,6 +8,21 @@ function createProductsDetails({
   environment
 }) {
   const { document } = environment;
+  function createProductsRampBadge(productsResult) {
+    const values = (Array.isArray(productsResult.items) ? productsResult.items : [])
+      .map(item => item && item.RampMonths_c)
+      .map(value => value === null || value === undefined || String(value).trim() === "" ? "N/D" : String(value).trim())
+      .filter((value, index, items) => value !== "N/D" || items.indexOf(value) === index);
+    if (!values.length) return null;
+    const badge = document.createElement("span");
+    badge.className = "opportunities-extension-products-ramp";
+    badge.setAttribute("data-missing", String(values.includes("N/D")));
+    badge.textContent = `RM ${values.join(",")}`;
+    badge.title = `Ramp Months: ${values.join(", ")}`;
+    badge.setAttribute("aria-label", badge.title);
+    return badge;
+  }
+
   function createProductsCountButton(optyNumber, productsResult) {
     const normalizedOptyNumber = String(optyNumber);
     const button = document.createElement("button");
@@ -88,7 +103,8 @@ function createProductsDetails({
         { label: "Win Probability", value: (item) => formatProductWinProbability(item.WinProb) },
         { label: "Close date", value: (item) => formatOracleResponseDate(item.EffectiveDate) || "-" },
         { label: "Consumption Start", value: (item) => formatOracleResponseDate(item.ConsumptionStartDate_c) || "-" },
-        { label: "Ramp Months", value: (item) => formatProductNumber(item.RampMonths_c) }
+        { label: "Ramp Months", value: (item) => item.RampMonths_c === null || item.RampMonths_c === undefined || String(item.RampMonths_c).trim() === ""
+          ? "N/D" : formatProductNumber(item.RampMonths_c) }
       ];
 
       const head = document.createElement("thead");
@@ -148,5 +164,5 @@ function createProductsDetails({
     return Number.isFinite(number) ? `${number}%` : "-";
   }
 
-  return { createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
+  return { createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
 }