@ammarkhalidfarooq/dashboard-package 0.5.16 → 0.5.18

package/dist/index.es.js

@@ -885,6 +885,1485 @@ var Dashboard = function Dashboard(_ref) {
   });
 };
 
+function formatNumber(num) {
+  if (num >= 1000000000) {
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
+  }
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
+  }
+  return (num !== null && num !== void 0 ? num : 0).toString();
+}
+
+var W = 794;
+var H = 1123;
+var MX = 32; // horizontal margin
+var CW = W - MX * 2; // 730 px usable width
+
+// ─── Number helpers ───────────────────────────────────────────────────────────
+var d$ = function d$(v) {
+  return "$".concat(formatNumber(Number(v !== null && v !== void 0 ? v : 0)));
+};
+var pct = function pct(v) {
+  var dp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return "".concat(Number(v !== null && v !== void 0 ? v : 0).toFixed(dp), "%");
+};
+var signed = function signed(v) {
+  var suffix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "%";
+  var n = Number(v !== null && v !== void 0 ? v : 0);
+  return "".concat(n >= 0 ? "+" : "").concat(n.toFixed(2)).concat(suffix);
+};
+
+// ─── SVG line sparkline ───────────────────────────────────────────────────────
+var Sparkline = function Sparkline(_ref) {
+  var _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [] : _ref$data,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#6366F1" : _ref$color,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 120 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 40 : _ref$height;
+  var vals = data.length >= 2 ? data : [0, 0];
+  var max = Math.max.apply(Math, _toConsumableArray(vals).concat([0]));
+  var min = Math.min.apply(Math, _toConsumableArray(vals).concat([0]));
+  var range = max - min || 1;
+  var pad = 3;
+  var pts = vals.map(function (v, i) {
+    return [pad + i / (vals.length - 1) * (width - pad * 2), pad + (height - pad * 2) - (v - min) / range * (height - pad * 2)];
+  });
+  var d = pts.map(function (p, i) {
+    return "".concat(i === 0 ? "M" : "L").concat(p[0].toFixed(1), ",").concat(p[1].toFixed(1));
+  }).join(" ");
+  var area = "".concat(d, " L").concat((width - pad).toFixed(1), ",").concat(height, " L").concat(pad, ",").concat(height, " Z");
+  var gradId = "sp-".concat(color.replace(/[^a-z0-9]/gi, ""));
+  return /*#__PURE__*/jsxs("svg", {
+    width: width,
+    height: height,
+    style: {
+      display: "block",
+      overflow: "visible"
+    },
+    children: [/*#__PURE__*/jsx("defs", {
+      children: /*#__PURE__*/jsxs("linearGradient", {
+        id: gradId,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: [/*#__PURE__*/jsx("stop", {
+          offset: "0%",
+          stopColor: color,
+          stopOpacity: "0.15"
+        }), /*#__PURE__*/jsx("stop", {
+          offset: "100%",
+          stopColor: color,
+          stopOpacity: "0"
+        })]
+      })
+    }), /*#__PURE__*/jsx("path", {
+      d: area,
+      fill: "url(#".concat(gradId, ")")
+    }), /*#__PURE__*/jsx("path", {
+      d: d,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+
+// ─── SVG multi-series line chart ──────────────────────────────────────────────
+var LineChart = function LineChart(_ref2) {
+  var _ref2$series = _ref2.series,
+    series = _ref2$series === void 0 ? [] : _ref2$series,
+    _ref2$categories = _ref2.categories,
+    categories = _ref2$categories === void 0 ? [] : _ref2$categories,
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? CW : _ref2$width,
+    _ref2$height = _ref2.height,
+    height = _ref2$height === void 0 ? 180 : _ref2$height;
+  var allVals = series.flatMap(function (s) {
+    return s.data || [];
+  });
+  if (!allVals.length) {
+    return /*#__PURE__*/jsx("div", {
+      style: {
+        height: height,
+        background: "#F9FAFB",
+        borderRadius: 6
+      }
+    });
+  }
+  var COLORS = ["#6366F1", "#10B981", "#06B6D4"];
+  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__*/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__*/jsxs("g", {
+        children: [/*#__PURE__*/jsx("line", {
+          x1: PL,
+          y1: y,
+          x2: width - PR,
+          y2: y,
+          stroke: "#F3F4F6",
+          strokeWidth: 1
+        }), /*#__PURE__*/jsx("text", {
+          x: PL - 4,
+          y: y + 3.5,
+          textAnchor: "end",
+          fontSize: 9,
+          fill: "#9CA3AF",
+          children: label
+        })]
+      }, 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[si % COLORS.length],
+        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__*/jsx("text", {
+        x: x,
+        y: height - 5,
+        textAnchor: "middle",
+        fontSize: 9,
+        fill: "#9CA3AF",
+        children: label
+      }, i);
+    })]
+  });
+};
+
+// ─── SVG donut ────────────────────────────────────────────────────────────────
+var Donut = function Donut(_ref3) {
+  var _ref3$segments = _ref3.segments,
+    segments = _ref3$segments === void 0 ? [] : _ref3$segments,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 88 : _ref3$size,
+    centerVal = _ref3.centerVal,
+    centerLabel = _ref3.centerLabel;
+  var total = segments.reduce(function (s, g) {
+    return s + (g.value || 0);
+  }, 0) || 1;
+  var r = (size - 18) / 2;
+  var cx = size / 2;
+  var cy = size / 2;
+  var circ = 2 * Math.PI * r;
+  var cumulDash = 0;
+  return /*#__PURE__*/jsxs("svg", {
+    width: size,
+    height: size,
+    style: {
+      display: "block"
+    },
+    children: [/*#__PURE__*/jsx("circle", {
+      cx: cx,
+      cy: cy,
+      r: r,
+      fill: "none",
+      stroke: "#E5E7EB",
+      strokeWidth: 12
+    }), segments.map(function (seg, i) {
+      var dash = seg.value / total * circ;
+      var el = /*#__PURE__*/jsx("circle", {
+        cx: cx,
+        cy: cy,
+        r: r,
+        fill: "none",
+        stroke: seg.color || "#6366F1",
+        strokeWidth: 12,
+        strokeDasharray: "".concat(dash, " ").concat(circ),
+        strokeDashoffset: -cumulDash,
+        strokeLinecap: "butt",
+        transform: "rotate(-90 ".concat(cx, " ").concat(cy, ")")
+      }, i);
+      cumulDash += dash;
+      return el;
+    }), centerVal && /*#__PURE__*/jsx("text", {
+      x: cx,
+      y: cy - (centerLabel ? 5 : 0),
+      textAnchor: "middle",
+      fontSize: 14,
+      fontWeight: "bold",
+      fill: "#111827",
+      children: centerVal
+    }), centerLabel && /*#__PURE__*/jsx("text", {
+      x: cx,
+      y: cy + 13,
+      textAnchor: "middle",
+      fontSize: 9,
+      fill: "#6B7280",
+      children: centerLabel
+    })]
+  });
+};
+
+// ─── Shared primitives ────────────────────────────────────────────────────────
+var Divider = function Divider(_ref4) {
+  var _ref4$mt = _ref4.mt,
+    mt = _ref4$mt === void 0 ? 0 : _ref4$mt,
+    _ref4$mb = _ref4.mb,
+    mb = _ref4$mb === void 0 ? 0 : _ref4$mb;
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      borderTop: "1px solid #E5E7EB",
+      marginTop: mt,
+      marginBottom: mb
+    }
+  });
+};
+var Panel = function Panel(_ref5) {
+  var children = _ref5.children,
+    title = _ref5.title,
+    subtitle = _ref5.subtitle,
+    action = _ref5.action,
+    _ref5$style = _ref5.style,
+    style = _ref5$style === void 0 ? {} : _ref5$style;
+  return /*#__PURE__*/jsxs("div", {
+    style: _objectSpread2({
+      border: "1px solid #E5E7EB",
+      borderRadius: 8,
+      background: "#fff",
+      padding: 12,
+      display: "flex",
+      flexDirection: "column",
+      boxSizing: "border-box"
+    }, style),
+    children: [(title || subtitle || action) && /*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        marginBottom: 8,
+        flexShrink: 0
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        children: [title && /*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 12,
+            fontWeight: 700,
+            color: "#111827",
+            lineHeight: 1.2
+          },
+          children: title
+        }), subtitle && /*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 9.5,
+            color: "#9CA3AF",
+            marginTop: 2
+          },
+          children: subtitle
+        })]
+      }), action && /*#__PURE__*/jsx("div", {
+        style: {
+          fontSize: 9.5,
+          color: "#6366F1",
+          fontWeight: 500,
+          flexShrink: 0
+        },
+        children: action
+      })]
+    }), children]
+  });
+};
+var MiniTable = function MiniTable(_ref6) {
+  var _ref6$head = _ref6.head,
+    head = _ref6$head === void 0 ? [] : _ref6$head,
+    _ref6$rows = _ref6.rows,
+    rows = _ref6$rows === void 0 ? [] : _ref6$rows;
+  return /*#__PURE__*/jsxs("table", {
+    style: {
+      width: "100%",
+      borderCollapse: "collapse",
+      fontSize: 9.5,
+      tableLayout: "fixed"
+    },
+    children: [/*#__PURE__*/jsx("thead", {
+      children: /*#__PURE__*/jsx("tr", {
+        style: {
+          background: "#F9FAFB"
+        },
+        children: head.map(function (h, i) {
+          return /*#__PURE__*/jsx("th", {
+            style: {
+              padding: "4px 6px",
+              textAlign: i === 0 ? "left" : "right",
+              fontWeight: 700,
+              fontSize: 8.5,
+              letterSpacing: "0.3px",
+              color: "#6B7280",
+              borderBottom: "1px solid #E5E7EB"
+            },
+            children: h
+          }, i);
+        })
+      })
+    }), /*#__PURE__*/jsx("tbody", {
+      children: rows.map(function (row, ri) {
+        return /*#__PURE__*/jsx("tr", {
+          style: {
+            background: ri % 2 === 1 ? "#F9FAFB" : "#fff"
+          },
+          children: row.map(function (cell, ci) {
+            return /*#__PURE__*/jsx("td", {
+              style: {
+                padding: "4px 6px",
+                textAlign: ci === 0 ? "left" : "right",
+                color: "#374151",
+                borderBottom: ri < rows.length - 1 ? "1px solid #F3F4F6" : "none"
+              },
+              children: cell
+            }, ci);
+          })
+        }, ri);
+      })
+    })]
+  });
+};
+var KpiCard = function KpiCard(_ref7) {
+  var title = _ref7.title,
+    value = _ref7.value,
+    trend = _ref7.trend,
+    detail = _ref7.detail;
+  var neg = "".concat(trend).trim().startsWith("-");
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      border: "1px solid #E5E7EB",
+      borderRadius: 8,
+      padding: "10px 12px 9px",
+      background: "#fff",
+      width: "100%",
+      minWidth: 0,
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: 2
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      style: {
+        fontSize: 8,
+        fontWeight: 700,
+        letterSpacing: "0.7px",
+        color: "#6B7280",
+        textTransform: "uppercase"
+      },
+      children: title
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        fontSize: 17,
+        fontWeight: 800,
+        color: "#111827",
+        lineHeight: 1.1,
+        marginTop: 2
+      },
+      children: value
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        fontSize: 10.5,
+        fontWeight: 600,
+        color: neg ? "#DC2626" : "#16A34A"
+      },
+      children: trend
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        fontSize: 8.5,
+        color: "#9CA3AF",
+        lineHeight: 1.4
+      },
+      children: detail
+    })]
+  });
+};
+var StatPair = function StatPair(_ref8) {
+  var label = _ref8.label,
+    val = _ref8.val,
+    trend = _ref8.trend;
+  var neg = "".concat(trend).trim().startsWith("-");
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      marginBottom: 6
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      style: {
+        fontSize: 8.5,
+        color: "#9CA3AF",
+        marginBottom: 1
+      },
+      children: label
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        alignItems: "baseline",
+        gap: 4
+      },
+      children: [/*#__PURE__*/jsx("span", {
+        style: {
+          fontSize: 13,
+          fontWeight: 700,
+          color: "#111827"
+        },
+        children: val
+      }), trend && /*#__PURE__*/jsx("span", {
+        style: {
+          fontSize: 9.5,
+          fontWeight: 600,
+          color: neg ? "#DC2626" : "#16A34A"
+        },
+        children: trend
+      })]
+    })]
+  });
+};
+var PageHeader = function PageHeader(_ref9) {
+  var dateLabel = _ref9.dateLabel,
+    generatedLabel = _ref9.generatedLabel,
+    activeFilters = _ref9.activeFilters,
+    page = _ref9.page;
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      padding: "22px ".concat(MX, "px 12px"),
+      borderBottom: "1px solid #E5E7EB",
+      flexShrink: 0
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      children: /*#__PURE__*/jsxs("div", {
+        style: {
+          display: "flex",
+          alignItems: "baseline",
+          gap: 10
+        },
+        children: [/*#__PURE__*/jsx("span", {
+          style: {
+            fontSize: 20,
+            fontWeight: 800,
+            color: "#111827",
+            letterSpacing: "-0.5px"
+          },
+          children: "Madinah"
+        }), /*#__PURE__*/jsx("span", {
+          style: {
+            fontSize: 8.5,
+            fontWeight: 700,
+            letterSpacing: "1.5px",
+            color: "#9CA3AF",
+            textTransform: "uppercase"
+          },
+          children: "PERFORMANCE REPORT"
+        })]
+      })
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        marginTop: 8,
+        fontSize: 13.5,
+        fontWeight: 700,
+        color: "#111827"
+      },
+      children: "Dashboard overview \u2014 Overall"
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        marginTop: 2
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 10.5,
+            color: "#374151"
+          },
+          children: dateLabel
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            fontSize: 9.5,
+            color: "#9CA3AF",
+            marginTop: 1
+          },
+          children: ["30-day window \xB7 Generated ", generatedLabel]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          fontSize: 9,
+          color: "#9CA3AF",
+          textAlign: "right",
+          alignSelf: "flex-end"
+        },
+        children: ["Page ", page, " of 2"]
+      })]
+    }), activeFilters && /*#__PURE__*/jsxs("div", {
+      style: {
+        marginTop: 7,
+        display: "inline-flex",
+        gap: 5,
+        background: "#F9FAFB",
+        border: "1px solid #E5E7EB",
+        borderRadius: 4,
+        padding: "3px 9px",
+        fontSize: 8.5
+      },
+      children: [/*#__PURE__*/jsx("span", {
+        style: {
+          fontWeight: 700,
+          color: "#374151",
+          letterSpacing: "0.4px"
+        },
+        children: "ACTIVE FILTERS"
+      }), /*#__PURE__*/jsx("span", {
+        style: {
+          color: "#6B7280"
+        },
+        children: activeFilters
+      })]
+    })]
+  });
+};
+var PageFooter = function PageFooter(_ref0) {
+  var generatedLabel = _ref0.generatedLabel,
+    page = _ref0.page;
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      padding: "7px ".concat(MX, "px"),
+      borderTop: "1px solid #E5E7EB",
+      marginTop: "auto",
+      flexShrink: 0
+    },
+    children: /*#__PURE__*/jsxs("span", {
+      style: {
+        fontSize: 8,
+        color: "#9CA3AF"
+      },
+      children: ["Confidential \xB7 Generated by Dashboard \xB7 ", generatedLabel, " \xA0\xA0 Page ", page, " of 2 \xB7 madinah.com"]
+    })
+  });
+};
+
+// ─── Main component ───────────────────────────────────────────────────────────
+var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
+  var _apiData$overviewStat, _apiData$trafficSourc, _apiData$trafficSourc2, _apiData$overviewStat2, _ob$peakDay;
+  var _ref1$apiData = _ref1.apiData,
+    apiData = _ref1$apiData === void 0 ? {} : _ref1$apiData,
+    _ref1$dateName = _ref1.dateName,
+    dateName = _ref1$dateName === void 0 ? "Last Period" : _ref1$dateName;
+  var now = new Date();
+  var generatedLabel = now.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }) + " · " + now.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit"
+  }) + " GMT";
+  var dateLabel = dateName;
+  var activeFilters = (apiData === null || apiData === void 0 ? void 0 : apiData.activeFilters) || "";
+
+  // ── data (reference-first defaults, with selective API overrides) ─────────
+  var overview = (apiData === null || apiData === void 0 || (_apiData$overviewStat = apiData.overviewStats) === null || _apiData$overviewStat === void 0 ? void 0 : _apiData$overviewStat.overview) || {};
+  var growth = (overview === null || overview === void 0 ? void 0 : overview.growthPercentage) || {};
+  var sample = {
+    totalRaised: 240938,
+    netRaised: 222300,
+    totalDonors: 215,
+    avgDonation: 130.58,
+    convRate: 1.7,
+    totalVisits: 12438,
+    roas: 3.0,
+    roasGrowth: 0.4,
+    refundRate: 0.84,
+    refundChange: -0.3,
+    refundCount: 2,
+    newDonors: 31,
+    returningDonors: 184,
+    medianGift: 75,
+    topDecileGift: 850,
+    adSpend: 72000,
+    attributedRevenue: 215000
+  };
+  var prefer = function prefer(val, fallback) {
+    var num = Number(val);
+    return Number.isFinite(num) && num !== 0 ? num : fallback;
+  };
+  var totalRaised = prefer(overview === null || overview === void 0 ? void 0 : overview.totalRevenue, sample.totalRaised);
+  var netRaised = prefer(overview === null || overview === void 0 ? void 0 : overview.netRevenue, sample.netRaised);
+  var totalDonors = prefer(overview === null || overview === void 0 ? void 0 : overview.totalDonations, sample.totalDonors);
+  var avgDonation = prefer(overview === null || overview === void 0 ? void 0 : overview.overallAVGDonations, sample.avgDonation);
+  var convRate = prefer(overview === null || overview === void 0 ? void 0 : overview.conversionRate, sample.convRate);
+  var totalVisits = prefer(apiData === null || apiData === void 0 ? void 0 : apiData.totalVisits, sample.totalVisits);
+  var passThrough = totalRaised > 0 ? "".concat((netRaised / totalRaised * 100).toFixed(1), "% pass-through") : "92.3% pass-through";
+  var refundsRaw = (apiData === null || apiData === void 0 ? void 0 : apiData.refundAndChargeBacks) || {};
+  var refundRate = prefer(refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRate, sample.refundRate);
+  var chargebackRate = prefer(refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.chargebackRate, 0.1);
+
+  // donor mix
+  var donorMixRaw = apiData === null || apiData === void 0 ? void 0 : apiData.donorPieChartData;
+  var newDonors = sample.newDonors,
+    returningDonors = sample.returningDonors,
+    mixAvgGift = avgDonation;
+  if (Array.isArray(donorMixRaw)) {
+    var nd = donorMixRaw.find(function (d) {
+      return /new/i.test(d.type);
+    }) || {};
+    var rd = donorMixRaw.find(function (d) {
+      return /returning/i.test(d.type);
+    }) || {};
+    newDonors = nd.totalDonations || 0;
+    returningDonors = rd.totalDonations || 0;
+    var totAmt = (nd.totalAmount || 0) + (rd.totalAmount || 0);
+    var totCnt = newDonors + returningDonors;
+    mixAvgGift = totCnt > 0 ? totAmt / totCnt : avgDonation;
+  } else if (donorMixRaw) {
+    newDonors = donorMixRaw.newDonors || 0;
+    returningDonors = donorMixRaw.returningDonors || 0;
+    mixAvgGift = donorMixRaw.avgGift || avgDonation;
+  }
+  var totalMix = newDonors + returningDonors || 1;
+  var newPct = Math.round(newDonors / totalMix * 100);
+  var retPct = 100 - newPct;
+
+  // recurring / one-time
+  var recData = Array.isArray(apiData === null || apiData === void 0 ? void 0 : apiData.recurringBarChartData) ? apiData.recurringBarChartData : [];
+  var recurringTotal = recData.reduce(function (s, i) {
+    return s + Number(i.recurring || i.recurringAmount || 0);
+  }, 0);
+  var oneTimeTotal = recData.reduce(function (s, i) {
+    return s + Number(i.oneTime || i.oneTimeAmount || 0);
+  }, 0);
+
+  // donor geography
+  var geoRaw = apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography;
+  var geoList = Array.isArray(geoRaw) ? geoRaw : Array.isArray(geoRaw === null || geoRaw === void 0 ? void 0 : geoRaw.data) ? geoRaw.data : [];
+
+  // traffic source
+  var trafficItems = Array.isArray(apiData === null || apiData === void 0 || (_apiData$trafficSourc = apiData.trafficSourceData) === null || _apiData$trafficSourc === void 0 ? void 0 : _apiData$trafficSourc.data) ? apiData.trafficSourceData.data : [];
+  var trafficTotal = Number((apiData === null || apiData === void 0 || (_apiData$trafficSourc2 = apiData.trafficSourceData) === null || _apiData$trafficSourc2 === void 0 ? void 0 : _apiData$trafficSourc2.totalRevenue) || 0);
+
+  // revenue trend series
+  var stackedTR = (apiData === null || apiData === void 0 || (_apiData$overviewStat2 = apiData.overviewStats) === null || _apiData$overviewStat2 === void 0 ? void 0 : _apiData$overviewStat2.totalRaised) || {};
+  var revSeries = [{
+    name: "Email",
+    data: ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.email) || []).map(function (i) {
+      return i.value || 0;
+    })
+  }, {
+    name: "Organic",
+    data: ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.organic) || []).map(function (i) {
+      return i.value || 0;
+    })
+  }, {
+    name: "Paid Ads",
+    data: ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.paidAds) || []).map(function (i) {
+      return i.value || 0;
+    })
+  }].filter(function (s) {
+    return s.data.length > 0;
+  });
+  var revCats = ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.organic) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.paidAds) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.email) || []).map(function (i) {
+    return i.date || "";
+  });
+
+  // campaigns
+  var campaigns = (apiData === null || apiData === void 0 ? void 0 : apiData.activeCampaigns) || [];
+
+  // order bump
+  var ob = (apiData === null || apiData === void 0 ? void 0 : apiData.orderBumpDetails) || {};
+  var obData = ((ob === null || ob === void 0 ? void 0 : ob.chart) || []).map(function (i) {
+    return Number(i.revenue || 0);
+  });
+
+  // upsell / downsell
+  var up = (apiData === null || apiData === void 0 ? void 0 : apiData.upSellDetails) || {};
+  var dn = (apiData === null || apiData === void 0 ? void 0 : apiData.downSellDetails) || {};
+
+  // referrals
+  var refCard = (apiData === null || apiData === void 0 ? void 0 : apiData.referralDetails) || {};
+  var refData = ((refCard === null || refCard === void 0 ? void 0 : refCard.chartData) || []).map(function (i) {
+    return Number(i.revenue || 0);
+  });
+  var C = {
+    indigo: "#6366F1",
+    emerald: "#10B981",
+    cyan: "#06B6D4"
+  };
+  var headerProps = {
+    dateLabel: dateLabel,
+    generatedLabel: generatedLabel,
+    activeFilters: activeFilters
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    style: {
+      display: "inline-flex",
+      flexDirection: "column",
+      gap: 0,
+      background: "#fff"
+    },
+    children: [/*#__PURE__*/jsxs("div", {
+      "data-export-page": "1",
+      style: {
+        width: W,
+        height: H,
+        background: "#fff",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+        boxSizing: "border-box",
+        overflow: "hidden"
+      },
+      children: [/*#__PURE__*/jsx(PageHeader, _objectSpread2(_objectSpread2({}, headerProps), {}, {
+        page: 1
+      })), /*#__PURE__*/jsxs("div", {
+        style: {
+          flex: 1,
+          padding: "12px ".concat(MX, "px 10px"),
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+          overflow: "hidden"
+        },
+        children: [/*#__PURE__*/jsx(KpiCard, {
+          title: "Total Raised",
+          value: d$(totalRaised),
+          trend: "".concat(signed((growth === null || growth === void 0 ? void 0 : growth.totalRevenue) || 18), " vs last month"),
+          detail: "".concat(passThrough, " \xB7 ").concat(formatNumber(totalDonors), " donors \xB7 ").concat(d$(avgDonation), " avg \xB7 ").concat(formatNumber(totalVisits), " visits")
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gap: 7
+          },
+          children: [/*#__PURE__*/jsx(KpiCard, {
+            title: "Net Raised",
+            value: d$(netRaised),
+            trend: signed((growth === null || growth === void 0 ? void 0 : growth.netRevenue) || 17.4),
+            detail: passThrough
+          }), /*#__PURE__*/jsx(KpiCard, {
+            title: "Total Donors",
+            value: "".concat(formatNumber(totalDonors)),
+            trend: signed((growth === null || growth === void 0 ? void 0 : growth.totalDonations) || 16.8),
+            detail: "".concat(formatNumber(newDonors), " new \xB7 ").concat(formatNumber(returningDonors), " returning")
+          }), /*#__PURE__*/jsx(KpiCard, {
+            title: "Avg Donation",
+            value: d$(avgDonation),
+            trend: signed((growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) || 8.4),
+            detail: "Median ".concat(d$((apiData === null || apiData === void 0 ? void 0 : apiData.medianGift) || sample.medianGift), " \xB7 top decile ").concat(d$((apiData === null || apiData === void 0 ? void 0 : apiData.topDecileGift) || sample.topDecileGift))
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gap: 7
+          },
+          children: [/*#__PURE__*/jsx(KpiCard, {
+            title: "ROAS",
+            value: "".concat(formatNumber((apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) || sample.roas), "\xD7"),
+            trend: signed((apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) || sample.roasGrowth, "×"),
+            detail: "".concat(d$((apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) || sample.adSpend), " spend \xB7 ").concat(d$((apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) || sample.attributedRevenue), " attrib.")
+          }), /*#__PURE__*/jsx(KpiCard, {
+            title: "Conversion",
+            value: pct(convRate, 1),
+            trend: "".concat(signed((growth === null || growth === void 0 ? void 0 : growth.conversionRate) || 0.21, "pp")),
+            detail: "".concat(formatNumber(totalDonors), " from ").concat(formatNumber(totalVisits), " visits")
+          }), /*#__PURE__*/jsx(KpiCard, {
+            title: "Refund Rate",
+            value: pct(refundRate, 2),
+            trend: "".concat(signed((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) || sample.refundChange, "pp")),
+            detail: "".concat(formatNumber((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundCount) || sample.refundCount), " refunds this period")
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            border: "1px solid #E5E7EB",
+            borderRadius: 8,
+            background: "#fff",
+            padding: "12px 14px 10px",
+            flex: 1
+          },
+          children: [/*#__PURE__*/jsxs("div", {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              marginBottom: 6
+            },
+            children: [/*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsx("div", {
+                style: {
+                  fontSize: 13,
+                  fontWeight: 700,
+                  color: "#111827"
+                },
+                children: "Total revenue trend"
+              }), /*#__PURE__*/jsx("div", {
+                style: {
+                  fontSize: 9.5,
+                  color: "#9CA3AF",
+                  marginTop: 1
+                },
+                children: "Last 30 days \xB7 daily aggregation"
+              })]
+            }), /*#__PURE__*/jsxs("div", {
+              style: {
+                textAlign: "right"
+              },
+              children: [/*#__PURE__*/jsx("span", {
+                style: {
+                  fontSize: 15,
+                  fontWeight: 800,
+                  color: "#111827"
+                },
+                children: d$(totalRaised)
+              }), /*#__PURE__*/jsxs("span", {
+                style: {
+                  marginLeft: 8,
+                  fontSize: 10.5,
+                  fontWeight: 600,
+                  color: "#16A34A"
+                },
+                children: [signed(growth === null || growth === void 0 ? void 0 : growth.totalRevenue), " vs ", dateLabel]
+              })]
+            })]
+          }), /*#__PURE__*/jsx("div", {
+            style: {
+              display: "flex",
+              gap: 14,
+              marginBottom: 6
+            },
+            children: [["Email", C.indigo], ["Organic", C.emerald], ["Paid Ads", C.cyan]].map(function (_ref10) {
+              var _ref11 = _slicedToArray(_ref10, 2),
+                name = _ref11[0],
+                color = _ref11[1];
+              return /*#__PURE__*/jsxs("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 5
+                },
+                children: [/*#__PURE__*/jsx("div", {
+                  style: {
+                    width: 20,
+                    height: 2.5,
+                    background: color,
+                    borderRadius: 2
+                  }
+                }), /*#__PURE__*/jsx("span", {
+                  style: {
+                    fontSize: 9.5,
+                    color: "#6B7280"
+                  },
+                  children: name
+                })]
+              }, name);
+            })
+          }), /*#__PURE__*/jsx(LineChart, {
+            series: revSeries,
+            categories: revCats,
+            width: CW - 28,
+            height: 300
+          })]
+        })]
+      }), /*#__PURE__*/jsx(PageFooter, {
+        generatedLabel: generatedLabel,
+        page: 1
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      "data-export-page": "2",
+      style: {
+        width: W,
+        height: H,
+        background: "#fff",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+        boxSizing: "border-box",
+        overflow: "hidden"
+      },
+      children: [/*#__PURE__*/jsx(PageHeader, _objectSpread2(_objectSpread2({}, headerProps), {}, {
+        page: 2
+      })), /*#__PURE__*/jsxs("div", {
+        style: {
+          flex: 1,
+          padding: "10px ".concat(MX, "px 8px"),
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          overflow: "hidden"
+        },
+        children: [/*#__PURE__*/jsx(Panel, {
+          title: "Active campaigns",
+          subtitle: "Live fundraisers ranked by velocity",
+          action: "View all \u2192",
+          children: /*#__PURE__*/jsx(MiniTable, {
+            head: ["CAMPAIGN", "RAISED", "PROGRESS", "DONORS", "AVG GIFT", "STATUS"],
+            rows: campaigns.length ? campaigns.map(function (c) {
+              return [c.title || "Untitled", d$(c.collectedAmount || 0), "".concat(Math.round((c.collectedAmount || 0) / (c.usdTargetAmount || 1) * 100), "%"), "".concat(formatNumber(c.uniqueDonationsCount || 0)), d$(c.avgGift || 0), c.status || "Active"];
+            }) : [["-", "$0", "0%", "0", "$0", "-"]]
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            gap: 8,
+            flexShrink: 0
+          },
+          children: [/*#__PURE__*/jsx(Panel, {
+            title: "Donor mix",
+            subtitle: "Acquisition vs retention",
+            style: {
+              flex: 1
+            },
+            children: /*#__PURE__*/jsxs("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 14
+              },
+              children: [/*#__PURE__*/jsx(Donut, {
+                segments: [{
+                  value: newDonors,
+                  color: C.indigo
+                }, {
+                  value: returningDonors,
+                  color: C.emerald
+                }],
+                size: 88,
+                centerVal: "".concat(formatNumber(totalMix)),
+                centerLabel: "donors"
+              }), /*#__PURE__*/jsxs("div", {
+                style: {
+                  flex: 1
+                },
+                children: [/*#__PURE__*/jsxs("div", {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    marginBottom: 5
+                  },
+                  children: [/*#__PURE__*/jsx("div", {
+                    style: {
+                      width: 9,
+                      height: 9,
+                      borderRadius: "50%",
+                      background: C.indigo,
+                      flexShrink: 0
+                    }
+                  }), /*#__PURE__*/jsxs("span", {
+                    style: {
+                      fontSize: 10,
+                      color: "#374151"
+                    },
+                    children: ["New donors ", formatNumber(newDonors), " \xB7 ", newPct, "%"]
+                  })]
+                }), /*#__PURE__*/jsxs("div", {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    marginBottom: 9
+                  },
+                  children: [/*#__PURE__*/jsx("div", {
+                    style: {
+                      width: 9,
+                      height: 9,
+                      borderRadius: "50%",
+                      background: C.emerald,
+                      flexShrink: 0
+                    }
+                  }), /*#__PURE__*/jsxs("span", {
+                    style: {
+                      fontSize: 10,
+                      color: "#374151"
+                    },
+                    children: ["Returning ", formatNumber(returningDonors), " \xB7 ", retPct, "%"]
+                  })]
+                }), /*#__PURE__*/jsx(Divider, {
+                  mb: 7
+                }), /*#__PURE__*/jsx("div", {
+                  style: {
+                    fontSize: 15,
+                    fontWeight: 800,
+                    color: "#111827"
+                  },
+                  children: d$(mixAvgGift)
+                }), /*#__PURE__*/jsx("div", {
+                  style: {
+                    fontSize: 8.5,
+                    color: "#9CA3AF"
+                  },
+                  children: "Avg gift"
+                }), /*#__PURE__*/jsxs("div", {
+                  style: {
+                    fontSize: 9,
+                    color: "#16A34A",
+                    marginTop: 1
+                  },
+                  children: [signed(growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations), " vs ", dateLabel]
+                })]
+              })]
+            })
+          }), /*#__PURE__*/jsx(Panel, {
+            title: "Recurring vs one-time",
+            subtitle: "Donation type \xB7 weekly",
+            style: {
+              flex: 1
+            },
+            children: function () {
+              var tot = recurringTotal + oneTimeTotal || 1;
+              var rPct = recurringTotal / tot * 100;
+              var oPct = oneTimeTotal / tot * 100;
+              return /*#__PURE__*/jsxs("div", {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 10,
+                  marginTop: 4
+                },
+                children: [/*#__PURE__*/jsxs("div", {
+                  children: [/*#__PURE__*/jsxs("div", {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      marginBottom: 3
+                    },
+                    children: [/*#__PURE__*/jsx("span", {
+                      style: {
+                        fontSize: 10,
+                        color: "#374151"
+                      },
+                      children: "Recurring"
+                    }), /*#__PURE__*/jsx("span", {
+                      style: {
+                        fontSize: 10,
+                        fontWeight: 700,
+                        color: "#111827"
+                      },
+                      children: d$(recurringTotal)
+                    })]
+                  }), /*#__PURE__*/jsx("div", {
+                    style: {
+                      height: 10,
+                      background: "#EEF2FF",
+                      borderRadius: 3
+                    },
+                    children: /*#__PURE__*/jsx("div", {
+                      style: {
+                        width: "".concat(rPct, "%"),
+                        height: "100%",
+                        background: C.indigo,
+                        borderRadius: 3
+                      }
+                    })
+                  })]
+                }), /*#__PURE__*/jsxs("div", {
+                  children: [/*#__PURE__*/jsxs("div", {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      marginBottom: 3
+                    },
+                    children: [/*#__PURE__*/jsx("span", {
+                      style: {
+                        fontSize: 10,
+                        color: "#374151"
+                      },
+                      children: "One-time"
+                    }), /*#__PURE__*/jsx("span", {
+                      style: {
+                        fontSize: 10,
+                        fontWeight: 700,
+                        color: "#111827"
+                      },
+                      children: d$(oneTimeTotal)
+                    })]
+                  }), /*#__PURE__*/jsx("div", {
+                    style: {
+                      height: 10,
+                      background: "#EEF2FF",
+                      borderRadius: 3
+                    },
+                    children: /*#__PURE__*/jsx("div", {
+                      style: {
+                        width: "".concat(oPct, "%"),
+                        height: "100%",
+                        background: "#C7D2FE",
+                        borderRadius: 3
+                      }
+                    })
+                  })]
+                })]
+              });
+            }()
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            gap: 8,
+            flexShrink: 0
+          },
+          children: [/*#__PURE__*/jsx(Panel, {
+            title: "Donor geography",
+            subtitle: "Top countries \xB7 ".concat(formatNumber(totalDonors), " total"),
+            style: {
+              flex: 1
+            },
+            children: (geoList.length ? geoList.slice(0, 6) : []).map(function (g, i) {
+              return /*#__PURE__*/jsxs("div", {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  padding: "3.5px 0",
+                  borderBottom: i < 5 ? "1px solid #F3F4F6" : "none"
+                },
+                children: [/*#__PURE__*/jsx("span", {
+                  style: {
+                    fontSize: 9.5,
+                    color: "#374151"
+                  },
+                  children: g.country || g.name || "-"
+                }), /*#__PURE__*/jsxs("span", {
+                  style: {
+                    fontSize: 9.5,
+                    color: "#6B7280"
+                  },
+                  children: [formatNumber(g.totalDonors || g.donors || 0), " \xB7 ", formatNumber(g.percentage || 0), "%"]
+                })]
+              }, i);
+            })
+          }), /*#__PURE__*/jsxs(Panel, {
+            title: "Refunds & chargebacks",
+            subtitle: "Trust health \xB7 30-day window",
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/jsxs("div", {
+              style: {
+                display: "flex",
+                gap: 18,
+                marginBottom: 8
+              },
+              children: [/*#__PURE__*/jsxs("div", {
+                children: [/*#__PURE__*/jsx("div", {
+                  style: {
+                    fontSize: 8,
+                    fontWeight: 700,
+                    letterSpacing: "0.5px",
+                    color: "#6B7280",
+                    marginBottom: 2
+                  },
+                  children: "REFUNDS"
+                }), /*#__PURE__*/jsx("div", {
+                  style: {
+                    fontSize: 18,
+                    fontWeight: 800,
+                    color: "#111827"
+                  },
+                  children: pct(refundRate, 1)
+                }), /*#__PURE__*/jsx("div", {
+                  style: {
+                    fontSize: 9.5,
+                    color: "#16A34A",
+                    fontWeight: 600
+                  },
+                  children: signed(refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange, "pp")
+                })]
+              }), /*#__PURE__*/jsxs("div", {
+                children: [/*#__PURE__*/jsx("div", {
+                  style: {
+                    fontSize: 8,
+                    fontWeight: 700,
+                    letterSpacing: "0.5px",
+                    color: "#6B7280",
+                    marginBottom: 2
+                  },
+                  children: "CHARGEBACKS"
+                }), /*#__PURE__*/jsx("div", {
+                  style: {
+                    fontSize: 18,
+                    fontWeight: 800,
+                    color: "#111827"
+                  },
+                  children: pct(chargebackRate, 1)
+                }), /*#__PURE__*/jsx("div", {
+                  style: {
+                    fontSize: 9.5,
+                    color: "#9CA3AF"
+                  },
+                  children: "stable"
+                })]
+              })]
+            }), /*#__PURE__*/jsx(Divider, {
+              mb: 6
+            }), /*#__PURE__*/jsxs("div", {
+              style: {
+                fontSize: 8.5,
+                color: "#6B7280",
+                lineHeight: 1.5
+              },
+              children: [d$((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundAmount) || 0), " refunded \xB7 ", d$((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.disputedAmount) || 0), " disputed \xB7 ", formatNumber((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.casesLost) || 0), " cases lost"]
+            })]
+          }), /*#__PURE__*/jsx(Panel, {
+            title: "Traffic source",
+            subtitle: "Revenue by channel \xB7 30 days",
+            style: {
+              flex: 1
+            },
+            children: /*#__PURE__*/jsx(MiniTable, {
+              head: ["SOURCE", "REVENUE", "SHARE"],
+              rows: [].concat(_toConsumableArray(trafficItems.map(function (t) {
+                return [t.source || t.name || "-", d$(t.revenue || t.raised || 0), "".concat(formatNumber(t.share || t.percentage || 0), "%")];
+              })), _toConsumableArray(trafficItems.length ? [["Total", d$(trafficTotal), ""]] : []))
+            })
+          }), /*#__PURE__*/jsxs(Panel, {
+            title: "Order Bump",
+            subtitle: "Revenue trend \xB7 last 30 days",
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/jsx("div", {
+              style: {
+                fontSize: 17,
+                fontWeight: 800,
+                color: "#111827"
+              },
+              children: d$((ob === null || ob === void 0 ? void 0 : ob.totalRevenue) || 0)
+            }), /*#__PURE__*/jsxs("div", {
+              style: {
+                fontSize: 10,
+                color: "#16A34A",
+                fontWeight: 600,
+                marginBottom: 5
+              },
+              children: [signed(ob === null || ob === void 0 ? void 0 : ob.growthPercentage), " vs ", dateLabel]
+            }), /*#__PURE__*/jsx(Sparkline, {
+              data: obData.length ? obData : [0, 1],
+              color: C.indigo,
+              width: 110,
+              height: 34
+            }), /*#__PURE__*/jsx(Divider, {
+              mt: 8,
+              mb: 7
+            }), /*#__PURE__*/jsx("div", {
+              style: {
+                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 (_ref12) {
+                var _ref13 = _slicedToArray(_ref12, 2),
+                  l = _ref13[0],
+                  v = _ref13[1];
+                return /*#__PURE__*/jsxs("div", {
+                  children: [/*#__PURE__*/jsx("div", {
+                    style: {
+                      fontSize: 8,
+                      color: "#9CA3AF"
+                    },
+                    children: l
+                  }), /*#__PURE__*/jsx("div", {
+                    style: {
+                      fontSize: 11.5,
+                      fontWeight: 700,
+                      color: "#111827"
+                    },
+                    children: v
+                  })]
+                }, l);
+              })
+            })]
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            gap: 8,
+            flexShrink: 0
+          },
+          children: [/*#__PURE__*/jsx(Panel, {
+            title: "Upsell",
+            subtitle: "Acceptance & raised",
+            style: {
+              flex: 1
+            },
+            children: /*#__PURE__*/jsxs("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 12
+              },
+              children: [/*#__PURE__*/jsx(Donut, {
+                segments: [{
+                  value: (up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0,
+                  color: C.indigo
+                }, {
+                  value: Math.max(0, 100 - ((up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0)),
+                  color: "#E5E7EB"
+                }],
+                size: 76,
+                centerVal: "".concat(formatNumber((up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0), "%"),
+                centerLabel: "accepted"
+              }), /*#__PURE__*/jsxs("div", {
+                style: {
+                  flex: 1
+                },
+                children: [/*#__PURE__*/jsx(StatPair, {
+                  label: "Acceptance",
+                  val: pct((up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0, 1),
+                  trend: signed(up === null || up === void 0 ? void 0 : up.acceptanceGrowth)
+                }), /*#__PURE__*/jsx(StatPair, {
+                  label: "Raised",
+                  val: d$((up === null || up === void 0 ? void 0 : up.raised) || 0),
+                  trend: signed(up === null || up === void 0 ? void 0 : up.raisedGrowth)
+                })]
+              })]
+            })
+          }), /*#__PURE__*/jsx(Panel, {
+            title: "Downsell",
+            subtitle: "Acceptance & raised",
+            style: {
+              flex: 1
+            },
+            children: /*#__PURE__*/jsxs("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 12
+              },
+              children: [/*#__PURE__*/jsx(Donut, {
+                segments: [{
+                  value: (dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0,
+                  color: C.cyan
+                }, {
+                  value: Math.max(0, 100 - ((dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0)),
+                  color: "#E5E7EB"
+                }],
+                size: 76,
+                centerVal: "".concat(formatNumber((dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0), "%"),
+                centerLabel: "accepted"
+              }), /*#__PURE__*/jsxs("div", {
+                style: {
+                  flex: 1
+                },
+                children: [/*#__PURE__*/jsx(StatPair, {
+                  label: "Acceptance",
+                  val: pct((dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0, 1),
+                  trend: signed(dn === null || dn === void 0 ? void 0 : dn.acceptanceGrowth)
+                }), /*#__PURE__*/jsx(StatPair, {
+                  label: "Raised",
+                  val: d$((dn === null || dn === void 0 ? void 0 : dn.raised) || 0),
+                  trend: signed(dn === null || dn === void 0 ? void 0 : dn.raisedGrowth)
+                })]
+              })]
+            })
+          }), /*#__PURE__*/jsxs(Panel, {
+            title: "Referrals",
+            subtitle: "Revenue trend \xB7 last 30 days",
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/jsx("div", {
+              style: {
+                fontSize: 17,
+                fontWeight: 800,
+                color: "#111827"
+              },
+              children: d$((refCard === null || refCard === void 0 ? void 0 : refCard.totalRevenue) || 0)
+            }), /*#__PURE__*/jsxs("div", {
+              style: {
+                fontSize: 10,
+                color: "#16A34A",
+                fontWeight: 600,
+                marginBottom: 5
+              },
+              children: [signed(refCard === null || refCard === void 0 ? void 0 : refCard.growthPercentage), " vs ", dateLabel]
+            }), /*#__PURE__*/jsx(Sparkline, {
+              data: refData.length ? refData : [0, 1],
+              color: C.emerald,
+              width: 110,
+              height: 34
+            }), /*#__PURE__*/jsx(Divider, {
+              mt: 8,
+              mb: 7
+            }), /*#__PURE__*/jsx("div", {
+              style: {
+                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 (_ref14) {
+                var _ref15 = _slicedToArray(_ref14, 2),
+                  l = _ref15[0],
+                  v = _ref15[1];
+                return /*#__PURE__*/jsxs("div", {
+                  children: [/*#__PURE__*/jsx("div", {
+                    style: {
+                      fontSize: 8,
+                      color: "#9CA3AF"
+                    },
+                    children: l
+                  }), /*#__PURE__*/jsx("div", {
+                    style: {
+                      fontSize: 11.5,
+                      fontWeight: 700,
+                      color: "#111827"
+                    },
+                    children: v
+                  })]
+                }, l);
+              })
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsx(PageFooter, {
+        generatedLabel: generatedLabel,
+        page: 2
+      })]
+    })]
+  });
+});
+ExportPdfLayout.displayName = "ExportPdfLayout";
+
 var OverallSection$2 = /*#__PURE__*/lazy(function () {
   return Promise.resolve().then(function () { return OverallSection$1; });
 });
@@ -917,139 +2396,96 @@ var NewOverview = function NewOverview(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     activeSection = _useState4[0],
     setActiveSection = _useState4[1];
-  var exportCaptureRef = useRef(null);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showExportLayout = _useState6[0],
+    setShowExportLayout = _useState6[1];
+  var exportLayoutRef = useRef(null);
   useEffect(function () {
     if (activeSectionProp) {
       var capitalized = activeSectionProp.charAt(0).toUpperCase() + activeSectionProp.slice(1).toLowerCase();
       setActiveSection(capitalized);
     }
   }, [activeSectionProp]);
+
+  // Step 1 – mount the off-screen export layout whenever the trigger fires
   useEffect(function () {
-    if (exportTrigger <= 0) return;
-    var buildAndDownloadPdf = /*#__PURE__*/function () {
+    if (exportTrigger > 0) setShowExportLayout(true);
+  }, [exportTrigger]);
+
+  // Step 2 – once the layout is in the DOM, capture each page and build the PDF
+  useEffect(function () {
+    if (!showExportLayout) return;
+    var doPdfExport = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var captureNode, _yield$Promise$all, _yield$Promise$all2, jsPDF, html2canvasModule, html2canvas, dateLabel, generatedAt, generatedLabel, canvas, sectionImageWidth, sectionImageHeight, doc, pageWidth, pageHeight, marginX, contentTop, contentBottom, contentWidth, contentHeight, pxPerPt, pageSliceHeightPx, totalPages, addHeader, addFooter, i, startY, sliceHeight, pageCanvas, pageCtx, pageImage, renderHeight, safeDate, _t;
+        var container, pageEls, _yield$Promise$all, _yield$Promise$all2, jsPDF, html2canvasModule, html2canvas, doc, pdfW, pdfH, i, el, cvs, safeDate, _t;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.p = _context.n) {
             case 0:
               _context.p = 0;
-              if (!(activeSection !== "Overall")) {
-                _context.n = 1;
+              _context.n = 1;
+              return new Promise(function (r) {
+                return requestAnimationFrame(function () {
+                  return requestAnimationFrame(r);
+                });
+              });
+            case 1:
+              _context.n = 2;
+              return new Promise(function (r) {
+                return setTimeout(r, 400);
+              });
+            case 2:
+              container = exportLayoutRef.current;
+              if (container) {
+                _context.n = 3;
                 break;
               }
               return _context.a(2);
-            case 1:
-              captureNode = exportCaptureRef.current;
-              if (captureNode) {
-                _context.n = 2;
+            case 3:
+              pageEls = container.querySelectorAll("[data-export-page]");
+              if (pageEls.length) {
+                _context.n = 4;
                 break;
               }
               return _context.a(2);
-            case 2:
-              _context.n = 3;
+            case 4:
+              _context.n = 5;
               return Promise.all([import('jspdf'), Promise.resolve().then(function () { return html2canvas_esm; })]);
-            case 3:
+            case 5:
               _yield$Promise$all = _context.v;
               _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
               jsPDF = _yield$Promise$all2[0].jsPDF;
               html2canvasModule = _yield$Promise$all2[1];
               html2canvas = html2canvasModule["default"] || html2canvasModule;
-              dateLabel = dateName || "Last Period";
-              generatedAt = new Date();
-              generatedLabel = "".concat(generatedAt.toLocaleDateString(), " ").concat(generatedAt.toLocaleTimeString(), " GMT");
-              _context.n = 4;
-              return new Promise(function (resolve) {
-                return setTimeout(resolve, 900);
-              });
-            case 4:
-              _context.n = 5;
-              return html2canvas(captureNode, {
-                scale: 2,
-                useCORS: true,
-                backgroundColor: "#ffffff",
-                width: captureNode.scrollWidth,
-                height: captureNode.scrollHeight,
-                windowWidth: captureNode.scrollWidth,
-                windowHeight: captureNode.scrollHeight,
-                scrollX: 0,
-                scrollY: -window.scrollY
-              });
-            case 5:
-              canvas = _context.v;
-              sectionImageWidth = canvas.width;
-              sectionImageHeight = canvas.height;
               doc = new jsPDF({
                 unit: "pt",
                 format: "a4"
               });
-              pageWidth = doc.internal.pageSize.getWidth();
-              pageHeight = doc.internal.pageSize.getHeight();
-              marginX = 40;
-              contentTop = 112;
-              contentBottom = 40;
-              contentWidth = pageWidth - marginX * 2;
-              contentHeight = pageHeight - contentTop - contentBottom;
-              pxPerPt = sectionImageWidth / contentWidth;
-              pageSliceHeightPx = Math.max(1, Math.floor(contentHeight * pxPerPt));
-              totalPages = Math.max(1, Math.ceil(sectionImageHeight / pageSliceHeightPx));
-              addHeader = function addHeader() {
-                doc.setFont("helvetica", "bold");
-                doc.setTextColor(17, 24, 39);
-                doc.setFontSize(17);
-                doc.text("Madinah", marginX, 34);
-                doc.setFontSize(9.5);
-                doc.setTextColor(75, 85, 99);
-                doc.text("PERFORMANCE REPORT", marginX, 50);
-                doc.setTextColor(17, 24, 39);
-                doc.setFontSize(12);
-                doc.text("Dashboard overview — Overall", marginX, 72);
-                doc.setFont("helvetica", "normal");
-                doc.setFontSize(9);
-                doc.setTextColor(107, 114, 128);
-                doc.text("".concat(dateLabel), marginX, 88);
-                doc.text("30-day window \xB7 Generated ".concat(generatedLabel), marginX, 100);
-                var activeFilters = (apiData === null || apiData === void 0 ? void 0 : apiData.activeFilters) || "";
-                if (activeFilters) {
-                  doc.setFontSize(8);
-                  doc.setTextColor(55, 65, 81);
-                  doc.text("ACTIVE FILTERS ".concat(activeFilters), marginX, 110);
-                }
-              };
-              addFooter = function addFooter(pageNumber, totalPages) {
-                doc.setFont("helvetica", "normal");
-                doc.setTextColor(107, 114, 128);
-                doc.setFontSize(8);
-                doc.text("Confidential \xB7 Generated by Dashboard \xB7 ".concat(generatedLabel, " \xB7 Page ").concat(pageNumber, " of ").concat(totalPages, " \xB7 madinah.com"), marginX, pageHeight - 18);
-              };
+              pdfW = doc.internal.pageSize.getWidth();
+              pdfH = doc.internal.pageSize.getHeight();
               i = 0;
             case 6:
-              if (!(i < totalPages)) {
+              if (!(i < pageEls.length)) {
                 _context.n = 9;
                 break;
               }
-              if (i > 0) doc.addPage();
-              addHeader();
-              startY = i * pageSliceHeightPx;
-              sliceHeight = Math.min(pageSliceHeightPx, sectionImageHeight - startY);
-              pageCanvas = document.createElement("canvas");
-              pageCanvas.width = sectionImageWidth;
-              pageCanvas.height = sliceHeight;
-              pageCtx = pageCanvas.getContext("2d");
-              if (pageCtx) {
-                _context.n = 7;
-                break;
-              }
-              return _context.a(3, 8);
+              el = pageEls[i];
+              _context.n = 7;
+              return html2canvas(el, {
+                scale: 2,
+                useCORS: true,
+                backgroundColor: "#ffffff",
+                width: el.offsetWidth,
+                height: el.offsetHeight,
+                windowWidth: el.offsetWidth,
+                windowHeight: el.offsetHeight
+              });
             case 7:
-              pageCtx.fillStyle = "#ffffff";
-              pageCtx.fillRect(0, 0, pageCanvas.width, pageCanvas.height);
-              pageCtx.drawImage(canvas, 0, startY, sectionImageWidth, sliceHeight, 0, 0, sectionImageWidth, sliceHeight);
-              pageImage = pageCanvas.toDataURL("image/png");
-              renderHeight = sliceHeight / pxPerPt;
-              doc.addImage(pageImage, "PNG", marginX, contentTop, contentWidth, renderHeight, undefined, "FAST");
-              addFooter(i + 1, totalPages);
+              cvs = _context.v;
+              if (i > 0) doc.addPage();
+              doc.addImage(cvs.toDataURL("image/png"), "PNG", 0, 0, pdfW, pdfH, undefined, "FAST");
             case 8:
-              i += 1;
+              i++;
               _context.n = 6;
               break;
             case 9:
@@ -1060,19 +2496,22 @@ var NewOverview = function NewOverview(_ref) {
             case 10:
               _context.p = 10;
               _t = _context.v;
-              // Keep console message for host app debugging when export dependency is missing.
               console.error("Failed to export overall dashboard PDF:", _t);
             case 11:
+              _context.p = 11;
+              setShowExportLayout(false);
+              return _context.f(11);
+            case 12:
               return _context.a(2);
           }
-        }, _callee, null, [[0, 10]]);
+        }, _callee, null, [[0, 10, 11, 12]]);
       }));
-      return function buildAndDownloadPdf() {
+      return function doPdfExport() {
         return _ref2.apply(this, arguments);
       };
     }();
-    buildAndDownloadPdf();
-  }, [exportTrigger, activeSection, apiData, dateName]);
+    doPdfExport();
+  }, [showExportLayout]);
   var currentData = metric === "Revenue" ? revenueData : donationsData;
   var oneTimeData = (apiData === null || apiData === void 0 ? void 0 : apiData.oneTimeDonations) || [];
   var oneTimeValues = oneTimeData.length > 0 ? oneTimeData.map(function (item) {
@@ -1232,15 +2671,14 @@ var NewOverview = function NewOverview(_ref) {
     data: [8, 9, 11, 10, 10, 12, 9, 11, 10],
     categories: categories
   }];
-  return /*#__PURE__*/jsx(Box, {
-    ref: exportCaptureRef,
+  return /*#__PURE__*/jsxs(Box, {
     sx: {
       minHeight: "100vh",
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
     },
-    children: /*#__PURE__*/jsxs(Suspense, {
+    children: [/*#__PURE__*/jsxs(Suspense, {
       fallback: /*#__PURE__*/jsx(Box, {
         sx: {
           display: "flex",
@@ -1270,7 +2708,22 @@ var NewOverview = function NewOverview(_ref) {
         sx: {},
         children: /*#__PURE__*/jsx(EmailSection$2, {})
       })]
-    })
+    }), showExportLayout && /*#__PURE__*/jsx("div", {
+      "aria-hidden": "true",
+      style: {
+        position: "fixed",
+        top: 0,
+        left: "-9999px",
+        zIndex: -1,
+        pointerEvents: "none",
+        opacity: 1
+      },
+      children: /*#__PURE__*/jsx(ExportPdfLayout, {
+        ref: exportLayoutRef,
+        apiData: apiData,
+        dateName: dateName
+      })
+    })]
   });
 };
 
@@ -3311,19 +4764,6 @@ var DonorMixCard = function DonorMixCard(_ref) {
   });
 };
 
-function formatNumber(num) {
-  if (num >= 1000000000) {
-    return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
-  }
-  if (num >= 1000000) {
-    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
-  }
-  if (num >= 1000) {
-    return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
-  }
-  return (num !== null && num !== void 0 ? num : 0).toString();
-}
-
 var TrafficSourceCard = function TrafficSourceCard(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Traffic source" : _ref$title,