@ammarkhalidfarooq/dashboard-package 0.5.36 → 0.5.38

package/dist/index.es.js

@@ -593,7 +593,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
       },
       children: /*#__PURE__*/jsxs(CardContent, {
         sx: {
-          p: 3,
+          p: item.exportMode ? 2 : 3,
           flexGrow: 1,
           display: "flex",
           flexDirection: "column"
@@ -603,7 +603,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__*/jsxs(Box, {
             sx: {
@@ -695,7 +695,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
             },
             children: item.hideControls ? item.series && /*#__PURE__*/jsx(Box, {
               sx: {
-                display: {
+                display: item.exportMode ? "flex" : {
                   xs: "none",
                   sm: "flex"
                 },
@@ -900,8 +900,6 @@ function formatNumber(num) {
 }
 
 var PURPLE = "#6363E6";
-var GREEN = "#10B981";
-var BLUE = "#06B6D4";
 var REPORT_COLORS = {
   purple: PURPLE};
 var formatTrend = function formatTrend(value) {
@@ -1027,7 +1025,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
@@ -1079,37 +1077,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,
@@ -1143,20 +1110,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,
@@ -1465,14 +1429,16 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
     rows = _ref$rows === void 0 ? [] : _ref$rows,
     _ref$gridTemplateColu = _ref.gridTemplateColumns,
     gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu,
-    height = _ref.height;
+    height = _ref.height,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact;
   return /*#__PURE__*/jsxs(Box, {
     sx: {
       bgcolor: "#fff",
-      borderRadius: 4,
+      borderRadius: compact ? 3 : 4,
       border: "1px solid #f0f0f0",
-      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      p: 3,
+      boxShadow: compact ? "0 2px 12px rgba(0,0,0,0.05)" : "0 4px 24px rgba(0,0,0,0.06)",
+      p: compact ? 1.5 : 3,
       height: height
       // height: "100%",
     },
@@ -1481,20 +1447,20 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
         display: "flex",
         justifyContent: "space-between",
         alignItems: "flex-start",
-        mb: 3
+        mb: compact ? 1.25 : 3
       },
       children: [/*#__PURE__*/jsxs(Box, {
         children: [/*#__PURE__*/jsx(Typography, {
           sx: {
             fontWeight: 700,
-            fontSize: "18px",
+            fontSize: compact ? "14px" : "18px",
             color: "#000",
             textAlign: "left"
           },
           children: title
         }), /*#__PURE__*/jsx(Typography, {
           sx: {
-            fontSize: "13px",
+            fontSize: compact ? "10px" : "13px",
             color: "rgba(0, 0, 0, 0.4)",
             mt: 0.2
           },
@@ -1502,7 +1468,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
         })]
       }), actionLabel && /*#__PURE__*/jsx(Typography, {
         sx: {
-          fontSize: "13px",
+          fontSize: compact ? "10px" : "13px",
           fontWeight: 600,
           color: "rgb(99, 99, 230)",
           cursor: "pointer"
@@ -1511,24 +1477,24 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
       })]
     }), /*#__PURE__*/jsx(Box, {
       sx: {
-        overflowX: "auto"
+        overflowX: compact ? "hidden" : "auto"
       },
       children: /*#__PURE__*/jsxs(Box, {
         sx: {
-          minWidth: "600px"
+          minWidth: compact ? 0 : "600px"
         },
         children: [/*#__PURE__*/jsx(Box, {
           sx: {
             display: "grid",
             gridTemplateColumns: gridTemplateColumns,
-            gap: 2,
-            pb: 2.5,
+            gap: compact ? 1 : 2,
+            pb: compact ? 1 : 2.5,
             borderBottom: "1px solid #f0f0f0"
           },
           children: columns.map(function (header) {
             return /*#__PURE__*/jsx(Typography, {
               sx: {
-                fontSize: "12px",
+                fontSize: compact ? "9px" : "12px",
                 color: "rgba(0, 0, 0, 0.4)",
                 fontWeight: 500,
                 textAlign: "left"
@@ -1546,8 +1512,8 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
               sx: {
                 display: "grid",
                 gridTemplateColumns: gridTemplateColumns,
-                gap: 2,
-                py: 1.2,
+                gap: compact ? 1 : 2,
+                py: compact ? 0.5 : 1.2,
                 alignItems: "center",
                 borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
               },
@@ -1559,9 +1525,9 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 },
                 children: [row.id && /*#__PURE__*/jsx(Avatar, {
                   sx: {
-                    width: 28,
-                    height: 28,
-                    fontSize: "10px",
+                    width: compact ? 22 : 28,
+                    height: compact ? 22 : 28,
+                    fontSize: compact ? "8px" : "10px",
                     fontWeight: 700,
                     bgcolor: row.avatarBg || "#F3F4F6",
                     color: "rgb(99, 99, 230)"
@@ -1580,7 +1546,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   sx: {
-                    fontSize: "12px",
+                    fontSize: compact ? "10px" : "12px",
                     fontWeight: 700,
                     color: "#000"
                   },
@@ -1588,7 +1554,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 })]
               }), /*#__PURE__*/jsx(Typography, {
                 sx: {
-                  fontSize: "13px",
+                  fontSize: compact ? "10px" : "13px",
                   fontWeight: 600,
                   color: "#000",
                   textAlign: "left"
@@ -1608,7 +1574,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                     variant: "determinate",
                     value: Math.min(100, Math.max(0, (_row$progress = row.progress) !== null && _row$progress !== void 0 ? _row$progress : 0)),
                     sx: {
-                      height: 8,
+                      height: compact ? 6 : 8,
                       borderRadius: 4,
                       bgcolor: "#F3F4F6",
                       "& .MuiLinearProgress-bar": {
@@ -1619,7 +1585,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                   })
                 }), /*#__PURE__*/jsxs(Typography, {
                   sx: {
-                    fontSize: "11px",
+                    fontSize: compact ? "9px" : "11px",
                     color: "rgba(0, 0, 0, 0.4)",
                     minWidth: "30px"
                   },
@@ -1635,7 +1601,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 children: row.val2
               }), /*#__PURE__*/jsx(Typography, {
                 sx: {
-                  fontSize: "13px",
+                  fontSize: compact ? "10px" : "13px",
                   fontWeight: row.highlightVal3 ? 700 : 500,
                   color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
                   textAlign: "left"
@@ -1690,12 +1656,12 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 }) : /*#__PURE__*/jsx(Box, {
                   sx: {
                     display: "inline-block",
-                    px: 1.5,
-                    py: 0.5,
+                    px: compact ? 1 : 1.5,
+                    py: compact ? 0.25 : 0.5,
                     borderRadius: "100px",
                     bgcolor: row.statusBg,
                     color: row.statusColor,
-                    fontSize: "11px",
+                    fontSize: compact ? "9px" : "11px",
                     fontWeight: 700,
                     textAlign: "center"
                   },
@@ -1741,6 +1707,8 @@ var DonorMixCard = function DonorMixCard(_ref) {
     bottomSummaryValue = _ref$bottomSummaryVal === void 0 ? "$130.58" : _ref$bottomSummaryVal,
     _ref$bottomSummaryTre = _ref.bottomSummaryTrend,
     bottomSummaryTrend = _ref$bottomSummaryTre === void 0 ? "8.4% vs last month" : _ref$bottomSummaryTre,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? {} : _ref$sx;
   var chartOptions = {
@@ -1809,7 +1777,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
       borderRadius: 4,
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      p: 3,
+      p: compact ? 1.5 : 3,
       // height: "100%",
       // width: "100%",
       display: "flex",
@@ -1820,16 +1788,15 @@ var DonorMixCard = function DonorMixCard(_ref) {
       children: [/*#__PURE__*/jsx(Typography, {
         sx: {
           fontWeight: 700,
-          fontSize: "18px",
+          fontSize: compact ? "14px" : "18px",
           color: "#000",
           textAlign: "left"
         },
         children: title
       }), /*#__PURE__*/jsx(Typography, {
         sx: {
-          fontSize: "13px",
+          fontSize: compact ? "10px" : "13px",
           color: "rgba(0, 0, 0, 0.4)",
-          // mt: 0.2,
           textAlign: "left"
         },
         children: subtitle
@@ -1837,7 +1804,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
     }), /*#__PURE__*/jsx(Box, {
       sx: {
         position: "relative",
-        height: "180px",
+        height: compact ? "110px" : "180px",
         // mb: 1,
         display: "flex",
         justifyContent: "center"
@@ -1846,7 +1813,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
         options: chartOptions,
         series: series,
         type: "donut",
-        width: "210"
+        width: compact ? "140" : "210"
       })
     }), /*#__PURE__*/jsxs(Box, {
       sx: {},
@@ -1855,7 +1822,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
           sx: {
             display: "flex",
             justifyContent: "space-between",
-            mb: idx === items.length - 1 ? showBottomSummary ? 1 : 0 : 1
+            mb: idx === items.length - 1 ? showBottomSummary ? compact ? 0.5 : 1 : 0 : compact ? 0.5 : 1
           },
           children: [/*#__PURE__*/jsxs(Box, {
             sx: {
@@ -1872,7 +1839,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
               }
             }), /*#__PURE__*/jsx(Typography, {
               sx: {
-                fontSize: "13px",
+                fontSize: compact ? "10px" : "13px",
                 fontWeight: 500,
                 color: "rgba(0, 0, 0, 0.4)"
               },
@@ -1880,7 +1847,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
             })]
           }), /*#__PURE__*/jsx(Typography, {
             sx: {
-              fontSize: "13px",
+              fontSize: compact ? "10px" : "13px",
               fontWeight: 700,
               color: "#111"
             },
@@ -1892,7 +1859,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
           // display: "flex",
           // justifyContent: "space-between",
           // alignItems: "center",
-          pt: 2,
+          pt: compact ? 1 : 2,
           borderTop: "1px solid #f0f0f0",
           textAlign: "left"
         },
@@ -2142,7 +2109,9 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
     footerMetrics = _ref$footerMetrics === void 0 ? [] : _ref$footerMetrics,
     sx = _ref.sx,
     _ref$bottomSection = _ref.bottomSection,
-    bottomSection = _ref$bottomSection === void 0 ? false : _ref$bottomSection;
+    bottomSection = _ref$bottomSection === void 0 ? false : _ref$bottomSection,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact;
   // Extract values for chart series
   var series = [{
     name: title,
@@ -2216,8 +2185,8 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
   };
   return /*#__PURE__*/jsxs(Card, {
     sx: _objectSpread2({
-      p: 3,
-      borderRadius: 4,
+      p: compact ? 1.25 : 3,
+      borderRadius: compact ? 3 : 4,
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       bgcolor: "#fff",
@@ -2231,7 +2200,7 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
       children: [/*#__PURE__*/jsx(Typography, {
         sx: {
           fontWeight: 700,
-          fontSize: "16px",
+          fontSize: compact ? "13px" : "16px",
           color: "#000",
           textAlign: "left"
         },
@@ -2347,7 +2316,9 @@ var MetricDonutCard = function MetricDonutCard(_ref) {
     raisedTrend = _ref.raisedTrend,
     _ref$chartColors = _ref.chartColors,
     chartColors = _ref$chartColors === void 0 ? ["rgb(99, 99, 230)", "#88bfd290"] : _ref$chartColors,
-    sx = _ref.sx;
+    sx = _ref.sx,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact;
   var chartOptions = {
     chart: {
       type: "radialBar",
@@ -2403,8 +2374,8 @@ var MetricDonutCard = function MetricDonutCard(_ref) {
   var series = [acceptanceRate];
   return /*#__PURE__*/jsxs(Card, {
     sx: _objectSpread2({
-      p: 3,
-      borderRadius: 4,
+      p: compact ? 1.25 : 3,
+      borderRadius: compact ? 3 : 4,
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       bgcolor: "#fff",
@@ -2417,7 +2388,7 @@ var MetricDonutCard = function MetricDonutCard(_ref) {
       children: [/*#__PURE__*/jsx(Typography, {
         sx: {
           fontWeight: 700,
-          fontSize: "16px",
+          fontSize: compact ? "13px" : "16px",
           color: "#000",
           textAlign: "left"
         },
@@ -2433,9 +2404,9 @@ var MetricDonutCard = function MetricDonutCard(_ref) {
       })]
     }), /*#__PURE__*/jsx(Box, {
       sx: {
-        height: 160,
+        height: compact ? 90 : 160,
         position: "relative",
-        mt: 1,
+        mt: compact ? 0.5 : 1,
         display: "flex",
         justifyContent: "center"
       },
@@ -4133,15 +4104,269 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   });
 };
 
-var cardHeight = function cardHeight(exportMode) {
-  return exportMode ? 210 : 300;
+var CARD_SX = {
+  maxHeight: 280
 };
+var GRID_GAP = "6px";
+var fourColGridSx = function fourColGridSx(exportMode) {
+  return {
+    display: "grid",
+    gridTemplateColumns: exportMode ? "repeat(4, 1fr)" : {
+      xs: "1fr",
+      sm: "repeat(2, 1fr)",
+      md: "repeat(4, 1fr)"
+    },
+    gap: GRID_GAP,
+    mt: GRID_GAP,
+    alignItems: "stretch"
+  };
+};
+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__*/jsxs(Box, {
+    sx: {
+      display: "grid",
+      gridTemplateColumns: "2.25fr 1fr",
+      gap: GRID_GAP,
+      alignItems: "stretch"
+    },
+    children: [/*#__PURE__*/jsx(ActiveCampaignsCard, {
+      title: "Active campaigns",
+      subtitle: "Live fundraisers ranked by velocity",
+      columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
+      rows: activeCampaignsRows
+    }), /*#__PURE__*/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%"
+      }
+    })]
+  }) : /*#__PURE__*/jsxs(Grid, {
+    container: true,
+    spacing: GRID_GAP,
+    sx: {
+      mt: GRID_GAP
+    },
+    children: [/*#__PURE__*/jsx(Grid, {
+      item: true,
+      xs: 12,
+      md: 9,
+      sx: {
+        paddingTop: "0px !important"
+      },
+      children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
+        title: "Active campaigns",
+        subtitle: "Live fundraisers ranked by velocity",
+        columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
+        rows: activeCampaignsRows
+      })
+    }), /*#__PURE__*/jsx(Grid, {
+      item: true,
+      xs: 12,
+      md: 3,
+      sx: {
+        display: "flex",
+        paddingTop: "0px !important",
+        marginTop: {
+          xs: GRID_GAP,
+          md: 0
+        }
+      },
+      children: /*#__PURE__*/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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(DonationTypeBarChart, {
+      sx: CARD_SX,
+      donationTypeData: donationTypeData
+    }), /*#__PURE__*/jsx(PaidDonorGeographyCard, {
+      sx: CARD_SX,
+      donorGeographyData: donorGeographyData
+    }), /*#__PURE__*/jsx(RefundsChargebacksCard, {
+      sx: CARD_SX,
+      refundsChargebacksData: refundsChargebacksData
+    }), /*#__PURE__*/jsx(TrafficSourceCard, {
+      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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/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: CARD_SX,
+      bottomSection: true
+    }), /*#__PURE__*/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: CARD_SX
+    }), /*#__PURE__*/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: CARD_SX
+    }), /*#__PURE__*/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
+        };
+      })) || [],
+      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: CARD_SX,
+      bottomSection: true
+    })]
+  });
+  if (section === "campaigns") return /*#__PURE__*/jsx(Box, {
+    children: campaignsRow
+  });
+  if (section === "middle") return /*#__PURE__*/jsx(Box, {
+    sx: fourColGridSx(exportMode),
+    children: middleCards
+  });
+  if (section === "bottom") return /*#__PURE__*/jsx(Box, {
+    sx: fourColGridSx(exportMode),
+    children: bottomCards
+  });
+  return /*#__PURE__*/jsxs(Box, {
+    children: [campaignsRow, /*#__PURE__*/jsx(Box, {
+      sx: fourColGridSx(exportMode),
+      children: middleCards
+    }), /*#__PURE__*/jsx(Box, {
+      sx: fourColGridSx(exportMode),
+      children: bottomCards
+    })]
+  });
+};
+
 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;
+    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,
@@ -4152,161 +4377,20 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
     downsellData = reportData.downsellData,
     referralData = reportData.referralData,
     refundsChargebacksData = reportData.refundsChargebacksData;
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      mt: exportMode ? 0 : 2
-    },
-    children: [/*#__PURE__*/jsxs(Grid, {
-      container: true,
-      spacing: exportMode ? 1 : 2,
-      sx: {
-        mb: exportMode ? 1 : 2
-      },
-      children: [/*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        lg: 9,
-        children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
-          title: "Active campaigns",
-          subtitle: "Live fundraisers ranked by velocity",
-          actionLabel: "View all",
-          columns: ["Campaign", "Raised", "Progress", "Donors", "Status"],
-          gridTemplateColumns: "2.5fr 1fr 1.5fr 0.7fr 0.9fr",
-          rows: activeCampaigns
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        lg: 3,
-        children: /*#__PURE__*/jsx(DonorMixCard, {
-          title: "Donor mix",
-          subtitle: "Acquisition vs retention",
-          series: [donorMix.newDonors, donorMix.returningDonors],
-          labels: ["New donors", "Returning"],
-          colors: ["#10B981", "rgb(99, 99, 230)"],
-          centerLabel: "donors",
-          centerValue: String(donorMix.totalMix),
-          items: [{
-            label: "New donors",
-            val: "".concat(donorMix.newDonors, " \xB7 ").concat(donorMix.newPct, "%"),
-            color: "#10B981"
-          }, {
-            label: "Returning",
-            val: "".concat(donorMix.returningDonors, " \xB7 ").concat(donorMix.retPct, "%"),
-            color: "rgb(99, 99, 230)"
-          }],
-          bottomSummaryValue: "$".concat(formatNumber(donorMix.avgGift)),
-          bottomSummaryTrend: "".concat(donorMix.donorMixPrev, "% vs ").concat(dateName || "last month"),
-          sx: {
-            height: "100%"
-          }
-        })
-      })]
-    }), /*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: "grid",
-        gridTemplateColumns: exportMode ? "repeat(4, 1fr)" : {
-          xs: "1fr",
-          sm: "1fr 1fr",
-          lg: "repeat(4, 1fr)"
-        },
-        gap: exportMode ? 1 : 2
-      },
-      children: [/*#__PURE__*/jsx(DonationTypeBarChart, {
-        sx: {
-          maxHeight: cardHeight(exportMode)
-        },
-        donationTypeData: donationTypeData
-      }), /*#__PURE__*/jsx(PaidDonorGeographyCard, {
-        sx: {
-          maxHeight: cardHeight(exportMode)
-        },
-        donorGeographyData: donorGeographyData
-      }), /*#__PURE__*/jsx(RefundsChargebacksCard, {
-        sx: {
-          maxHeight: cardHeight(exportMode)
-        },
-        refundsChargebacksData: refundsChargebacksData
-      }), /*#__PURE__*/jsx(TrafficSourceCard, {
-        sx: {
-          maxHeight: cardHeight(exportMode)
-        },
-        trafficSourceData: (trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.data) || [],
-        total: "$".concat(formatNumber((trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.totalRevenue) || 0))
-      }), /*#__PURE__*/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: "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)
-        }],
-        sx: {
-          maxHeight: cardHeight(exportMode)
-        },
-        bottomSection: true
-      }), /*#__PURE__*/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: cardHeight(exportMode)
-        }
-      }), /*#__PURE__*/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: cardHeight(exportMode)
-        }
-      }), /*#__PURE__*/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
-          };
-        })) || [],
-        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: cardHeight(exportMode)
-        },
-        bottomSection: true
-      })]
-    })]
+  return /*#__PURE__*/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
   });
 };
 
@@ -4327,27 +4411,28 @@ var ReportBody = function ReportBody(_ref) {
   }, [apiData]);
   var chartBlock = /*#__PURE__*/jsx(Grid, {
     container: true,
-    spacing: exportMode ? 1 : 2,
+    spacing: exportMode ? "6px" : 2,
     sx: {
-      mb: 0
+      mb: 0,
+      mt: exportMode ? "6px" : 0
     },
     children: /*#__PURE__*/jsx(RenderChartCard, {
       item: _objectSpread2(_objectSpread2({}, reportData.mainChart), {}, {
-        height: exportMode ? 210 : 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__*/jsxs(Box, {
       sx: {
         px: exportMode ? 2.5 : 0,
-        py: exportMode ? 2 : 0
+        py: exportMode ? 1.5 : 0
       },
       children: [/*#__PURE__*/jsx(ReportHeader, {
         dateName: dateName,
@@ -4364,12 +4449,41 @@ var ReportBody = function ReportBody(_ref) {
     return /*#__PURE__*/jsx(Box, {
       sx: {
         px: exportMode ? 2.5 : 0,
-        py: exportMode ? 2 : 0
+        py: exportMode ? 1.5 : 0
       },
       children: /*#__PURE__*/jsx(ReportDetailsSection, {
         reportData: reportData,
         dateName: dateName,
-        exportMode: exportMode
+        exportMode: exportMode,
+        section: "campaigns"
+      })
+    });
+  }
+  if (variant === "page3") {
+    return /*#__PURE__*/jsx(Box, {
+      sx: {
+        px: exportMode ? 2.5 : 0,
+        py: exportMode ? 1.5 : 0
+      },
+      children: /*#__PURE__*/jsx(ReportDetailsSection, {
+        reportData: reportData,
+        dateName: dateName,
+        exportMode: exportMode,
+        section: "middle"
+      })
+    });
+  }
+  if (variant === "page4") {
+    return /*#__PURE__*/jsx(Box, {
+      sx: {
+        px: exportMode ? 2.5 : 0,
+        py: exportMode ? 1.5 : 0
+      },
+      children: /*#__PURE__*/jsx(ReportDetailsSection, {
+        reportData: reportData,
+        dateName: dateName,
+        exportMode: exportMode,
+        section: "bottom"
       })
     });
   }
@@ -4382,18 +4496,16 @@ var ReportBody = function ReportBody(_ref) {
       metrics: reportData.metrics
     }), chartBlock, /*#__PURE__*/jsx(ReportDetailsSection, {
       reportData: reportData,
-      dateName: dateName
+      dateName: dateName,
+      section: "all"
     })]
   });
 };
 
 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"
 };
@@ -4416,7 +4528,8 @@ var ReportExportLayout = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: ref,
       style: {
         display: "inline-flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        width: PAGE_W
       },
       children: [/*#__PURE__*/jsx("div", {
         "data-export-page": "1",
@@ -4430,6 +4543,18 @@ var ReportExportLayout = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: /*#__PURE__*/jsx(ReportBody, _objectSpread2(_objectSpread2({}, bodyProps), {}, {
           variant: "page2"
         }))
+      }), /*#__PURE__*/jsx("div", {
+        "data-export-page": "3",
+        style: pageStyle,
+        children: /*#__PURE__*/jsx(ReportBody, _objectSpread2(_objectSpread2({}, bodyProps), {}, {
+          variant: "page3"
+        }))
+      }), /*#__PURE__*/jsx("div", {
+        "data-export-page": "4",
+        style: pageStyle,
+        children: /*#__PURE__*/jsx(ReportBody, _objectSpread2(_objectSpread2({}, bodyProps), {}, {
+          variant: "page4"
+        }))
       })]
     })
   });
@@ -4438,13 +4563,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:
@@ -4482,22 +4608,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;
@@ -4581,7 +4716,7 @@ var NewOverview = function NewOverview(_ref) {
             case 1:
               _context.n = 2;
               return new Promise(function (r) {
-                return setTimeout(r, 1200);
+                return setTimeout(r, 1500);
               });
             case 2:
               container = exportLayoutRef.current;
@@ -4819,9 +4954,9 @@ var NewOverview = function NewOverview(_ref) {
         position: "fixed",
         top: 0,
         left: 0,
+        transform: "translateX(-10000px)",
         zIndex: -1,
         pointerEvents: "none",
-        opacity: 0.01,
         overflow: "hidden"
       },
       children: /*#__PURE__*/jsx(ReportExportLayout, {
@@ -14331,7 +14466,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,
@@ -14832,188 +14967,38 @@ var OverallSection = function OverallSection(_ref) {
         isPrimary: true,
         metric: activeMetric.includes("Raised") || activeMetric.includes("donation") ? "Revenue" : "Donors"
       })
-    }), /*#__PURE__*/jsxs(Grid, {
-      container: true,
-      spacing: "6px",
-      sx: {
-        mt: "6px"
-      },
-      children: [/*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        md: 9,
-        sx: {
-          paddingTop: "0px !important"
-        },
-        children: /*#__PURE__*/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__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        md: 3,
-        sx: {
-          display: "flex",
-          paddingTop: "0px !important",
-          marginTop: {
-            xs: "6px",
-            md: "0px"
-          }
-        },
-        children: /*#__PURE__*/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__*/jsxs(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__*/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__*/jsx(DonationTypeBarChart, {
-        sx: {
-          maxHeight: 280
-        },
-        donationTypeData: donationTypeData
-      }), /*#__PURE__*/jsx(PaidDonorGeographyCard, {
-        sx: {
-          maxHeight: 280
-        },
-        donorGeographyData: donorGeographyData
-      }), /*#__PURE__*/jsx(RefundsChargebacksCard, {
-        sx: {
-          maxHeight: 280
-        },
-        refundsChargebacksData: refundsChargebacksData
-      }), /*#__PURE__*/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__*/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__*/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__*/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__*/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
     })]
   });
 };