@ammarkhalidfarooq/dashboard-package 0.6.92 → 0.6.93

package/dist/index.cjs.js

@@ -1749,18 +1749,19 @@ var W = 794;
 var MIN_H = 1123;
 var MX = 32; // horizontal margin
 var THEME = {
-  pageBg: "#F8FAFC",
+  pageBg: "#F9FAFB",
   panelBg: "#FFFFFF",
-  panelBorder: "#DDE3EA",
-  kpiBgPrimary: "#EEF2FF",
+  panelBorder: "#E5E7EB",
+  brand: "#6366F1",
   kpiBorderPrimary: "#C7D2FE",
-  kpiBgSecondary: "#F8FAFF",
-  kpiBorderSecondary: "#DDE3EA",
   tableHeadBg: "#EEF2FF",
   tableAltBg: "#F8FAFF",
-  muted: "#94A3B8",
-  text: "#111827"
+  muted: "#9CA3AF",
+  text: "#111827",
+  trendUpBg: "#D1FAE5",
+  trendUpText: "#059669"
 };
+var BULLET = " · ";
 
 // ─── Number helpers ───────────────────────────────────────────────────────────
 var d$ = function d$(v) {
@@ -1773,7 +1774,7 @@ var kpiPct = function kpiPct(v) {
   return "".concat(formatNumber(Number(v !== null && v !== void 0 ? v : 0).toFixed(2)), "%");
 };
 var kpiRoas = function kpiRoas(v) {
-  return "".concat(formatNumber(Number(v !== null && v !== void 0 ? v : 0).toFixed(2)), "\xD7");
+  return "".concat(Number(v !== null && v !== void 0 ? v : 0).toFixed(1), "\xD7");
 };
 var d$Compact = function d$Compact(v) {
   var n = Number(v !== null && v !== void 0 ? v : 0);
@@ -1785,11 +1786,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 signed = function signed(v) {
-  var suffix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "%";
-  var n = Number(v !== null && v !== void 0 ? v : 0);
-  return "".concat(n >= 0 ? "+" : "").concat(n.toFixed(2)).concat(suffix);
-};
 var TREND_UP = "#0B8F61";
 var TREND_DOWN = "#ef4444";
 var resolveTrendColor = function resolveTrendColor(trendText) {
@@ -2597,70 +2593,302 @@ var AcceptanceRaisedPanel = function AcceptanceRaisedPanel(_ref10) {
     })
   });
 };
-var KpiCard = function KpiCard(_ref11) {
-  var title = _ref11.title,
-    value = _ref11.value,
-    trend = _ref11.trend,
-    detail = _ref11.detail,
-    _ref11$variant = _ref11.variant,
-    variant = _ref11$variant === void 0 ? "secondary" : _ref11$variant,
-    _ref11$trendPositiveW = _ref11.trendPositiveWhenNegative,
-    trendPositiveWhenNegative = _ref11$trendPositiveW === void 0 ? false : _ref11$trendPositiveW;
-  var displayTrend = withTrendArrow(trend);
-  var isPrimary = variant === "primary";
+var TrendPill$1 = function TrendPill(_ref12) {
+  var children = _ref12.children,
+    _ref12$positive = _ref12.positive,
+    positive = _ref12$positive === void 0 ? true : _ref12$positive;
+  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+    style: {
+      padding: "36px ".concat(MX, "px 0"),
+      flexShrink: 0
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            fontSize: 22,
+            fontWeight: 700,
+            color: THEME.brand,
+            letterSpacing: "-0.3px",
+            lineHeight: 1.1
+          },
+          children: "Madinah"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            fontSize: 9,
+            fontWeight: 600,
+            letterSpacing: "1.2px",
+            color: THEME.muted,
+            textTransform: "uppercase",
+            marginTop: 3
+          },
+          children: "Performance Report"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          textAlign: "right"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            fontSize: 11,
+            color: "#6B7280",
+            lineHeight: 1.2
+          },
+          children: "Dashboard overview \u2014 Overall"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            fontSize: 18,
+            fontWeight: 700,
+            color: THEME.text,
+            marginTop: 4,
+            lineHeight: 1.15
+          },
+          children: dateLabel
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          style: {
+            fontSize: 9,
+            color: THEME.muted,
+            marginTop: 3,
+            lineHeight: 1.35
+          },
+          children: [windowLabel, BULLET, "Generated ", generatedLabel]
+        })]
+      })]
+    })
+  });
+};
+var ActiveFiltersBar = function ActiveFiltersBar(_ref14) {
+  var _ref14$pills = _ref14.pills,
+    pills = _ref14$pills === void 0 ? [] : _ref14$pills;
+  if (!pills.length) return null;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: {
-      border: "1px solid ".concat(isPrimary ? THEME.kpiBorderPrimary : THEME.kpiBorderSecondary),
-      borderRadius: 8,
-      padding: "10px 12px 9px",
-      background: isPrimary ? THEME.kpiBgPrimary : THEME.kpiBgSecondary,
-      width: "100%",
-      minWidth: 0,
-      boxSizing: "border-box",
       display: "flex",
-      flexDirection: "column",
-      gap: 2
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: 8,
+      background: "#EEF2FF",
+      borderRadius: 10,
+      padding: "10px 14px",
+      marginTop: 18
     },
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
       style: {
         fontSize: 8,
         fontWeight: 700,
-        letterSpacing: "0.7px",
-        color: "#64748B"
+        letterSpacing: "0.8px",
+        color: THEME.muted,
+        textTransform: "uppercase",
+        flexShrink: 0
       },
-      children: title
+      children: "Active Filters"
+    }), pills.map(function (pill, i) {
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          background: "#FFFFFF",
+          border: "1px solid ".concat(THEME.kpiBorderPrimary),
+          borderRadius: 100,
+          padding: "4px 11px",
+          fontSize: 9,
+          fontWeight: 500,
+          color: THEME.brand,
+          lineHeight: 1.3
+        },
+        children: pill
+      }, i);
+    })]
+  });
+};
+var HeroRaisedCard = function HeroRaisedCard(_ref15) {
+  var value = _ref15.value,
+    trend = _ref15.trend,
+    detail = _ref15.detail;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      display: "flex",
+      background: "#FFFFFF",
+      border: "1px solid ".concat(THEME.panelBorder),
+      borderRadius: 12,
+      overflow: "hidden",
+      boxSizing: "border-box"
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        width: 5,
+        flexShrink: 0,
+        background: THEME.brand
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        flex: 1,
+        padding: "16px 18px 14px"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          fontSize: 9,
+          fontWeight: 700,
+          letterSpacing: "0.8px",
+          color: THEME.brand,
+          textTransform: "uppercase"
+        },
+        children: "Total Raised"
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          marginTop: 6,
+          flexWrap: "wrap"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          style: {
+            fontSize: 28,
+            fontWeight: 700,
+            color: THEME.text,
+            lineHeight: 1.05,
+            letterSpacing: "-0.5px"
+          },
+          children: value
+        }), trend && /*#__PURE__*/jsxRuntime.jsx(TrendPill$1, {
+          positive: isTrendPositive(trend),
+          children: trend
+        })]
+      }), detail && /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          fontSize: 9,
+          color: THEME.muted,
+          marginTop: 8,
+          lineHeight: 1.4
+        },
+        children: detail
+      })]
+    })]
+  });
+};
+var MetricGridCard = function MetricGridCard(_ref16) {
+  var title = _ref16.title,
+    value = _ref16.value,
+    trend = _ref16.trend,
+    detail = _ref16.detail,
+    _ref16$trendPositiveW = _ref16.trendPositiveWhenNegative,
+    trendPositiveWhenNegative = _ref16$trendPositiveW === void 0 ? false : _ref16$trendPositiveW;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      position: "relative",
+      background: "#FFFFFF",
+      border: "1px solid ".concat(THEME.panelBorder),
+      borderRadius: 12,
+      padding: "12px 14px 11px",
+      boxSizing: "border-box",
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        gap: 6
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          fontSize: 8,
+          fontWeight: 700,
+          letterSpacing: "0.7px",
+          color: THEME.muted,
+          textTransform: "uppercase",
+          lineHeight: 1.2
+        },
+        children: title
+      }), trend && /*#__PURE__*/jsxRuntime.jsx(TrendPill$1, {
+        positive: isTrendPositive(trend, trendPositiveWhenNegative),
+        children: trend
+      })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
-        fontSize: 17,
-        fontWeight: 800,
+        fontSize: 20,
+        fontWeight: 700,
         color: THEME.text,
         lineHeight: 1.1,
-        marginTop: 2
+        marginTop: 10
       },
       children: value
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      style: {
-        fontSize: 10.5,
-        fontWeight: 600,
-        color: resolveTrendColor(displayTrend, trendPositiveWhenNegative)
-      },
-      children: displayTrend
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), detail && /*#__PURE__*/jsxRuntime.jsx("div", {
       style: {
         fontSize: 8.5,
         color: THEME.muted,
-        lineHeight: 1.4
+        marginTop: 5,
+        lineHeight: 1.35
       },
       children: detail
     })]
   });
 };
-var PageHeader = function PageHeader(_ref12) {
-  var dateLabel = _ref12.dateLabel,
-    generatedLabel = _ref12.generatedLabel,
-    activeFilters = _ref12.activeFilters,
-    page = _ref12.page,
-    windowLabel = _ref12.windowLabel;
+var PageOneFooter = function PageOneFooter(_ref17) {
+  var generatedBy = _ref17.generatedBy,
+    generatedLabel = _ref17.generatedLabel;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: {
+      padding: "14px ".concat(MX, "px 28px"),
+      borderTop: "1px solid ".concat(THEME.panelBorder),
+      marginTop: "auto",
+      flexShrink: 0
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        fontSize: 8,
+        color: THEME.muted,
+        lineHeight: 1.4
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+        children: ["Confidential", BULLET, "Generated by ", generatedBy, BULLET, generatedLabel]
+      }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+        children: ["Page 1 of 2", BULLET, "madinah.com"]
+      })]
+    })
+  });
+};
+var PageHeader = function PageHeader(_ref18) {
+  var dateLabel = _ref18.dateLabel,
+    generatedLabel = _ref18.generatedLabel,
+    activeFilters = _ref18.activeFilters,
+    page = _ref18.page,
+    windowLabel = _ref18.windowLabel;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: {
       padding: "22px ".concat(MX, "px 12px"),
@@ -2766,10 +2994,10 @@ var PageHeader = function PageHeader(_ref12) {
     })]
   });
 };
-var PageFooter = function PageFooter(_ref13) {
-  var generatedBy = _ref13.generatedBy,
-    generatedLabel = _ref13.generatedLabel,
-    page = _ref13.page;
+var PageFooter = function PageFooter(_ref19) {
+  var generatedBy = _ref19.generatedBy,
+    generatedLabel = _ref19.generatedLabel,
+    page = _ref19.page;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: {
       padding: "9px ".concat(MX, "px 54px"),
@@ -2796,32 +3024,33 @@ var PageFooter = function PageFooter(_ref13) {
 };
 
 // ─── Main component ───────────────────────────────────────────────────────────
-var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
-  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _apiData$trafficSourc, _apiData$trafficSourc2, _apiData$trafficSourc3, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _growth$overallAVGDon, _metricByTitle$AvgDo2, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Refund, _metricByTitle$Refund2, _metricByTitle$Refund3, _mainChart$stacked, _ob$growthPercentage, _ob$peakDay, _up$acceptanceGrowth, _up$raisedGrowth, _dn$acceptanceGrowth, _dn$raisedGrowth, _refCard$growthPercen;
-  var _ref14$name = _ref14.name,
-    name = _ref14$name === void 0 ? "" : _ref14$name,
-    _ref14$apiData = _ref14.apiData,
-    apiData = _ref14$apiData === void 0 ? {} : _ref14$apiData,
-    _ref14$dateName = _ref14.dateName,
-    dateName = _ref14$dateName === void 0 ? "Last Period" : _ref14$dateName,
-    _ref14$numberOfDays = _ref14.numberOfDays,
-    numberOfDays = _ref14$numberOfDays === void 0 ? 30 : _ref14$numberOfDays,
-    _ref14$activeFilters = _ref14.activeFilters,
-    activeFilters = _ref14$activeFilters === void 0 ? [] : _ref14$activeFilters;
+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, _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 now = new Date();
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
   var windowLabel = "".concat(numberOfDays, "-day window");
-  var estOptions = {
-    timeZone: "America/New_York"
+  var gmtOptions = {
+    timeZone: "UTC"
   };
   var generatedLabel = now.toLocaleDateString("en-US", _objectSpread2({
     month: "short",
     day: "numeric",
     year: "numeric"
-  }, estOptions)) + " - " + now.toLocaleTimeString("en-US", _objectSpread2({
+  }, gmtOptions)) + BULLET + now.toLocaleTimeString("en-US", _objectSpread2({
     hour: "2-digit",
-    minute: "2-digit"
-  }, estOptions)) + " EST";
+    minute: "2-digit",
+    hour12: false
+  }, gmtOptions)) + " GMT";
   var dateLabel = dateName;
   var _normalizeFiltersText = function normalizeFiltersText(filtersInput) {
     if (typeof filtersInput === "string") {
@@ -2859,9 +3088,34 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
     return "";
   };
   var formattedActiveFilters = _normalizeFiltersText(activeFilters);
+  var parseFilterPills = function parseFilterPills(filtersInput) {
+    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);
+      });
+      if (fromObjects.length) return fromObjects;
+      var fromStrings = filtersInput.map(function (item) {
+        return typeof item === "string" ? item.trim() : "";
+      }).filter(Boolean);
+      if (fromStrings.length) return fromStrings;
+    }
+    if (typeof filtersInput === "string" && filtersInput.trim()) {
+      var str = filtersInput.trim();
+      if (str.includes("·")) return str.split("·").map(function (s) {
+        return s.trim();
+      }).filter(Boolean);
+      if (str.includes("|")) return str.split("|").map(function (s) {
+        return s.trim();
+      }).filter(Boolean);
+      return [str];
+    }
+    return getActiveFilterChips(apiData);
+  };
+  var filterPills = parseFilterPills(activeFilters);
   var report = buildReportData(apiData, dateName);
-  var hero = report.hero,
-    metrics = report.metrics,
+  var metrics = report.metrics,
     mainChart = report.mainChart,
     growth = report.growth,
     totalDonors = report.totalDonors,
@@ -2968,13 +3222,16 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
     label: "Email",
     color: C.cyan
   }];
-  var revenueTrendText = mainChart.trend || "";
-  var revenueTrendColor = getTrendColor(revenueTrendText, {
-    up: "#054835ff",
-    down: "#EF4444"
-  });
-  var revenueTrendBadgeBg = revenueTrendColor === "#EF4444" ? "#fee2e2" : "#8df3be9a";
-  var revenueTrendArrow = getTrendArrow(revenueTrendText);
+  var revenueTrendText = "".concat(formatTrend((_growth$totalRevenue = growth === null || growth === void 0 ? void 0 : growth.totalRevenue) !== null && _growth$totalRevenue !== void 0 ? _growth$totalRevenue : 18), " vs last month");
+  var heroTrendText = revenueTrendText;
+  var heroDetailText = [passThrough, "".concat(formatNumber(totalDonors), " donors"), "$".concat(formatNumber(Number(avgDonation).toFixed(2)), " avg"), "".concat(formatNumber(totalVisits), " visits")].join(BULLET);
+  var formatMetricDetail = function formatMetricDetail(detail) {
+    return String(detail !== null && detail !== void 0 ? detail : "").replace(/\s-\s/g, BULLET);
+  };
+  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.median || 75), " \xB7 top decile $").concat(formatNumber(avgDonationDetail.topDecile || 850)));
   var headerProps = {
     dateLabel: dateLabel,
     generatedLabel: generatedLabel,
@@ -2997,189 +3254,187 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, 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__*/jsxRuntime.jsx(PageHeader, _objectSpread2(_objectSpread2({}, headerProps), {}, {
-        page: 1
-      })), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [/*#__PURE__*/jsxRuntime.jsx(PageOneHeader, {
+        dateLabel: dateLabel,
+        generatedLabel: generatedLabel,
+        windowLabel: windowLabel
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           flex: 1,
-          padding: "12px ".concat(MX, "px 10px"),
+          padding: "0 ".concat(MX, "px 0"),
           display: "flex",
-          flexDirection: "column",
-          gap: 10
+          flexDirection: "column"
         },
-        children: [/*#__PURE__*/jsxRuntime.jsx(KpiCard, {
-          title: "Total Raised",
-          value: kpi$(totalRaised),
-          trend: hero.trend,
-          detail: hero.detail,
-          variant: "primary"
+        children: [/*#__PURE__*/jsxRuntime.jsx(ActiveFiltersBar, {
+          pills: filterPills
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           style: {
-            display: "grid",
-            gridTemplateColumns: "repeat(3, 1fr)",
-            gap: 7
-          },
-          children: [/*#__PURE__*/jsxRuntime.jsx(KpiCard, {
-            title: "Net Raised",
-            value: kpi$(netRaised),
-            trend: ((_metricByTitle$NetRa = metricByTitle["Net Raised"]) === null || _metricByTitle$NetRa === void 0 ? void 0 : _metricByTitle$NetRa.trend) || signed((growth === null || growth === void 0 ? void 0 : growth.netRevenue) || 17.4),
-            detail: passThrough
-          }), /*#__PURE__*/jsxRuntime.jsx(KpiCard, {
-            title: "Total Donors",
-            value: ((_metricByTitle$Total = metricByTitle["Total Donors"]) === null || _metricByTitle$Total === void 0 ? void 0 : _metricByTitle$Total.value) || "".concat(formatNumber(totalDonors)),
-            trend: ((_metricByTitle$Total2 = metricByTitle["Total Donors"]) === null || _metricByTitle$Total2 === void 0 ? void 0 : _metricByTitle$Total2.trend) || signed((growth === null || growth === void 0 ? void 0 : growth.totalDonations) || 16.8),
-            detail: ((_metricByTitle$Total3 = metricByTitle["Total Donors"]) === null || _metricByTitle$Total3 === void 0 ? void 0 : _metricByTitle$Total3.detail) || "".concat(formatNumber(newDonors), " new - ").concat(formatNumber(returningDonors), " returning")
-          }), /*#__PURE__*/jsxRuntime.jsx(KpiCard, {
-            title: "Avg Donation",
-            value: kpi$(avgDonation),
-            trend: ((_metricByTitle$AvgDo = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo === void 0 ? void 0 : _metricByTitle$AvgDo.trend) || signed((_growth$overallAVGDon = growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _growth$overallAVGDon !== void 0 ? _growth$overallAVGDon : 0),
-            detail: ((_metricByTitle$AvgDo2 = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo2 === void 0 ? void 0 : _metricByTitle$AvgDo2.detail) || avgDonationDetail.detail
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          style: {
-            display: "grid",
-            gridTemplateColumns: "repeat(3, 1fr)",
-            gap: 7
-          },
-          children: [/*#__PURE__*/jsxRuntime.jsx(KpiCard, {
-            title: "ROAS",
-            value: kpiRoas((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 0),
-            trend: ((_metricByTitle$ROAS = metricByTitle.ROAS) === null || _metricByTitle$ROAS === void 0 ? void 0 : _metricByTitle$ROAS.trend) || signed((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0, "×"),
-            detail: ((_metricByTitle$ROAS2 = metricByTitle.ROAS) === null || _metricByTitle$ROAS2 === void 0 ? void 0 : _metricByTitle$ROAS2.detail) || "".concat(d$((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 0), " spend - ").concat(d$((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 0), " attrib.")
-          }), /*#__PURE__*/jsxRuntime.jsx(KpiCard, {
-            title: "Conversion",
-            value: kpiPct(convRate),
-            trend: ((_metricByTitle$Conver = metricByTitle.Conversion) === null || _metricByTitle$Conver === void 0 ? void 0 : _metricByTitle$Conver.trend) || signed((growth === null || growth === void 0 ? void 0 : growth.conversionRate) || 0.21, "pp"),
-            detail: ((_metricByTitle$Conver2 = metricByTitle.Conversion) === null || _metricByTitle$Conver2 === void 0 ? void 0 : _metricByTitle$Conver2.detail) || "".concat(formatNumber(totalDonors), " from ").concat(formatNumber(totalVisits), " visits")
-          }), /*#__PURE__*/jsxRuntime.jsx(KpiCard, {
-            title: "Refund Rate",
-            value: pct(refundRate, 2),
-            trend: ((_metricByTitle$Refund = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund === void 0 ? void 0 : _metricByTitle$Refund.trend) || signed(growthPercentage),
-            detail: ((_metricByTitle$Refund2 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund2 === void 0 ? void 0 : _metricByTitle$Refund2.detail) || "".concat(formatNumber(totalRefunds), " refunds this period"),
-            trendPositiveWhenNegative: (_metricByTitle$Refund3 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund3 === void 0 ? void 0 : _metricByTitle$Refund3.trendPositiveWhenNegative
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          style: {
-            border: "1px solid #E5E7EB",
-            borderRadius: 8,
-            background: "#fff",
-            padding: "12px 14px 10px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+            marginTop: 14,
             flex: 1
           },
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [/*#__PURE__*/jsxRuntime.jsx(HeroRaisedCard, {
+            value: kpi$(totalRaised),
+            trend: heroTrendText,
+            detail: heroDetailText
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             style: {
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "flex-start",
-              marginBottom: 8
+              display: "grid",
+              gridTemplateColumns: "repeat(3, 1fr)",
+              gap: 10
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(MetricGridCard, {
+              title: "Net Raised",
+              value: d$Compact(netRaised),
+              trend: ((_metricByTitle$NetRa = metricByTitle["Net Raised"]) === null || _metricByTitle$NetRa === void 0 ? void 0 : _metricByTitle$NetRa.trend) || formatTrend((_growth$netRevenue = growth === null || growth === void 0 ? void 0 : growth.netRevenue) !== null && _growth$netRevenue !== void 0 ? _growth$netRevenue : 17.4),
+              detail: passThrough
+            }), /*#__PURE__*/jsxRuntime.jsx(MetricGridCard, {
+              title: "Total Donors",
+              value: ((_metricByTitle$Total = metricByTitle["Total Donors"]) === null || _metricByTitle$Total === void 0 ? void 0 : _metricByTitle$Total.value) || "".concat(formatNumber(totalDonors)),
+              trend: ((_metricByTitle$Total2 = metricByTitle["Total Donors"]) === null || _metricByTitle$Total2 === void 0 ? void 0 : _metricByTitle$Total2.trend) || formatTrend((_growth$totalDonation = growth === null || growth === void 0 ? void 0 : growth.totalDonations) !== null && _growth$totalDonation !== void 0 ? _growth$totalDonation : 16.8),
+              detail: formatMetricDetail(((_metricByTitle$Total3 = metricByTitle["Total Donors"]) === null || _metricByTitle$Total3 === void 0 ? void 0 : _metricByTitle$Total3.detail) || "".concat(formatNumber(newDonors), " new \xB7 ").concat(formatNumber(returningDonors), " returning"))
+            }), /*#__PURE__*/jsxRuntime.jsx(MetricGridCard, {
+              title: "Avg Donation",
+              value: kpi$(avgDonation),
+              trend: ((_metricByTitle$AvgDo2 = metricByTitle["Avg Donation"]) === null || _metricByTitle$AvgDo2 === void 0 ? void 0 : _metricByTitle$AvgDo2.trend) || formatTrend((_growth$overallAVGDon = growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _growth$overallAVGDon !== void 0 ? _growth$overallAVGDon : 8.4),
+              detail: avgDonationDetailText
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(3, 1fr)",
+              gap: 10
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(MetricGridCard, {
+              title: "ROAS",
+              value: kpiRoas((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 3),
+              trend: formatRoasTrend(((_metricByTitle$ROAS = metricByTitle.ROAS) === null || _metricByTitle$ROAS === void 0 ? void 0 : _metricByTitle$ROAS.trend) || formatTrend((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0.4, "x")),
+              detail: formatMetricDetail(((_metricByTitle$ROAS2 = metricByTitle.ROAS) === null || _metricByTitle$ROAS2 === void 0 ? void 0 : _metricByTitle$ROAS2.detail) || "".concat(d$Compact((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 72000), " spend \xB7 ").concat(d$Compact((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 215000), " attrib."))
+            }), /*#__PURE__*/jsxRuntime.jsx(MetricGridCard, {
+              title: "Conversion",
+              value: kpiPct(convRate),
+              trend: ((_metricByTitle$Conver = metricByTitle.Conversion) === null || _metricByTitle$Conver === void 0 ? void 0 : _metricByTitle$Conver.trend) || formatTrend((_growth$conversionRat = growth === null || growth === void 0 ? void 0 : growth.conversionRate) !== null && _growth$conversionRat !== void 0 ? _growth$conversionRat : 0.21, "pp"),
+              detail: formatMetricDetail(((_metricByTitle$Conver2 = metricByTitle.Conversion) === null || _metricByTitle$Conver2 === void 0 ? void 0 : _metricByTitle$Conver2.detail) || "".concat(formatNumber(totalDonors), " from ").concat(formatNumber(totalVisits), " visits"))
+            }), /*#__PURE__*/jsxRuntime.jsx(MetricGridCard, {
+              title: "Refund Rate",
+              value: pct(refundRate, 2),
+              trend: ((_metricByTitle$Refund = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund === void 0 ? void 0 : _metricByTitle$Refund.trend) || formatTrend((_refunds$growthPercen = refunds.growthPercentage) !== null && _refunds$growthPercen !== void 0 ? _refunds$growthPercen : -0.3, "pp"),
+              detail: formatMetricDetail(((_metricByTitle$Refund2 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund2 === void 0 ? void 0 : _metricByTitle$Refund2.detail) || "".concat(formatNumber(totalRefunds), " refunds this period")),
+              trendPositiveWhenNegative: true
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            style: {
+              border: "1px solid ".concat(THEME.panelBorder),
+              borderRadius: 12,
+              background: "#fff",
+              padding: "14px 16px 12px",
+              flex: 1
             },
             children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                style: {
-                  fontSize: 13,
-                  fontWeight: 700,
-                  color: "#111827",
-                  lineHeight: 1.15
-                },
-                children: "Total revenue trend"
-              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                style: {
-                  fontSize: 9.5,
-                  color: "rgba(0, 0, 0, 0.4)",
-                  marginTop: 2,
-                  lineHeight: 1.15
-                },
-                children: ["Last ", daysLabel, " - daily aggregation"]
-              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 6,
-                  marginTop: 8
-                },
-                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "flex-start",
+                marginBottom: 6
+              },
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                   style: {
-                    fontSize: 22,
+                    fontSize: 13,
                     fontWeight: 700,
-                    color: "#111827"
+                    color: THEME.text,
+                    lineHeight: 1.15
                   },
-                  children: kpi$(totalRaised)
-                }), revenueTrendText && /*#__PURE__*/jsxRuntime.jsxs("span", {
+                  children: "Total revenue trend"
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                   style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 3,
-                    background: revenueTrendBadgeBg,
-                    color: revenueTrendColor,
-                    padding: "2px 8px",
-                    borderRadius: 100,
-                    fontSize: 9.5,
-                    fontWeight: 600
+                    fontSize: 9,
+                    color: THEME.muted,
+                    marginTop: 3,
+                    lineHeight: 1.15
                   },
-                  children: [revenueTrendArrow && /*#__PURE__*/jsxRuntime.jsx("span", {
-                    children: revenueTrendArrow
-                  }), revenueTrendText]
-                })]
-              })]
-            }), revSeries.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-              style: {
-                display: "flex",
-                gap: 10,
-                alignItems: "center",
-                flexShrink: 0,
-                paddingTop: 2
-              },
-              children: revenueLegend.map(function (leg) {
-                return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  children: ["Last ", daysLabel, BULLET, "daily aggregation"]
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                   style: {
                     display: "flex",
                     alignItems: "center",
-                    gap: 4
+                    gap: 8,
+                    marginTop: 10
                   },
-                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                     style: {
-                      width: 8,
-                      height: 8,
-                      borderRadius: "50%",
-                      background: leg.color,
-                      flexShrink: 0
-                    }
-                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    style: {
-                      fontSize: 9.5,
-                      color: "rgba(0, 0, 0, 0.6)",
-                      fontWeight: 500
+                      fontSize: 22,
+                      fontWeight: 700,
+                      color: THEME.text,
+                      letterSpacing: "-0.3px"
                     },
-                    children: leg.label
+                    children: kpi$(totalRaised)
+                  }), revenueTrendText && /*#__PURE__*/jsxRuntime.jsx(TrendPill$1, {
+                    positive: isTrendPositive(revenueTrendText),
+                    children: revenueTrendText
                   })]
-                }, leg.label);
+                })]
+              }), revSeries.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+                style: {
+                  display: "flex",
+                  gap: 12,
+                  alignItems: "center",
+                  flexShrink: 0,
+                  paddingTop: 2
+                },
+                children: revenueLegend.map(function (leg) {
+                  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 5
+                    },
+                    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                      style: {
+                        width: 7,
+                        height: 7,
+                        borderRadius: "50%",
+                        background: leg.color,
+                        flexShrink: 0
+                      }
+                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                      style: {
+                        fontSize: 9,
+                        color: "#6B7280",
+                        fontWeight: 500
+                      },
+                      children: leg.label
+                    })]
+                  }, leg.label);
+                })
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              style: {
+                width: "100%",
+                minHeight: 280
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx(RevenueChart, {
+                id: "pdf-total-revenue-trend",
+                metric: "Revenue",
+                series: revSeries,
+                categories: revCats,
+                height: 280,
+                stacked: (_mainChart$stacked = mainChart.stacked) !== null && _mainChart$stacked !== void 0 ? _mainChart$stacked : true,
+                type: "area",
+                colors: mainChart.colors || ["#6366F1", "#10B981", "#06B6D4"],
+                showLegend: false
               })
             })]
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            style: {
-              width: "100%",
-              minHeight: 300
-            },
-            children: /*#__PURE__*/jsxRuntime.jsx(RevenueChart, {
-              id: "pdf-total-revenue-trend",
-              metric: "Revenue",
-              series: revSeries,
-              categories: revCats,
-              height: 300,
-              stacked: (_mainChart$stacked = mainChart.stacked) !== null && _mainChart$stacked !== void 0 ? _mainChart$stacked : true,
-              type: "area",
-              colors: mainChart.colors || ["#6366F1", "#10B981", "#06B6D4"],
-              showLegend: false
-            })
           })]
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(PageFooter, {
-        generatedBy: name,
-        generatedLabel: generatedLabel,
-        page: 1
+      }), /*#__PURE__*/jsxRuntime.jsx(PageOneFooter, {
+        generatedBy: name || "Ahmad Hassan",
+        generatedLabel: generatedLabel
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       "data-export-page": "2",
@@ -3497,10 +3752,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref15) {
-                var _ref16 = _slicedToArray(_ref15, 2),
-                  l = _ref16[0],
-                  v = _ref16[1];
+              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref21) {
+                var _ref22 = _slicedToArray(_ref21, 2),
+                  l = _ref22[0],
+                  v = _ref22[1];
                 return /*#__PURE__*/jsxRuntime.jsxs("div", {
                   children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {
@@ -3573,10 +3828,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref17) {
-                var _ref18 = _slicedToArray(_ref17, 2),
-                  l = _ref18[0],
-                  v = _ref18[1];
+              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref23) {
+                var _ref24 = _slicedToArray(_ref23, 2),
+                  l = _ref24[0],
+                  v = _ref24[1];
                 return /*#__PURE__*/jsxRuntime.jsxs("div", {
                   children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {