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) {