@ammarkhalidfarooq/dashboard-package 0.5.37 → 0.5.38

package/dist/index.cjs.js

@@ -595,7 +595,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
       },
       children: /*#__PURE__*/jsxRuntime.jsxs(material.CardContent, {
         sx: {
-          p: 3,
+          p: item.exportMode ? 2 : 3,
           flexGrow: 1,
           display: "flex",
           flexDirection: "column"
@@ -605,7 +605,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
             display: "flex",
             justifyContent: "space-between",
             alignItems: "flex-start",
-            mb: isPremium ? 3 : 2
+            mb: item.exportMode ? 2 : isPremium ? 3 : 2
           },
           children: [isPremium ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
             sx: {
@@ -697,7 +697,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
             },
             children: item.hideControls ? item.series && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
               sx: {
-                display: {
+                display: item.exportMode ? "flex" : {
                   xs: "none",
                   sm: "flex"
                 },
@@ -902,8 +902,6 @@ function formatNumber(num) {
 }
 
 var PURPLE = "#6363E6";
-var GREEN = "#10B981";
-var BLUE = "#06B6D4";
 var REPORT_COLORS = {
   purple: PURPLE};
 var formatTrend = function formatTrend(value) {
@@ -1029,7 +1027,7 @@ var buildReportData = function buildReportData() {
     trend: "".concat(formatTrend((_growth$totalRevenue2 = growth === null || growth === void 0 ? void 0 : growth.totalRevenue) !== null && _growth$totalRevenue2 !== void 0 ? _growth$totalRevenue2 : 18), " vs ").concat(dateName || "last month"),
     hideControls: true,
     stacked: true,
-    colors: [PURPLE, GREEN, BLUE],
+    colors: ["#6366F1", "#10B981", "#06B6D4"],
     stroke: {
       curve: "smooth",
       width: 3
@@ -1081,37 +1079,6 @@ var buildReportData = function buildReportData() {
       categories: _categories
     });
   }
-  var campaignStatus = function campaignStatus(campaign) {
-    if (campaign.status) return campaign.status;
-    var progress = Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100);
-    if (progress >= 95) return "Closing";
-    if (progress < 50) return "Slow";
-    return "Active";
-  };
-  var statusStyle = function statusStyle(status) {
-    switch (status) {
-      case "Slow":
-        return {
-          statusBg: "#FEF3C7",
-          statusColor: "#B45309"
-        };
-      case "Closing":
-        return {
-          statusBg: "#DBEAFE",
-          statusColor: "#1D4ED8"
-        };
-      default:
-        return {
-          statusBg: "#D1FAE5",
-          statusColor: "#047857"
-        };
-    }
-  };
-  var progressColor = function progressColor(progress) {
-    if (progress >= 95) return GREEN;
-    if (progress < 50) return "#F59E0B";
-    return PURPLE;
-  };
   var sampleCampaigns = [{
     title: "Orphan sponsorship — Yemen",
     collectedAmount: 78400,
@@ -1145,20 +1112,17 @@ var buildReportData = function buildReportData() {
   }];
   var campaignSource = ((apiData === null || apiData === void 0 ? void 0 : apiData.activeCampaigns) || []).length ? apiData.activeCampaigns : sampleCampaigns;
   var activeCampaigns = campaignSource.map(function (campaign) {
-    var progress = Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100);
-    var status = campaignStatus(campaign);
-    return _objectSpread2({
+    return {
       id: campaign.campaignName ? campaign.campaignName.split(" ").filter(Boolean).map(function (w) {
         return w[0];
       }).join("").toUpperCase().slice(0, 2) : "??",
       name: campaign.title || "Untitled Campaign",
       val1: "$".concat(formatNumber(campaign.collectedAmount || 0)),
       type: "progress",
-      progress: progress,
-      progressColor: progressColor(progress),
+      progress: Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100),
       val3: formatNumber(campaign.uniqueDonationsCount || 0),
-      status: status
-    }, statusStyle(status));
+      val4: "$".concat(formatNumber(campaign.avgGift || 0))
+    };
   });
   return {
     hero: hero,
@@ -4142,115 +4106,173 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   });
 };
 
-var cardHeight = function cardHeight(exportMode) {
-  return exportMode ? 158 : 300;
+var CARD_SX = {
+  maxHeight: 280
 };
-var ReportDetailsSection = function ReportDetailsSection(_ref) {
-  var _orderBumpData$chart, _orderBumpData$peakDa, _referralData$chartDa;
-  var reportData = _ref.reportData,
-    dateName = _ref.dateName,
-    _ref$exportMode = _ref.exportMode,
-    exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode,
-    _ref$section = _ref.section,
-    section = _ref$section === void 0 ? "all" : _ref$section;
-  var activeCampaigns = reportData.activeCampaigns,
-    donorMix = reportData.donorMix,
-    donationTypeData = reportData.donationTypeData,
-    donorGeographyData = reportData.donorGeographyData,
-    trafficSourceData = reportData.trafficSourceData,
-    orderBumpData = reportData.orderBumpData,
-    upsellData = reportData.upsellData,
-    downsellData = reportData.downsellData,
-    referralData = reportData.referralData,
-    refundsChargebacksData = reportData.refundsChargebacksData;
-  var gridSx = {
+var GRID_GAP = "6px";
+var fourColGridSx = function fourColGridSx(exportMode) {
+  return {
     display: "grid",
     gridTemplateColumns: exportMode ? "repeat(4, 1fr)" : {
       xs: "1fr",
-      sm: "1fr 1fr",
-      lg: "repeat(4, 1fr)"
+      sm: "repeat(2, 1fr)",
+      md: "repeat(4, 1fr)"
     },
-    gap: exportMode ? 0.75 : 2
-  };
-  var cardSx = {
-    maxHeight: cardHeight(exportMode),
-    minHeight: exportMode ? cardHeight(exportMode) : undefined
+    gap: GRID_GAP,
+    mt: GRID_GAP,
+    alignItems: "stretch"
   };
-  var campaignsRow = /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+};
+var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
+  var _orderBumpData$chart, _orderBumpData$peakDa, _orderBumpData$peakDa2, _referralData$chartDa;
+  var _ref$exportMode = _ref.exportMode,
+    exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode,
+    _ref$section = _ref.section,
+    section = _ref$section === void 0 ? "all" : _ref$section,
+    _ref$activeCampaignsR = _ref.activeCampaignsRows,
+    activeCampaignsRows = _ref$activeCampaignsR === void 0 ? [] : _ref$activeCampaignsR,
+    _ref$donorMix = _ref.donorMix,
+    donorMix = _ref$donorMix === void 0 ? {} : _ref$donorMix,
+    _ref$donationTypeData = _ref.donationTypeData,
+    donationTypeData = _ref$donationTypeData === void 0 ? [] : _ref$donationTypeData,
+    _ref$donorGeographyDa = _ref.donorGeographyData,
+    donorGeographyData = _ref$donorGeographyDa === void 0 ? [] : _ref$donorGeographyDa,
+    _ref$trafficSourceDat = _ref.trafficSourceData,
+    trafficSourceData = _ref$trafficSourceDat === void 0 ? {} : _ref$trafficSourceDat,
+    _ref$orderBumpData = _ref.orderBumpData,
+    orderBumpData = _ref$orderBumpData === void 0 ? {} : _ref$orderBumpData,
+    _ref$upsellData = _ref.upsellData,
+    upsellData = _ref$upsellData === void 0 ? {} : _ref$upsellData,
+    _ref$downsellData = _ref.downsellData,
+    downsellData = _ref$downsellData === void 0 ? {} : _ref$downsellData,
+    _ref$referralData = _ref.referralData,
+    referralData = _ref$referralData === void 0 ? {} : _ref$referralData,
+    _ref$refundsChargebac = _ref.refundsChargebacksData,
+    refundsChargebacksData = _ref$refundsChargebac === void 0 ? [] : _ref$refundsChargebac,
+    _ref$dateName = _ref.dateName,
+    dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName;
+  var _donorMix$newDonors = donorMix.newDonors,
+    newDonors = _donorMix$newDonors === void 0 ? 0 : _donorMix$newDonors,
+    _donorMix$returningDo = donorMix.returningDonors,
+    returningDonors = _donorMix$returningDo === void 0 ? 0 : _donorMix$returningDo,
+    _donorMix$totalMix = donorMix.totalMix,
+    totalMix = _donorMix$totalMix === void 0 ? 0 : _donorMix$totalMix,
+    _donorMix$newPct = donorMix.newPct,
+    newPct = _donorMix$newPct === void 0 ? 0 : _donorMix$newPct,
+    _donorMix$retPct = donorMix.retPct,
+    retPct = _donorMix$retPct === void 0 ? 0 : _donorMix$retPct,
+    _donorMix$avgGift = donorMix.avgGift,
+    avgGift = _donorMix$avgGift === void 0 ? 0 : _donorMix$avgGift,
+    _donorMix$donorMixPre = donorMix.donorMixPrev,
+    donorMixPrev = _donorMix$donorMixPre === void 0 ? 0 : _donorMix$donorMixPre;
+  var campaignsRow = exportMode ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
     sx: {
       display: "grid",
-      gridTemplateColumns: exportMode ? "1fr 200px" : {
-        xs: "1fr",
-        lg: "2.25fr 1fr"
-      },
-      gap: exportMode ? 0.75 : 2,
-      mb: exportMode ? 0.75 : 2,
+      gridTemplateColumns: "2.25fr 1fr",
+      gap: GRID_GAP,
       alignItems: "stretch"
     },
     children: [/*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
       title: "Active campaigns",
       subtitle: "Live fundraisers ranked by velocity",
-      actionLabel: exportMode ? undefined : "View all",
-      columns: ["Campaign", "Raised", "Progress", "Donors", "Status"],
-      gridTemplateColumns: "2.2fr 0.9fr 1.3fr 0.6fr 0.8fr",
-      rows: activeCampaigns,
-      compact: exportMode
+      columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
+      rows: activeCampaignsRows
     }), /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
       title: "Donor mix",
       subtitle: "Acquisition vs retention",
-      series: [donorMix.newDonors, donorMix.returningDonors],
+      series: [newDonors, returningDonors],
       labels: ["New donors", "Returning"],
-      colors: ["#10B981", "rgb(99, 99, 230)"],
+      colors: ["rgb(99, 99, 230)", "#10B981"],
       centerLabel: "donors",
-      centerValue: String(donorMix.totalMix),
+      centerValue: String(totalMix),
       items: [{
         label: "New donors",
-        val: "".concat(donorMix.newDonors, " \xB7 ").concat(donorMix.newPct, "%"),
-        color: "#10B981"
+        val: "".concat(newDonors, " \xB7 ").concat(newPct, "%"),
+        color: "rgb(99, 99, 230)"
       }, {
         label: "Returning",
-        val: "".concat(donorMix.returningDonors, " \xB7 ").concat(donorMix.retPct, "%"),
-        color: "rgb(99, 99, 230)"
+        val: "".concat(returningDonors, " \xB7 ").concat(retPct, "%"),
+        color: "#10B981"
       }],
-      bottomSummaryValue: "$".concat(formatNumber(donorMix.avgGift)),
-      bottomSummaryTrend: "".concat(donorMix.donorMixPrev, "% vs ").concat(dateName || "last month"),
-      compact: exportMode,
+      bottomSummaryValue: "$".concat(avgGift),
+      bottomSummaryTrend: "".concat(donorMixPrev, "% vs ").concat(dateName || "last month"),
       sx: {
-        height: "100%"
+        width: "100%"
       }
     })]
+  }) : /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+    container: true,
+    spacing: GRID_GAP,
+    sx: {
+      mt: GRID_GAP
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      item: true,
+      xs: 12,
+      md: 9,
+      sx: {
+        paddingTop: "0px !important"
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
+        title: "Active campaigns",
+        subtitle: "Live fundraisers ranked by velocity",
+        columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
+        rows: activeCampaignsRows
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      item: true,
+      xs: 12,
+      md: 3,
+      sx: {
+        display: "flex",
+        paddingTop: "0px !important",
+        marginTop: {
+          xs: GRID_GAP,
+          md: 0
+        }
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
+        title: "Donor mix",
+        subtitle: "Acquisition vs retention",
+        series: [newDonors, returningDonors],
+        labels: ["New donors", "Returning"],
+        colors: ["rgb(99, 99, 230)", "#10B981"],
+        centerLabel: "donors",
+        centerValue: String(totalMix),
+        items: [{
+          label: "New donors",
+          val: "".concat(newDonors, " \xB7 ").concat(newPct, "%"),
+          color: "rgb(99, 99, 230)"
+        }, {
+          label: "Returning",
+          val: "".concat(returningDonors, " \xB7 ").concat(retPct, "%"),
+          color: "#10B981"
+        }],
+        bottomSummaryValue: "$".concat(avgGift),
+        bottomSummaryTrend: "".concat(donorMixPrev, "% vs ").concat(dateName || "last month"),
+        sx: {
+          width: "100%"
+        }
+      })
+    })]
   });
-  var middleCards = /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    sx: gridSx,
+  var middleCards = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
-      sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
-        p: 1.25,
-        borderRadius: 3
-      }),
+      sx: CARD_SX,
       donationTypeData: donationTypeData
     }), /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
-      sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
-        p: 1.25,
-        borderRadius: 3
-      }),
+      sx: CARD_SX,
       donorGeographyData: donorGeographyData
     }), /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {
-      sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
-        p: 1.25,
-        borderRadius: 3
-      }),
+      sx: CARD_SX,
       refundsChargebacksData: refundsChargebacksData
     }), /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {
-      sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
-        p: 1.25,
-        borderRadius: 3
-      }),
+      sx: CARD_SX,
       trafficSourceData: (trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.data) || [],
       total: "$".concat(formatNumber((trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.totalRevenue) || 0))
     })]
   });
-  var bottomCards = /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    sx: gridSx,
+  var bottomCards = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
       title: "Order Bump",
       subtitle: "Revenue trend \xB7 last 30 days",
@@ -4263,18 +4285,18 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
         };
       })) || [],
       footerMetrics: [{
-        label: "Avg/day",
+        label: "Avg / Day",
         value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.averagePerDay) || 0))
-      }, {
-        label: "Peak day",
-        value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa = orderBumpData.peakDay) === null || _orderBumpData$peakDa === void 0 ? void 0 : _orderBumpData$peakDa.amount) || 0))
       }, {
         label: "Orders",
         value: formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalOrders) || 0)
+      }, {
+        label: "Peak Day",
+        value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa = orderBumpData.peakDay) === null || _orderBumpData$peakDa === void 0 ? void 0 : _orderBumpData$peakDa.amount) || 0)),
+        subValue: orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa2 = orderBumpData.peakDay) === null || _orderBumpData$peakDa2 === void 0 ? void 0 : _orderBumpData$peakDa2.date
       }],
-      sx: cardSx,
-      bottomSection: true,
-      compact: exportMode
+      sx: CARD_SX,
+      bottomSection: true
     }), /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
       title: "Upsell",
       subtitle: "Acceptance & raised",
@@ -4283,8 +4305,7 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
       acceptanceTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) || 0).toFixed(1), "%"),
       raisedVal: "$".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raised) || 0)),
       raisedTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) || 0).toFixed(1), "%"),
-      sx: cardSx,
-      compact: exportMode
+      sx: CARD_SX
     }), /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
       title: "Downsell",
       subtitle: "Acceptance & raised",
@@ -4293,8 +4314,7 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
       acceptanceTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) || 0), "%"),
       raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raised) || 0)),
       raisedTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) || 0), "%"),
-      sx: cardSx,
-      compact: exportMode
+      sx: CARD_SX
     }), /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
       title: "Referrals",
       subtitle: "Revenue trend \xB7 last 30 days",
@@ -4316,254 +4336,66 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
         label: "Conv. rate",
         value: "".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.conversionRate) || 0), "%")
       }],
-      sx: cardSx,
-      bottomSection: true,
-      compact: exportMode
+      sx: CARD_SX,
+      bottomSection: true
     })]
   });
-  if (section === "top") {
-    return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-      children: [campaignsRow, middleCards]
-    });
-  }
-  if (section === "bottom") {
-    return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-      children: bottomCards
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    sx: {
-      mt: exportMode ? 0 : 2
-    },
-    children: [campaignsRow, middleCards, /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-      sx: {
-        mt: exportMode ? 0.75 : 2
-      },
-      children: bottomCards
-    })]
-  });
-};
-
-var COLORS$1 = ["#6363E6", "#10B981", "#06B6D4"];
-var formatYLabel = function formatYLabel(v) {
-  if (v >= 10000) return "$".concat((v / 1000).toFixed(0), "K");
-  if (v >= 1000) return "$".concat((v / 1000).toFixed(1), "K");
-  return "$".concat(v.toFixed(0));
-};
-var ReportLineChart = function ReportLineChart(_ref) {
-  var _ref$series = _ref.series,
-    series = _ref$series === void 0 ? [] : _ref$series,
-    _ref$categories = _ref.categories,
-    categories = _ref$categories === void 0 ? [] : _ref$categories,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 730 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 200 : _ref$height;
-  var allVals = series.flatMap(function (s) {
-    return s.data || [];
+  if (section === "campaigns") return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    children: campaignsRow
   });
-  if (!allVals.length) {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      style: {
-        height: height,
-        background: "#F8FAFF",
-        borderRadius: 8
-      }
-    });
-  }
-  var PL = 44;
-  var PR = 12;
-  var PT = 10;
-  var PB = 24;
-  var IW = width - PL - PR;
-  var IH = height - PT - PB;
-  var max = Math.max.apply(Math, _toConsumableArray(allVals).concat([0]));
-  var range = max || 1;
-  var xp = function xp(i, n) {
-    return PL + i / Math.max(n - 1, 1) * IW;
-  };
-  var yp = function yp(v) {
-    return PT + IH - v / range * IH;
-  };
-  var yTicks = [0, 0.25, 0.5, 0.75, 1].map(function (t) {
-    return t * range;
+  if (section === "middle") return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    sx: fourColGridSx(exportMode),
+    children: middleCards
   });
-  var step = Math.max(1, Math.floor(categories.length / 6));
-  var shownCats = categories.filter(function (_, i) {
-    return i % step === 0 || i === categories.length - 1;
+  if (section === "bottom") return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    sx: fourColGridSx(exportMode),
+    children: bottomCards
   });
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
-    width: width,
-    height: height,
-    style: {
-      display: "block"
-    },
-    children: [yTicks.map(function (v, i) {
-      var y = yp(v);
-      return /*#__PURE__*/jsxRuntime.jsxs("g", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("line", {
-          x1: PL,
-          y1: y,
-          x2: width - PR,
-          y2: y,
-          stroke: "#E5E7EB",
-          strokeWidth: 1
-        }), /*#__PURE__*/jsxRuntime.jsx("text", {
-          x: PL - 6,
-          y: y + 4,
-          textAnchor: "end",
-          fontSize: 10,
-          fill: "#9CA3AF",
-          children: formatYLabel(v)
-        })]
-      }, i);
-    }), series.map(function (s, si) {
-      var data = s.data || [];
-      if (!data.length) return null;
-      var pathD = data.map(function (v, i) {
-        return "".concat(i === 0 ? "M" : "L").concat(xp(i, data.length).toFixed(1), ",").concat(yp(v).toFixed(1));
-      }).join(" ");
-      return /*#__PURE__*/jsxRuntime.jsx("path", {
-        d: pathD,
-        fill: "none",
-        stroke: COLORS$1[si % COLORS$1.length],
-        strokeWidth: 2.5,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }, s.name || si);
-    }), shownCats.map(function (label, i) {
-      var origIdx = categories.indexOf(label);
-      var x = xp(origIdx < 0 ? i * step : origIdx, categories.length);
-      return /*#__PURE__*/jsxRuntime.jsx("text", {
-        x: x,
-        y: height - 6,
-        textAnchor: "middle",
-        fontSize: 10,
-        fill: "#9CA3AF",
-        children: label
-      }, i);
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    children: [campaignsRow, /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: fourColGridSx(exportMode),
+      children: middleCards
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: fourColGridSx(exportMode),
+      children: bottomCards
     })]
   });
 };
 
-var LEGEND = [{
-  label: "Paid Ads",
-  color: "#6363E6"
-}, {
-  label: "Organic",
-  color: "#10B981"
-}, {
-  label: "Email",
-  color: "#06B6D4"
-}];
-var ReportExportChartCard = function ReportExportChartCard(_ref) {
-  var item = _ref.item,
-    _ref$chartWidth = _ref.chartWidth,
-    chartWidth = _ref$chartWidth === void 0 ? 730 : _ref$chartWidth;
-  return /*#__PURE__*/jsxRuntime.jsx(material.Card, {
-    sx: {
-      width: "100%",
-      boxShadow: "0 2px 12px rgba(0,0,0,0.05)",
-      borderRadius: 3,
-      border: "1px solid #f0f0f0"
-    },
-    children: /*#__PURE__*/jsxRuntime.jsxs(material.CardContent, {
-      sx: {
-        p: 2,
-        "&:last-child": {
-          pb: 2
-        }
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-        sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "flex-start",
-          mb: 1
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-            sx: {
-              fontWeight: 700,
-              fontSize: 15,
-              color: "#000",
-              mb: 0.25
-            },
-            children: item.label
-          }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-            sx: {
-              fontSize: 11,
-              color: "rgba(0,0,0,0.4)",
-              mb: 1
-            },
-            children: item.subtitle || "Last 30 days · daily aggregation"
-          }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 1
-            },
-            children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-              sx: {
-                fontWeight: 700,
-                fontSize: 22,
-                color: "#000"
-              },
-              children: item.value
-            }), item.trend && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-              sx: {
-                bgcolor: "#D1FAE5",
-                color: "#047857",
-                px: 1,
-                py: 0.25,
-                borderRadius: "100px",
-                fontSize: 11,
-                fontWeight: 600
-              },
-              children: ["\u25B2 ", item.trend]
-            })]
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-          sx: {
-            display: "flex",
-            gap: 1.5,
-            flexShrink: 0
-          },
-          children: LEGEND.map(function (leg) {
-            return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 0.5
-              },
-              children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
-                sx: {
-                  width: 8,
-                  height: 8,
-                  borderRadius: "50%",
-                  bgcolor: leg.color
-                }
-              }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-                sx: {
-                  fontSize: 10,
-                  color: "rgba(0,0,0,0.55)"
-                },
-                children: leg.label
-              })]
-            }, leg.label);
-          })
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(ReportLineChart, {
-        series: item.series || [],
-        categories: item.categories || [],
-        width: chartWidth,
-        height: 185
-      })]
-    })
+var ReportDetailsSection = function ReportDetailsSection(_ref) {
+  var reportData = _ref.reportData,
+    dateName = _ref.dateName,
+    _ref$exportMode = _ref.exportMode,
+    exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode,
+    _ref$section = _ref.section,
+    section = _ref$section === void 0 ? "all" : _ref$section;
+  var activeCampaigns = reportData.activeCampaigns,
+    donorMix = reportData.donorMix,
+    donationTypeData = reportData.donationTypeData,
+    donorGeographyData = reportData.donorGeographyData,
+    trafficSourceData = reportData.trafficSourceData,
+    orderBumpData = reportData.orderBumpData,
+    upsellData = reportData.upsellData,
+    downsellData = reportData.downsellData,
+    referralData = reportData.referralData,
+    refundsChargebacksData = reportData.refundsChargebacksData;
+  return /*#__PURE__*/jsxRuntime.jsx(OverallDetailsGrid, {
+    exportMode: exportMode,
+    section: section,
+    activeCampaignsRows: activeCampaigns,
+    donorMix: donorMix,
+    donationTypeData: donationTypeData,
+    donorGeographyData: donorGeographyData,
+    trafficSourceData: trafficSourceData,
+    orderBumpData: orderBumpData,
+    upsellData: upsellData,
+    downsellData: downsellData,
+    referralData: referralData,
+    refundsChargebacksData: refundsChargebacksData,
+    dateName: dateName
   });
 };
 
-var EXPORT_CHART_W = 730;
 var ReportBody = function ReportBody(_ref) {
   var _ref$apiData = _ref.apiData,
     apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
@@ -4579,31 +4411,29 @@ var ReportBody = function ReportBody(_ref) {
   var activeFilterChips = React.useMemo(function () {
     return getActiveFilterChips(apiData);
   }, [apiData]);
-  var chartBlock = exportMode ? /*#__PURE__*/jsxRuntime.jsx(ReportExportChartCard, {
-    item: reportData.mainChart,
-    chartWidth: EXPORT_CHART_W
-  }) : /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+  var chartBlock = /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
     container: true,
-    spacing: 2,
+    spacing: exportMode ? "6px" : 2,
     sx: {
-      mb: 0
+      mb: 0,
+      mt: exportMode ? "6px" : 0
     },
     children: /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
       item: _objectSpread2(_objectSpread2({}, reportData.mainChart), {}, {
-        height: 320
+        height: exportMode ? 250 : 320,
+        exportMode: exportMode
       }),
       index: 0,
       md: 12,
       isPremium: true,
       isPrimary: true,
-      metric: "Revenue",
-      type: "line"
+      metric: "Revenue"
     })
   });
   if (variant === "page1") {
     return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
       sx: {
-        px: exportMode ? 2 : 0,
+        px: exportMode ? 2.5 : 0,
         py: exportMode ? 1.5 : 0
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(ReportHeader, {
@@ -4620,21 +4450,35 @@ var ReportBody = function ReportBody(_ref) {
   if (variant === "page2") {
     return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
-        px: exportMode ? 2 : 0,
+        px: exportMode ? 2.5 : 0,
         py: exportMode ? 1.5 : 0
       },
       children: /*#__PURE__*/jsxRuntime.jsx(ReportDetailsSection, {
         reportData: reportData,
         dateName: dateName,
         exportMode: exportMode,
-        section: "top"
+        section: "campaigns"
       })
     });
   }
   if (variant === "page3") {
     return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
-        px: exportMode ? 2 : 0,
+        px: exportMode ? 2.5 : 0,
+        py: exportMode ? 1.5 : 0
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(ReportDetailsSection, {
+        reportData: reportData,
+        dateName: dateName,
+        exportMode: exportMode,
+        section: "middle"
+      })
+    });
+  }
+  if (variant === "page4") {
+    return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: {
+        px: exportMode ? 2.5 : 0,
         py: exportMode ? 1.5 : 0
       },
       children: /*#__PURE__*/jsxRuntime.jsx(ReportDetailsSection, {
@@ -4661,12 +4505,9 @@ var ReportBody = function ReportBody(_ref) {
 };
 
 var PAGE_W = 794;
-var PAGE_H = 1123;
 var pageStyle = {
   width: PAGE_W,
-  height: PAGE_H,
   background: "#F3F4F6",
-  overflow: "hidden",
   boxSizing: "border-box",
   fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
 };
@@ -4689,7 +4530,8 @@ var ReportExportLayout = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: ref,
       style: {
         display: "inline-flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        width: PAGE_W
       },
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         "data-export-page": "1",
@@ -4709,6 +4551,12 @@ var ReportExportLayout = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: /*#__PURE__*/jsxRuntime.jsx(ReportBody, _objectSpread2(_objectSpread2({}, bodyProps), {}, {
           variant: "page3"
         }))
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        "data-export-page": "4",
+        style: pageStyle,
+        children: /*#__PURE__*/jsxRuntime.jsx(ReportBody, _objectSpread2(_objectSpread2({}, bodyProps), {}, {
+          variant: "page4"
+        }))
       })]
     })
   });
@@ -4717,13 +4565,14 @@ ReportExportLayout.displayName = "ReportExportLayout";
 
 /**
  * Captures [data-export-page] elements and saves a multi-page A4 PDF.
+ * Each page is scaled to fit without cropping.
  */
 function exportReportPdf(_x, _x2) {
   return _exportReportPdf.apply(this, arguments);
 }
 function _exportReportPdf() {
   _exportReportPdf = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(container, filename) {
-    var pageEls, _yield$Promise$all, _yield$Promise$all2, jsPDF, html2canvasModule, html2canvas, doc, pdfW, pdfH, i, el, canvas, safeDate;
+    var pageEls, _yield$Promise$all, _yield$Promise$all2, jsPDF, html2canvasModule, html2canvas, doc, pdfW, pdfH, i, el, captureHeight, canvas, imgData, imgW, imgH, scale, drawW, drawH, offsetX, offsetY, safeDate;
     return _regenerator().w(function (_context) {
       while (1) switch (_context.n) {
         case 0:
@@ -4761,22 +4610,31 @@ function _exportReportPdf() {
             break;
           }
           el = pageEls[i];
+          captureHeight = el.scrollHeight || el.offsetHeight;
           _context.n = 5;
           return html2canvas(el, {
             scale: 2,
             useCORS: true,
             backgroundColor: "#F3F4F6",
             width: el.offsetWidth,
-            height: el.offsetHeight,
+            height: captureHeight,
             windowWidth: el.offsetWidth,
-            windowHeight: el.offsetHeight,
+            windowHeight: captureHeight,
             logging: false,
             foreignObjectRendering: false
           });
         case 5:
           canvas = _context.v;
+          imgData = canvas.toDataURL("image/png");
+          imgW = canvas.width;
+          imgH = canvas.height;
+          scale = Math.min(pdfW / imgW, pdfH / imgH);
+          drawW = imgW * scale;
+          drawH = imgH * scale;
+          offsetX = (pdfW - drawW) / 2;
+          offsetY = 0;
           if (i > 0) doc.addPage();
-          doc.addImage(canvas.toDataURL("image/png"), "PNG", 0, 0, pdfW, pdfH, undefined, "FAST");
+          doc.addImage(imgData, "PNG", offsetX, offsetY, drawW, drawH, undefined, "FAST");
         case 6:
           i++;
           _context.n = 4;
@@ -4860,7 +4718,7 @@ var NewOverview = function NewOverview(_ref) {
             case 1:
               _context.n = 2;
               return new Promise(function (r) {
-                return setTimeout(r, 600);
+                return setTimeout(r, 1500);
               });
             case 2:
               container = exportLayoutRef.current;
@@ -14610,7 +14468,7 @@ var MetricCard = function MetricCard(_ref) {
 };
 
 var OverallSection = function OverallSection(_ref) {
-  var _apiData$overviewStat, _apiData$overviewStat2, _apiData$overviewStat3, _apiData$overviewStat4, _apiData$overviewStat5, _apiData$overviewStat6, _apiData$overviewStat7, _apiData$overviewStat8, _apiData$overviewStat9, _apiData$overviewStat0, _apiData$overviewStat1, _apiData$overviewStat10, _apiData$roasCard, _apiData$roasCardPrev, _apiData$overviewStat11, _apiData$overviewStat12, _apiData$overviewStat13, _orderBumpData$chart, _orderBumpData$peakDa, _orderBumpData$peakDa2, _referralData$chartDa;
+  var _apiData$overviewStat, _apiData$overviewStat2, _apiData$overviewStat3, _apiData$overviewStat4, _apiData$overviewStat5, _apiData$overviewStat6, _apiData$overviewStat7, _apiData$overviewStat8, _apiData$overviewStat9, _apiData$overviewStat0, _apiData$overviewStat1, _apiData$overviewStat10, _apiData$roasCard, _apiData$roasCardPrev, _apiData$overviewStat11, _apiData$overviewStat12, _apiData$overviewStat13;
   var _ref$apiData = _ref.apiData,
     apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
     primaryCharts = _ref.primaryCharts,
@@ -15111,188 +14969,38 @@ var OverallSection = function OverallSection(_ref) {
         isPrimary: true,
         metric: activeMetric.includes("Raised") || activeMetric.includes("donation") ? "Revenue" : "Donors"
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
-      container: true,
-      spacing: "6px",
-      sx: {
-        mt: "6px"
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
-        item: true,
-        xs: 12,
-        md: 9,
-        sx: {
-          paddingTop: "0px !important"
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
-          title: "Active campaigns",
-          subtitle: "Live fundraisers ranked by velocity",
-          columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"
-          // "Status",
-          ],
-          rows: activeCampaignsData.map(function (campaign) {
-            return {
-              id: campaign.campaignName ? campaign.campaignName.split(" ").filter(Boolean).map(function (word) {
-                return word[0];
-              }).join("").toUpperCase().slice(0, 2) : "??",
-              name: campaign.title || "Untitled Campaign",
-              val1: "$".concat(formatNumber(campaign.collectedAmount || 0)),
-              type: "progress",
-              progress: Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100),
-              val3: formatNumber(campaign.uniqueDonationsCount || 0),
-              val4: "$".concat(formatNumber(campaign.avgGift || 0))
-            };
-          })
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
-        item: true,
-        xs: 12,
-        md: 3,
-        sx: {
-          display: "flex",
-          paddingTop: "0px !important",
-          marginTop: {
-            xs: "6px",
-            md: "0px"
-          }
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
-          title: "Donor mix",
-          subtitle: "Acquisition vs retention",
-          series: [newDonorsCount, returningDonorsCount],
-          labels: ["New donors", "Returning"],
-          colors: ["rgb(99, 99, 230)", "#10B981"],
-          centerLabel: "donors",
-          centerValue: totalDonorsMix.toString(),
-          items: [{
-            label: "New donors",
-            val: "".concat(newDonorsCount, " \xB7 ").concat(newDonorsPerc, "%"),
-            color: "rgb(99, 99, 230)"
-          }, {
-            label: "Returning",
-            val: "".concat(returningDonorsCount, " \xB7 ").concat(returningDonorsPerc, "%"),
-            color: "#10B981"
-          }],
-          bottomSummaryValue: "$".concat(avgGift),
-          bottomSummaryTrend: "".concat(donorMixPrev, "% vs ").concat(dateName || "last month"),
-          sx: {
-            width: "100%"
-          }
-        })
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-      sx: {
-        display: "grid",
-        gridTemplateColumns: {
-          xs: "1fr",
-          // 1 card
-          sm: "repeat(2, 1fr)",
-          // 2 cards
-          md: "repeat(4, 1fr)" // 4 cards
-        },
-        gap: "6px",
-        mt: "6px",
-        alignItems: "stretch"
+    }), /*#__PURE__*/jsxRuntime.jsx(OverallDetailsGrid, {
+      activeCampaignsRows: activeCampaignsData.map(function (campaign) {
+        return {
+          id: campaign.campaignName ? campaign.campaignName.split(" ").filter(Boolean).map(function (word) {
+            return word[0];
+          }).join("").toUpperCase().slice(0, 2) : "??",
+          name: campaign.title || "Untitled Campaign",
+          val1: "$".concat(formatNumber(campaign.collectedAmount || 0)),
+          type: "progress",
+          progress: Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100),
+          val3: formatNumber(campaign.uniqueDonationsCount || 0),
+          val4: "$".concat(formatNumber(campaign.avgGift || 0))
+        };
+      }),
+      donorMix: {
+        newDonors: newDonorsCount,
+        returningDonors: returningDonorsCount,
+        totalMix: totalDonorsMix,
+        newPct: newDonorsPerc,
+        retPct: returningDonorsPerc,
+        avgGift: avgGift,
+        donorMixPrev: donorMixPrev
       },
-      children: [/*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
-        sx: {
-          maxHeight: 280
-        },
-        donationTypeData: donationTypeData
-      }), /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
-        sx: {
-          maxHeight: 280
-        },
-        donorGeographyData: donorGeographyData
-      }), /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {
-        sx: {
-          maxHeight: 280
-        },
-        refundsChargebacksData: refundsChargebacksData
-      }), /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {
-        sx: {
-          maxHeight: 280
-        },
-        trafficSourceData: (trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.data) || [],
-        total: "$".concat(formatNumber((trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.totalRevenue) || 0))
-      }), /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
-        title: "Order Bump",
-        subtitle: "Revenue trend \xB7 last 30 days",
-        value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalRevenue) || 0)),
-        trend: "".concat((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.growthPercentage) >= 0 ? "▲" : "▼", " ").concat(Math.abs((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.growthPercentage) || 0).toFixed(1), "% vs last month"),
-        chartData: (orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$chart = orderBumpData.chart) === null || _orderBumpData$chart === void 0 ? void 0 : _orderBumpData$chart.map(function (item) {
-          return {
-            label: item.label,
-            value: item.revenue
-          };
-        })) || [],
-        footerMetrics: [{
-          label: "Avg / Day",
-          value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.averagePerDay) || 0))
-        }, {
-          label: "Orders",
-          value: formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalOrders) || 0)
-        }, {
-          label: "Peak Day",
-          value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa = orderBumpData.peakDay) === null || _orderBumpData$peakDa === void 0 ? void 0 : _orderBumpData$peakDa.amount) || 0)),
-          subValue: orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa2 = orderBumpData.peakDay) === null || _orderBumpData$peakDa2 === void 0 ? void 0 : _orderBumpData$peakDa2.date
-        }],
-        sx: {
-          maxHeight: 280
-        },
-        bottomSection: true
-      }), /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
-        title: "Upsell",
-        subtitle: "Acceptance & raised",
-        acceptanceRate: (upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0,
-        acceptanceVal: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.totalUpsellsAttached) || 0)),
-        acceptanceTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) || 0).toFixed(1), "%"),
-        raisedVal: "$".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raised) || 0)),
-        raisedTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) || 0).toFixed(1), "%"),
-        sx: {
-          maxHeight: 280
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
-        title: "Downsell",
-        subtitle: "Acceptance & raised",
-        acceptanceRate: (downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0,
-        acceptanceVal: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0), "%"),
-        acceptanceTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) || 0), "%"),
-        raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raised) || 0)),
-        raisedTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) || 0), "%"),
-        sx: {
-          maxHeight: 280
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
-        title: "Referrals",
-        subtitle: "Revenue trend \xB7 last 30 days",
-        value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalRevenue) || 0)),
-        trend: "\u25B2 ".concat((referralData === null || referralData === void 0 ? void 0 : referralData.growthPercentage) || 0, "% vs last month"),
-        chartData: (referralData === null || referralData === void 0 || (_referralData$chartDa = referralData.chartData) === null || _referralData$chartDa === void 0 ? void 0 : _referralData$chartDa.map(function (item) {
-          return {
-            label: item.date,
-            value: item.revenue
-          };
-        })) || []
-        // chartData={
-        //   referralData?.chartData?.map(item => item.revenue) || []
-        // }
-        ,
-        footerMetrics: [{
-          label: "Referrers",
-          value: formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalReferrers) || 0)
-        }, {
-          label: "Avg gift",
-          value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.averageGift) || 0))
-        }, {
-          label: "Conv. rate",
-          value: "".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.conversionRate) || 0), "%")
-        }],
-        sx: {
-          maxHeight: 280
-        },
-        bottomSection: true
-      })]
+      donationTypeData: donationTypeData,
+      donorGeographyData: donorGeographyData,
+      trafficSourceData: trafficSourceData,
+      orderBumpData: orderBumpData,
+      upsellData: upsellData,
+      downsellData: downsellData,
+      referralData: referralData,
+      refundsChargebacksData: refundsChargebacksData,
+      dateName: dateName
     })]
   });
 };