npm - @ammarkhalidfarooq/dashboard-package - Versions diffs - 0.6.94 → 0.6.96 - Mend

@ammarkhalidfarooq/dashboard-package 0.6.94 → 0.6.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.es.js CHANGED Viewed

@@ -1482,7 +1482,7 @@ var parseDonationTypeChartData = function parseDonationTypeChartData(donationTyp
 /** Normalizes refundAndChargeBacks from API for PDF + report cards. */
 var parseRefundsChargebacks = function parseRefundsChargebacks(refundsData) {
-  var _raw$refundRate, _raw$chargebackRate, _raw$totalRefundedAmo, _raw$totalRefunds, _raw$totalChargebacks, _raw$wonChargebacks, _raw$lostChargebacks, _raw$growthPercentage, _raw$totalRevenue;
+  var _raw$refundRate, _raw$chargebackRate, _raw$totalRefundedAmo, _raw$totalRefunds, _raw$totalChargebacks, _raw$wonChargebacks, _raw$lostChargebacks, _raw$growthPercentage, _ref, _raw$disputedAmount, _raw$totalRevenue;
   var raw = refundsData && _typeof(refundsData) === "object" ? refundsData : {};
   return {
     refundRate: Number((_raw$refundRate = raw.refundRate) !== null && _raw$refundRate !== void 0 ? _raw$refundRate : 0),
@@ -1493,6 +1493,7 @@ var parseRefundsChargebacks = function parseRefundsChargebacks(refundsData) {
     wonChargebacks: Number((_raw$wonChargebacks = raw.wonChargebacks) !== null && _raw$wonChargebacks !== void 0 ? _raw$wonChargebacks : 0),
     lostChargebacks: Number((_raw$lostChargebacks = raw.lostChargebacks) !== null && _raw$lostChargebacks !== void 0 ? _raw$lostChargebacks : 0),
     growthPercentage: Number((_raw$growthPercentage = raw.growthPercentage) !== null && _raw$growthPercentage !== void 0 ? _raw$growthPercentage : 0),
+    disputedAmount: Number((_ref = (_raw$disputedAmount = raw.disputedAmount) !== null && _raw$disputedAmount !== void 0 ? _raw$disputedAmount : raw.totalDisputed) !== null && _ref !== void 0 ? _ref : 0),
     chartData: Array.isArray(raw.chartData) ? raw.chartData : [],
     totalRevenue: Number((_raw$totalRevenue = raw.totalRevenue) !== null && _raw$totalRevenue !== void 0 ? _raw$totalRevenue : 0)
   };
@@ -1500,11 +1501,11 @@ var parseRefundsChargebacks = function parseRefundsChargebacks(refundsData) {
 /** Median / top-decile for avg donation KPI (not shown in Overall section UI). */
 var parseAvgDonationDetail = function parseAvgDonationDetail() {
-  var _apiData$overviewStat, _ref, _ref2, _ref3, _ref4, _ref5, _overview$medianDonat, _ref6, _ref7, _ref8, _ref9, _ref0, _overview$topDecileDo;
+  var _apiData$overviewStat, _ref2, _ref3, _ref4, _ref5, _ref6, _overview$medianDonat, _ref7, _ref8, _ref9, _ref0, _ref1, _overview$topDecileDo;
   var apiData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var overview = (apiData === null || apiData === void 0 || (_apiData$overviewStat = apiData.overviewStats) === null || _apiData$overviewStat === void 0 ? void 0 : _apiData$overviewStat.overview) || {};
-  var median = Number((_ref = (_ref2 = (_ref3 = (_ref4 = (_ref5 = (_overview$medianDonat = overview === null || overview === void 0 ? void 0 : overview.medianDonation) !== null && _overview$medianDonat !== void 0 ? _overview$medianDonat : overview === null || overview === void 0 ? void 0 : overview.medianGift) !== null && _ref5 !== void 0 ? _ref5 : overview === null || overview === void 0 ? void 0 : overview.median) !== null && _ref4 !== void 0 ? _ref4 : apiData === null || apiData === void 0 ? void 0 : apiData.medianGift) !== null && _ref3 !== void 0 ? _ref3 : apiData === null || apiData === void 0 ? void 0 : apiData.medianDonation) !== null && _ref2 !== void 0 ? _ref2 : apiData === null || apiData === void 0 ? void 0 : apiData.median) !== null && _ref !== void 0 ? _ref : 0);
-  var topDecile = Number((_ref6 = (_ref7 = (_ref8 = (_ref9 = (_ref0 = (_overview$topDecileDo = overview === null || overview === void 0 ? void 0 : overview.topDecileDonation) !== null && _overview$topDecileDo !== void 0 ? _overview$topDecileDo : overview === null || overview === void 0 ? void 0 : overview.topDecileGift) !== null && _ref0 !== void 0 ? _ref0 : overview === null || overview === void 0 ? void 0 : overview.topDecile) !== null && _ref9 !== void 0 ? _ref9 : apiData === null || apiData === void 0 ? void 0 : apiData.topDecileGift) !== null && _ref8 !== void 0 ? _ref8 : apiData === null || apiData === void 0 ? void 0 : apiData.topDecileDonation) !== null && _ref7 !== void 0 ? _ref7 : apiData === null || apiData === void 0 ? void 0 : apiData.topDecile) !== null && _ref6 !== void 0 ? _ref6 : 0);
+  var median = Number((_ref2 = (_ref3 = (_ref4 = (_ref5 = (_ref6 = (_overview$medianDonat = overview === null || overview === void 0 ? void 0 : overview.medianDonation) !== null && _overview$medianDonat !== void 0 ? _overview$medianDonat : overview === null || overview === void 0 ? void 0 : overview.medianGift) !== null && _ref6 !== void 0 ? _ref6 : overview === null || overview === void 0 ? void 0 : overview.median) !== null && _ref5 !== void 0 ? _ref5 : apiData === null || apiData === void 0 ? void 0 : apiData.medianGift) !== null && _ref4 !== void 0 ? _ref4 : apiData === null || apiData === void 0 ? void 0 : apiData.medianDonation) !== null && _ref3 !== void 0 ? _ref3 : apiData === null || apiData === void 0 ? void 0 : apiData.median) !== null && _ref2 !== void 0 ? _ref2 : 0);
+  var topDecile = Number((_ref7 = (_ref8 = (_ref9 = (_ref0 = (_ref1 = (_overview$topDecileDo = overview === null || overview === void 0 ? void 0 : overview.topDecileDonation) !== null && _overview$topDecileDo !== void 0 ? _overview$topDecileDo : overview === null || overview === void 0 ? void 0 : overview.topDecileGift) !== null && _ref1 !== void 0 ? _ref1 : overview === null || overview === void 0 ? void 0 : overview.topDecile) !== null && _ref0 !== void 0 ? _ref0 : apiData === null || apiData === void 0 ? void 0 : apiData.topDecileGift) !== null && _ref9 !== void 0 ? _ref9 : apiData === null || apiData === void 0 ? void 0 : apiData.topDecileDonation) !== null && _ref8 !== void 0 ? _ref8 : apiData === null || apiData === void 0 ? void 0 : apiData.topDecile) !== null && _ref7 !== void 0 ? _ref7 : 0);
   return {
     median: median,
     topDecile: topDecile
@@ -1516,11 +1517,11 @@ var parseAvgDonationDetail = function parseAvgDonationDetail() {
 var parseDonorGeographyList = function parseDonorGeographyList(donorGeographyData) {
   var rawCountries = Array.isArray(donorGeographyData) ? donorGeographyData : (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.countries) || (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.data) || [];
   return rawCountries.map(function (item) {
-    var _item$percentage, _ref1, _ref10, _item$value;
+    var _item$percentage, _ref10, _ref11, _item$value;
     return {
       country: item.countryName || item.country || item.name || "Unknown",
       percentage: typeof item.percentage === "number" ? item.percentage : Number((_item$percentage = item.percentage) !== null && _item$percentage !== void 0 ? _item$percentage : 0),
-      value: item.donations !== undefined ? item.donations : (_ref1 = (_ref10 = (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item.totalDonors) !== null && _ref10 !== void 0 ? _ref10 : item.donors) !== null && _ref1 !== void 0 ? _ref1 : 0
+      value: item.donations !== undefined ? item.donations : (_ref10 = (_ref11 = (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item.totalDonors) !== null && _ref11 !== void 0 ? _ref11 : item.donors) !== null && _ref10 !== void 0 ? _ref10 : 0
     };
   });
 };
@@ -1672,7 +1673,8 @@ var buildReportData = function buildReportData() {
       type: "progress",
       progress: Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100),
       val3: formatNumber(campaign.uniqueDonationsCount || 0),
-      val4: "$".concat(formatNumber(campaign.avgGift || 0))
+      val4: "$".concat(formatNumber(campaign.avgGift || campaign.averageDonation || 0)),
+      status: campaign.status || ""
     };
   });
   return {
@@ -1709,12 +1711,9 @@ var MIN_H = 1123;
 var MX = 32; // horizontal margin
 var THEME = {
   pageBg: "#F9FAFB",
-  panelBg: "#FFFFFF",
   panelBorder: "#E5E7EB",
   brand: "#6366F1",
   kpiBorderPrimary: "#C7D2FE",
-  tableHeadBg: "#EEF2FF",
-  tableAltBg: "#F8FAFF",
   muted: "#9CA3AF",
   text: "#111827",
   trendUpBg: "#D1FAE5",
@@ -1745,56 +1744,6 @@ 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 TREND_UP = "#0B8F61";
-var TREND_DOWN = "#ef4444";
-var resolveTrendColor = function resolveTrendColor(trendText) {
-  var trendPositiveWhenNegative = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return getTrendColor(trendText, trendPositiveWhenNegative ? {
-    up: TREND_DOWN,
-    down: TREND_UP,
-    neutral: TREND_UP
-  } : {
-    up: TREND_UP,
-    down: TREND_DOWN,
-    neutral: TREND_UP
-  });
-};
-var withTrendArrow = function withTrendArrow(text) {
-  var str = String(text !== null && text !== void 0 ? text : "").trim();
-  if (!str || str.includes("▼") || str.includes("▲")) return str;
-  var arrow = getTrendArrow(str);
-  return arrow ? "".concat(arrow, " ").concat(str) : str;
-};
-var formatArrowTrend = function formatArrowTrend(value) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$suffix = _ref.suffix,
-    suffix = _ref$suffix === void 0 ? "%" : _ref$suffix,
-    _ref$decimals = _ref.decimals,
-    decimals = _ref$decimals === void 0 ? 1 : _ref$decimals,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? "" : _ref$label;
-  var n = Number(value !== null && value !== void 0 ? value : 0);
-  var arrow = n >= 0 ? "▲" : "▼";
-  var labelSuffix = label ? " ".concat(label) : "";
-  if (suffix === "pp") return "".concat(arrow, " ").concat(Math.abs(n).toFixed(2), "pp").concat(labelSuffix);
-  if (suffix === "x") return "".concat(arrow, " ").concat(Math.abs(n).toFixed(1), "x").concat(labelSuffix);
-  return "".concat(arrow, " ").concat(Math.abs(n).toFixed(decimals), "%").concat(labelSuffix);
-};
-var TrendText = function TrendText(_ref2) {
-  var children = _ref2.children,
-    _ref2$invert = _ref2.invert,
-    invert = _ref2$invert === void 0 ? false : _ref2$invert,
-    _ref2$style = _ref2.style,
-    style = _ref2$style === void 0 ? {} : _ref2$style;
-  var text = withTrendArrow(children);
-  return /*#__PURE__*/jsx("span", {
-    style: _objectSpread2({
-      fontWeight: 600,
-      color: resolveTrendColor(text, invert)
-    }, style),
-    children: text
-  });
-};
 // ─── SVG path helpers ─────────────────────────────────────────────────────────
 var buildSmoothPath = function buildSmoothPath(points) {
@@ -1956,119 +1905,6 @@ var Divider = function Divider(_ref5) {
     }
   });
 };
-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__*/jsxs("div", {
-    style: _objectSpread2({
-      border: "1px solid ".concat(THEME.panelBorder),
-      borderRadius: 8,
-      background: THEME.panelBg,
-      padding: 12,
-      display: "flex",
-      flexDirection: "column",
-      boxSizing: "border-box",
-      boxShadow: "0 1px 0 rgba(15,23,42,0.03)"
-    }, 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: THEME.text,
-            lineHeight: 1.15
-          },
-          children: title
-        }), subtitle && /*#__PURE__*/jsx("div", {
-          style: {
-            fontSize: 9.5,
-            color: THEME.muted,
-            lineHeight: 1.15
-          },
-          children: subtitle
-        })]
-      }), action && /*#__PURE__*/jsx("div", {
-        style: {
-          fontSize: 9.5,
-          color: "#6366F1",
-          fontWeight: 500,
-          flexShrink: 0
-        },
-        children: action
-      })]
-    }), children]
-  });
-};
-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__*/jsxs("table", {
-    style: {
-      width: "100%",
-      borderCollapse: "collapse",
-      fontSize: 9.5,
-      tableLayout: "fixed",
-      background: "#fff"
-    },
-    children: [/*#__PURE__*/jsx("thead", {
-      children: /*#__PURE__*/jsx("tr", {
-        style: {
-          background: THEME.tableHeadBg
-        },
-        children: head.map(function (h, i) {
-          return /*#__PURE__*/jsx("th", {
-            style: {
-              padding: "4px 6px",
-              textAlign: colAlign[i] || (i === 0 ? "left" : "right"),
-              fontWeight: 700,
-              fontSize: 8.5,
-              letterSpacing: "0.3px",
-              color: "#64748B",
-              borderBottom: "1px solid #DDE3EA"
-            },
-            children: h
-          }, i);
-        })
-      })
-    }), /*#__PURE__*/jsx("tbody", {
-      children: rows.map(function (row, ri) {
-        return /*#__PURE__*/jsx("tr", {
-          style: {
-            background: ri % 2 === 1 ? THEME.tableAltBg : "#fff"
-          },
-          children: row.map(function (cell, ci) {
-            return /*#__PURE__*/jsx("td", {
-              style: {
-                padding: "4px 6px",
-                textAlign: colAlign[ci] || (ci === 0 ? "left" : "right"),
-                color: "#334155",
-                borderBottom: ri < rows.length - 1 ? "1px solid #EEF2F7" : "none",
-                verticalAlign: "middle"
-              },
-              children: cell
-            }, ci);
-          })
-        }, ri);
-      })
-    })]
-  });
-};
 var ProgressBar = function ProgressBar(_ref8) {
   var value = _ref8.value,
     _ref8$color = _ref8.color,
@@ -2117,71 +1953,6 @@ var ProgressBar = function ProgressBar(_ref8) {
     })]
   });
 };
-var DonorGeographyPanel = function DonorGeographyPanel(_ref9) {
-  var _ref9$geoList = _ref9.geoList,
-    geoList = _ref9$geoList === void 0 ? [] : _ref9$geoList,
-    _ref9$totalDonors = _ref9.totalDonors,
-    totalDonors = _ref9$totalDonors === void 0 ? 0 : _ref9$totalDonors,
-    _ref9$barColor = _ref9.barColor,
-    barColor = _ref9$barColor === void 0 ? "#6366F1" : _ref9$barColor;
-  return /*#__PURE__*/jsx(Panel, {
-    title: "Donor geography",
-    subtitle: "Top countries - ".concat(formatNumber(totalDonors), " total"),
-    children: (geoList.length ? geoList.slice(0, 6) : []).map(function (g, i) {
-      var _g$percentage;
-      return /*#__PURE__*/jsxs("div", {
-        style: {
-          padding: i < 5 ? "0 0 5px" : 0,
-          marginBottom: i < 5 ? 5 : 0,
-          borderBottom: i < 5 ? "1px solid #F3F4F6" : "none"
-        },
-        children: [/*#__PURE__*/jsxs("div", {
-          style: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            gap: 6,
-            marginBottom: 3
-          },
-          children: [/*#__PURE__*/jsx("span", {
-            style: {
-              fontSize: 9,
-              color: "#374151",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              minWidth: 0
-            },
-            children: g.country
-          }), /*#__PURE__*/jsxs("span", {
-            style: {
-              fontSize: 9,
-              fontWeight: 700,
-              color: "#111827",
-              flexShrink: 0
-            },
-            children: [formatNumber(g.value), " - ", formatNumber(g.percentage), "%"]
-          })]
-        }), /*#__PURE__*/jsx("div", {
-          style: {
-            height: 5,
-            background: "#F3F4F6",
-            borderRadius: 3,
-            overflow: "hidden"
-          },
-          children: /*#__PURE__*/jsx("div", {
-            style: {
-              width: "".concat(Math.min(100, Math.max(0, Number((_g$percentage = g.percentage) !== null && _g$percentage !== void 0 ? _g$percentage : 0))), "%"),
-              height: "100%",
-              background: barColor,
-              borderRadius: 3
-            }
-          })
-        })]
-      }, i);
-    })
-  });
-};
 var formatDonationTypeCategory = function formatDonationTypeCategory(label, slotWidth) {
   var str = String(label !== null && label !== void 0 ? label : "").trim();
   if (!str) return "";
@@ -2197,401 +1968,46 @@ var formatDonationTypeCategory = function formatDonationTypeCategory(label, slot
   if (noYear.length <= maxChars) return noYear;
   return "".concat(noYear.slice(0, Math.max(1, maxChars - 1)), "\u2026");
 };
-var DonationTypeBarSvg = function DonationTypeBarSvg(_ref0) {
-  var _ref0$categories = _ref0.categories,
-    categories = _ref0$categories === void 0 ? [] : _ref0$categories,
-    _ref0$recurring = _ref0.recurring,
-    recurring = _ref0$recurring === void 0 ? [] : _ref0$recurring,
-    _ref0$oneTime = _ref0.oneTime,
-    oneTime = _ref0$oneTime === void 0 ? [] : _ref0$oneTime,
-    _ref0$recurringColor = _ref0.recurringColor,
-    recurringColor = _ref0$recurringColor === void 0 ? "#6366F1" : _ref0$recurringColor,
-    _ref0$oneTimeColor = _ref0.oneTimeColor,
-    oneTimeColor = _ref0$oneTimeColor === void 0 ? "#10B981" : _ref0$oneTimeColor;
-  var width = 158;
-  var height = 96;
-  var padL = 30;
-  var padR = 2;
-  var padT = 14;
-  var padB = 20;
-  var chartW = width - padL - padR;
-  var chartH = height - padT - padB;
-  var allVals = [].concat(_toConsumableArray(recurring), _toConsumableArray(oneTime));
-  var maxVal = Math.max.apply(Math, _toConsumableArray(allVals).concat([0])) || 1;
-  var n = categories.length;
-  var yTicks = [0, maxVal / 2, maxVal];
-  var groupW = n > 0 ? chartW / n : chartW;
-  var labelFontSize = n > 3 ? 5 : 5.5;
-  if (!n) {
-    return /*#__PURE__*/jsxs("svg", {
-      width: "100%",
-      height: height,
-      viewBox: "0 0 ".concat(width, " ").concat(height),
-      style: {
-        display: "block"
-      },
-      children: [/*#__PURE__*/jsx("line", {
-        x1: padL,
-        y1: padT + chartH,
-        x2: width - padR,
-        y2: padT + chartH,
-        stroke: "#f1f1f1"
-      }), /*#__PURE__*/jsx("text", {
-        x: padL - 4,
-        y: padT + chartH + 3,
-        textAnchor: "end",
-        fontSize: 7,
-        fill: "rgba(0,0,0,0.4)",
-        children: "$0"
-      })]
-    });
-  }
-  var barW = Math.min(groupW * 0.3, 12);
-  var baseY = padT + chartH;
-  return /*#__PURE__*/jsxs("svg", {
-    width: "100%",
-    height: height,
-    viewBox: "0 0 ".concat(width, " ").concat(height),
+var TrendPill$1 = function TrendPill(_ref12) {
+  var children = _ref12.children,
+    _ref12$positive = _ref12.positive,
+    positive = _ref12$positive === void 0 ? true : _ref12$positive;
+  return /*#__PURE__*/jsx("span", {
     style: {
-      display: "block"
+      display: "inline-flex",
+      alignItems: "center",
+      background: positive ? THEME.trendUpBg : "#FEE2E2",
+      color: positive ? THEME.trendUpText : "#DC2626",
+      padding: "3px 10px",
+      borderRadius: 100,
+      fontSize: 9,
+      fontWeight: 600,
+      whiteSpace: "nowrap",
+      lineHeight: 1.35
     },
-    children: [/*#__PURE__*/jsx("defs", {
-      children: categories.map(function (_, i) {
-        return /*#__PURE__*/jsx("clipPath", {
-          id: "donation-type-cat-clip-".concat(i),
-          children: /*#__PURE__*/jsx("rect", {
-            x: padL + i * groupW,
-            y: baseY + 2,
-            width: groupW,
-            height: padB - 2
-          })
-        }, "clip-".concat(i));
-      })
-    }), yTicks.map(function (tick, i) {
-      var y = padT + chartH - tick / maxVal * chartH;
-      return /*#__PURE__*/jsxs("g", {
-        children: [/*#__PURE__*/jsx("line", {
-          x1: padL,
-          y1: y,
-          x2: width - padR,
-          y2: y,
-          stroke: "#f1f1f1",
-          strokeDasharray: "4"
-        }), /*#__PURE__*/jsx("text", {
-          x: padL - 4,
-          y: y + 3,
-          textAnchor: "end",
-          fontSize: 7,
-          fill: "rgba(0,0,0,0.4)",
-          children: d$Compact(tick)
-        })]
-      }, "y-".concat(i));
-    }), categories.map(function (cat, i) {
-      var groupX = padL + i * groupW + groupW / 2;
-      var rVal = recurring[i] || 0;
-      var oVal = oneTime[i] || 0;
-      var rH = rVal / maxVal * chartH;
-      var oH = oVal / maxVal * chartH;
-      var rX = groupX - barW - 1;
-      var oX = groupX + 1;
-      return /*#__PURE__*/jsxs("g", {
-        children: [rVal > 0 && /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx("rect", {
-            x: rX,
-            y: baseY - rH,
-            width: barW,
-            height: Math.max(rH, 1),
-            fill: recurringColor,
-            rx: 2
-          }), /*#__PURE__*/jsx("text", {
-            x: rX + barW / 2,
-            y: baseY - rH - 3,
-            textAnchor: "middle",
-            fontSize: 6.5,
-            fontWeight: 600,
-            fill: "#111827",
-            children: d$Compact(rVal)
-          })]
-        }), oVal > 0 && /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx("rect", {
-            x: oX,
-            y: baseY - oH,
-            width: barW,
-            height: Math.max(oH, 1),
-            fill: oneTimeColor,
-            rx: 2
-          }), /*#__PURE__*/jsx("text", {
-            x: oX + barW / 2,
-            y: baseY - oH - 3,
-            textAnchor: "middle",
-            fontSize: 6.5,
-            fontWeight: 600,
-            fill: "#111827",
-            children: d$Compact(oVal)
-          })]
-        }), /*#__PURE__*/jsx("text", {
-          x: groupX,
-          y: height - 5,
-          textAnchor: "middle",
-          fontSize: labelFontSize,
-          fill: "rgba(0,0,0,0.4)",
-          clipPath: "url(#donation-type-cat-clip-".concat(i, ")"),
-          children: formatDonationTypeCategory(cat, groupW)
-        })]
-      }, "bar-".concat(i));
-    })]
+    children: children
   });
 };
-var DonationTypePanel = function DonationTypePanel(_ref1) {
-  var donationTypeData = _ref1.donationTypeData,
-    _ref1$recurringColor = _ref1.recurringColor,
-    recurringColor = _ref1$recurringColor === void 0 ? "#6366F1" : _ref1$recurringColor,
-    _ref1$oneTimeColor = _ref1.oneTimeColor,
-    oneTimeColor = _ref1$oneTimeColor === void 0 ? "#10B981" : _ref1$oneTimeColor;
-  var _parseDonationTypeCha = parseDonationTypeChartData(donationTypeData),
-    categories = _parseDonationTypeCha.categories,
-    recurring = _parseDonationTypeCha.recurring,
-    oneTime = _parseDonationTypeCha.oneTime,
-    recurringTotal = _parseDonationTypeCha.recurringTotal,
-    oneTimeTotal = _parseDonationTypeCha.oneTimeTotal;
-  return /*#__PURE__*/jsxs(Panel, {
-    title: "Recurring vs one-time",
-    subtitle: "Donation type - weekly",
-    children: [/*#__PURE__*/jsx("div", {
-      style: {
-        display: "flex",
-        flexWrap: "wrap",
-        gap: "6px 10px",
-        marginBottom: 4
-      },
-      children: [{
-        label: "Recurring",
-        total: recurringTotal,
-        color: recurringColor
-      }, {
-        label: "One-time",
-        total: oneTimeTotal,
-        color: oneTimeColor
-      }].map(function (item) {
-        return /*#__PURE__*/jsxs("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 4
-          },
-          children: [/*#__PURE__*/jsx("div", {
-            style: {
-              width: 6,
-              height: 6,
-              borderRadius: "50%",
-              background: item.color,
-              flexShrink: 0
-            }
-          }), /*#__PURE__*/jsx("span", {
-            style: {
-              fontSize: 9.5,
-              color: "#374151"
-            },
-            children: item.label
-          }), /*#__PURE__*/jsx("span", {
-            style: {
-              fontSize: 9.5,
-              fontWeight: 700,
-              color: "#111827"
-            },
-            children: d$(item.total)
-          })]
-        }, item.label);
-      })
-    }), /*#__PURE__*/jsx(DonationTypeBarSvg, {
-      categories: categories,
-      recurring: recurring,
-      oneTime: oneTime,
-      recurringColor: recurringColor,
-      oneTimeColor: oneTimeColor
-    })]
-  });
+var isTrendPositive = function isTrendPositive(trendText) {
+  var invert = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var n = Number(String(trendText !== null && trendText !== void 0 ? trendText : "").replace(/[^0-9.\-+]/g, ""));
+  if (Number.isNaN(n)) return true;
+  return invert ? n <= 0 : n >= 0;
 };
-var AcceptanceRaisedPanel = function AcceptanceRaisedPanel(_ref10) {
-  var title = _ref10.title,
-    subtitle = _ref10.subtitle,
-    _ref10$acceptanceRate = _ref10.acceptanceRate,
-    acceptanceRate = _ref10$acceptanceRate === void 0 ? 0 : _ref10$acceptanceRate,
-    _ref10$acceptanceGrow = _ref10.acceptanceGrowth,
-    acceptanceGrowth = _ref10$acceptanceGrow === void 0 ? 0 : _ref10$acceptanceGrow,
-    _ref10$raised = _ref10.raised,
-    raised = _ref10$raised === void 0 ? 0 : _ref10$raised,
-    _ref10$raisedGrowth = _ref10.raisedGrowth,
-    raisedGrowth = _ref10$raisedGrowth === void 0 ? 0 : _ref10$raisedGrowth,
-    _ref10$primaryColor = _ref10.primaryColor,
-    primaryColor = _ref10$primaryColor === void 0 ? "#6366F1" : _ref10$primaryColor,
-    _ref10$secondaryColor = _ref10.secondaryColor,
-    secondaryColor = _ref10$secondaryColor === void 0 ? "#88bfd290" : _ref10$secondaryColor;
-  return /*#__PURE__*/jsx(Panel, {
-    title: title,
-    subtitle: subtitle,
+var PageOneHeader = function PageOneHeader(_ref13) {
+  var dateLabel = _ref13.dateLabel,
+    generatedLabel = _ref13.generatedLabel,
+    windowLabel = _ref13.windowLabel;
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      padding: "36px ".concat(MX, "px 0"),
+      flexShrink: 0
+    },
     children: /*#__PURE__*/jsxs("div", {
       style: {
         display: "flex",
-        flexDirection: "column",
-        alignItems: "center"
-      },
-      children: [/*#__PURE__*/jsx(Donut, {
-        segments: [{
-          value: acceptanceRate,
-          color: primaryColor
-        }, {
-          value: Math.max(0, 100 - acceptanceRate),
-          color: "#E5E7EB"
-        }],
-        size: 88,
-        centerVal: "".concat(formatNumber(acceptanceRate), "%"),
-        centerLabel: "accepted"
-      }), /*#__PURE__*/jsxs("div", {
-        style: {
-          width: "100%",
-          marginTop: 6
-        },
-        children: [/*#__PURE__*/jsxs("div", {
-          style: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            marginBottom: 5
-          },
-          children: [/*#__PURE__*/jsxs("div", {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 5
-            },
-            children: [/*#__PURE__*/jsx("div", {
-              style: {
-                width: 8,
-                height: 8,
-                borderRadius: 2,
-                background: primaryColor,
-                flexShrink: 0
-              }
-            }), /*#__PURE__*/jsx("span", {
-              style: {
-                fontSize: 9.5,
-                color: "#6B7280"
-              },
-              children: "Acceptance"
-            })]
-          }), /*#__PURE__*/jsxs("div", {
-            style: {
-              display: "flex",
-              alignItems: "baseline",
-              gap: 4
-            },
-            children: [/*#__PURE__*/jsxs("span", {
-              style: {
-                fontSize: 9.5,
-                fontWeight: 700,
-                color: "#111827"
-              },
-              children: [formatNumber(acceptanceRate), "%"]
-            }), /*#__PURE__*/jsx(TrendText, {
-              style: {
-                fontSize: 9
-              },
-              children: formatArrowTrend(acceptanceGrowth)
-            })]
-          })]
-        }), /*#__PURE__*/jsxs("div", {
-          style: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center"
-          },
-          children: [/*#__PURE__*/jsxs("div", {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 5
-            },
-            children: [/*#__PURE__*/jsx("div", {
-              style: {
-                width: 8,
-                height: 8,
-                borderRadius: 2,
-                background: secondaryColor,
-                flexShrink: 0
-              }
-            }), /*#__PURE__*/jsx("span", {
-              style: {
-                fontSize: 9.5,
-                color: "#6B7280"
-              },
-              children: "Raised"
-            })]
-          }), /*#__PURE__*/jsxs("div", {
-            style: {
-              display: "flex",
-              alignItems: "baseline",
-              gap: 4
-            },
-            children: [/*#__PURE__*/jsx("span", {
-              style: {
-                fontSize: 9.5,
-                fontWeight: 700,
-                color: "#111827"
-              },
-              children: d$(raised)
-            }), /*#__PURE__*/jsx(TrendText, {
-              style: {
-                fontSize: 9
-              },
-              children: formatArrowTrend(raisedGrowth)
-            })]
-          })]
-        })]
-      })]
-    })
-  });
-};
-var TrendPill$1 = function TrendPill(_ref12) {
-  var children = _ref12.children,
-    _ref12$positive = _ref12.positive,
-    positive = _ref12$positive === void 0 ? true : _ref12$positive;
-  return /*#__PURE__*/jsx("span", {
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      background: positive ? THEME.trendUpBg : "#FEE2E2",
-      color: positive ? THEME.trendUpText : "#DC2626",
-      padding: "3px 10px",
-      borderRadius: 100,
-      fontSize: 9,
-      fontWeight: 600,
-      whiteSpace: "nowrap",
-      lineHeight: 1.35
-    },
-    children: children
-  });
-};
-var isTrendPositive = function isTrendPositive(trendText) {
-  var invert = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var n = Number(String(trendText !== null && trendText !== void 0 ? trendText : "").replace(/[^0-9.\-+]/g, ""));
-  if (Number.isNaN(n)) return true;
-  return invert ? n <= 0 : n >= 0;
-};
-var PageOneHeader = function PageOneHeader(_ref13) {
-  var dateLabel = _ref13.dateLabel,
-    generatedLabel = _ref13.generatedLabel,
-    windowLabel = _ref13.windowLabel;
-  return /*#__PURE__*/jsx("div", {
-    style: {
-      padding: "36px ".concat(MX, "px 0"),
-      flexShrink: 0
-    },
-    children: /*#__PURE__*/jsxs("div", {
-      style: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "flex-start"
+        justifyContent: "space-between",
+        alignItems: "flex-start"
       },
       children: [/*#__PURE__*/jsxs("div", {
         children: [/*#__PURE__*/jsx("div", {
@@ -2842,159 +2258,1036 @@ var PageOneFooter = function PageOneFooter(_ref17) {
     })
   });
 };
-var PageHeader = function PageHeader(_ref18) {
-  var dateLabel = _ref18.dateLabel,
-    generatedLabel = _ref18.generatedLabel,
-    activeFilters = _ref18.activeFilters,
-    page = _ref18.page,
-    windowLabel = _ref18.windowLabel;
-  return /*#__PURE__*/jsxs("div", {
+var PageTwoFooter = function PageTwoFooter(_ref18) {
+  var generatedBy = _ref18.generatedBy,
+    generatedLabel = _ref18.generatedLabel;
+  return /*#__PURE__*/jsx("div", {
     style: {
-      padding: "22px ".concat(MX, "px 12px"),
-      borderBottom: "1px solid #DEE5EF",
-      background: "#FFFFFF",
+      padding: "14px ".concat(MX, "px 28px"),
+      borderTop: "1px solid ".concat(THEME.panelBorder),
+      marginTop: "auto",
       flexShrink: 0
     },
-    children: [/*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsxs("div", {
       style: {
         display: "flex",
         justifyContent: "space-between",
-        alignItems: "center"
+        alignItems: "center",
+        fontSize: 8,
+        color: THEME.muted,
+        lineHeight: 1.4
+      },
+      children: [/*#__PURE__*/jsxs("span", {
+        children: ["Confidential", BULLET, "Generated by ", generatedBy, BULLET, generatedLabel]
+      }), /*#__PURE__*/jsxs("span", {
+        children: ["Page 2 of 2", BULLET, "madinah.com"]
+      })]
+    })
+  });
+};
+var P2Card = function P2Card(_ref19) {
+  var children = _ref19.children,
+    title = _ref19.title,
+    subtitle = _ref19.subtitle,
+    action = _ref19.action,
+    _ref19$style = _ref19.style,
+    style = _ref19$style === void 0 ? {} : _ref19$style;
+  return /*#__PURE__*/jsxs("div", {
+    style: _objectSpread2({
+      border: "1px solid ".concat(THEME.panelBorder),
+      borderRadius: 12,
+      background: "#FFFFFF",
+      padding: "13px 14px 12px",
+      display: "flex",
+      flexDirection: "column",
+      boxSizing: "border-box",
+      minWidth: 0
+    }, style),
+    children: [(title || subtitle || action) && /*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        marginBottom: 10,
+        flexShrink: 0,
+        gap: 8
       },
-      children: /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsxs("div", {
         style: {
-          display: "flex",
-          alignItems: "baseline",
-          gap: 10
+          minWidth: 0
         },
-        children: [/*#__PURE__*/jsx("span", {
+        children: [title && /*#__PURE__*/jsx("div", {
           style: {
-            fontSize: 20,
-            fontWeight: 800,
+            fontSize: 12,
+            fontWeight: 700,
             color: THEME.text,
-            letterSpacing: "-0.5px"
+            lineHeight: 1.15
           },
-          children: "Madinah"
-        }), /*#__PURE__*/jsx("span", {
+          children: title
+        }), subtitle && /*#__PURE__*/jsx("div", {
           style: {
-            fontSize: 8.5,
-            fontWeight: 700,
-            letterSpacing: "1.5px",
-            color: "#94A3B8",
-            textTransform: "uppercase"
+            fontSize: 9,
+            color: THEME.muted,
+            marginTop: 2,
+            lineHeight: 1.2
           },
-          children: "PERFORMANCE REPORT"
+          children: subtitle
         })]
-      })
-    }), /*#__PURE__*/jsx("div", {
-      style: {
-        marginTop: 8,
-        fontSize: 13.5,
-        fontWeight: 700,
-        color: THEME.text
-      },
-      children: "Dashboard overview \u2014 Overall"
-    }), /*#__PURE__*/jsxs("div", {
+      }), action]
+    }), children]
+  });
+};
+var campaignBarColor = function campaignBarColor() {
+  var status = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var s = String(status).toLowerCase();
+  if (s.includes("slow")) return "#F59E0B";
+  if (s.includes("closing")) return "#14B8A6";
+  return THEME.brand;
+};
+var StatusPill = function StatusPill(_ref20) {
+  var _ref20$status = _ref20.status,
+    status = _ref20$status === void 0 ? "" : _ref20$status;
+  if (!String(status).trim()) {
+    return /*#__PURE__*/jsx("span", {
       style: {
-        display: "flex",
-        justifyContent: "space-between",
-        marginTop: 2
+        fontSize: 8,
+        color: THEME.muted
       },
-      children: [/*#__PURE__*/jsxs("div", {
-        children: [/*#__PURE__*/jsx("div", {
-          style: {
-            fontSize: 10.5,
-            color: "#334155"
-          },
-          children: dateLabel
-        }), /*#__PURE__*/jsxs("div", {
+      children: "\u2014"
+    });
+  }
+  var s = String(status).toLowerCase();
+  var styles = s.includes("slow") ? {
+    bg: "#FEF3C7",
+    color: "#D97706",
+    label: String(status).includes("$") ? status : "$ ".concat(status)
+  } : s.includes("closing") ? {
+    bg: "#DBEAFE",
+    color: "#2563EB",
+    label: status || "Closing"
+  } : {
+    bg: "#D1FAE5",
+    color: "#059669",
+    label: status || "Active"
+  };
+  return /*#__PURE__*/jsx("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      background: styles.bg,
+      color: styles.color,
+      padding: "2px 8px",
+      borderRadius: 100,
+      fontSize: 8,
+      fontWeight: 600,
+      whiteSpace: "nowrap",
+      lineHeight: 1.3
+    },
+    children: styles.label
+  });
+};
+var P2CampaignTable = function P2CampaignTable(_ref21) {
+  var _ref21$rows = _ref21.rows,
+    rows = _ref21$rows === void 0 ? [] : _ref21$rows;
+  return /*#__PURE__*/jsxs("table", {
+    style: {
+      width: "100%",
+      borderCollapse: "collapse",
+      fontSize: 9,
+      tableLayout: "fixed"
+    },
+    children: [/*#__PURE__*/jsx("thead", {
+      children: /*#__PURE__*/jsx("tr", {
+        children: ["Campaign", "Raised", "Progress", "Donors", "Status"].map(function (h, i) {
+          return /*#__PURE__*/jsx("th", {
+            style: {
+              padding: "5px 4px",
+              textAlign: i === 0 || i === 2 ? "left" : "right",
+              fontWeight: 700,
+              fontSize: 7.5,
+              letterSpacing: "0.5px",
+              color: THEME.muted,
+              textTransform: "uppercase",
+              borderBottom: "1px solid ".concat(THEME.panelBorder)
+            },
+            children: h
+          }, h);
+        })
+      })
+    }), /*#__PURE__*/jsx("tbody", {
+      children: rows.length === 0 ? /*#__PURE__*/jsx("tr", {
+        children: /*#__PURE__*/jsx("td", {
+          colSpan: 5,
           style: {
-            fontSize: 9.5,
+            padding: "10px 4px",
+            fontSize: 9,
             color: THEME.muted,
-            marginTop: 1
+            textAlign: "center"
           },
-          children: [windowLabel, " - Generated ", generatedLabel]
-        })]
+          children: "No active campaigns"
+        })
+      }) : rows.map(function (row, ri) {
+        return /*#__PURE__*/jsxs("tr", {
+          children: [/*#__PURE__*/jsx("td", {
+            style: {
+              padding: "6px 4px",
+              color: "#374151",
+              fontSize: 8.5,
+              borderBottom: ri < rows.length - 1 ? "1px solid #F3F4F6" : "none",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: row.name
+          }), /*#__PURE__*/jsx("td", {
+            style: {
+              padding: "6px 4px",
+              textAlign: "right",
+              fontWeight: 700,
+              color: THEME.text,
+              fontSize: 8.5,
+              borderBottom: ri < rows.length - 1 ? "1px solid #F3F4F6" : "none"
+            },
+            children: row.raised
+          }), /*#__PURE__*/jsx("td", {
+            style: {
+              padding: "6px 4px",
+              borderBottom: ri < rows.length - 1 ? "1px solid #F3F4F6" : "none"
+            },
+            children: /*#__PURE__*/jsx(ProgressBar, {
+              value: row.progress,
+              color: campaignBarColor(row.status),
+              height: 5
+            })
+          }), /*#__PURE__*/jsx("td", {
+            style: {
+              padding: "6px 4px",
+              textAlign: "right",
+              fontWeight: 700,
+              color: THEME.text,
+              fontSize: 8.5,
+              borderBottom: ri < rows.length - 1 ? "1px solid #F3F4F6" : "none"
+            },
+            children: row.donors
+          }), /*#__PURE__*/jsx("td", {
+            style: {
+              padding: "6px 4px",
+              textAlign: "right",
+              borderBottom: ri < rows.length - 1 ? "1px solid #F3F4F6" : "none"
+            },
+            children: /*#__PURE__*/jsx(StatusPill, {
+              status: row.status
+            })
+          })]
+        }, ri);
+      })
+    })]
+  });
+};
+var P2DonorMixCard = function P2DonorMixCard(_ref22) {
+  var newDonors = _ref22.newDonors,
+    returningDonors = _ref22.returningDonors,
+    totalMix = _ref22.totalMix,
+    newPct = _ref22.newPct,
+    retPct = _ref22.retPct,
+    avgGift = _ref22.avgGift,
+    avgGiftTrend = _ref22.avgGiftTrend;
+  return /*#__PURE__*/jsx(P2Card, {
+    title: "Donor mix",
+    subtitle: "Acquisition vs retention",
+    children: /*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      },
+      children: [/*#__PURE__*/jsx(Donut, {
+        segments: [{
+          value: newDonors,
+          color: "#10B981"
+        }, {
+          value: returningDonors,
+          color: THEME.brand
+        }],
+        size: 84,
+        centerVal: formatNumber(totalMix),
+        centerLabel: "donors"
       }), /*#__PURE__*/jsxs("div", {
         style: {
-          fontSize: 9,
-          color: THEME.muted,
-          textAlign: "right",
-          alignSelf: "flex-end"
+          width: "100%",
+          marginTop: 8
         },
-        children: ["Page ", page, " of 2"]
+        children: [[{
+          label: "New donors",
+          color: "#10B981",
+          count: newDonors,
+          pct: newPct
+        }, {
+          label: "Returning",
+          color: THEME.brand,
+          count: returningDonors,
+          pct: retPct
+        }].map(function (item, i) {
+          return /*#__PURE__*/jsxs("div", {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: i === 0 ? 6 : 10
+            },
+            children: [/*#__PURE__*/jsxs("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 5
+              },
+              children: [/*#__PURE__*/jsx("div", {
+                style: {
+                  width: 7,
+                  height: 7,
+                  borderRadius: "50%",
+                  background: item.color,
+                  flexShrink: 0
+                }
+              }), /*#__PURE__*/jsx("span", {
+                style: {
+                  fontSize: 9,
+                  color: "#6B7280"
+                },
+                children: item.label
+              })]
+            }), /*#__PURE__*/jsxs("span", {
+              style: {
+                fontSize: 9,
+                fontWeight: 700,
+                color: THEME.text
+              },
+              children: [formatNumber(item.count), BULLET, item.pct, "%"]
+            })]
+          }, item.label);
+        }), /*#__PURE__*/jsx(Divider, {
+          mb: 8
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 9,
+            color: THEME.muted,
+            marginBottom: 3
+          },
+          children: "Avg gift"
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 16,
+            fontWeight: 700,
+            color: THEME.text,
+            marginBottom: 6
+          },
+          children: d$(avgGift)
+        }), /*#__PURE__*/jsx(TrendPill$1, {
+          positive: isTrendPositive(avgGiftTrend),
+          children: avgGiftTrend
+        })]
       })]
-    }), !!"".concat(activeFilters || "").trim() && /*#__PURE__*/jsxs("div", {
+    })
+  });
+};
+var StackedDonationTypeBarSvg = function StackedDonationTypeBarSvg(_ref23) {
+  var _ref23$categories = _ref23.categories,
+    categories = _ref23$categories === void 0 ? [] : _ref23$categories,
+    _ref23$recurring = _ref23.recurring,
+    recurring = _ref23$recurring === void 0 ? [] : _ref23$recurring,
+    _ref23$oneTime = _ref23.oneTime,
+    oneTime = _ref23$oneTime === void 0 ? [] : _ref23$oneTime,
+    _ref23$recurringColor = _ref23.recurringColor,
+    recurringColor = _ref23$recurringColor === void 0 ? "#10B981" : _ref23$recurringColor,
+    _ref23$oneTimeColor = _ref23.oneTimeColor,
+    oneTimeColor = _ref23$oneTimeColor === void 0 ? "#6366F1" : _ref23$oneTimeColor;
+  var width = 158;
+  var height = 88;
+  var padL = 22;
+  var padR = 4;
+  var padT = 8;
+  var padB = 18;
+  var chartW = width - padL - padR;
+  var chartH = height - padT - padB;
+  var totals = categories.map(function (_, i) {
+    return (recurring[i] || 0) + (oneTime[i] || 0);
+  });
+  var maxVal = Math.max.apply(Math, _toConsumableArray(totals).concat([0])) || 1;
+  var n = categories.length;
+  var groupW = n > 0 ? chartW / n : chartW;
+  var barW = Math.min(groupW * 0.42, 18);
+  var baseY = padT + chartH;
+  if (!n) {
+    return /*#__PURE__*/jsx("svg", {
+      width: "100%",
+      height: height,
+      viewBox: "0 0 ".concat(width, " ").concat(height),
+      style: {
+        display: "block"
+      },
+      children: /*#__PURE__*/jsx("line", {
+        x1: padL,
+        y1: baseY,
+        x2: width - padR,
+        y2: baseY,
+        stroke: "#F3F4F6"
+      })
+    });
+  }
+  return /*#__PURE__*/jsx("svg", {
+    width: "100%",
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    style: {
+      display: "block"
+    },
+    children: categories.map(function (cat, i) {
+      var groupX = padL + i * groupW + groupW / 2;
+      var rVal = recurring[i] || 0;
+      var oVal = oneTime[i] || 0;
+      var total = rVal + oVal || 1;
+      var oH = oVal / maxVal * chartH;
+      var rH = rVal / maxVal * chartH;
+      var x = groupX - barW / 2;
+      return /*#__PURE__*/jsxs("g", {
+        children: [oVal > 0 && /*#__PURE__*/jsx("rect", {
+          x: x,
+          y: baseY - oH,
+          width: barW,
+          height: Math.max(oH, total > 0 ? 1 : 0),
+          fill: oneTimeColor,
+          rx: 2
+        }), rVal > 0 && /*#__PURE__*/jsx("rect", {
+          x: x,
+          y: baseY - oH - rH,
+          width: barW,
+          height: Math.max(rH, total > 0 ? 1 : 0),
+          fill: recurringColor,
+          rx: 2
+        }), /*#__PURE__*/jsx("text", {
+          x: groupX,
+          y: height - 4,
+          textAnchor: "middle",
+          fontSize: 6.5,
+          fill: THEME.muted,
+          children: formatDonationTypeCategory(cat, groupW)
+        })]
+      }, "stack-".concat(i));
+    })
+  });
+};
+var P2DonationTypeCard = function P2DonationTypeCard(_ref24) {
+  var donationTypeData = _ref24.donationTypeData;
+  var _parseDonationTypeCha2 = parseDonationTypeChartData(donationTypeData),
+    categories = _parseDonationTypeCha2.categories,
+    recurring = _parseDonationTypeCha2.recurring,
+    oneTime = _parseDonationTypeCha2.oneTime,
+    recurringTotal = _parseDonationTypeCha2.recurringTotal,
+    oneTimeTotal = _parseDonationTypeCha2.oneTimeTotal;
+  return /*#__PURE__*/jsxs(P2Card, {
+    title: "Recurring vs one-time",
+    subtitle: "Donation type".concat(BULLET, "weekly"),
+    children: [/*#__PURE__*/jsx("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        marginBottom: 6
+      },
+      children: [{
+        label: "Recurring",
+        total: recurringTotal,
+        color: "#10B981"
+      }, {
+        label: "One-time",
+        total: oneTimeTotal,
+        color: THEME.brand
+      }].map(function (item) {
+        return /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 5
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: item.color,
+              flexShrink: 0
+            }
+          }), /*#__PURE__*/jsx("span", {
+            style: {
+              fontSize: 9,
+              color: "#6B7280"
+            },
+            children: item.label
+          }), /*#__PURE__*/jsx("span", {
+            style: {
+              fontSize: 9,
+              fontWeight: 700,
+              color: THEME.text
+            },
+            children: d$(item.total)
+          })]
+        }, item.label);
+      })
+    }), /*#__PURE__*/jsx(StackedDonationTypeBarSvg, {
+      categories: categories,
+      recurring: recurring,
+      oneTime: oneTime
+    })]
+  });
+};
+var P2DonorGeographyCard = function P2DonorGeographyCard(_ref25) {
+  var _ref25$geoList = _ref25.geoList,
+    geoList = _ref25$geoList === void 0 ? [] : _ref25$geoList,
+    _ref25$totalDonors = _ref25.totalDonors,
+    totalDonors = _ref25$totalDonors === void 0 ? 0 : _ref25$totalDonors;
+  return /*#__PURE__*/jsxs(P2Card, {
+    title: "Donor geography",
+    subtitle: "Top countries".concat(BULLET).concat(formatNumber(totalDonors), " total"),
+    children: [(geoList.length ? geoList.slice(0, 6) : []).map(function (g, i) {
+      var _g$percentage2;
+      return /*#__PURE__*/jsxs("div", {
+        style: {
+          marginBottom: i < 5 ? 7 : 0
+        },
+        children: [/*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 6,
+            marginBottom: 3
+          },
+          children: [/*#__PURE__*/jsx("span", {
+            style: {
+              fontSize: 8.5,
+              color: "#374151",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              minWidth: 0
+            },
+            children: g.country
+          }), /*#__PURE__*/jsxs("span", {
+            style: {
+              fontSize: 8.5,
+              fontWeight: 700,
+              color: THEME.text,
+              flexShrink: 0
+            },
+            children: [formatNumber(g.value), BULLET, formatNumber(g.percentage), "%"]
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            height: 4,
+            background: "#F3F4F6",
+            borderRadius: 3,
+            overflow: "hidden"
+          },
+          children: /*#__PURE__*/jsx("div", {
+            style: {
+              width: "".concat(Math.min(100, Math.max(0, Number((_g$percentage2 = g.percentage) !== null && _g$percentage2 !== void 0 ? _g$percentage2 : 0))), "%"),
+              height: "100%",
+              background: THEME.brand,
+              borderRadius: 3
+            }
+          })
+        })]
+      }, i);
+    }), !geoList.length && /*#__PURE__*/jsx("div", {
+      style: {
+        fontSize: 9,
+        color: THEME.muted,
+        textAlign: "center",
+        padding: "8px 0"
+      },
+      children: "No geography data"
+    })]
+  });
+};
+var SparklineWithLabels = function SparklineWithLabels(_ref26) {
+  var _ref26$data = _ref26.data,
+    data = _ref26$data === void 0 ? [] : _ref26$data,
+    _ref26$color = _ref26.color,
+    color = _ref26$color === void 0 ? "#6366F1" : _ref26$color,
+    _ref26$startLabel = _ref26.startLabel,
+    startLabel = _ref26$startLabel === void 0 ? "" : _ref26$startLabel,
+    _ref26$endLabel = _ref26.endLabel,
+    endLabel = _ref26$endLabel === void 0 ? "" : _ref26$endLabel,
+    _ref26$width = _ref26.width,
+    width = _ref26$width === void 0 ? 150 : _ref26$width,
+    _ref26$height = _ref26.height,
+    height = _ref26$height === void 0 ? 42 : _ref26$height;
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsx(Sparkline, {
+      data: data,
+      color: color,
+      width: width,
+      height: height
+    }), (startLabel || endLabel) && /*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        marginTop: 2,
+        fontSize: 7,
+        color: THEME.muted
+      },
+      children: [/*#__PURE__*/jsx("span", {
+        children: startLabel
+      }), /*#__PURE__*/jsx("span", {
+        children: endLabel
+      })]
+    })]
+  });
+};
+var getTrafficSourceColor = function getTrafficSourceColor() {
+  var source = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var s = String(source).toLowerCase();
+  if (s.includes("paid")) return THEME.brand;
+  if (s.includes("organic")) return "#10B981";
+  if (s.includes("email")) return "#3B82F6";
+  if (s.includes("direct")) return "#9CA3AF";
+  return "#CBD5E1";
+};
+var P2TrafficSourceCard = function P2TrafficSourceCard(_ref27) {
+  var _ref27$items = _ref27.items,
+    items = _ref27$items === void 0 ? [] : _ref27$items,
+    _ref27$total = _ref27.total,
+    total = _ref27$total === void 0 ? 0 : _ref27$total,
+    daysLabel = _ref27.daysLabel;
+  return /*#__PURE__*/jsxs(P2Card, {
+    title: "Traffic source",
+    subtitle: "Revenue by channel".concat(BULLET).concat(daysLabel),
+    children: [items.length === 0 ? /*#__PURE__*/jsx("div", {
+      style: {
+        fontSize: 9,
+        color: THEME.muted,
+        textAlign: "center",
+        padding: "8px 0"
+      },
+      children: "No traffic data"
+    }) : items.map(function (item, i) {
+      var source = item.source || item.name || "-";
+      var revenue = Number(item.revenue || item.raised || 0);
+      var share = Number(item.share || item.percentage || 0);
+      var color = getTrafficSourceColor(source);
+      return /*#__PURE__*/jsxs("div", {
+        style: {
+          marginBottom: i < items.length - 1 ? 8 : 0
+        },
+        children: [/*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 5,
+            marginBottom: 3
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: color,
+              flexShrink: 0
+            }
+          }), /*#__PURE__*/jsx("span", {
+            style: {
+              fontSize: 8.5,
+              color: "#374151",
+              flex: 1,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: source
+          }), /*#__PURE__*/jsx("span", {
+            style: {
+              fontSize: 8.5,
+              fontWeight: 700,
+              color: THEME.text,
+              flexShrink: 0
+            },
+            children: d$Compact(revenue)
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              flex: 1,
+              height: 4,
+              background: "#F3F4F6",
+              borderRadius: 3,
+              overflow: "hidden"
+            },
+            children: /*#__PURE__*/jsx("div", {
+              style: {
+                width: "".concat(Math.min(100, share), "%"),
+                height: "100%",
+                background: color,
+                borderRadius: 3
+              }
+            })
+          }), /*#__PURE__*/jsxs("span", {
+            style: {
+              fontSize: 8,
+              color: THEME.muted,
+              minWidth: 24,
+              textAlign: "right"
+            },
+            children: [formatNumber(share), "%"]
+          })]
+        })]
+      }, i);
+    }), /*#__PURE__*/jsx(Divider, {
+      mt: 8,
+      mb: 0
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginTop: 8
+      },
+      children: [/*#__PURE__*/jsx("span", {
+        style: {
+          fontSize: 9,
+          color: THEME.muted
+        },
+        children: "Total"
+      }), /*#__PURE__*/jsx("span", {
+        style: {
+          fontSize: 10,
+          fontWeight: 700,
+          color: THEME.text
+        },
+        children: d$Compact(total)
+      })]
+    })]
+  });
+};
+var P2RefundsCard = function P2RefundsCard(_ref28) {
+  var refundRate = _ref28.refundRate,
+    chargebackRate = _ref28.chargebackRate,
+    refundGrowth = _ref28.refundGrowth,
+    totalRefundedAmount = _ref28.totalRefundedAmount,
+    disputedAmount = _ref28.disputedAmount,
+    lostCases = _ref28.lostCases,
+    _ref28$chartData = _ref28.chartData,
+    chartData = _ref28$chartData === void 0 ? [] : _ref28$chartData,
+    windowLabel = _ref28.windowLabel;
+  var refundChart = chartData.map(function (d) {
+    var _ref29, _ref30, _d$value;
+    return Number((_ref29 = (_ref30 = (_d$value = d === null || d === void 0 ? void 0 : d.value) !== null && _d$value !== void 0 ? _d$value : d === null || d === void 0 ? void 0 : d.amount) !== null && _ref30 !== void 0 ? _ref30 : d) !== null && _ref29 !== void 0 ? _ref29 : 0);
+  });
+  return /*#__PURE__*/jsxs(P2Card, {
+    title: "Refunds & chargebacks",
+    subtitle: "Trust health".concat(BULLET).concat(windowLabel),
+    children: [/*#__PURE__*/jsxs("div", {
+      style: {
+        display: "flex",
+        gap: 16,
+        marginBottom: 8
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 7.5,
+            fontWeight: 700,
+            letterSpacing: "0.5px",
+            color: THEME.muted,
+            textTransform: "uppercase",
+            marginBottom: 3
+          },
+          children: "Refunds"
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 16,
+            fontWeight: 700,
+            color: THEME.text,
+            lineHeight: 1.1
+          },
+          children: pct(refundRate, 1)
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            marginTop: 3
+          },
+          children: refundGrowth === 0 ? /*#__PURE__*/jsx("span", {
+            style: {
+              fontSize: 8.5,
+              color: THEME.muted
+            },
+            children: "stable"
+          }) : /*#__PURE__*/jsx(TrendPill$1, {
+            positive: refundGrowth <= 0,
+            children: formatTrend(refundGrowth, "pp")
+          })
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 7.5,
+            fontWeight: 700,
+            letterSpacing: "0.5px",
+            color: THEME.muted,
+            textTransform: "uppercase",
+            marginBottom: 3
+          },
+          children: "Chargebacks"
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 16,
+            fontWeight: 700,
+            color: THEME.text,
+            lineHeight: 1.1
+          },
+          children: pct(chargebackRate, 1)
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            fontSize: 8.5,
+            color: THEME.muted,
+            marginTop: 3
+          },
+          children: "stable"
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        fontSize: 8,
+        color: THEME.muted,
+        lineHeight: 1.45,
+        marginBottom: 8
+      },
+      children: [d$(totalRefundedAmount), " refunded", BULLET, d$(disputedAmount), " disputed", BULLET, formatNumber(lostCases), " ", lostCases === 1 ? "case" : "cases"]
+    }), /*#__PURE__*/jsx(Sparkline, {
+      data: refundChart.length ? refundChart : [0, 0],
+      color: "#F97316",
+      width: 150,
+      height: 36
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        display: "flex",
+        gap: 10,
+        marginTop: 6
+      },
+      children: [{
+        label: "Refunds",
+        color: "#F97316"
+      }, {
+        label: "Chargebacks",
+        color: "#EF4444"
+      }].map(function (leg) {
+        return /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 4
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: leg.color
+            }
+          }), /*#__PURE__*/jsx("span", {
+            style: {
+              fontSize: 8,
+              color: "#6B7280"
+            },
+            children: leg.label
+          })]
+        }, leg.label);
+      })
+    })]
+  });
+};
+var P2RevenueTrendCard = function P2RevenueTrendCard(_ref31) {
+  var title = _ref31.title,
+    subtitle = _ref31.subtitle,
+    value = _ref31.value,
+    trend = _ref31.trend,
+    chartData = _ref31.chartData,
+    chartColor = _ref31.chartColor,
+    startLabel = _ref31.startLabel,
+    endLabel = _ref31.endLabel,
+    _ref31$footerStats = _ref31.footerStats,
+    footerStats = _ref31$footerStats === void 0 ? [] : _ref31$footerStats;
+  return /*#__PURE__*/jsxs(P2Card, {
+    title: title,
+    subtitle: subtitle,
+    children: [/*#__PURE__*/jsx("div", {
+      style: {
+        fontSize: 17,
+        fontWeight: 700,
+        color: THEME.text,
+        lineHeight: 1.1
+      },
+      children: d$Compact(value)
+    }), /*#__PURE__*/jsx("div", {
       style: {
-        marginTop: 7,
-        display: "inline-block",
-        background: "#EEF2FF",
-        border: "1px solid #D7DEFF",
-        borderRadius: 4,
-        padding: "4px 9px",
-        fontSize: 9,
-        lineHeight: 1.35,
-        color: "#374151",
-        maxWidth: "100%"
+        marginTop: 4,
+        marginBottom: 6
       },
-      children: [/*#__PURE__*/jsx("span", {
-        style: {
-          fontWeight: 700,
-          letterSpacing: "0.3px"
-        },
-        children: "Active Filters:"
-      }), " ", /*#__PURE__*/jsx("span", {
-        style: {
-          fontWeight: 500,
-          color: "#334155"
-        },
-        children: activeFilters
-      })]
+      children: /*#__PURE__*/jsx(TrendPill$1, {
+        positive: isTrendPositive(trend),
+        children: trend
+      })
+    }), /*#__PURE__*/jsx(SparklineWithLabels, {
+      data: chartData,
+      color: chartColor,
+      startLabel: startLabel,
+      endLabel: endLabel,
+      width: 150,
+      height: 40
+    }), /*#__PURE__*/jsx(Divider, {
+      mt: 8,
+      mb: 0
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        display: "flex",
+        gap: 10,
+        marginTop: 8,
+        flexWrap: "wrap"
+      },
+      children: footerStats.map(function (_ref32) {
+        var _ref33 = _slicedToArray(_ref32, 2),
+          label = _ref33[0],
+          val = _ref33[1];
+        return /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              fontSize: 7.5,
+              color: THEME.muted,
+              marginBottom: 3
+            },
+            children: label
+          }), /*#__PURE__*/jsx("div", {
+            style: {
+              fontSize: 10,
+              fontWeight: 700,
+              color: THEME.text
+            },
+            children: val
+          })]
+        }, label);
+      })
     })]
   });
 };
-var PageFooter = function PageFooter(_ref19) {
-  var generatedBy = _ref19.generatedBy,
-    generatedLabel = _ref19.generatedLabel,
-    page = _ref19.page;
-  return /*#__PURE__*/jsx("div", {
-    style: {
-      padding: "9px ".concat(MX, "px 54px"),
-      borderTop: "1px solid #DEE5EF",
-      background: "#FFFFFF",
-      marginTop: "auto",
-      flexShrink: 0
-    },
+var P2AcceptanceCard = function P2AcceptanceCard(_ref34) {
+  var title = _ref34.title,
+    acceptanceRate = _ref34.acceptanceRate,
+    acceptanceGrowth = _ref34.acceptanceGrowth,
+    raised = _ref34.raised,
+    raisedGrowth = _ref34.raisedGrowth;
+  return /*#__PURE__*/jsx(P2Card, {
+    title: title,
+    subtitle: "Acceptance & raised",
     children: /*#__PURE__*/jsxs("div", {
       style: {
         display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        fontSize: 8,
-        color: THEME.muted
+        flexDirection: "column",
+        alignItems: "center"
       },
-      children: [/*#__PURE__*/jsxs("span", {
-        children: ["Confidential - Generated by ", generatedBy, " - ", generatedLabel]
-      }), /*#__PURE__*/jsxs("span", {
-        children: ["Page ", page, " of 2 - madinah.com"]
+      children: [/*#__PURE__*/jsx(Donut, {
+        segments: [{
+          value: acceptanceRate,
+          color: THEME.brand
+        }, {
+          value: Math.max(0, 100 - acceptanceRate),
+          color: "#E5E7EB"
+        }],
+        size: 76,
+        centerVal: "".concat(formatNumber(acceptanceRate), "%"),
+        centerLabel: "accepted"
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          width: "100%",
+          marginTop: 8
+        },
+        children: [{
+          label: "Acceptance",
+          value: "".concat(formatNumber(acceptanceRate), "%"),
+          trend: formatTrend(acceptanceGrowth)
+        }, {
+          label: "Raised",
+          value: d$Compact(raised),
+          trend: formatTrend(raisedGrowth)
+        }].map(function (row, i) {
+          return /*#__PURE__*/jsxs("div", {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: i === 0 ? 6 : 0
+            },
+            children: [/*#__PURE__*/jsxs("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 5
+              },
+              children: [/*#__PURE__*/jsx("div", {
+                style: {
+                  width: 7,
+                  height: 7,
+                  borderRadius: 2,
+                  background: THEME.brand,
+                  flexShrink: 0
+                }
+              }), /*#__PURE__*/jsx("span", {
+                style: {
+                  fontSize: 9,
+                  color: "#6B7280"
+                },
+                children: row.label
+              })]
+            }), /*#__PURE__*/jsxs("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 5
+              },
+              children: [/*#__PURE__*/jsx("span", {
+                style: {
+                  fontSize: 9,
+                  fontWeight: 700,
+                  color: THEME.text
+                },
+                children: row.value
+              }), /*#__PURE__*/jsx(TrendPill$1, {
+                positive: isTrendPositive(row.trend),
+                children: row.trend
+              })]
+            })]
+          }, row.label);
+        })
       })]
     })
   });
 };
 // ─── Main component ───────────────────────────────────────────────────────────
-var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref20, ref) {
-  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _apiData$trafficSourc, _apiData$trafficSourc2, _apiData$trafficSourc3, _growth$totalRevenue, _metricByTitle$AvgDo, _avgDonationDetail$me, _avgDonationDetail$to, _metricByTitle$NetRa, _growth$netRevenue, _metricByTitle$Total, _metricByTitle$Total2, _growth$totalDonation, _metricByTitle$Total3, _metricByTitle$AvgDo2, _growth$overallAVGDon, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _growth$conversionRat, _metricByTitle$Conver2, _metricByTitle$Refund, _refunds$growthPercen, _metricByTitle$Refund2, _mainChart$stacked, _ob$growthPercentage, _ob$peakDay, _up$acceptanceGrowth, _up$raisedGrowth, _dn$acceptanceGrowth, _dn$raisedGrowth, _refCard$growthPercen;
-  var _ref20$name = _ref20.name,
-    name = _ref20$name === void 0 ? "" : _ref20$name,
-    _ref20$apiData = _ref20.apiData,
-    apiData = _ref20$apiData === void 0 ? {} : _ref20$apiData,
-    _ref20$dateName = _ref20.dateName,
-    dateName = _ref20$dateName === void 0 ? "Last Period" : _ref20$dateName,
-    _ref20$numberOfDays = _ref20.numberOfDays,
-    numberOfDays = _ref20$numberOfDays === void 0 ? 30 : _ref20$numberOfDays,
-    _ref20$activeFilters = _ref20.activeFilters,
-    activeFilters = _ref20$activeFilters === void 0 ? [] : _ref20$activeFilters;
+var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref35, ref) {
+  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _apiData$trafficSourc, _apiData$trafficSourc2, _growth$totalRevenue, _metricByTitle$AvgDo, _apiData$trafficSourc3, _metricByTitle$NetRa, _growth$netRevenue, _metricByTitle$Total, _metricByTitle$Total2, _growth$totalDonation, _metricByTitle$Total3, _metricByTitle$AvgDo2, _growth$overallAVGDon, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _growth$conversionRat, _metricByTitle$Conver2, _metricByTitle$Refund, _refunds$growthPercen, _metricByTitle$Refund2, _mainChart$stacked, _ob$totalRevenue, _ob$growthPercentage, _ob$averagePerDay, _ob$peakDay$amount, _ob$peakDay, _ob$totalOrders, _up$acceptanceRate, _up$acceptanceGrowth, _up$raised, _up$raisedGrowth, _dn$acceptanceRate, _dn$acceptanceGrowth, _dn$raised, _dn$raisedGrowth, _refCard$totalRevenue, _refCard$growthPercen, _refCard$totalReferre, _refCard$averageGift, _refCard$conversionRa;
+  var _ref35$name = _ref35.name,
+    name = _ref35$name === void 0 ? "" : _ref35$name,
+    _ref35$apiData = _ref35.apiData,
+    apiData = _ref35$apiData === void 0 ? {} : _ref35$apiData,
+    _ref35$dateName = _ref35.dateName,
+    dateName = _ref35$dateName === void 0 ? "Last Period" : _ref35$dateName,
+    _ref35$numberOfDays = _ref35.numberOfDays,
+    numberOfDays = _ref35$numberOfDays === void 0 ? 30 : _ref35$numberOfDays,
+    _ref35$activeFilters = _ref35.activeFilters,
+    activeFilters = _ref35$activeFilters === void 0 ? [] : _ref35$activeFilters;
   var now = new Date();
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
   var windowLabel = "".concat(numberOfDays, "-day window");
@@ -3011,42 +3304,6 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref20, ref) {
     hour12: false
   }, gmtOptions)) + " GMT";
   var dateLabel = dateName;
-  var _normalizeFiltersText = function normalizeFiltersText(filtersInput) {
-    if (typeof filtersInput === "string") {
-      var str = filtersInput.trim();
-      if (!str) return "";
-      if (str.startsWith("[") || str.startsWith("{")) {
-        try {
-          return _normalizeFiltersText(JSON.parse(str));
-        } catch (_) {
-          // Keep raw text if not valid JSON.
-        }
-      }
-      return str;
-    }
-    if (Array.isArray(filtersInput)) {
-      var fromObjects = filtersInput.filter(function (item) {
-        return item && _typeof(item) === "object" && item.value !== undefined && item.value !== null && "".concat(item.value).trim();
-      }).map(function (item) {
-        return "".concat(item.label || item.id || "Filter", ": ").concat(item.value);
-      }).join(" | ").trim();
-      if (fromObjects) return fromObjects;
-      var fromStrings = filtersInput.map(function (item) {
-        return typeof item === "string" ? item.trim() : "";
-      }).filter(Boolean).join(" | ").trim();
-      if (fromStrings) return fromStrings;
-    }
-    if (filtersInput && _typeof(filtersInput) === "object") {
-      if (Array.isArray(filtersInput.activeFilters) || typeof filtersInput.activeFilters === "string") {
-        return _normalizeFiltersText(filtersInput.activeFilters);
-      }
-      if (filtersInput.value !== undefined && filtersInput.value !== null && "".concat(filtersInput.value).trim()) {
-        return "".concat(filtersInput.label || filtersInput.id || "Filter", ": ").concat(filtersInput.value).trim();
-      }
-    }
-    return "";
-  };
-  var formattedActiveFilters = _normalizeFiltersText(activeFilters);
   var parseFilterPills = function parseFilterPills(filtersInput) {
     if (Array.isArray(filtersInput)) {
       var fromObjects = filtersInput.filter(function (item) {
@@ -3093,9 +3350,9 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref20, ref) {
     chargebackRate = refunds.chargebackRate,
     growthPercentage = refunds.growthPercentage,
     totalRefundedAmount = refunds.totalRefundedAmount,
-    totalRefunds = refunds.totalRefunds,
-    totalChargebacks = refunds.totalChargebacks,
-    lostChargebacks = refunds.lostChargebacks;
+    totalRefunds = refunds.totalRefunds;
+    refunds.totalChargebacks;
+    var lostChargebacks = refunds.lostChargebacks;
   var newDonors = donorMix.newDonors,
     returningDonors = donorMix.returningDonors,
     totalMix = donorMix.totalMix,
@@ -3104,8 +3361,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref20, ref) {
     mixAvgGift = donorMix.avgGift,
     donorMixPrev = donorMix.donorMixPrev;
   var geoList = report.donorGeographyList;
-  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$trafficSourc2 = apiData === null || apiData === void 0 || (_apiData$trafficSourc3 = apiData.trafficSourceData) === null || _apiData$trafficSourc3 === void 0 ? void 0 : _apiData$trafficSourc3.totalRevenue) !== null && _apiData$trafficSourc2 !== void 0 ? _apiData$trafficSourc2 : 0);
+  var trafficTotal = Number((_apiData$trafficSourc = apiData === null || apiData === void 0 || (_apiData$trafficSourc2 = apiData.trafficSourceData) === null || _apiData$trafficSourc2 === void 0 ? void 0 : _apiData$trafficSourc2.totalRevenue) !== null && _apiData$trafficSourc !== void 0 ? _apiData$trafficSourc : 0);
   var revSeries = mainChart.series || [{
     name: "Paid Ads",
     data: []
@@ -3154,13 +3410,31 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref20, ref) {
   var formatRoasTrend = function formatRoasTrend(trend) {
     return String(trend !== null && trend !== void 0 ? trend : "").replace(/x$/, "×");
   };
-  var avgDonationDetailText = formatMetricDetail(((_metricByTitle$AvgDo = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo === void 0 ? void 0 : _metricByTitle$AvgDo.detail) || avgDonationDetail.detail || "Median $".concat(formatNumber((_avgDonationDetail$me = avgDonationDetail.median) !== null && _avgDonationDetail$me !== void 0 ? _avgDonationDetail$me : 0), " \xB7 top decile $").concat(formatNumber((_avgDonationDetail$to = avgDonationDetail.topDecile) !== null && _avgDonationDetail$to !== void 0 ? _avgDonationDetail$to : 0)));
-  var headerProps = {
-    dateLabel: dateLabel,
-    generatedLabel: generatedLabel,
-    activeFilters: formattedActiveFilters,
-    windowLabel: windowLabel
+  var avgDonationDetailText = formatMetricDetail(((_metricByTitle$AvgDo = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo === void 0 ? void 0 : _metricByTitle$AvgDo.detail) || avgDonationDetail.detail);
+  var campaignRows = activeCampaigns.map(function (c) {
+    return {
+      name: c.name,
+      raised: c.val1,
+      progress: c.progress,
+      donors: c.val3,
+      status: c.status
+    };
+  });
+  var donorMixTrend = "".concat(formatTrend(donorMixPrev !== null && donorMixPrev !== void 0 ? donorMixPrev : 0), " vs last month");
+  var trafficList = Array.isArray(apiData === null || apiData === void 0 || (_apiData$trafficSourc3 = apiData.trafficSourceData) === null || _apiData$trafficSourc3 === void 0 ? void 0 : _apiData$trafficSourc3.data) ? apiData.trafficSourceData.data : Array.isArray(apiData === null || apiData === void 0 ? void 0 : apiData.trafficSourceData) ? apiData.trafficSourceData : [];
+  var chartLabelAt = function chartLabelAt(chart, index) {
+    var item = chart === null || chart === void 0 ? void 0 : chart[index];
+    if (!item) return "";
+    return item.date || item.label || item.category || "";
   };
+  var obChart = (ob === null || ob === void 0 ? void 0 : ob.chart) || [];
+  var refChart = (refCard === null || refCard === void 0 ? void 0 : refCard.chartData) || [];
+  var chartStartLabel = chartLabelAt(obChart, 0) || revCats[0] || "";
+  var chartEndLabel = chartLabelAt(obChart, obChart.length - 1) || revCats[revCats.length - 1] || "";
+  var refStartLabel = chartLabelAt(refChart, 0) || revCats[0] || "";
+  var refEndLabel = chartLabelAt(refChart, refChart.length - 1) || revCats[revCats.length - 1] || "";
+  var disputedAmount = refunds.disputedAmount;
+  var refundChartData = refunds.chartData || [];
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     style: {
@@ -3367,419 +3641,118 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref20, ref) {
         background: THEME.pageBg,
         display: "flex",
         flexDirection: "column",
-        fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+        fontFamily: "'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif",
         boxSizing: "border-box"
       },
-      children: [/*#__PURE__*/jsx(PageHeader, _objectSpread2(_objectSpread2({}, headerProps), {}, {
-        page: 2
-      })), /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx(PageOneHeader, {
+        dateLabel: dateLabel,
+        generatedLabel: generatedLabel,
+        windowLabel: windowLabel
+      }), /*#__PURE__*/jsxs("div", {
         style: {
           flex: 1,
-          padding: "10px ".concat(MX, "px 8px"),
+          padding: "14px ".concat(MX, "px 0"),
           display: "flex",
           flexDirection: "column",
-          gap: 8
+          gap: 10
         },
         children: [/*#__PURE__*/jsxs("div", {
           style: {
             display: "grid",
-            gridTemplateColumns: "2.2fr 1fr",
-            gap: 8
+            gridTemplateColumns: "2.15fr 1fr",
+            gap: 10
           },
-          children: [/*#__PURE__*/jsx(Panel, {
+          children: [/*#__PURE__*/jsx(P2Card, {
             title: "Active campaigns",
             subtitle: "Live fundraisers ranked by velocity",
-            children: /*#__PURE__*/jsx(MiniTable, {
-              head: ["Campaign", "Raised", "Progress", "Donors", "Avg Gift"],
-              colAlign: ["left", "right", "left", "right", "right"],
-              rows: activeCampaigns.map(function (c, i) {
-                return [c.name, c.val1, /*#__PURE__*/jsx(ProgressBar, {
-                  value: c.progress
-                }, "campaign-progress-".concat(i)), c.val3, c.val4];
-              })
-            })
-          }), /*#__PURE__*/jsx(Panel, {
-            title: "Donor mix",
-            subtitle: "Acquisition vs retention",
-            children: /*#__PURE__*/jsxs("div", {
+            action: /*#__PURE__*/jsx("span", {
               style: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center"
+                fontSize: 9,
+                color: THEME.brand,
+                fontWeight: 500
               },
-              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: {
-                  width: "100%",
-                  marginTop: 6
-                },
-                children: [/*#__PURE__*/jsxs("div", {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    marginBottom: 5
-                  },
-                  children: [/*#__PURE__*/jsxs("div", {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 5
-                    },
-                    children: [/*#__PURE__*/jsx("div", {
-                      style: {
-                        width: 8,
-                        height: 8,
-                        borderRadius: 2,
-                        background: C.indigo,
-                        flexShrink: 0
-                      }
-                    }), /*#__PURE__*/jsx("span", {
-                      style: {
-                        fontSize: 9.5,
-                        color: "#6B7280"
-                      },
-                      children: "New donors"
-                    })]
-                  }), /*#__PURE__*/jsxs("span", {
-                    style: {
-                      fontSize: 9.5,
-                      fontWeight: 700,
-                      color: "#111827"
-                    },
-                    children: [formatNumber(newDonors), " - ", newPct, "%"]
-                  })]
-                }), /*#__PURE__*/jsxs("div", {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    marginBottom: 8
-                  },
-                  children: [/*#__PURE__*/jsxs("div", {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 5
-                    },
-                    children: [/*#__PURE__*/jsx("div", {
-                      style: {
-                        width: 8,
-                        height: 8,
-                        borderRadius: 2,
-                        background: C.emerald,
-                        flexShrink: 0
-                      }
-                    }), /*#__PURE__*/jsx("span", {
-                      style: {
-                        fontSize: 9.5,
-                        color: "#6B7280"
-                      },
-                      children: "Returning"
-                    })]
-                  }), /*#__PURE__*/jsxs("span", {
-                    style: {
-                      fontSize: 9.5,
-                      fontWeight: 700,
-                      color: "#111827"
-                    },
-                    children: [formatNumber(returningDonors), " - ", retPct, "%"]
-                  })]
-                }), /*#__PURE__*/jsx(Divider, {
-                  mb: 6
-                }), /*#__PURE__*/jsx("div", {
-                  style: {
-                    fontSize: 9.5,
-                    color: "#9CA3AF",
-                    marginBottom: 2
-                  },
-                  children: "Avg gift"
-                }), /*#__PURE__*/jsx("div", {
-                  style: {
-                    fontSize: 14,
-                    fontWeight: 800,
-                    color: "#111827",
-                    marginBottom: 2
-                  },
-                  children: d$(mixAvgGift)
-                }), /*#__PURE__*/jsx("div", {
-                  style: {
-                    fontSize: 9
-                  },
-                  children: /*#__PURE__*/jsx(TrendText, {
-                    style: {
-                      fontSize: 9
-                    },
-                    children: formatArrowTrend(donorMixPrev, {
-                      label: "vs last month"
-                    })
-                  })
-                })]
-              })]
+              children: "View all"
+            }),
+            children: /*#__PURE__*/jsx(P2CampaignTable, {
+              rows: campaignRows
             })
+          }), /*#__PURE__*/jsx(P2DonorMixCard, {
+            newDonors: newDonors,
+            returningDonors: returningDonors,
+            totalMix: totalMix,
+            newPct: newPct,
+            retPct: retPct,
+            avgGift: mixAvgGift,
+            avgGiftTrend: donorMixTrend
           })]
         }), /*#__PURE__*/jsxs("div", {
           style: {
             display: "grid",
             gridTemplateColumns: "repeat(4, 1fr)",
-            gap: 8
+            gap: 10
           },
-          children: [/*#__PURE__*/jsx(DonationTypePanel, {
-            donationTypeData: report.donationTypeData,
-            recurringColor: C.indigo,
-            oneTimeColor: C.emerald
-          }), /*#__PURE__*/jsx(DonorGeographyPanel, {
+          children: [/*#__PURE__*/jsx(P2DonationTypeCard, {
+            donationTypeData: report.donationTypeData
+          }), /*#__PURE__*/jsx(P2DonorGeographyCard, {
             geoList: geoList,
-            totalDonors: totalDonors,
-            barColor: C.indigo
-          }), /*#__PURE__*/jsxs(Panel, {
-            title: "Refunds & chargebacks",
-            subtitle: "Trust health - ".concat(numberOfDays, "-day window"),
-            children: [/*#__PURE__*/jsxs("div", {
-              style: {
-                display: "flex",
-                gap: 12,
-                marginBottom: 7
-              },
-              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: 15,
-                    fontWeight: 800,
-                    color: "#111827"
-                  },
-                  children: pct(refundRate, 1)
-                }), /*#__PURE__*/jsx("div", {
-                  style: {
-                    fontSize: 9,
-                    fontWeight: 600
-                  },
-                  children: /*#__PURE__*/jsx(TrendText, {
-                    invert: true,
-                    style: {
-                      fontSize: 9
-                    },
-                    children: growthPercentage === 0 ? "stable" : formatArrowTrend(growthPercentage)
-                  })
-                })]
-              }), /*#__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: 15,
-                    fontWeight: 800,
-                    color: "#111827"
-                  },
-                  children: pct(chargebackRate, 1)
-                }), /*#__PURE__*/jsx("div", {
-                  style: {
-                    fontSize: 9,
-                    color: "#9CA3AF"
-                  },
-                  children: growthPercentage === 0 ? "stable" : /*#__PURE__*/jsx(TrendText, {
-                    invert: true,
-                    style: {
-                      fontSize: 9
-                    },
-                    children: formatArrowTrend(growthPercentage)
-                  })
-                })]
-              })]
-            }), /*#__PURE__*/jsx(Divider, {
-              mb: 5
-            }), /*#__PURE__*/jsxs("div", {
-              style: {
-                fontSize: 8,
-                color: "#6B7280",
-                lineHeight: 1.45
-              },
-              children: [d$(totalRefundedAmount), " refunded - ", formatNumber(totalChargebacks), " chargebacks - ", formatNumber(lostChargebacks), " cases lost"]
-            })]
-          }), /*#__PURE__*/jsx(Panel, {
-            title: "Traffic source",
-            subtitle: "Revenue by channel - ".concat(daysLabel),
-            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), "%")];
-              })), [["Total", d$(trafficTotal), ""]])
-            })
+            totalDonors: totalDonors
+          }), /*#__PURE__*/jsx(P2RefundsCard, {
+            refundRate: refundRate,
+            chargebackRate: chargebackRate,
+            refundGrowth: growthPercentage !== null && growthPercentage !== void 0 ? growthPercentage : 0,
+            totalRefundedAmount: totalRefundedAmount,
+            disputedAmount: disputedAmount !== null && disputedAmount !== void 0 ? disputedAmount : 0,
+            lostCases: lostChargebacks !== null && lostChargebacks !== void 0 ? lostChargebacks : 0,
+            chartData: refundChartData,
+            windowLabel: windowLabel
+          }), /*#__PURE__*/jsx(P2TrafficSourceCard, {
+            items: trafficList,
+            total: trafficTotal,
+            daysLabel: daysLabel
           })]
         }), /*#__PURE__*/jsxs("div", {
           style: {
             display: "grid",
             gridTemplateColumns: "repeat(4, 1fr)",
-            gap: 8
+            gap: 10
           },
-          children: [/*#__PURE__*/jsxs(Panel, {
+          children: [/*#__PURE__*/jsx(P2RevenueTrendCard, {
             title: "Order Bump",
-            subtitle: "Revenue trend - last ".concat(daysLabel),
-            children: [/*#__PURE__*/jsx("div", {
-              style: {
-                fontSize: 17,
-                fontWeight: 800,
-                color: "#111827"
-              },
-              children: d$((ob === null || ob === void 0 ? void 0 : ob.totalRevenue) || 0)
-            }), /*#__PURE__*/jsx("div", {
-              style: {
-                fontSize: 10,
-                fontWeight: 600,
-                marginBottom: 5
-              },
-              children: /*#__PURE__*/jsx(TrendText, {
-                style: {
-                  fontSize: 10
-                },
-                children: formatArrowTrend((_ob$growthPercentage = ob === null || ob === void 0 ? void 0 : ob.growthPercentage) !== null && _ob$growthPercentage !== void 0 ? _ob$growthPercentage : 0, {
-                  label: "vs pp"
-                })
-              })
-            }), /*#__PURE__*/jsx(Sparkline, {
-              data: obData.length ? obData : [0, 0],
-              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 (_ref21) {
-                var _ref22 = _slicedToArray(_ref21, 2),
-                  l = _ref22[0],
-                  v = _ref22[1];
-                return /*#__PURE__*/jsxs("div", {
-                  children: [/*#__PURE__*/jsx("div", {
-                    style: {
-                      fontSize: 8,
-                      color: "#9CA3AF",
-                      marginBottom: 4
-                    },
-                    children: l
-                  }), /*#__PURE__*/jsx("div", {
-                    style: {
-                      fontSize: 11.5,
-                      fontWeight: 700,
-                      color: "#111827"
-                    },
-                    children: v
-                  })]
-                }, l);
-              })
-            })]
-          }), /*#__PURE__*/jsx(AcceptanceRaisedPanel, {
+            subtitle: "Revenue trend".concat(BULLET, "last ").concat(daysLabel),
+            value: (_ob$totalRevenue = ob === null || ob === void 0 ? void 0 : ob.totalRevenue) !== null && _ob$totalRevenue !== void 0 ? _ob$totalRevenue : 0,
+            trend: "".concat(formatTrend((_ob$growthPercentage = ob === null || ob === void 0 ? void 0 : ob.growthPercentage) !== null && _ob$growthPercentage !== void 0 ? _ob$growthPercentage : 0), " vs last month"),
+            chartData: obData.length ? obData : [0, 0],
+            chartColor: THEME.brand,
+            startLabel: chartStartLabel,
+            endLabel: chartEndLabel,
+            footerStats: [["Avg/day", d$Compact((_ob$averagePerDay = ob === null || ob === void 0 ? void 0 : ob.averagePerDay) !== null && _ob$averagePerDay !== void 0 ? _ob$averagePerDay : 0)], ["Peak day", d$Compact((_ob$peakDay$amount = ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) !== null && _ob$peakDay$amount !== void 0 ? _ob$peakDay$amount : 0)], ["Orders", formatNumber((_ob$totalOrders = ob === null || ob === void 0 ? void 0 : ob.totalOrders) !== null && _ob$totalOrders !== void 0 ? _ob$totalOrders : 0)]]
+          }), /*#__PURE__*/jsx(P2AcceptanceCard, {
             title: "Upsell",
-            subtitle: "Acceptance & raised",
-            acceptanceRate: (up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0,
+            acceptanceRate: (_up$acceptanceRate = up === null || up === void 0 ? void 0 : up.acceptanceRate) !== null && _up$acceptanceRate !== void 0 ? _up$acceptanceRate : 0,
             acceptanceGrowth: (_up$acceptanceGrowth = up === null || up === void 0 ? void 0 : up.acceptanceGrowth) !== null && _up$acceptanceGrowth !== void 0 ? _up$acceptanceGrowth : 0,
-            raised: (up === null || up === void 0 ? void 0 : up.raised) || 0,
-            raisedGrowth: (_up$raisedGrowth = up === null || up === void 0 ? void 0 : up.raisedGrowth) !== null && _up$raisedGrowth !== void 0 ? _up$raisedGrowth : 0,
-            primaryColor: C.indigo
-          }), /*#__PURE__*/jsx(AcceptanceRaisedPanel, {
+            raised: (_up$raised = up === null || up === void 0 ? void 0 : up.raised) !== null && _up$raised !== void 0 ? _up$raised : 0,
+            raisedGrowth: (_up$raisedGrowth = up === null || up === void 0 ? void 0 : up.raisedGrowth) !== null && _up$raisedGrowth !== void 0 ? _up$raisedGrowth : 0
+          }), /*#__PURE__*/jsx(P2AcceptanceCard, {
             title: "Downsell",
-            subtitle: "Acceptance & raised",
-            acceptanceRate: (dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0,
+            acceptanceRate: (_dn$acceptanceRate = dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) !== null && _dn$acceptanceRate !== void 0 ? _dn$acceptanceRate : 0,
             acceptanceGrowth: (_dn$acceptanceGrowth = dn === null || dn === void 0 ? void 0 : dn.acceptanceGrowth) !== null && _dn$acceptanceGrowth !== void 0 ? _dn$acceptanceGrowth : 0,
-            raised: (dn === null || dn === void 0 ? void 0 : dn.raised) || 0,
-            raisedGrowth: (_dn$raisedGrowth = dn === null || dn === void 0 ? void 0 : dn.raisedGrowth) !== null && _dn$raisedGrowth !== void 0 ? _dn$raisedGrowth : 0,
-            primaryColor: C.cyan
-          }), /*#__PURE__*/jsxs(Panel, {
+            raised: (_dn$raised = dn === null || dn === void 0 ? void 0 : dn.raised) !== null && _dn$raised !== void 0 ? _dn$raised : 0,
+            raisedGrowth: (_dn$raisedGrowth = dn === null || dn === void 0 ? void 0 : dn.raisedGrowth) !== null && _dn$raisedGrowth !== void 0 ? _dn$raisedGrowth : 0
+          }), /*#__PURE__*/jsx(P2RevenueTrendCard, {
             title: "Referrals",
-            subtitle: "Revenue trend - last ".concat(daysLabel),
-            children: [/*#__PURE__*/jsx("div", {
-              style: {
-                fontSize: 17,
-                fontWeight: 800,
-                color: "#111827"
-              },
-              children: d$((refCard === null || refCard === void 0 ? void 0 : refCard.totalRevenue) || 0)
-            }), /*#__PURE__*/jsx("div", {
-              style: {
-                fontSize: 10,
-                fontWeight: 600,
-                marginBottom: 5
-              },
-              children: /*#__PURE__*/jsx(TrendText, {
-                style: {
-                  fontSize: 10
-                },
-                children: formatArrowTrend((_refCard$growthPercen = refCard === null || refCard === void 0 ? void 0 : refCard.growthPercentage) !== null && _refCard$growthPercen !== void 0 ? _refCard$growthPercen : 0, {
-                  label: "vs pp"
-                })
-              })
-            }), /*#__PURE__*/jsx(Sparkline, {
-              data: refData.length ? refData : [0, 0],
-              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 (_ref23) {
-                var _ref24 = _slicedToArray(_ref23, 2),
-                  l = _ref24[0],
-                  v = _ref24[1];
-                return /*#__PURE__*/jsxs("div", {
-                  children: [/*#__PURE__*/jsx("div", {
-                    style: {
-                      fontSize: 8,
-                      color: "#9CA3AF",
-                      marginBottom: 4
-                    },
-                    children: l
-                  }), /*#__PURE__*/jsx("div", {
-                    style: {
-                      fontSize: 11.5,
-                      fontWeight: 700,
-                      color: "#111827"
-                    },
-                    children: v
-                  })]
-                }, l);
-              })
-            })]
+            subtitle: "Revenue trend".concat(BULLET, "last ").concat(daysLabel),
+            value: (_refCard$totalRevenue = refCard === null || refCard === void 0 ? void 0 : refCard.totalRevenue) !== null && _refCard$totalRevenue !== void 0 ? _refCard$totalRevenue : 0,
+            trend: "".concat(formatTrend((_refCard$growthPercen = refCard === null || refCard === void 0 ? void 0 : refCard.growthPercentage) !== null && _refCard$growthPercen !== void 0 ? _refCard$growthPercen : 0), " vs last month"),
+            chartData: refData.length ? refData : [0, 0],
+            chartColor: "#10B981",
+            startLabel: refStartLabel,
+            endLabel: refEndLabel,
+            footerStats: [["Referrers", formatNumber((_refCard$totalReferre = refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) !== null && _refCard$totalReferre !== void 0 ? _refCard$totalReferre : 0)], ["Avg gift", d$Compact((_refCard$averageGift = refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) !== null && _refCard$averageGift !== void 0 ? _refCard$averageGift : 0)], ["Conv. rate", pct((_refCard$conversionRa = refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) !== null && _refCard$conversionRa !== void 0 ? _refCard$conversionRa : 0, 1)]]
           })]
         })]
-      }), /*#__PURE__*/jsx(PageFooter, {
+      }), /*#__PURE__*/jsx(PageTwoFooter, {
         generatedBy: name,
-        generatedLabel: generatedLabel,
-        page: 2
+        generatedLabel: generatedLabel
       })]
     })]
   });