@ammarkhalidfarooq/dashboard-package 0.6.57 → 0.6.58

package/dist/index.es.js

@@ -1614,17 +1614,67 @@ var signed = function signed(v) {
   var n = Number(v !== null && v !== void 0 ? v : 0);
   return "".concat(n >= 0 ? "+" : "").concat(n.toFixed(2)).concat(suffix);
 };
+var TREND_UP = "#0B8F61";
+var TREND_DOWN = "#ef4444";
+var resolveTrendColor = function resolveTrendColor(trendText) {
+  var trendPositiveWhenNegative = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return getTrendColor(trendText, trendPositiveWhenNegative ? {
+    up: TREND_DOWN,
+    down: TREND_UP,
+    neutral: TREND_UP
+  } : {
+    up: TREND_UP,
+    down: TREND_DOWN,
+    neutral: TREND_UP
+  });
+};
+var withTrendArrow = function withTrendArrow(text) {
+  var str = String(text !== null && text !== void 0 ? text : "").trim();
+  if (!str || str.includes("▼") || str.includes("▲")) return str;
+  var arrow = getTrendArrow(str);
+  return arrow ? "".concat(arrow, " ").concat(str) : str;
+};
+var formatArrowTrend = function formatArrowTrend(value) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$suffix = _ref.suffix,
+    suffix = _ref$suffix === void 0 ? "%" : _ref$suffix,
+    _ref$decimals = _ref.decimals,
+    decimals = _ref$decimals === void 0 ? 1 : _ref$decimals,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label;
+  var n = Number(value !== null && value !== void 0 ? value : 0);
+  var arrow = n >= 0 ? "▲" : "▼";
+  var labelSuffix = label ? " ".concat(label) : "";
+  if (suffix === "pp") return "".concat(arrow, " ").concat(Math.abs(n).toFixed(2), "pp").concat(labelSuffix);
+  if (suffix === "x") return "".concat(arrow, " ").concat(Math.abs(n).toFixed(1), "x").concat(labelSuffix);
+  return "".concat(arrow, " ").concat(Math.abs(n).toFixed(decimals), "%").concat(labelSuffix);
+};
+var TrendText = function TrendText(_ref2) {
+  var children = _ref2.children,
+    _ref2$invert = _ref2.invert,
+    invert = _ref2$invert === void 0 ? false : _ref2$invert,
+    _ref2$style = _ref2.style,
+    style = _ref2$style === void 0 ? {} : _ref2$style;
+  var text = withTrendArrow(children);
+  return /*#__PURE__*/jsx("span", {
+    style: _objectSpread2({
+      fontWeight: 600,
+      color: resolveTrendColor(text, invert)
+    }, style),
+    children: text
+  });
+};
 
 // ─── SVG line sparkline ───────────────────────────────────────────────────────
-var Sparkline = function Sparkline(_ref) {
-  var _ref$data = _ref.data,
-    data = _ref$data === void 0 ? [] : _ref$data,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "#6366F1" : _ref$color,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 120 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 40 : _ref$height;
+var Sparkline = function Sparkline(_ref3) {
+  var _ref3$data = _ref3.data,
+    data = _ref3$data === void 0 ? [] : _ref3$data,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? "#6366F1" : _ref3$color,
+    _ref3$width = _ref3.width,
+    width = _ref3$width === void 0 ? 120 : _ref3$width,
+    _ref3$height = _ref3.height,
+    height = _ref3$height === void 0 ? 40 : _ref3$height;
   var vals = data.length >= 2 ? data : [0, 0];
   var max = Math.max.apply(Math, _toConsumableArray(vals).concat([0]));
   var min = Math.min.apply(Math, _toConsumableArray(vals).concat([0]));
@@ -1677,15 +1727,15 @@ var Sparkline = function Sparkline(_ref) {
 };
 
 // ─── SVG multi-series line chart ──────────────────────────────────────────────
-var LineChart = function LineChart(_ref2) {
-  var _ref2$series = _ref2.series,
-    series = _ref2$series === void 0 ? [] : _ref2$series,
-    _ref2$categories = _ref2.categories,
-    categories = _ref2$categories === void 0 ? [] : _ref2$categories,
-    _ref2$width = _ref2.width,
-    width = _ref2$width === void 0 ? CW : _ref2$width,
-    _ref2$height = _ref2.height,
-    height = _ref2$height === void 0 ? 180 : _ref2$height;
+var LineChart = function LineChart(_ref4) {
+  var _ref4$series = _ref4.series,
+    series = _ref4$series === void 0 ? [] : _ref4$series,
+    _ref4$categories = _ref4.categories,
+    categories = _ref4$categories === void 0 ? [] : _ref4$categories,
+    _ref4$width = _ref4.width,
+    width = _ref4$width === void 0 ? CW : _ref4$width,
+    _ref4$height = _ref4.height,
+    height = _ref4$height === void 0 ? 180 : _ref4$height;
   var allVals = series.flatMap(function (s) {
     return s.data || [];
   });
@@ -1782,13 +1832,13 @@ var LineChart = function LineChart(_ref2) {
 };
 
 // ─── SVG donut ────────────────────────────────────────────────────────────────
-var Donut = function Donut(_ref3) {
-  var _ref3$segments = _ref3.segments,
-    segments = _ref3$segments === void 0 ? [] : _ref3$segments,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 88 : _ref3$size,
-    centerVal = _ref3.centerVal,
-    centerLabel = _ref3.centerLabel;
+var Donut = function Donut(_ref5) {
+  var _ref5$segments = _ref5.segments,
+    segments = _ref5$segments === void 0 ? [] : _ref5$segments,
+    _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 88 : _ref5$size,
+    centerVal = _ref5.centerVal,
+    centerLabel = _ref5.centerLabel;
   var total = segments.reduce(function (s, g) {
     return s + (g.value || 0);
   }, 0) || 1;
@@ -1846,11 +1896,11 @@ var Donut = function Donut(_ref3) {
 };
 
 // ─── Shared primitives ────────────────────────────────────────────────────────
-var Divider = function Divider(_ref4) {
-  var _ref4$mt = _ref4.mt,
-    mt = _ref4$mt === void 0 ? 0 : _ref4$mt,
-    _ref4$mb = _ref4.mb,
-    mb = _ref4$mb === void 0 ? 0 : _ref4$mb;
+var Divider = function Divider(_ref6) {
+  var _ref6$mt = _ref6.mt,
+    mt = _ref6$mt === void 0 ? 0 : _ref6$mt,
+    _ref6$mb = _ref6.mb,
+    mb = _ref6$mb === void 0 ? 0 : _ref6$mb;
   return /*#__PURE__*/jsx("div", {
     style: {
       borderTop: "1px solid #E5EAF1",
@@ -1859,13 +1909,13 @@ var Divider = function Divider(_ref4) {
     }
   });
 };
-var Panel = function Panel(_ref5) {
-  var children = _ref5.children,
-    title = _ref5.title,
-    subtitle = _ref5.subtitle,
-    action = _ref5.action,
-    _ref5$style = _ref5.style,
-    style = _ref5$style === void 0 ? {} : _ref5$style;
+var Panel = function Panel(_ref7) {
+  var children = _ref7.children,
+    title = _ref7.title,
+    subtitle = _ref7.subtitle,
+    action = _ref7.action,
+    _ref7$style = _ref7.style,
+    style = _ref7$style === void 0 ? {} : _ref7$style;
   return /*#__PURE__*/jsxs("div", {
     style: _objectSpread2({
       border: "1px solid ".concat(THEME.panelBorder),
@@ -1914,11 +1964,11 @@ var Panel = function Panel(_ref5) {
     }), children]
   });
 };
-var MiniTable = function MiniTable(_ref6) {
-  var _ref6$head = _ref6.head,
-    head = _ref6$head === void 0 ? [] : _ref6$head,
-    _ref6$rows = _ref6.rows,
-    rows = _ref6$rows === void 0 ? [] : _ref6$rows;
+var MiniTable = function MiniTable(_ref8) {
+  var _ref8$head = _ref8.head,
+    head = _ref8$head === void 0 ? [] : _ref8$head,
+    _ref8$rows = _ref8.rows,
+    rows = _ref8$rows === void 0 ? [] : _ref8$rows;
   return /*#__PURE__*/jsxs("table", {
     style: {
       width: "100%",
@@ -1969,14 +2019,16 @@ var MiniTable = function MiniTable(_ref6) {
     })]
   });
 };
-var KpiCard = function KpiCard(_ref7) {
-  var title = _ref7.title,
-    value = _ref7.value,
-    trend = _ref7.trend,
-    detail = _ref7.detail,
-    _ref7$variant = _ref7.variant,
-    variant = _ref7$variant === void 0 ? "secondary" : _ref7$variant;
-  var neg = "".concat(trend).trim().startsWith("-");
+var KpiCard = function KpiCard(_ref9) {
+  var title = _ref9.title,
+    value = _ref9.value,
+    trend = _ref9.trend,
+    detail = _ref9.detail,
+    _ref9$variant = _ref9.variant,
+    variant = _ref9$variant === void 0 ? "secondary" : _ref9$variant,
+    _ref9$trendPositiveWh = _ref9.trendPositiveWhenNegative,
+    trendPositiveWhenNegative = _ref9$trendPositiveWh === void 0 ? false : _ref9$trendPositiveWh;
+  var displayTrend = withTrendArrow(trend);
   var isPrimary = variant === "primary";
   return /*#__PURE__*/jsxs("div", {
     style: {
@@ -2013,9 +2065,9 @@ var KpiCard = function KpiCard(_ref7) {
       style: {
         fontSize: 10.5,
         fontWeight: 600,
-        color: neg ? "#DC2626" : "#16A34A"
+        color: resolveTrendColor(displayTrend, trendPositiveWhenNegative)
       },
-      children: trend
+      children: displayTrend
     }), /*#__PURE__*/jsx("div", {
       style: {
         fontSize: 8.5,
@@ -2026,11 +2078,11 @@ var KpiCard = function KpiCard(_ref7) {
     })]
   });
 };
-var StatPair = function StatPair(_ref8) {
-  var label = _ref8.label,
-    val = _ref8.val,
-    trend = _ref8.trend;
-  var neg = "".concat(trend).trim().startsWith("-");
+var StatPair = function StatPair(_ref0) {
+  var label = _ref0.label,
+    val = _ref0.val,
+    trend = _ref0.trend;
+  var displayTrend = withTrendArrow(trend);
   return /*#__PURE__*/jsxs("div", {
     style: {
       marginBottom: 6
@@ -2059,19 +2111,19 @@ var StatPair = function StatPair(_ref8) {
         style: {
           fontSize: 9.5,
           fontWeight: 600,
-          color: neg ? "#DC2626" : "#16A34A"
+          color: resolveTrendColor(displayTrend)
         },
-        children: trend
+        children: displayTrend
       })]
     })]
   });
 };
-var PageHeader = function PageHeader(_ref9) {
-  var dateLabel = _ref9.dateLabel,
-    generatedLabel = _ref9.generatedLabel,
-    activeFilters = _ref9.activeFilters,
-    page = _ref9.page,
-    windowLabel = _ref9.windowLabel;
+var PageHeader = function PageHeader(_ref1) {
+  var dateLabel = _ref1.dateLabel,
+    generatedLabel = _ref1.generatedLabel,
+    activeFilters = _ref1.activeFilters,
+    page = _ref1.page,
+    windowLabel = _ref1.windowLabel;
   return /*#__PURE__*/jsxs("div", {
     style: {
       padding: "22px ".concat(MX, "px 12px"),
@@ -2177,9 +2229,9 @@ var PageHeader = function PageHeader(_ref9) {
     })]
   });
 };
-var PageFooter = function PageFooter(_ref0) {
-  var generatedLabel = _ref0.generatedLabel,
-    page = _ref0.page;
+var PageFooter = function PageFooter(_ref10) {
+  var generatedLabel = _ref10.generatedLabel,
+    page = _ref10.page;
   return /*#__PURE__*/jsx("div", {
     style: {
       padding: "7px ".concat(MX, "px"),
@@ -2199,16 +2251,16 @@ var PageFooter = function PageFooter(_ref0) {
 };
 
 // ─── Main component ───────────────────────────────────────────────────────────
-var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
-  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _metricByTitle$AvgDo2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Refund, _metricByTitle$Refund2, _refundsRaw$refundCou, _ob$peakDay;
-  var _ref1$apiData = _ref1.apiData,
-    apiData = _ref1$apiData === void 0 ? {} : _ref1$apiData,
-    _ref1$dateName = _ref1.dateName,
-    dateName = _ref1$dateName === void 0 ? "Last Period" : _ref1$dateName,
-    _ref1$numberOfDays = _ref1.numberOfDays,
-    numberOfDays = _ref1$numberOfDays === void 0 ? 30 : _ref1$numberOfDays,
-    _ref1$activeFilters = _ref1.activeFilters,
-    activeFilters = _ref1$activeFilters === void 0 ? [] : _ref1$activeFilters;
+var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
+  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _metricByTitle$AvgDo2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Refund, _metricByTitle$Refund2, _refundsRaw$refundCou, _metricByTitle$Refund3, _ref14, _refundsRaw$refundRat2, _ob$growthPercentage, _ob$peakDay, _refCard$growthPercen;
+  var _ref11$apiData = _ref11.apiData,
+    apiData = _ref11$apiData === void 0 ? {} : _ref11$apiData,
+    _ref11$dateName = _ref11.dateName,
+    dateName = _ref11$dateName === void 0 ? "Last Period" : _ref11$dateName,
+    _ref11$numberOfDays = _ref11.numberOfDays,
+    numberOfDays = _ref11$numberOfDays === void 0 ? 30 : _ref11$numberOfDays,
+    _ref11$activeFilters = _ref11.activeFilters,
+    activeFilters = _ref11$activeFilters === void 0 ? [] : _ref11$activeFilters;
   var now = new Date();
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
   var windowLabel = "".concat(numberOfDays, "-day window");
@@ -2279,7 +2331,8 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
     totalMix = donorMix.totalMix,
     newPct = donorMix.newPct,
     retPct = donorMix.retPct,
-    mixAvgGift = donorMix.avgGift;
+    mixAvgGift = donorMix.avgGift,
+    donorMixPrev = donorMix.donorMixPrev;
   var recData = Array.isArray(apiData === null || apiData === void 0 ? void 0 : apiData.recurringBarChartData) ? apiData.recurringBarChartData : [];
   var recurringTotal = recData.length ? recData.reduce(function (s, i) {
     return s + Number(i.recurring || i.recurringAmount || 0);
@@ -2487,7 +2540,8 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
             title: "Refund Rate",
             value: pct(refundRate, 2),
             trend: ((_metricByTitle$Refund = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund === void 0 ? void 0 : _metricByTitle$Refund.trend) || signed((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) || -0.3, "pp"),
-            detail: ((_metricByTitle$Refund2 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund2 === void 0 ? void 0 : _metricByTitle$Refund2.detail) || "".concat(formatNumber((_refundsRaw$refundCou = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundCount) !== null && _refundsRaw$refundCou !== void 0 ? _refundsRaw$refundCou : 2), " refunds this period")
+            detail: ((_metricByTitle$Refund2 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund2 === void 0 ? void 0 : _metricByTitle$Refund2.detail) || "".concat(formatNumber((_refundsRaw$refundCou = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundCount) !== null && _refundsRaw$refundCou !== void 0 ? _refundsRaw$refundCou : 2), " refunds this period"),
+            trendPositiveWhenNegative: (_metricByTitle$Refund3 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund3 === void 0 ? void 0 : _metricByTitle$Refund3.trendPositiveWhenNegative
           })]
         }), /*#__PURE__*/jsxs("div", {
           style: {
@@ -2534,11 +2588,11 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
               }), /*#__PURE__*/jsx("span", {
                 style: {
                   marginLeft: 8,
-                  fontSize: 10.5,
-                  fontWeight: 600,
-                  color: "#16A34A"
+                  fontSize: 10.5
                 },
-                children: mainChart.trend
+                children: /*#__PURE__*/jsx(TrendText, {
+                  children: mainChart.trend
+                })
               })]
             })]
           }), /*#__PURE__*/jsx("div", {
@@ -2547,10 +2601,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
               gap: 14,
               marginBottom: 6
             },
-            children: [["Email", C.cyan], ["Organic", C.emerald], ["Paid Ads", C.indigo]].map(function (_ref10) {
-              var _ref11 = _slicedToArray(_ref10, 2),
-                name = _ref11[0],
-                color = _ref11[1];
+            children: [["Email", C.cyan], ["Organic", C.emerald], ["Paid Ads", C.indigo]].map(function (_ref12) {
+              var _ref13 = _slicedToArray(_ref12, 2),
+                name = _ref13[0],
+                color = _ref13[1];
               return /*#__PURE__*/jsxs("div", {
                 style: {
                   display: "flex",
@@ -2704,13 +2758,17 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                     color: "#9CA3AF"
                   },
                   children: "Avg gift"
-                }), /*#__PURE__*/jsxs("div", {
+                }), /*#__PURE__*/jsx("div", {
                   style: {
                     fontSize: 9,
-                    color: "#16A34A",
                     marginTop: 1
                   },
-                  children: [signed((growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) || 8.4), " vs last month"]
+                  children: /*#__PURE__*/jsx(TrendText, {
+                    style: {
+                      fontSize: 9
+                    },
+                    children: "".concat(Number((_ref14 = donorMixPrev !== null && donorMixPrev !== void 0 ? donorMixPrev : growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _ref14 !== void 0 ? _ref14 : 0).toFixed(2), "% vs pp")
+                  })
                 })]
               })]
             })
@@ -2865,10 +2923,17 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 }), /*#__PURE__*/jsx("div", {
                   style: {
                     fontSize: 9,
-                    color: "#DC2626",
                     fontWeight: 600
                   },
-                  children: signed((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) || -0.3, "pp")
+                  children: /*#__PURE__*/jsx(TrendText, {
+                    invert: true,
+                    style: {
+                      fontSize: 9
+                    },
+                    children: formatArrowTrend((_refundsRaw$refundRat2 = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) !== null && _refundsRaw$refundRat2 !== void 0 ? _refundsRaw$refundRat2 : 0, {
+                      suffix: "pp"
+                    })
+                  })
                 })]
               }), /*#__PURE__*/jsxs("div", {
                 children: [/*#__PURE__*/jsx("div", {
@@ -2931,14 +2996,20 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 color: "#111827"
               },
               children: d$((ob === null || ob === void 0 ? void 0 : ob.totalRevenue) || 0)
-            }), /*#__PURE__*/jsxs("div", {
+            }), /*#__PURE__*/jsx("div", {
               style: {
                 fontSize: 10,
-                color: "#16A34A",
                 fontWeight: 600,
                 marginBottom: 5
               },
-              children: [signed((ob === null || ob === void 0 ? void 0 : ob.growthPercentage) || 8.7), " vs last month"]
+              children: /*#__PURE__*/jsx(TrendText, {
+                style: {
+                  fontSize: 10
+                },
+                children: formatArrowTrend((_ob$growthPercentage = ob === null || ob === void 0 ? void 0 : ob.growthPercentage) !== null && _ob$growthPercentage !== void 0 ? _ob$growthPercentage : 0, {
+                  label: "vs pp"
+                })
+              })
             }), /*#__PURE__*/jsx(Sparkline, {
               data: obData.length ? obData : [0, 1],
               color: C.indigo,
@@ -2952,10 +3023,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref12) {
-                var _ref13 = _slicedToArray(_ref12, 2),
-                  l = _ref13[0],
-                  v = _ref13[1];
+              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref15) {
+                var _ref16 = _slicedToArray(_ref15, 2),
+                  l = _ref16[0],
+                  v = _ref16[1];
                 return /*#__PURE__*/jsxs("div", {
                   children: [/*#__PURE__*/jsx("div", {
                     style: {
@@ -3002,11 +3073,11 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 children: [/*#__PURE__*/jsx(StatPair, {
                   label: "Acceptance",
                   val: pct((up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0, 1),
-                  trend: signed(up === null || up === void 0 ? void 0 : up.acceptanceGrowth)
+                  trend: formatArrowTrend(up === null || up === void 0 ? void 0 : up.acceptanceGrowth)
                 }), /*#__PURE__*/jsx(StatPair, {
                   label: "Raised",
                   val: d$((up === null || up === void 0 ? void 0 : up.raised) || 0),
-                  trend: signed(up === null || up === void 0 ? void 0 : up.raisedGrowth)
+                  trend: formatArrowTrend(up === null || up === void 0 ? void 0 : up.raisedGrowth)
                 })]
               })]
             })
@@ -3037,11 +3108,11 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 children: [/*#__PURE__*/jsx(StatPair, {
                   label: "Acceptance",
                   val: pct((dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0, 1),
-                  trend: signed(dn === null || dn === void 0 ? void 0 : dn.acceptanceGrowth)
+                  trend: formatArrowTrend(dn === null || dn === void 0 ? void 0 : dn.acceptanceGrowth)
                 }), /*#__PURE__*/jsx(StatPair, {
                   label: "Raised",
                   val: d$((dn === null || dn === void 0 ? void 0 : dn.raised) || 0),
-                  trend: signed(dn === null || dn === void 0 ? void 0 : dn.raisedGrowth)
+                  trend: formatArrowTrend(dn === null || dn === void 0 ? void 0 : dn.raisedGrowth)
                 })]
               })]
             })
@@ -3055,14 +3126,20 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 color: "#111827"
               },
               children: d$((refCard === null || refCard === void 0 ? void 0 : refCard.totalRevenue) || 0)
-            }), /*#__PURE__*/jsxs("div", {
+            }), /*#__PURE__*/jsx("div", {
               style: {
                 fontSize: 10,
-                color: "#16A34A",
                 fontWeight: 600,
                 marginBottom: 5
               },
-              children: [signed((refCard === null || refCard === void 0 ? void 0 : refCard.growthPercentage) || 9.1), " vs last month"]
+              children: /*#__PURE__*/jsx(TrendText, {
+                style: {
+                  fontSize: 10
+                },
+                children: formatArrowTrend((_refCard$growthPercen = refCard === null || refCard === void 0 ? void 0 : refCard.growthPercentage) !== null && _refCard$growthPercen !== void 0 ? _refCard$growthPercen : 0, {
+                  label: "vs pp"
+                })
+              })
             }), /*#__PURE__*/jsx(Sparkline, {
               data: refData.length ? refData : [0, 1],
               color: C.emerald,
@@ -3076,10 +3153,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref14) {
-                var _ref15 = _slicedToArray(_ref14, 2),
-                  l = _ref15[0],
-                  v = _ref15[1];
+              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref17) {
+                var _ref18 = _slicedToArray(_ref17, 2),
+                  l = _ref18[0],
+                  v = _ref18[1];
                 return /*#__PURE__*/jsxs("div", {
                   children: [/*#__PURE__*/jsx("div", {
                     style: {