@ammarkhalidfarooq/dashboard-package 0.6.67 → 0.6.69

package/dist/index.es.js

@@ -1472,7 +1472,7 @@ var getActiveFilterChips = function getActiveFilterChips(apiData) {
   return ["Status: Successful", "Country: United States, UAE", "Amount: $50 – $5,000"];
 };
 var buildReportData = function buildReportData() {
-  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$totalDonati, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _growth$overallAVGDon, _growth$totalRevenue, _growth$netRevenue, _growth$totalDonation, _growth$overallAVGDon2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _apiData$roasCardPrev, _apiData$adSpend, _apiData$attributedRe, _growth$conversionRat, _refundsRaw$refundRat, _refundsRaw$refundRat2, _refundsRaw$refundCou, _apiData$overviewStat2, _growth$totalRevenue2;
+  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$totalDonati, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _overview$overallAVGD2, _growth$overallAVGDon, _growth$totalRevenue, _growth$netRevenue, _growth$totalDonation, _growth$overallAVGDon2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _apiData$roasCardPrev, _apiData$adSpend, _apiData$attributedRe, _growth$conversionRat, _refundsRaw$refundRat, _refundsRaw$refundRat2, _refundsRaw$refundCou, _apiData$overviewStat2, _growth$totalRevenue2;
   var apiData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var dateName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "Last Period";
   var overview = (apiData === null || apiData === void 0 || (_apiData$overviewStat = apiData.overviewStats) === null || _apiData$overviewStat === void 0 ? void 0 : _apiData$overviewStat.overview) || {};
@@ -1486,10 +1486,8 @@ var buildReportData = function buildReportData() {
   var totalVisits = Number((_apiData$totalVisits = apiData === null || apiData === void 0 ? void 0 : apiData.totalVisits) !== null && _apiData$totalVisits !== void 0 ? _apiData$totalVisits : 12438);
   var passThrough = totalRaised > 0 ? "".concat((netRaised / totalRaised * 100).toFixed(1), "% pass-through") : "92.3% pass-through";
   var donorMixRaw = apiData === null || apiData === void 0 ? void 0 : apiData.donorPieChartData;
-  var newDonors = 31;
-  var returningDonors = 184;
-  var avgGift = avgDonation;
-  var donorMixPrev = Number((_growth$overallAVGDon = growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _growth$overallAVGDon !== void 0 ? _growth$overallAVGDon : 8.4);
+  var newDonors = 0;
+  var returningDonors = 0;
   if (Array.isArray(donorMixRaw)) {
     var nd = donorMixRaw.find(function (d) {
       return /new/i.test(d.type);
@@ -1499,18 +1497,15 @@ var buildReportData = function buildReportData() {
     }) || {};
     newDonors = nd.totalDonations || 0;
     returningDonors = rd.totalDonations || 0;
-    var totAmt = (nd.totalAmount || 0) + (rd.totalAmount || 0);
-    var totCnt = newDonors + returningDonors;
-    avgGift = totCnt > 0 ? totAmt / totCnt : avgDonation;
   } else if (donorMixRaw && _typeof(donorMixRaw) === "object") {
     newDonors = donorMixRaw.newDonors || 0;
     returningDonors = donorMixRaw.returningDonors || 0;
-    avgGift = donorMixRaw.avgGift || avgDonation;
-    donorMixPrev = donorMixRaw.donorMixPrev || donorMixPrev;
   }
-  var totalMix = newDonors + returningDonors || 1;
-  var newPct = Math.round(newDonors / totalMix * 100);
-  var retPct = 100 - newPct;
+  var avgGift = Number(((_overview$overallAVGD2 = overview === null || overview === void 0 ? void 0 : overview.overallAVGDonations) !== null && _overview$overallAVGD2 !== void 0 ? _overview$overallAVGD2 : 0).toFixed(2));
+  var donorMixPrev = Number(((_growth$overallAVGDon = growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _growth$overallAVGDon !== void 0 ? _growth$overallAVGDon : 0).toFixed(2));
+  var totalMix = newDonors + returningDonors;
+  var newPct = totalMix > 0 ? Math.round(newDonors / totalMix * 100) : 0;
+  var retPct = totalMix > 0 ? 100 - newPct : 0;
   var hero = {
     value: "$".concat(formatNumber(totalRaised)),
     trend: "".concat(formatTrend((_growth$totalRevenue = growth === null || growth === void 0 ? void 0 : growth.totalRevenue) !== null && _growth$totalRevenue !== void 0 ? _growth$totalRevenue : 18), " vs ").concat(dateName || "last month"),
@@ -2301,15 +2296,155 @@ var DonationTypePanel = function DonationTypePanel(_ref0) {
     })]
   });
 };
-var KpiCard = function KpiCard(_ref1) {
+var AcceptanceRaisedPanel = function AcceptanceRaisedPanel(_ref1) {
   var title = _ref1.title,
-    value = _ref1.value,
-    trend = _ref1.trend,
-    detail = _ref1.detail,
-    _ref1$variant = _ref1.variant,
-    variant = _ref1$variant === void 0 ? "secondary" : _ref1$variant,
-    _ref1$trendPositiveWh = _ref1.trendPositiveWhenNegative,
-    trendPositiveWhenNegative = _ref1$trendPositiveWh === void 0 ? false : _ref1$trendPositiveWh;
+    subtitle = _ref1.subtitle,
+    _ref1$acceptanceRate = _ref1.acceptanceRate,
+    acceptanceRate = _ref1$acceptanceRate === void 0 ? 0 : _ref1$acceptanceRate,
+    _ref1$acceptanceGrowt = _ref1.acceptanceGrowth,
+    acceptanceGrowth = _ref1$acceptanceGrowt === void 0 ? 0 : _ref1$acceptanceGrowt,
+    _ref1$raised = _ref1.raised,
+    raised = _ref1$raised === void 0 ? 0 : _ref1$raised,
+    _ref1$raisedGrowth = _ref1.raisedGrowth,
+    raisedGrowth = _ref1$raisedGrowth === void 0 ? 0 : _ref1$raisedGrowth,
+    _ref1$primaryColor = _ref1.primaryColor,
+    primaryColor = _ref1$primaryColor === void 0 ? "#6366F1" : _ref1$primaryColor,
+    _ref1$secondaryColor = _ref1.secondaryColor,
+    secondaryColor = _ref1$secondaryColor === void 0 ? "#88bfd290" : _ref1$secondaryColor;
+  return /*#__PURE__*/jsx(Panel, {
+    title: title,
+    subtitle: subtitle,
+    children: /*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      },
+      children: [/*#__PURE__*/jsx(Donut, {
+        segments: [{
+          value: acceptanceRate,
+          color: primaryColor
+        }, {
+          value: Math.max(0, 100 - acceptanceRate),
+          color: "#E5E7EB"
+        }],
+        size: 88,
+        centerVal: "".concat(formatNumber(acceptanceRate), "%"),
+        centerLabel: "accepted"
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          width: "100%",
+          marginTop: 6
+        },
+        children: [/*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: 5
+          },
+          children: [/*#__PURE__*/jsxs("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 5
+            },
+            children: [/*#__PURE__*/jsx("div", {
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: 2,
+                background: primaryColor,
+                flexShrink: 0
+              }
+            }), /*#__PURE__*/jsx("span", {
+              style: {
+                fontSize: 9.5,
+                color: "#6B7280"
+              },
+              children: "Acceptance"
+            })]
+          }), /*#__PURE__*/jsxs("div", {
+            style: {
+              display: "flex",
+              alignItems: "baseline",
+              gap: 4
+            },
+            children: [/*#__PURE__*/jsxs("span", {
+              style: {
+                fontSize: 9.5,
+                fontWeight: 700,
+                color: "#111827"
+              },
+              children: [formatNumber(acceptanceRate), "%"]
+            }), /*#__PURE__*/jsx(TrendText, {
+              style: {
+                fontSize: 9
+              },
+              children: formatArrowTrend(acceptanceGrowth)
+            })]
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
+          children: [/*#__PURE__*/jsxs("div", {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 5
+            },
+            children: [/*#__PURE__*/jsx("div", {
+              style: {
+                width: 8,
+                height: 8,
+                borderRadius: 2,
+                background: secondaryColor,
+                flexShrink: 0
+              }
+            }), /*#__PURE__*/jsx("span", {
+              style: {
+                fontSize: 9.5,
+                color: "#6B7280"
+              },
+              children: "Raised"
+            })]
+          }), /*#__PURE__*/jsxs("div", {
+            style: {
+              display: "flex",
+              alignItems: "baseline",
+              gap: 4
+            },
+            children: [/*#__PURE__*/jsx("span", {
+              style: {
+                fontSize: 9.5,
+                fontWeight: 700,
+                color: "#111827"
+              },
+              children: d$(raised)
+            }), /*#__PURE__*/jsx(TrendText, {
+              style: {
+                fontSize: 9
+              },
+              children: formatArrowTrend(raisedGrowth)
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+};
+var KpiCard = function KpiCard(_ref10) {
+  var title = _ref10.title,
+    value = _ref10.value,
+    trend = _ref10.trend,
+    detail = _ref10.detail,
+    _ref10$variant = _ref10.variant,
+    variant = _ref10$variant === void 0 ? "secondary" : _ref10$variant,
+    _ref10$trendPositiveW = _ref10.trendPositiveWhenNegative,
+    trendPositiveWhenNegative = _ref10$trendPositiveW === void 0 ? false : _ref10$trendPositiveW;
   var displayTrend = withTrendArrow(trend);
   var isPrimary = variant === "primary";
   return /*#__PURE__*/jsxs("div", {
@@ -2360,46 +2495,6 @@ var KpiCard = function KpiCard(_ref1) {
     })]
   });
 };
-var StatPair = function StatPair(_ref10) {
-  var label = _ref10.label,
-    val = _ref10.val,
-    trend = _ref10.trend;
-  var displayTrend = withTrendArrow(trend);
-  return /*#__PURE__*/jsxs("div", {
-    style: {
-      marginBottom: 6
-    },
-    children: [/*#__PURE__*/jsx("div", {
-      style: {
-        fontSize: 8.5,
-        color: THEME.muted,
-        marginBottom: 1
-      },
-      children: label
-    }), /*#__PURE__*/jsxs("div", {
-      style: {
-        display: "flex",
-        alignItems: "baseline",
-        gap: 4
-      },
-      children: [/*#__PURE__*/jsx("span", {
-        style: {
-          fontSize: 13,
-          fontWeight: 700,
-          color: "#111827"
-        },
-        children: val
-      }), trend && /*#__PURE__*/jsx("span", {
-        style: {
-          fontSize: 9.5,
-          fontWeight: 600,
-          color: resolveTrendColor(displayTrend)
-        },
-        children: displayTrend
-      })]
-    })]
-  });
-};
 var PageHeader = function PageHeader(_ref11) {
   var dateLabel = _ref11.dateLabel,
     generatedLabel = _ref11.generatedLabel,
@@ -2534,7 +2629,7 @@ var PageFooter = function PageFooter(_ref12) {
 
 // ─── Main component ───────────────────────────────────────────────────────────
 var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, 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, _mainChart$stacked, _ref16, _refundsRaw$refundRat2, _ob$growthPercentage, _ob$peakDay, _refCard$growthPercen;
+  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc, _apiData$trafficSourc2, _apiData$trafficSourc3, _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, _mainChart$stacked, _refundsRaw$refundRat2, _ob$growthPercentage, _ob$peakDay, _up$acceptanceGrowth, _up$raisedGrowth, _dn$acceptanceGrowth, _dn$raisedGrowth, _refCard$growthPercen;
   var _ref13$apiData = _ref13.apiData,
     apiData = _ref13$apiData === void 0 ? {} : _ref13$apiData,
     _ref13$dateName = _ref13.dateName,
@@ -2617,28 +2712,8 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
     mixAvgGift = donorMix.avgGift,
     donorMixPrev = donorMix.donorMixPrev;
   var geoList = report.donorGeographyList;
-  var trafficItems = function (_apiData$trafficSourc) {
-    var items = Array.isArray(apiData === null || apiData === void 0 || (_apiData$trafficSourc = apiData.trafficSourceData) === null || _apiData$trafficSourc === void 0 ? void 0 : _apiData$trafficSourc.data) ? apiData.trafficSourceData.data : [];
-    if (items.length) return items;
-    return [{
-      source: "Paid Ads",
-      revenue: 98400,
-      share: 41
-    }, {
-      source: "Organic",
-      revenue: 62100,
-      share: 26
-    }, {
-      source: "Email",
-      revenue: 38600,
-      share: 16
-    }, {
-      source: "Direct",
-      revenue: 15500,
-      share: 6
-    }];
-  }();
-  var trafficTotal = Number((apiData === null || apiData === void 0 || (_apiData$trafficSourc2 = apiData.trafficSourceData) === null || _apiData$trafficSourc2 === void 0 ? void 0 : _apiData$trafficSourc2.totalRevenue) || 240900);
+  var trafficItems = Array.isArray(apiData === null || apiData === void 0 || (_apiData$trafficSourc = apiData.trafficSourceData) === null || _apiData$trafficSourc === void 0 ? void 0 : _apiData$trafficSourc.data) ? apiData.trafficSourceData.data : [];
+  var trafficTotal = Number((_apiData$trafficSourc2 = apiData === null || apiData === void 0 || (_apiData$trafficSourc3 = apiData.trafficSourceData) === null || _apiData$trafficSourc3 === void 0 ? void 0 : _apiData$trafficSourc3.totalRevenue) !== null && _apiData$trafficSourc2 !== void 0 ? _apiData$trafficSourc2 : 0);
   var revSeries = (mainChart.series || []).length ? mainChart.series : [{
     name: "Paid Ads",
     data: []
@@ -3048,7 +3123,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
                     color: "#111827",
                     marginBottom: 2
                   },
-                  children: kpi$(mixAvgGift)
+                  children: d$(mixAvgGift)
                 }), /*#__PURE__*/jsx("div", {
                   style: {
                     fontSize: 9
@@ -3057,7 +3132,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
                     style: {
                       fontSize: 9
                     },
-                    children: formatArrowTrend((_ref16 = donorMixPrev !== null && donorMixPrev !== void 0 ? donorMixPrev : growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _ref16 !== void 0 ? _ref16 : 0, {
+                    children: formatArrowTrend(donorMixPrev, {
                       label: "vs last month"
                     })
                   })
@@ -3230,10 +3305,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, 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 (_ref17) {
-                var _ref18 = _slicedToArray(_ref17, 2),
-                  l = _ref18[0],
-                  v = _ref18[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 (_ref16) {
+                var _ref17 = _slicedToArray(_ref16, 2),
+                  l = _ref17[0],
+                  v = _ref17[1];
                 return /*#__PURE__*/jsxs("div", {
                   children: [/*#__PURE__*/jsx("div", {
                     style: {
@@ -3253,76 +3328,22 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
                 }, l);
               })
             })]
-          }), /*#__PURE__*/jsx(Panel, {
+          }), /*#__PURE__*/jsx(AcceptanceRaisedPanel, {
             title: "Upsell",
             subtitle: "Acceptance & raised",
-            children: /*#__PURE__*/jsxs("div", {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 12
-              },
-              children: [/*#__PURE__*/jsx(Donut, {
-                segments: [{
-                  value: (up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0,
-                  color: C.indigo
-                }, {
-                  value: Math.max(0, 100 - ((up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0)),
-                  color: "#E5E7EB"
-                }],
-                size: 76,
-                centerVal: "".concat(formatNumber((up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0), "%"),
-                centerLabel: "accepted"
-              }), /*#__PURE__*/jsxs("div", {
-                style: {
-                  flex: 1
-                },
-                children: [/*#__PURE__*/jsx(StatPair, {
-                  label: "Acceptance",
-                  val: pct((up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0, 1),
-                  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: formatArrowTrend(up === null || up === void 0 ? void 0 : up.raisedGrowth)
-                })]
-              })]
-            })
-          }), /*#__PURE__*/jsx(Panel, {
+            acceptanceRate: (up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0,
+            acceptanceGrowth: (_up$acceptanceGrowth = up === null || up === void 0 ? void 0 : up.acceptanceGrowth) !== null && _up$acceptanceGrowth !== void 0 ? _up$acceptanceGrowth : 0,
+            raised: (up === null || up === void 0 ? void 0 : up.raised) || 0,
+            raisedGrowth: (_up$raisedGrowth = up === null || up === void 0 ? void 0 : up.raisedGrowth) !== null && _up$raisedGrowth !== void 0 ? _up$raisedGrowth : 0,
+            primaryColor: C.indigo
+          }), /*#__PURE__*/jsx(AcceptanceRaisedPanel, {
             title: "Downsell",
             subtitle: "Acceptance & raised",
-            children: /*#__PURE__*/jsxs("div", {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 12
-              },
-              children: [/*#__PURE__*/jsx(Donut, {
-                segments: [{
-                  value: (dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0,
-                  color: C.cyan
-                }, {
-                  value: Math.max(0, 100 - ((dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0)),
-                  color: "#E5E7EB"
-                }],
-                size: 76,
-                centerVal: "".concat(formatNumber((dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0), "%"),
-                centerLabel: "accepted"
-              }), /*#__PURE__*/jsxs("div", {
-                style: {
-                  flex: 1
-                },
-                children: [/*#__PURE__*/jsx(StatPair, {
-                  label: "Acceptance",
-                  val: pct((dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0, 1),
-                  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: formatArrowTrend(dn === null || dn === void 0 ? void 0 : dn.raisedGrowth)
-                })]
-              })]
-            })
+            acceptanceRate: (dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0,
+            acceptanceGrowth: (_dn$acceptanceGrowth = dn === null || dn === void 0 ? void 0 : dn.acceptanceGrowth) !== null && _dn$acceptanceGrowth !== void 0 ? _dn$acceptanceGrowth : 0,
+            raised: (dn === null || dn === void 0 ? void 0 : dn.raised) || 0,
+            raisedGrowth: (_dn$raisedGrowth = dn === null || dn === void 0 ? void 0 : dn.raisedGrowth) !== null && _dn$raisedGrowth !== void 0 ? _dn$raisedGrowth : 0,
+            primaryColor: C.cyan
           }), /*#__PURE__*/jsxs(Panel, {
             title: "Referrals",
             subtitle: "Revenue trend \xB7 last ".concat(daysLabel),
@@ -3360,10 +3381,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, 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 (_ref19) {
-                var _ref20 = _slicedToArray(_ref19, 2),
-                  l = _ref20[0],
-                  v = _ref20[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 (_ref18) {
+                var _ref19 = _slicedToArray(_ref18, 2),
+                  l = _ref19[0],
+                  v = _ref19[1];
                 return /*#__PURE__*/jsxs("div", {
                   children: [/*#__PURE__*/jsx("div", {
                     style: {