@ammarkhalidfarooq/dashboard-package 0.5.36 → 0.5.37

package/dist/index.es.js

@@ -1465,14 +1465,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 +1483,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 +1504,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 +1513,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 +1548,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 +1561,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 +1582,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   sx: {
-                    fontSize: "12px",
+                    fontSize: compact ? "10px" : "12px",
                     fontWeight: 700,
                     color: "#000"
                   },
@@ -1588,7 +1590,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 })]
               }), /*#__PURE__*/jsx(Typography, {
                 sx: {
-                  fontSize: "13px",
+                  fontSize: compact ? "10px" : "13px",
                   fontWeight: 600,
                   color: "#000",
                   textAlign: "left"
@@ -1608,7 +1610,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 +1621,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 +1637,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 +1692,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 +1743,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 +1813,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 +1824,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 +1840,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 +1849,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
         options: chartOptions,
         series: series,
         type: "donut",
-        width: "210"
+        width: compact ? "140" : "210"
       })
     }), /*#__PURE__*/jsxs(Box, {
       sx: {},
@@ -1855,7 +1858,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 +1875,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 +1883,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
             })]
           }), /*#__PURE__*/jsx(Typography, {
             sx: {
-              fontSize: "13px",
+              fontSize: compact ? "10px" : "13px",
               fontWeight: 700,
               color: "#111"
             },
@@ -1892,7 +1895,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 +2145,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 +2221,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 +2236,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 +2352,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 +2410,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 +2424,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 +2440,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"
       },
@@ -4134,14 +4141,16 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
 };
 
 var cardHeight = function cardHeight(exportMode) {
-  return exportMode ? 210 : 300;
+  return exportMode ? 158 : 300;
 };
 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,164 +4161,407 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
     downsellData = reportData.downsellData,
     referralData = reportData.referralData,
     refundsChargebacksData = reportData.refundsChargebacksData;
+  var gridSx = {
+    display: "grid",
+    gridTemplateColumns: exportMode ? "repeat(4, 1fr)" : {
+      xs: "1fr",
+      sm: "1fr 1fr",
+      lg: "repeat(4, 1fr)"
+    },
+    gap: exportMode ? 0.75 : 2
+  };
+  var cardSx = {
+    maxHeight: cardHeight(exportMode),
+    minHeight: exportMode ? cardHeight(exportMode) : undefined
+  };
+  var campaignsRow = /*#__PURE__*/jsxs(Box, {
+    sx: {
+      display: "grid",
+      gridTemplateColumns: exportMode ? "1fr 200px" : {
+        xs: "1fr",
+        lg: "2.25fr 1fr"
+      },
+      gap: exportMode ? 0.75 : 2,
+      mb: exportMode ? 0.75 : 2,
+      alignItems: "stretch"
+    },
+    children: [/*#__PURE__*/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
+    }), /*#__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"),
+      compact: exportMode,
+      sx: {
+        height: "100%"
+      }
+    })]
+  });
+  var middleCards = /*#__PURE__*/jsxs(Box, {
+    sx: gridSx,
+    children: [/*#__PURE__*/jsx(DonationTypeBarChart, {
+      sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
+        p: 1.25,
+        borderRadius: 3
+      }),
+      donationTypeData: donationTypeData
+    }), /*#__PURE__*/jsx(PaidDonorGeographyCard, {
+      sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
+        p: 1.25,
+        borderRadius: 3
+      }),
+      donorGeographyData: donorGeographyData
+    }), /*#__PURE__*/jsx(RefundsChargebacksCard, {
+      sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
+        p: 1.25,
+        borderRadius: 3
+      }),
+      refundsChargebacksData: refundsChargebacksData
+    }), /*#__PURE__*/jsx(TrafficSourceCard, {
+      sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
+        p: 1.25,
+        borderRadius: 3
+      }),
+      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(Box, {
+    sx: gridSx,
+    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: "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: cardSx,
+      bottomSection: true,
+      compact: exportMode
+    }), /*#__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: cardSx,
+      compact: 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: cardSx,
+      compact: 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: cardSx,
+      bottomSection: true,
+      compact: exportMode
+    })]
+  });
+  if (section === "top") {
+    return /*#__PURE__*/jsxs(Box, {
+      children: [campaignsRow, middleCards]
+    });
+  }
+  if (section === "bottom") {
+    return /*#__PURE__*/jsx(Box, {
+      children: bottomCards
+    });
+  }
   return /*#__PURE__*/jsxs(Box, {
     sx: {
       mt: exportMode ? 0 : 2
     },
-    children: [/*#__PURE__*/jsxs(Grid, {
-      container: true,
-      spacing: exportMode ? 1 : 2,
+    children: [campaignsRow, middleCards, /*#__PURE__*/jsx(Box, {
       sx: {
-        mb: exportMode ? 1 : 2
+        mt: exportMode ? 0.75 : 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, {
+      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 (!allVals.length) {
+    return /*#__PURE__*/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;
+  });
+  var step = Math.max(1, Math.floor(categories.length / 6));
+  var shownCats = categories.filter(function (_, i) {
+    return i % step === 0 || i === categories.length - 1;
+  });
+  return /*#__PURE__*/jsxs("svg", {
+    width: width,
+    height: height,
+    style: {
+      display: "block"
+    },
+    children: [yTicks.map(function (v, i) {
+      var y = yp(v);
+      return /*#__PURE__*/jsxs("g", {
+        children: [/*#__PURE__*/jsx("line", {
+          x1: PL,
+          y1: y,
+          x2: width - PR,
+          y2: y,
+          stroke: "#E5E7EB",
+          strokeWidth: 1
+        }), /*#__PURE__*/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__*/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__*/jsx("text", {
+        x: x,
+        y: height - 6,
+        textAnchor: "middle",
+        fontSize: 10,
+        fill: "#9CA3AF",
+        children: label
+      }, i);
+    })]
+  });
+};
+
+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__*/jsx(Card, {
+    sx: {
+      width: "100%",
+      boxShadow: "0 2px 12px rgba(0,0,0,0.05)",
+      borderRadius: 3,
+      border: "1px solid #f0f0f0"
+    },
+    children: /*#__PURE__*/jsxs(CardContent, {
       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)
+        p: 2,
+        "&:last-child": {
+          pb: 2
         }
-      }), /*#__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), "%")
-        }],
+      },
+      children: [/*#__PURE__*/jsxs(Box, {
         sx: {
-          maxHeight: cardHeight(exportMode)
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          mb: 1
         },
-        bottomSection: true
+        children: [/*#__PURE__*/jsxs(Box, {
+          children: [/*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontWeight: 700,
+              fontSize: 15,
+              color: "#000",
+              mb: 0.25
+            },
+            children: item.label
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: 11,
+              color: "rgba(0,0,0,0.4)",
+              mb: 1
+            },
+            children: item.subtitle || "Last 30 days · daily aggregation"
+          }), /*#__PURE__*/jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            },
+            children: [/*#__PURE__*/jsx(Typography, {
+              sx: {
+                fontWeight: 700,
+                fontSize: 22,
+                color: "#000"
+              },
+              children: item.value
+            }), item.trend && /*#__PURE__*/jsxs(Box, {
+              sx: {
+                bgcolor: "#D1FAE5",
+                color: "#047857",
+                px: 1,
+                py: 0.25,
+                borderRadius: "100px",
+                fontSize: 11,
+                fontWeight: 600
+              },
+              children: ["\u25B2 ", item.trend]
+            })]
+          })]
+        }), /*#__PURE__*/jsx(Box, {
+          sx: {
+            display: "flex",
+            gap: 1.5,
+            flexShrink: 0
+          },
+          children: LEGEND.map(function (leg) {
+            return /*#__PURE__*/jsxs(Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5
+              },
+              children: [/*#__PURE__*/jsx(Box, {
+                sx: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  bgcolor: leg.color
+                }
+              }), /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: 10,
+                  color: "rgba(0,0,0,0.55)"
+                },
+                children: leg.label
+              })]
+            }, leg.label);
+          })
+        })]
+      }), /*#__PURE__*/jsx(ReportLineChart, {
+        series: item.series || [],
+        categories: item.categories || [],
+        width: chartWidth,
+        height: 185
       })]
-    })]
+    })
   });
 };
 
+var EXPORT_CHART_W = 730;
 var ReportBody = function ReportBody(_ref) {
   var _ref$apiData = _ref.apiData,
     apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
@@ -4325,15 +4577,18 @@ var ReportBody = function ReportBody(_ref) {
   var activeFilterChips = useMemo(function () {
     return getActiveFilterChips(apiData);
   }, [apiData]);
-  var chartBlock = /*#__PURE__*/jsx(Grid, {
+  var chartBlock = exportMode ? /*#__PURE__*/jsx(ReportExportChartCard, {
+    item: reportData.mainChart,
+    chartWidth: EXPORT_CHART_W
+  }) : /*#__PURE__*/jsx(Grid, {
     container: true,
-    spacing: exportMode ? 1 : 2,
+    spacing: 2,
     sx: {
       mb: 0
     },
     children: /*#__PURE__*/jsx(RenderChartCard, {
       item: _objectSpread2(_objectSpread2({}, reportData.mainChart), {}, {
-        height: exportMode ? 210 : 320
+        height: 320
       }),
       index: 0,
       md: 12,
@@ -4346,8 +4601,8 @@ var ReportBody = function ReportBody(_ref) {
   if (variant === "page1") {
     return /*#__PURE__*/jsxs(Box, {
       sx: {
-        px: exportMode ? 2.5 : 0,
-        py: exportMode ? 2 : 0
+        px: exportMode ? 2 : 0,
+        py: exportMode ? 1.5 : 0
       },
       children: [/*#__PURE__*/jsx(ReportHeader, {
         dateName: dateName,
@@ -4363,13 +4618,28 @@ var ReportBody = function ReportBody(_ref) {
   if (variant === "page2") {
     return /*#__PURE__*/jsx(Box, {
       sx: {
-        px: exportMode ? 2.5 : 0,
-        py: exportMode ? 2 : 0
+        px: exportMode ? 2 : 0,
+        py: exportMode ? 1.5 : 0
       },
       children: /*#__PURE__*/jsx(ReportDetailsSection, {
         reportData: reportData,
         dateName: dateName,
-        exportMode: exportMode
+        exportMode: exportMode,
+        section: "top"
+      })
+    });
+  }
+  if (variant === "page3") {
+    return /*#__PURE__*/jsx(Box, {
+      sx: {
+        px: exportMode ? 2 : 0,
+        py: exportMode ? 1.5 : 0
+      },
+      children: /*#__PURE__*/jsx(ReportDetailsSection, {
+        reportData: reportData,
+        dateName: dateName,
+        exportMode: exportMode,
+        section: "bottom"
       })
     });
   }
@@ -4382,7 +4652,8 @@ var ReportBody = function ReportBody(_ref) {
       metrics: reportData.metrics
     }), chartBlock, /*#__PURE__*/jsx(ReportDetailsSection, {
       reportData: reportData,
-      dateName: dateName
+      dateName: dateName,
+      section: "all"
     })]
   });
 };
@@ -4430,6 +4701,12 @@ 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"
+        }))
       })]
     })
   });
@@ -4581,7 +4858,7 @@ var NewOverview = function NewOverview(_ref) {
             case 1:
               _context.n = 2;
               return new Promise(function (r) {
-                return setTimeout(r, 1200);
+                return setTimeout(r, 600);
               });
             case 2:
               container = exportLayoutRef.current;
@@ -4819,9 +5096,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, {