@ammarkhalidfarooq/dashboard-package 0.6.62 → 0.6.64

package/dist/index.cjs.js

@@ -1329,6 +1329,287 @@ var MetricCard$1 = function MetricCard(_ref) {
   });
 };
 
+var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
+  var sx = _ref.sx,
+    donationTypeData = _ref.donationTypeData,
+    _ref$exportMode = _ref.exportMode,
+    exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? "Donation type" : _ref$subtitle,
+    chartHeight = _ref.chartHeight;
+  var recurringColor = "rgb(99, 99, 230)";
+  var oneTimeColor = "#10B981";
+  var colors = [recurringColor, oneTimeColor, "#06B6D4", "#F59E0B", "#EF4444"];
+  var categories = [];
+  var series = [];
+  var summaries = [];
+  var title = "Donation Type";
+  var isDistributed = false;
+  if (donationTypeData && donationTypeData.data && Array.isArray(donationTypeData.data)) {
+    // Time series recurring vs one-time format
+    categories = donationTypeData.data.map(function (item) {
+      return item.label || "";
+    });
+    series = [{
+      name: "Recurring",
+      data: donationTypeData.data.map(function (item) {
+        return item.recurring || 0;
+      })
+    }, {
+      name: "One-time",
+      data: donationTypeData.data.map(function (item) {
+        return item.oneTime || 0;
+      })
+    }];
+    summaries = [{
+      label: "Recurring",
+      total: donationTypeData.totalRecurringDonations || 0,
+      color: recurringColor
+    }, {
+      label: "One-time",
+      total: donationTypeData.totalOneTimeDonations || 0,
+      color: oneTimeColor
+    }];
+    title = "Recurring vs One-time";
+    isDistributed = false;
+  } else if (Array.isArray(donationTypeData) && donationTypeData.length > 0 && donationTypeData[0].totalAmount !== undefined) {
+    // New array format
+    categories = donationTypeData.map(function (item) {
+      return item.type || "";
+    });
+    series = [{
+      name: "Amount",
+      data: donationTypeData.map(function (item) {
+        return item.totalAmount || 0;
+      })
+    }];
+    summaries = donationTypeData.map(function (item, index) {
+      return {
+        label: item.type || "",
+        total: item.totalAmount || 0,
+        color: colors[index % colors.length]
+      };
+    });
+    isDistributed = true;
+    if (donationTypeData.length === 2) {
+      title = "".concat(donationTypeData[0].type, " vs ").concat(donationTypeData[1].type);
+    }
+  } else {
+    var _dataObj$summary, _dataObj$summary2, _dataObj$summary3, _dataObj$summary4;
+    // Object format, empty array, or missing data
+    var dataObj = donationTypeData && _typeof(donationTypeData) === "object" && !Array.isArray(donationTypeData) ? donationTypeData : {};
+    categories = dataObj.categories || [];
+    var rawSeries = dataObj.series || [];
+    if (rawSeries.length && categories.length) {
+      series = rawSeries;
+    } else {
+      series = [{
+        name: "Recurring",
+        data: []
+      }, {
+        name: "One-time",
+        data: []
+      }];
+    }
+    summaries = [{
+      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary = dataObj.summary) === null || _dataObj$summary === void 0 || (_dataObj$summary = _dataObj$summary.recurring) === null || _dataObj$summary === void 0 ? void 0 : _dataObj$summary.label) || "Recurring",
+      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary2 = dataObj.summary) === null || _dataObj$summary2 === void 0 || (_dataObj$summary2 = _dataObj$summary2.recurring) === null || _dataObj$summary2 === void 0 ? void 0 : _dataObj$summary2.total) || 0,
+      color: recurringColor
+    }, {
+      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary3 = dataObj.summary) === null || _dataObj$summary3 === void 0 || (_dataObj$summary3 = _dataObj$summary3.oneTime) === null || _dataObj$summary3 === void 0 ? void 0 : _dataObj$summary3.label) || "One-time",
+      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary4 = dataObj.summary) === null || _dataObj$summary4 === void 0 || (_dataObj$summary4 = _dataObj$summary4.oneTime) === null || _dataObj$summary4 === void 0 ? void 0 : _dataObj$summary4.total) || 0,
+      color: oneTimeColor
+    }];
+    title = "Recurring vs one-time";
+    isDistributed = false;
+  }
+  var resolvedChartHeight = chartHeight !== null && chartHeight !== void 0 ? chartHeight : exportMode ? 110 : 170;
+  var chartOptions = {
+    chart: {
+      type: "bar",
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      },
+      fontFamily: "Inter, sans-serif"
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: exportMode ? "68%" : "75%",
+        borderRadius: exportMode ? 3 : 4,
+        distributed: isDistributed,
+        dataLabels: {
+          position: "top"
+        }
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function formatter(val) {
+        return "$".concat(formatNumber(val));
+      },
+      offsetY: exportMode ? -16 : -20,
+      style: {
+        fontSize: exportMode ? "7px" : "9px",
+        fontWeight: 600,
+        colors: ["#000"]
+      }
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ["transparent"]
+    },
+    xaxis: {
+      categories: categories,
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      },
+      labels: {
+        style: {
+          colors: "rgba(0, 0, 0, 0.4)",
+          fontSize: exportMode ? "8px" : "11px"
+        }
+      }
+    },
+    yaxis: {
+      min: 0,
+      tickAmount: exportMode ? 3 : 4,
+      labels: {
+        formatter: function formatter(val) {
+          return "$".concat(formatNumber(val));
+        },
+        style: {
+          colors: "rgba(0, 0, 0, 0.4)",
+          fontSize: exportMode ? "8px" : "10px"
+        }
+      }
+    },
+    fill: {
+      opacity: 1
+    },
+    colors: colors,
+    grid: {
+      borderColor: "#f1f1f1",
+      strokeDashArray: 4,
+      padding: {
+        left: 0,
+        right: 0
+      },
+      yaxis: {
+        lines: {
+          show: true
+        }
+      }
+    },
+    legend: {
+      show: false
+    },
+    tooltip: {
+      y: {
+        formatter: function formatter(val) {
+          return "$".concat(formatNumber(val));
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
+    sx: _objectSpread2({
+      bgcolor: "#fff",
+      borderRadius: exportMode ? 2 : 4,
+      border: exportMode ? "1px solid #DDE3EA" : "1px solid #f0f0f0",
+      boxShadow: exportMode ? "0 1px 0 rgba(15,23,42,0.03)" : "0 4px 24px rgba(0,0,0,0.06)",
+      p: exportMode ? 1.5 : 3,
+      height: exportMode ? "100%" : "auto",
+      boxSizing: "border-box"
+    }, sx),
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          textAlign: "left"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontWeight: 700,
+            fontSize: exportMode ? "12px" : "18px",
+            color: "#000",
+            lineHeight: 1.15
+          },
+          children: title
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontSize: exportMode ? "9.5px" : "13px",
+            color: exportMode ? "#94A3B8" : "rgba(0, 0, 0, 0.4)",
+            lineHeight: 1.15
+          },
+          children: subtitle
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: {
+          display: "flex",
+          gap: exportMode ? 1 : 1.5,
+          mt: exportMode ? 0.75 : 0.5,
+          flexWrap: "wrap"
+        },
+        children: summaries.map(function (item, index) {
+          return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+              sx: {
+                width: exportMode ? 6 : 8,
+                height: exportMode ? 6 : 8,
+                bgcolor: item.color,
+                borderRadius: "50%"
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+              sx: {
+                fontSize: exportMode ? "9.5px" : "13px",
+                color: exportMode ? "#374151" : "rgba(0, 0, 0, 0.5)",
+                fontWeight: 500
+              },
+              children: item.label
+            }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+              sx: {
+                fontSize: exportMode ? "9.5px" : "13px",
+                fontWeight: exportMode ? 700 : 600,
+                color: "#000"
+              },
+              children: ["$", formatNumber(item.total || 0)]
+            })]
+          }, item.label || index);
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: {
+        height: resolvedChartHeight,
+        width: exportMode ? "calc(100% + 24px)" : "calc(100% + 48px)",
+        ml: exportMode ? -1.5 : -3,
+        mr: exportMode ? -1.5 : -3
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
+        options: chartOptions,
+        series: series,
+        type: "bar",
+        height: "100%"
+      })
+    })]
+  });
+};
+
 var PURPLE = "#6363E6";
 var REPORT_COLORS = {
   purple: PURPLE};
@@ -1637,7 +1918,6 @@ var buildReportData = function buildReportData() {
 var W = 794;
 var MIN_H = 1123;
 var MX = 32; // horizontal margin
-var CW = W - MX * 2; // 730 px usable width
 var THEME = {
   pageBg: "#F8FAFC",
   panelBg: "#FFFFFF",
@@ -1807,120 +2087,14 @@ var Sparkline = function Sparkline(_ref3) {
   });
 };
 
-// ─── SVG multi-series line chart ──────────────────────────────────────────────
-var LineChart = function LineChart(_ref4) {
-  var _ref4$series = _ref4.series,
-    series = _ref4$series === void 0 ? [] : _ref4$series,
-    _ref4$categories = _ref4.categories,
-    categories = _ref4$categories === void 0 ? [] : _ref4$categories,
-    _ref4$width = _ref4.width,
-    width = _ref4$width === void 0 ? CW : _ref4$width,
-    _ref4$height = _ref4.height,
-    height = _ref4$height === void 0 ? 180 : _ref4$height;
-  var allVals = series.flatMap(function (s) {
-    return s.data || [];
-  });
-  if (!allVals.length) {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      style: {
-        height: height,
-        background: THEME.tableAltBg,
-        borderRadius: 6
-      }
-    });
-  }
-  var COLORS = ["#6366F1", "#10B981", "#06B6D4"];
-  var seriesColor = function seriesColor(name) {
-    if (/email/i.test(name)) return COLORS[2];
-    if (/organic/i.test(name)) return COLORS[1];
-    return COLORS[0];
-  };
-  var PL = 46,
-    PR = 8,
-    PT = 8,
-    PB = 22;
-  var IW = width - PL - PR;
-  var IH = height - PT - PB;
-  var max = Math.max.apply(Math, _toConsumableArray(allVals).concat([0]));
-  var min = 0;
-  var range = max - min || 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 - min) / range * IH;
-  };
-  var yTicks = [0, 0.25, 0.5, 0.75, 1].map(function (t) {
-    return min + 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__*/jsxRuntime.jsxs("svg", {
-    width: width,
-    height: height,
-    style: {
-      display: "block"
-    },
-    children: [yTicks.map(function (v, i) {
-      var y = yp(v);
-      var label = v >= 10000 ? "$".concat((v / 1000).toFixed(0), "K") : v >= 1000 ? "$".concat((v / 1000).toFixed(1), "K") : "$".concat(v.toFixed(0));
-      return /*#__PURE__*/jsxRuntime.jsxs("g", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("line", {
-          x1: PL,
-          y1: y,
-          x2: width - PR,
-          y2: y,
-          stroke: "#E5EAF1",
-          strokeWidth: 1
-        }), /*#__PURE__*/jsxRuntime.jsx("text", {
-          x: PL - 4,
-          y: y + 3.5,
-          textAnchor: "end",
-          fontSize: 9,
-          fill: THEME.muted,
-          children: label
-        })]
-      }, i);
-    }), series.map(function (s, si) {
-      var data = s.data || [];
-      if (!data.length) return null;
-      var points = data.map(function (v, i) {
-        return [xp(i, data.length), yp(v)];
-      });
-      var pathD = buildSmoothPath(points);
-      return /*#__PURE__*/jsxRuntime.jsx("path", {
-        d: pathD,
-        fill: "none",
-        stroke: seriesColor(s.name),
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }, si);
-    }), shownCats.map(function (label, i) {
-      var origIdx = categories.indexOf(label);
-      var x = xp(origIdx < 0 ? i * step : origIdx, categories.length);
-      return /*#__PURE__*/jsxRuntime.jsx("text", {
-        x: x,
-        y: height - 5,
-        textAnchor: "middle",
-        fontSize: 9,
-        fill: THEME.muted,
-        children: label
-      }, i);
-    })]
-  });
-};
-
 // ─── SVG donut ────────────────────────────────────────────────────────────────
-var Donut = function Donut(_ref5) {
-  var _ref5$segments = _ref5.segments,
-    segments = _ref5$segments === void 0 ? [] : _ref5$segments,
-    _ref5$size = _ref5.size,
-    size = _ref5$size === void 0 ? 88 : _ref5$size,
-    centerVal = _ref5.centerVal,
-    centerLabel = _ref5.centerLabel;
+var Donut = function Donut(_ref4) {
+  var _ref4$segments = _ref4.segments,
+    segments = _ref4$segments === void 0 ? [] : _ref4$segments,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 88 : _ref4$size,
+    centerVal = _ref4.centerVal,
+    centerLabel = _ref4.centerLabel;
   var total = segments.reduce(function (s, g) {
     return s + (g.value || 0);
   }, 0) || 1;
@@ -1978,11 +2152,11 @@ var Donut = function Donut(_ref5) {
 };
 
 // ─── Shared primitives ────────────────────────────────────────────────────────
-var Divider = function Divider(_ref6) {
-  var _ref6$mt = _ref6.mt,
-    mt = _ref6$mt === void 0 ? 0 : _ref6$mt,
-    _ref6$mb = _ref6.mb,
-    mb = _ref6$mb === void 0 ? 0 : _ref6$mb;
+var Divider = function Divider(_ref5) {
+  var _ref5$mt = _ref5.mt,
+    mt = _ref5$mt === void 0 ? 0 : _ref5$mt,
+    _ref5$mb = _ref5.mb,
+    mb = _ref5$mb === void 0 ? 0 : _ref5$mb;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: {
       borderTop: "1px solid #E5EAF1",
@@ -1991,13 +2165,13 @@ var Divider = function Divider(_ref6) {
     }
   });
 };
-var Panel = function Panel(_ref7) {
-  var children = _ref7.children,
-    title = _ref7.title,
-    subtitle = _ref7.subtitle,
-    action = _ref7.action,
-    _ref7$style = _ref7.style,
-    style = _ref7$style === void 0 ? {} : _ref7$style;
+var Panel = function Panel(_ref6) {
+  var children = _ref6.children,
+    title = _ref6.title,
+    subtitle = _ref6.subtitle,
+    action = _ref6.action,
+    _ref6$style = _ref6.style,
+    style = _ref6$style === void 0 ? {} : _ref6$style;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: _objectSpread2({
       border: "1px solid ".concat(THEME.panelBorder),
@@ -2046,13 +2220,13 @@ var Panel = function Panel(_ref7) {
     }), children]
   });
 };
-var MiniTable = function MiniTable(_ref8) {
-  var _ref8$head = _ref8.head,
-    head = _ref8$head === void 0 ? [] : _ref8$head,
-    _ref8$rows = _ref8.rows,
-    rows = _ref8$rows === void 0 ? [] : _ref8$rows,
-    _ref8$colAlign = _ref8.colAlign,
-    colAlign = _ref8$colAlign === void 0 ? [] : _ref8$colAlign;
+var MiniTable = function MiniTable(_ref7) {
+  var _ref7$head = _ref7.head,
+    head = _ref7$head === void 0 ? [] : _ref7$head,
+    _ref7$rows = _ref7.rows,
+    rows = _ref7$rows === void 0 ? [] : _ref7$rows,
+    _ref7$colAlign = _ref7.colAlign,
+    colAlign = _ref7$colAlign === void 0 ? [] : _ref7$colAlign;
   return /*#__PURE__*/jsxRuntime.jsxs("table", {
     style: {
       width: "100%",
@@ -2104,12 +2278,12 @@ var MiniTable = function MiniTable(_ref8) {
     })]
   });
 };
-var ProgressBar = function ProgressBar(_ref9) {
-  var value = _ref9.value,
-    _ref9$color = _ref9.color,
-    color = _ref9$color === void 0 ? "rgb(99, 99, 230)" : _ref9$color,
-    _ref9$height = _ref9.height,
-    height = _ref9$height === void 0 ? 6 : _ref9$height;
+var ProgressBar = function ProgressBar(_ref8) {
+  var value = _ref8.value,
+    _ref8$color = _ref8.color,
+    color = _ref8$color === void 0 ? "rgb(99, 99, 230)" : _ref8$color,
+    _ref8$height = _ref8.height,
+    height = _ref8$height === void 0 ? 6 : _ref8$height;
   var pct = Math.max(0, Number(value !== null && value !== void 0 ? value : 0));
   var barWidth = Math.min(100, pct);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -2152,15 +2326,15 @@ var ProgressBar = function ProgressBar(_ref9) {
     })]
   });
 };
-var KpiCard = function KpiCard(_ref0) {
-  var title = _ref0.title,
-    value = _ref0.value,
-    trend = _ref0.trend,
-    detail = _ref0.detail,
-    _ref0$variant = _ref0.variant,
-    variant = _ref0$variant === void 0 ? "secondary" : _ref0$variant,
-    _ref0$trendPositiveWh = _ref0.trendPositiveWhenNegative,
-    trendPositiveWhenNegative = _ref0$trendPositiveWh === void 0 ? false : _ref0$trendPositiveWh;
+var KpiCard = function KpiCard(_ref9) {
+  var title = _ref9.title,
+    value = _ref9.value,
+    trend = _ref9.trend,
+    detail = _ref9.detail,
+    _ref9$variant = _ref9.variant,
+    variant = _ref9$variant === void 0 ? "secondary" : _ref9$variant,
+    _ref9$trendPositiveWh = _ref9.trendPositiveWhenNegative,
+    trendPositiveWhenNegative = _ref9$trendPositiveWh === void 0 ? false : _ref9$trendPositiveWh;
   var displayTrend = withTrendArrow(trend);
   var isPrimary = variant === "primary";
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -2211,10 +2385,10 @@ var KpiCard = function KpiCard(_ref0) {
     })]
   });
 };
-var StatPair = function StatPair(_ref1) {
-  var label = _ref1.label,
-    val = _ref1.val,
-    trend = _ref1.trend;
+var StatPair = function StatPair(_ref0) {
+  var label = _ref0.label,
+    val = _ref0.val,
+    trend = _ref0.trend;
   var displayTrend = withTrendArrow(trend);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: {
@@ -2251,12 +2425,12 @@ var StatPair = function StatPair(_ref1) {
     })]
   });
 };
-var PageHeader = function PageHeader(_ref10) {
-  var dateLabel = _ref10.dateLabel,
-    generatedLabel = _ref10.generatedLabel,
-    activeFilters = _ref10.activeFilters,
-    page = _ref10.page,
-    windowLabel = _ref10.windowLabel;
+var PageHeader = function PageHeader(_ref1) {
+  var dateLabel = _ref1.dateLabel,
+    generatedLabel = _ref1.generatedLabel,
+    activeFilters = _ref1.activeFilters,
+    page = _ref1.page,
+    windowLabel = _ref1.windowLabel;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: {
       padding: "22px ".concat(MX, "px 12px"),
@@ -2362,9 +2536,9 @@ var PageHeader = function PageHeader(_ref10) {
     })]
   });
 };
-var PageFooter = function PageFooter(_ref11) {
-  var generatedLabel = _ref11.generatedLabel,
-    page = _ref11.page;
+var PageFooter = function PageFooter(_ref10) {
+  var generatedLabel = _ref10.generatedLabel,
+    page = _ref10.page;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: {
       padding: "7px ".concat(MX, "px"),
@@ -2384,16 +2558,16 @@ var PageFooter = function PageFooter(_ref11) {
 };
 
 // ─── Main component ───────────────────────────────────────────────────────────
-var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
-  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _metricByTitle$AvgDo2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Refund, _metricByTitle$Refund2, _refundsRaw$refundCou, _metricByTitle$Refund3, _ref15, _refundsRaw$refundRat2, _ob$growthPercentage, _ob$peakDay, _refCard$growthPercen;
-  var _ref12$apiData = _ref12.apiData,
-    apiData = _ref12$apiData === void 0 ? {} : _ref12$apiData,
-    _ref12$dateName = _ref12.dateName,
-    dateName = _ref12$dateName === void 0 ? "Last Period" : _ref12$dateName,
-    _ref12$numberOfDays = _ref12.numberOfDays,
-    numberOfDays = _ref12$numberOfDays === void 0 ? 30 : _ref12$numberOfDays,
-    _ref12$activeFilters = _ref12.activeFilters,
-    activeFilters = _ref12$activeFilters === void 0 ? [] : _ref12$activeFilters;
+var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
+  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _metricByTitle$AvgDo2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Refund, _metricByTitle$Refund2, _refundsRaw$refundCou, _metricByTitle$Refund3, _mainChart$stacked, _ref14, _refundsRaw$refundRat2, _ob$growthPercentage, _ob$peakDay, _refCard$growthPercen;
+  var _ref11$apiData = _ref11.apiData,
+    apiData = _ref11$apiData === void 0 ? {} : _ref11$apiData,
+    _ref11$dateName = _ref11.dateName,
+    dateName = _ref11$dateName === void 0 ? "Last Period" : _ref11$dateName,
+    _ref11$numberOfDays = _ref11.numberOfDays,
+    numberOfDays = _ref11$numberOfDays === void 0 ? 30 : _ref11$numberOfDays,
+    _ref11$activeFilters = _ref11.activeFilters,
+    activeFilters = _ref11$activeFilters === void 0 ? [] : _ref11$activeFilters;
   var now = new Date();
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
   var windowLabel = "".concat(numberOfDays, "-day window");
@@ -2467,9 +2641,6 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
     retPct = donorMix.retPct,
     mixAvgGift = donorMix.avgGift,
     donorMixPrev = donorMix.donorMixPrev;
-  var _report$donationTypeT = report.donationTypeTotals,
-    recurringTotal = _report$donationTypeT.recurringTotal,
-    oneTimeTotal = _report$donationTypeT.oneTimeTotal;
   var geoList = report.donorGeographyList;
   var trafficItems = function (_apiData$trafficSourc) {
     var items = Array.isArray(apiData === null || apiData === void 0 || (_apiData$trafficSourc = apiData.trafficSourceData) === null || _apiData$trafficSourc === void 0 ? void 0 : _apiData$trafficSourc.data) ? apiData.trafficSourceData.data : [];
@@ -2705,10 +2876,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
               gap: 14,
               marginBottom: 6
             },
-            children: [["Email", C.cyan], ["Organic", C.emerald], ["Paid Ads", C.indigo]].map(function (_ref13) {
-              var _ref14 = _slicedToArray(_ref13, 2),
-                name = _ref14[0],
-                color = _ref14[1];
+            children: [["Email", C.cyan], ["Organic", C.emerald], ["Paid Ads", C.indigo]].map(function (_ref12) {
+              var _ref13 = _slicedToArray(_ref12, 2),
+                name = _ref13[0],
+                color = _ref13[1];
               return /*#__PURE__*/jsxRuntime.jsxs("div", {
                 style: {
                   display: "flex",
@@ -2731,11 +2902,22 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
                 })]
               }, name);
             })
-          }), /*#__PURE__*/jsxRuntime.jsx(LineChart, {
-            series: revSeries,
-            categories: revCats,
-            width: CW - 28,
-            height: 300
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            style: {
+              width: "100%",
+              minHeight: 300
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(RevenueChart, {
+              id: "pdf-total-revenue-trend",
+              metric: "Revenue",
+              series: revSeries,
+              categories: revCats,
+              height: 300,
+              stacked: (_mainChart$stacked = mainChart.stacked) !== null && _mainChart$stacked !== void 0 ? _mainChart$stacked : true,
+              type: "area",
+              colors: mainChart.colors || ["#6366F1", "#10B981", "#06B6D4"],
+              showLegend: false
+            })
           })]
         })]
       }), /*#__PURE__*/jsxRuntime.jsx(PageFooter, {
@@ -2873,7 +3055,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
                     style: {
                       fontSize: 9
                     },
-                    children: "".concat(Number((_ref15 = donorMixPrev !== null && donorMixPrev !== void 0 ? donorMixPrev : growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _ref15 !== void 0 ? _ref15 : 0).toFixed(2), "% vs pp")
+                    children: "".concat(Number((_ref14 = donorMixPrev !== null && donorMixPrev !== void 0 ? donorMixPrev : growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _ref14 !== void 0 ? _ref14 : 0).toFixed(2), "% vs pp")
                   })
                 })]
               })]
@@ -2885,95 +3067,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
             gridTemplateColumns: "repeat(4, 1fr)",
             gap: 8
           },
-          children: [/*#__PURE__*/jsxRuntime.jsx(Panel, {
-            title: "Recurring vs one-time",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
+            exportMode: true,
             subtitle: "Donation type \xB7 weekly",
-            children: function () {
-              var tot = recurringTotal + oneTimeTotal || 1;
-              var rPct = recurringTotal / tot * 100;
-              var oPct = oneTimeTotal / tot * 100;
-              return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 9,
-                  marginTop: 4
-                },
-                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                    style: {
-                      display: "flex",
-                      justifyContent: "space-between",
-                      marginBottom: 3
-                    },
-                    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                      style: {
-                        fontSize: 9.5,
-                        color: "#374151"
-                      },
-                      children: "Recurring"
-                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                      style: {
-                        fontSize: 9.5,
-                        fontWeight: 700,
-                        color: "#111827"
-                      },
-                      children: d$(recurringTotal)
-                    })]
-                  }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                    style: {
-                      height: 9,
-                      background: "#EEF2FF",
-                      borderRadius: 3
-                    },
-                    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                      style: {
-                        width: "".concat(rPct, "%"),
-                        height: "100%",
-                        background: C.indigo,
-                        borderRadius: 3
-                      }
-                    })
-                  })]
-                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                    style: {
-                      display: "flex",
-                      justifyContent: "space-between",
-                      marginBottom: 3
-                    },
-                    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                      style: {
-                        fontSize: 9.5,
-                        color: "#374151"
-                      },
-                      children: "One-time"
-                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                      style: {
-                        fontSize: 9.5,
-                        fontWeight: 700,
-                        color: "#111827"
-                      },
-                      children: d$(oneTimeTotal)
-                    })]
-                  }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                    style: {
-                      height: 9,
-                      background: "#EEF2FF",
-                      borderRadius: 3
-                    },
-                    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                      style: {
-                        width: "".concat(oPct, "%"),
-                        height: "100%",
-                        background: "#C7D2FE",
-                        borderRadius: 3
-                      }
-                    })
-                  })]
-                })]
-              });
-            }()
+            donationTypeData: report.donationTypeData
           }), /*#__PURE__*/jsxRuntime.jsx(Panel, {
             title: "Donor geography",
             subtitle: "Top countries \xB7 ".concat(formatNumber(totalDonors), " total"),
@@ -3129,10 +3226,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref16) {
-                var _ref17 = _slicedToArray(_ref16, 2),
-                  l = _ref17[0],
-                  v = _ref17[1];
+              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref15) {
+                var _ref16 = _slicedToArray(_ref15, 2),
+                  l = _ref16[0],
+                  v = _ref16[1];
                 return /*#__PURE__*/jsxRuntime.jsxs("div", {
                   children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {
@@ -3259,10 +3356,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref12, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref18) {
-                var _ref19 = _slicedToArray(_ref18, 2),
-                  l = _ref19[0],
-                  v = _ref19[1];
+              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref17) {
+                var _ref18 = _slicedToArray(_ref17, 2),
+                  l = _ref18[0],
+                  v = _ref18[1];
                 return /*#__PURE__*/jsxRuntime.jsxs("div", {
                   children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {
@@ -3448,7 +3545,7 @@ var NewOverview = function NewOverview(_ref) {
     if (!showExportLayout) return;
     var doPdfExport = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var container, safeDate, _t;
+        var container, waitForCharts, safeDate, _t;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.p = _context.n) {
             case 0:
@@ -3460,37 +3557,55 @@ var NewOverview = function NewOverview(_ref) {
                 });
               });
             case 1:
-              _context.n = 2;
-              return new Promise(function (r) {
-                return setTimeout(r, 400);
-              });
-            case 2:
               container = exportLayoutRef.current;
               if (container) {
-                _context.n = 3;
+                _context.n = 2;
                 break;
               }
               return _context.a(2);
+            case 2:
+              waitForCharts = function waitForCharts(root) {
+                var timeoutMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4000;
+                return new Promise(function (resolve) {
+                  var started = Date.now();
+                  var _check = function check() {
+                    var chartSvg = root.querySelector(".apexcharts-svg");
+                    if (chartSvg || Date.now() - started >= timeoutMs) {
+                      resolve();
+                      return;
+                    }
+                    requestAnimationFrame(_check);
+                  };
+                  _check();
+                });
+              };
+              _context.n = 3;
+              return waitForCharts(container);
             case 3:
-              safeDate = new Date().toISOString().slice(0, 10);
               _context.n = 4;
+              return new Promise(function (r) {
+                return setTimeout(r, 300);
+              });
+            case 4:
+              safeDate = new Date().toISOString().slice(0, 10);
+              _context.n = 5;
               return exportReportPdf(container, "DashboardOverview_report_".concat(safeDate, ".pdf"));
-            case 4:
-              _context.n = 6;
-              break;
             case 5:
-              _context.p = 5;
-              _t = _context.v;
-              console.error("Failed to export overall dashboard PDF:", _t);
+              _context.n = 7;
+              break;
             case 6:
               _context.p = 6;
+              _t = _context.v;
+              console.error("Failed to export overall dashboard PDF:", _t);
+            case 7:
+              _context.p = 7;
               setShowExportLayout(false);
               setExportLoading === null || setExportLoading === void 0 || setExportLoading(false);
-              return _context.f(6);
-            case 7:
+              return _context.f(7);
+            case 8:
               return _context.a(2);
           }
-        }, _callee, null, [[0, 5, 6, 7]]);
+        }, _callee, null, [[0, 6, 7, 8]]);
       }));
       return function doPdfExport() {
         return _ref2.apply(this, arguments);
@@ -4860,268 +4975,6 @@ var MetricDonutCard = function MetricDonutCard(_ref2) {
   });
 };
 
-var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
-  var sx = _ref.sx,
-    donationTypeData = _ref.donationTypeData;
-  var recurringColor = "rgb(99, 99, 230)";
-  var oneTimeColor = "#10B981";
-  var colors = [recurringColor, oneTimeColor, "#06B6D4", "#F59E0B", "#EF4444"];
-  var categories = [];
-  var series = [];
-  var summaries = [];
-  var title = "Donation Type";
-  var isDistributed = false;
-  if (donationTypeData && donationTypeData.data && Array.isArray(donationTypeData.data)) {
-    // Time series recurring vs one-time format
-    categories = donationTypeData.data.map(function (item) {
-      return item.label || "";
-    });
-    series = [{
-      name: "Recurring",
-      data: donationTypeData.data.map(function (item) {
-        return item.recurring || 0;
-      })
-    }, {
-      name: "One-time",
-      data: donationTypeData.data.map(function (item) {
-        return item.oneTime || 0;
-      })
-    }];
-    summaries = [{
-      label: "Recurring",
-      total: donationTypeData.totalRecurringDonations || 0,
-      color: recurringColor
-    }, {
-      label: "One-time",
-      total: donationTypeData.totalOneTimeDonations || 0,
-      color: oneTimeColor
-    }];
-    title = "Recurring vs One-time";
-    isDistributed = false;
-  } else if (Array.isArray(donationTypeData) && donationTypeData.length > 0 && donationTypeData[0].totalAmount !== undefined) {
-    // New array format
-    categories = donationTypeData.map(function (item) {
-      return item.type || "";
-    });
-    series = [{
-      name: "Amount",
-      data: donationTypeData.map(function (item) {
-        return item.totalAmount || 0;
-      })
-    }];
-    summaries = donationTypeData.map(function (item, index) {
-      return {
-        label: item.type || "",
-        total: item.totalAmount || 0,
-        color: colors[index % colors.length]
-      };
-    });
-    isDistributed = true;
-    if (donationTypeData.length === 2) {
-      title = "".concat(donationTypeData[0].type, " vs ").concat(donationTypeData[1].type);
-    }
-  } else {
-    var _dataObj$summary, _dataObj$summary2, _dataObj$summary3, _dataObj$summary4;
-    // Object format or simple series array
-    var dataObj = donationTypeData || {};
-    categories = dataObj.categories || [];
-    series = Array.isArray(donationTypeData) ? donationTypeData : dataObj.series || [];
-    summaries = [{
-      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary = dataObj.summary) === null || _dataObj$summary === void 0 || (_dataObj$summary = _dataObj$summary.recurring) === null || _dataObj$summary === void 0 ? void 0 : _dataObj$summary.label) || "Recurring",
-      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary2 = dataObj.summary) === null || _dataObj$summary2 === void 0 || (_dataObj$summary2 = _dataObj$summary2.recurring) === null || _dataObj$summary2 === void 0 ? void 0 : _dataObj$summary2.total) || 0,
-      color: recurringColor
-    }, {
-      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary3 = dataObj.summary) === null || _dataObj$summary3 === void 0 || (_dataObj$summary3 = _dataObj$summary3.oneTime) === null || _dataObj$summary3 === void 0 ? void 0 : _dataObj$summary3.label) || "One-time",
-      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary4 = dataObj.summary) === null || _dataObj$summary4 === void 0 || (_dataObj$summary4 = _dataObj$summary4.oneTime) === null || _dataObj$summary4 === void 0 ? void 0 : _dataObj$summary4.total) || 0,
-      color: oneTimeColor
-    }];
-    title = "Recurring vs one-time";
-    isDistributed = false;
-  }
-  var chartOptions = {
-    chart: {
-      type: "bar",
-      toolbar: {
-        show: false
-      },
-      zoom: {
-        enabled: false
-      },
-      fontFamily: "Inter, sans-serif"
-    },
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        columnWidth: "75%",
-        borderRadius: 4,
-        distributed: isDistributed,
-        dataLabels: {
-          position: "top"
-        }
-      }
-    },
-    dataLabels: {
-      enabled: true,
-      formatter: function formatter(val) {
-        return "$".concat(formatNumber(val));
-      },
-      offsetY: -20,
-      style: {
-        fontSize: "9px",
-        fontWeight: 600,
-        colors: ["#000"]
-      }
-    },
-    stroke: {
-      show: true,
-      width: 2,
-      colors: ["transparent"]
-    },
-    xaxis: {
-      categories: categories,
-      axisBorder: {
-        show: false
-      },
-      axisTicks: {
-        show: false
-      },
-      labels: {
-        style: {
-          colors: "rgba(0, 0, 0, 0.4)",
-          fontSize: "11px"
-        }
-      }
-    },
-    yaxis: {
-      min: 0,
-      tickAmount: 4,
-      labels: {
-        formatter: function formatter(val) {
-          return "$".concat(formatNumber(val));
-        },
-        style: {
-          colors: "rgba(0, 0, 0, 0.4)",
-          fontSize: "10px"
-        }
-      }
-    },
-    fill: {
-      opacity: 1
-    },
-    colors: colors,
-    grid: {
-      borderColor: "#f1f1f1",
-      strokeDashArray: 4,
-      padding: {
-        left: 0,
-        right: 0
-      },
-      yaxis: {
-        lines: {
-          show: true
-        }
-      }
-    },
-    legend: {
-      show: false
-    },
-    tooltip: {
-      y: {
-        formatter: function formatter(val) {
-          return "$".concat(formatNumber(val));
-        }
-      }
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
-    sx: _objectSpread2({
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: "1px solid #f0f0f0",
-      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      p: 3
-    }, sx),
-    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-      sx: {
-        display: "flex",
-        flexDirection: "column"
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-        sx: {
-          textAlign: "left"
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-          sx: {
-            fontWeight: 700,
-            fontSize: "18px",
-            color: "#000",
-            lineHeight: 1.15
-          },
-          children: title
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-          sx: {
-            fontSize: "13px",
-            color: "rgba(0, 0, 0, 0.4)",
-            lineHeight: 1.15
-          },
-          children: "Donation type"
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-        sx: {
-          display: "flex",
-          gap: 1.5,
-          mt: 0.5,
-          flexWrap: "wrap"
-        },
-        children: summaries.map(function (item, index) {
-          return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 0.5
-            },
-            children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
-              sx: {
-                width: 8,
-                height: 8,
-                bgcolor: item.color,
-                borderRadius: "50%"
-              }
-            }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-              sx: {
-                fontSize: "13px",
-                color: "rgba(0, 0, 0, 0.5)",
-                fontWeight: 500
-              },
-              children: item.label
-            }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
-              sx: {
-                fontSize: "13px",
-                fontWeight: 600,
-                color: "#000"
-              },
-              children: ["$", formatNumber(item.total || 0)]
-            })]
-          }, item.label || index);
-        })
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-      sx: {
-        height: 170,
-        width: "calc(100% + 48px)",
-        ml: -3,
-        mr: -3
-      },
-      children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
-        options: chartOptions,
-        series: series,
-        type: "bar",
-        height: "100%"
-      })
-    })]
-  });
-};
-
 var CardWrapper = function CardWrapper(_ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,