@ammarkhalidfarooq/dashboard-package 0.5.39 → 0.6.0

package/dist/index.es.js

@@ -3,10 +3,10 @@ import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconB
 import { MoreHoriz, TrendingUp, MoreVert, Check, InfoOutlined, Settings, Adjust, PaidOutlined, PeopleAltOutlined, FavoriteOutlined, PersonOutlined, IndeterminateCheckBoxOutlined, SearchOutlined, HighlightOff, NearMe, Email, NotInterested } from '@mui/icons-material';
 import { createTheme, useTheme } from '@mui/material/styles';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import ReactApexChart from 'react-apexcharts';
 import Grid$1 from '@mui/material/Grid';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
+import ReactApexChart from 'react-apexcharts';
 
 var theme = createTheme({
   cssVariables: true,
@@ -889,604 +889,73 @@ var Dashboard = function Dashboard(_ref) {
   });
 };
 
-function formatNumber(num) {
-  if (num >= 1000000000) {
-    return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
-  }
-  if (num >= 1000000) {
-    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
-  }
-  if (num >= 1000) {
-    return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
-  }
-  return (num !== null && num !== void 0 ? num : 0).toString();
-}
-
-var PURPLE = "#6363E6";
-var REPORT_COLORS = {
-  purple: PURPLE};
-var formatTrend = function formatTrend(value) {
-  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "percent";
-  var n = Number(value !== null && value !== void 0 ? value : 0);
-  var sign = n >= 0 ? "+" : "";
-  if (type === "pp") return "".concat(sign).concat(n.toFixed(2), "pp");
-  if (type === "x") return "".concat(sign).concat(n.toFixed(1), "x");
-  if (type === "percent") return "".concat(sign).concat(n.toFixed(1), "%");
-  return "".concat(sign).concat(n);
-};
-var trendPillSx = function trendPillSx(value) {
-  var n = Number(value !== null && value !== void 0 ? value : 0);
-  var positive = n >= 0;
-  return {
-    display: "inline-flex",
-    alignItems: "center",
-    px: 1.25,
-    py: 0.35,
-    borderRadius: "100px",
-    fontSize: "12px",
-    fontWeight: 600,
-    lineHeight: 1.4,
-    bgcolor: positive ? "#D1FAE5" : "#FEE2E2",
-    color: positive ? "#047857" : "#DC2626",
-    whiteSpace: "nowrap"
-  };
-};
-var getActiveFilterChips = function getActiveFilterChips(apiData) {
-  if (Array.isArray(apiData === null || apiData === void 0 ? void 0 : apiData.activeFilterChips) && apiData.activeFilterChips.length) {
-    return apiData.activeFilterChips;
-  }
-  if (typeof (apiData === null || apiData === void 0 ? void 0 : apiData.activeFilters) === "string" && apiData.activeFilters) {
-    return apiData.activeFilters.split("·").map(function (s) {
-      return s.trim();
-    }).filter(Boolean);
-  }
-  return ["Status: Successful", "Country: United States, UAE", "Amount: $50 – $5,000"];
-};
-var buildReportData = function buildReportData() {
-  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$totalDonati, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _growth$overallAVGDon, _growth$totalRevenue, _growth$netRevenue, _growth$totalDonation, _growth$overallAVGDon2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _apiData$roasCardPrev, _apiData$adSpend, _apiData$attributedRe, _growth$conversionRat, _refundsRaw$refundRat, _refundsRaw$refundRat2, _refundsRaw$refundCou, _apiData$overviewStat2, _growth$totalRevenue2;
-  var apiData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var dateName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "Last Period";
-  var overview = (apiData === null || apiData === void 0 || (_apiData$overviewStat = apiData.overviewStats) === null || _apiData$overviewStat === void 0 ? void 0 : _apiData$overviewStat.overview) || {};
-  var growth = (overview === null || overview === void 0 ? void 0 : overview.growthPercentage) || {};
-  var refundsRaw = (apiData === null || apiData === void 0 ? void 0 : apiData.refundAndChargeBacks) || {};
-  var totalRaised = Number((_overview$totalRevenu = overview === null || overview === void 0 ? void 0 : overview.totalRevenue) !== null && _overview$totalRevenu !== void 0 ? _overview$totalRevenu : 240938);
-  var netRaised = Number((_overview$netRevenue = overview === null || overview === void 0 ? void 0 : overview.netRevenue) !== null && _overview$netRevenue !== void 0 ? _overview$netRevenue : 222300);
-  var totalDonors = Number((_overview$totalDonati = overview === null || overview === void 0 ? void 0 : overview.totalDonations) !== null && _overview$totalDonati !== void 0 ? _overview$totalDonati : 215);
-  var avgDonation = Number((_overview$overallAVGD = overview === null || overview === void 0 ? void 0 : overview.overallAVGDonations) !== null && _overview$overallAVGD !== void 0 ? _overview$overallAVGD : 130.58);
-  var convRate = Number((_overview$conversionR = overview === null || overview === void 0 ? void 0 : overview.conversionRate) !== null && _overview$conversionR !== void 0 ? _overview$conversionR : 1.7);
-  var totalVisits = Number((_apiData$totalVisits = apiData === null || apiData === void 0 ? void 0 : apiData.totalVisits) !== null && _apiData$totalVisits !== void 0 ? _apiData$totalVisits : 12438);
-  var passThrough = totalRaised > 0 ? "".concat((netRaised / totalRaised * 100).toFixed(1), "% pass-through") : "92.3% pass-through";
-  var donorMixRaw = apiData === null || apiData === void 0 ? void 0 : apiData.donorPieChartData;
-  var newDonors = 31;
-  var returningDonors = 184;
-  var avgGift = avgDonation;
-  var donorMixPrev = Number((_growth$overallAVGDon = growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _growth$overallAVGDon !== void 0 ? _growth$overallAVGDon : 8.4);
-  if (Array.isArray(donorMixRaw)) {
-    var nd = donorMixRaw.find(function (d) {
-      return /new/i.test(d.type);
-    }) || {};
-    var rd = donorMixRaw.find(function (d) {
-      return /returning/i.test(d.type);
-    }) || {};
-    newDonors = nd.totalDonations || 0;
-    returningDonors = rd.totalDonations || 0;
-    var totAmt = (nd.totalAmount || 0) + (rd.totalAmount || 0);
-    var totCnt = newDonors + returningDonors;
-    avgGift = totCnt > 0 ? totAmt / totCnt : avgDonation;
-  } else if (donorMixRaw && _typeof(donorMixRaw) === "object") {
-    newDonors = donorMixRaw.newDonors || 0;
-    returningDonors = donorMixRaw.returningDonors || 0;
-    avgGift = donorMixRaw.avgGift || avgDonation;
-    donorMixPrev = donorMixRaw.donorMixPrev || donorMixPrev;
-  }
-  var totalMix = newDonors + returningDonors || 1;
-  var newPct = Math.round(newDonors / totalMix * 100);
-  var retPct = 100 - newPct;
-  var hero = {
-    value: "$".concat(formatNumber(totalRaised)),
-    trend: "".concat(formatTrend((_growth$totalRevenue = growth === null || growth === void 0 ? void 0 : growth.totalRevenue) !== null && _growth$totalRevenue !== void 0 ? _growth$totalRevenue : 18), " vs ").concat(dateName || "last month"),
-    detail: "".concat(passThrough, " \xB7 ").concat(formatNumber(totalDonors), " donors \xB7 $").concat(formatNumber(avgDonation), " avg \xB7 ").concat(formatNumber(totalVisits), " visits")
-  };
-  var metrics = [{
-    title: "Net Raised",
-    value: "$".concat(formatNumber(netRaised)),
-    trend: formatTrend((_growth$netRevenue = growth === null || growth === void 0 ? void 0 : growth.netRevenue) !== null && _growth$netRevenue !== void 0 ? _growth$netRevenue : 17.4),
-    detail: passThrough
-  }, {
-    title: "Total Donors",
-    value: formatNumber(totalDonors),
-    trend: formatTrend((_growth$totalDonation = growth === null || growth === void 0 ? void 0 : growth.totalDonations) !== null && _growth$totalDonation !== void 0 ? _growth$totalDonation : 16.8),
-    detail: "".concat(formatNumber(newDonors), " new \xB7 ").concat(formatNumber(returningDonors), " returning")
-  }, {
-    title: "Avg Donation",
-    value: "$".concat(formatNumber(avgDonation)),
-    trend: formatTrend((_growth$overallAVGDon2 = growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _growth$overallAVGDon2 !== void 0 ? _growth$overallAVGDon2 : 8.4),
-    detail: "Median $".concat(formatNumber((_apiData$medianGift = apiData === null || apiData === void 0 ? void 0 : apiData.medianGift) !== null && _apiData$medianGift !== void 0 ? _apiData$medianGift : 75), " \xB7 top decile $").concat(formatNumber((_apiData$topDecileGif = apiData === null || apiData === void 0 ? void 0 : apiData.topDecileGift) !== null && _apiData$topDecileGif !== void 0 ? _apiData$topDecileGif : 850))
-  }, {
-    title: "ROAS",
-    value: "".concat(formatNumber((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 3.0), "x"),
-    trend: formatTrend((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0.4, "x"),
-    detail: "$".concat(formatNumber((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 72000), " spend \xB7 $").concat(formatNumber((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 215000), " attrib.")
-  }, {
-    title: "Conversion",
-    value: "".concat(formatNumber(convRate), "%"),
-    trend: formatTrend((_growth$conversionRat = growth === null || growth === void 0 ? void 0 : growth.conversionRate) !== null && _growth$conversionRat !== void 0 ? _growth$conversionRat : 0.21, "pp"),
-    detail: "".concat(formatNumber(totalDonors), " from ").concat(formatNumber(totalVisits), " visits")
-  }, {
-    title: "Refund Rate",
-    value: "".concat(Number((_refundsRaw$refundRat = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRate) !== null && _refundsRaw$refundRat !== void 0 ? _refundsRaw$refundRat : 0.84).toFixed(2), "%"),
-    trend: formatTrend((_refundsRaw$refundRat2 = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) !== null && _refundsRaw$refundRat2 !== void 0 ? _refundsRaw$refundRat2 : -0.3, "pp"),
-    detail: "".concat(formatNumber((_refundsRaw$refundCou = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundCount) !== null && _refundsRaw$refundCou !== void 0 ? _refundsRaw$refundCou : 2), " refunds this period"),
-    trendPositiveWhenNegative: true
-  }];
-  var stackedTR = (apiData === null || apiData === void 0 || (_apiData$overviewStat2 = apiData.overviewStats) === null || _apiData$overviewStat2 === void 0 ? void 0 : _apiData$overviewStat2.totalRaised) || {};
-  var hasStackedData = (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.paidAds) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.email) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.organic);
-  var mainChart = {
-    label: "Total revenue trend",
-    subtitle: "Last 30 days · daily aggregation",
-    value: "$".concat(formatNumber(totalRaised)),
-    trend: "".concat(formatTrend((_growth$totalRevenue2 = growth === null || growth === void 0 ? void 0 : growth.totalRevenue) !== null && _growth$totalRevenue2 !== void 0 ? _growth$totalRevenue2 : 18), " vs ").concat(dateName || "last month"),
-    hideControls: true,
-    stacked: true,
-    colors: ["#6366F1", "#10B981", "#06B6D4"],
-    stroke: {
-      curve: "smooth",
-      width: 3
-    }
-  };
-  if (hasStackedData) {
-    var categories = ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.organic) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.paidAds) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.email) || []).map(function (item) {
-      return item.date;
-    });
-    mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
-      series: [{
-        name: "Paid Ads",
-        data: ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.paidAds) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Organic",
-        data: ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.organic) || []).map(function (item) {
-          return item.value;
-        })
-      }, {
-        name: "Email",
-        data: ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.email) || []).map(function (item) {
-          return item.value;
-        })
-      }],
-      categories: categories
-    });
-  } else {
-    var _categories = (apiData === null || apiData === void 0 ? void 0 : apiData.categories) || ["Apr 5", "Apr 11", "Apr 17", "Apr 23", "Apr 29", "May 4"];
-    var base = (apiData === null || apiData === void 0 ? void 0 : apiData.revenueData) || [3000, 4500, 5200, 5800, 6200, 7100, 8500, 9200, 9500];
-    mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
-      series: [{
-        name: "Paid Ads",
-        data: base.map(function (v) {
-          return v * 0.55;
-        })
-      }, {
-        name: "Organic",
-        data: base.map(function (v) {
-          return v * 0.28;
-        })
-      }, {
-        name: "Email",
-        data: base.map(function (v) {
-          return v * 0.17;
-        })
-      }],
-      categories: _categories
-    });
-  }
-  var sampleCampaigns = [{
-    title: "Orphan sponsorship — Yemen",
-    collectedAmount: 78400,
-    usdTargetAmount: 100000,
-    uniqueDonationsCount: 82,
-    status: "Active"
-  }, {
-    title: "Emergency food — Gaza",
-    collectedAmount: 62100,
-    usdTargetAmount: 75000,
-    uniqueDonationsCount: 61,
-    status: "Active"
-  }, {
-    title: "Masjid build — Somalia",
-    collectedAmount: 38200,
-    usdTargetAmount: 83000,
-    uniqueDonationsCount: 34,
-    status: "Slow"
-  }, {
-    title: "Water wells — Pakistan",
-    collectedAmount: 29800,
-    usdTargetAmount: 30000,
-    uniqueDonationsCount: 28,
-    status: "Closing"
-  }, {
-    title: "Ramadan packs — Egypt",
-    collectedAmount: 18400,
-    usdTargetAmount: 23500,
-    uniqueDonationsCount: 10,
-    status: "Active"
-  }];
-  var campaignSource = ((apiData === null || apiData === void 0 ? void 0 : apiData.activeCampaigns) || []).length ? apiData.activeCampaigns : sampleCampaigns;
-  var activeCampaigns = campaignSource.map(function (campaign) {
-    return {
-      id: campaign.campaignName ? campaign.campaignName.split(" ").filter(Boolean).map(function (w) {
-        return w[0];
-      }).join("").toUpperCase().slice(0, 2) : "??",
-      name: campaign.title || "Untitled Campaign",
-      val1: "$".concat(formatNumber(campaign.collectedAmount || 0)),
-      type: "progress",
-      progress: Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100),
-      val3: formatNumber(campaign.uniqueDonationsCount || 0),
-      val4: "$".concat(formatNumber(campaign.avgGift || 0))
-    };
-  });
-  return {
-    hero: hero,
-    metrics: metrics,
-    mainChart: mainChart,
-    growth: growth,
-    totalDonors: totalDonors,
-    donorMix: {
-      newDonors: newDonors,
-      returningDonors: returningDonors,
-      totalMix: totalMix,
-      newPct: newPct,
-      retPct: retPct,
-      avgGift: avgGift,
-      donorMixPrev: donorMixPrev
-    },
-    activeCampaigns: activeCampaigns,
-    donationTypeData: (apiData === null || apiData === void 0 ? void 0 : apiData.recurringBarChartData) || [],
-    donorGeographyData: (apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography) || [],
-    trafficSourceData: (apiData === null || apiData === void 0 ? void 0 : apiData.trafficSourceData) || [],
-    orderBumpData: (apiData === null || apiData === void 0 ? void 0 : apiData.orderBumpDetails) || [],
-    upsellData: (apiData === null || apiData === void 0 ? void 0 : apiData.upSellDetails) || {},
-    downsellData: (apiData === null || apiData === void 0 ? void 0 : apiData.downSellDetails) || {},
-    referralData: (apiData === null || apiData === void 0 ? void 0 : apiData.referralDetails) || {},
-    refundsChargebacksData: (apiData === null || apiData === void 0 ? void 0 : apiData.refundAndChargeBacks) || []
-  };
-};
-
-var ReportHeader = function ReportHeader(_ref) {
-  var dateName = _ref.dateName,
-    _ref$activeFilterChip = _ref.activeFilterChips,
-    activeFilterChips = _ref$activeFilterChip === void 0 ? [] : _ref$activeFilterChip,
-    _ref$exportMode = _ref.exportMode,
-    exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode;
-  var now = new Date();
-  var generatedLabel = now.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  }) + " · " + now.toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit"
-  }) + " GMT";
+var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
+    actionLabel = _ref.actionLabel,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift"] : _ref$columns,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? [] : _ref$rows,
+    _ref$gridTemplateColu = _ref.gridTemplateColumns,
+    gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu,
+    height = _ref.height,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact;
   return /*#__PURE__*/jsxs(Box, {
     sx: {
-      mb: exportMode ? 1.5 : 3
+      bgcolor: "#fff",
+      borderRadius: compact ? 3 : 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: compact ? "0 2px 12px rgba(0,0,0,0.05)" : "0 4px 24px rgba(0,0,0,0.06)",
+      p: compact ? 1.5 : 3,
+      height: height
+      // height: "100%",
     },
     children: [/*#__PURE__*/jsxs(Box, {
       sx: {
         display: "flex",
         justifyContent: "space-between",
         alignItems: "flex-start",
-        flexWrap: "wrap",
-        gap: exportMode ? 1 : 2,
-        mb: exportMode ? 1.25 : 2.5
+        mb: compact ? 1.25 : 3
       },
       children: [/*#__PURE__*/jsxs(Box, {
         children: [/*#__PURE__*/jsx(Typography, {
           sx: {
-            fontSize: exportMode ? 26 : {
-              xs: 28,
-              md: 32
-            },
-            fontWeight: 800,
-            color: REPORT_COLORS.purple,
-            letterSpacing: "-0.5px",
-            lineHeight: 1.1
-          },
-          children: "MaDinah"
-        }), /*#__PURE__*/jsx(Typography, {
-          sx: {
-            fontSize: 11,
             fontWeight: 700,
-            letterSpacing: "1.6px",
-            color: "#9CA3AF",
-            textTransform: "uppercase",
-            mt: 0.5
-          },
-          children: "Performance Report"
-        })]
-      }), /*#__PURE__*/jsxs(Box, {
-        sx: {
-          textAlign: {
-            xs: "left",
-            sm: "right"
-          }
-        },
-        children: [/*#__PURE__*/jsx(Typography, {
-          sx: {
-            fontSize: 14,
-            color: "#6B7280",
-            mb: 0.5
+            fontSize: compact ? "14px" : "18px",
+            color: "#000",
+            textAlign: "left"
           },
-          children: "Dashboard overview \u2014 Overall"
+          children: title
         }), /*#__PURE__*/jsx(Typography, {
           sx: {
-            fontSize: exportMode ? 16 : {
-              xs: 18,
-              md: 20
-            },
-            fontWeight: 700,
-            color: "#111827",
-            mb: 0.5
-          },
-          children: dateName
-        }), /*#__PURE__*/jsxs(Typography, {
-          sx: {
-            fontSize: exportMode ? 10 : 12,
-            color: "#9CA3AF"
+            fontSize: compact ? "10px" : "13px",
+            color: "rgba(0, 0, 0, 0.4)",
+            mt: 0.2
           },
-          children: ["30-day window \xB7 Generated ", generatedLabel]
+          children: subtitle
         })]
-      })]
-    }), /*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        flexWrap: "wrap",
-        gap: 1.25,
-        bgcolor: "#F3F4F6",
-        borderRadius: "12px",
-        px: 2,
-        py: 1.25
-      },
-      children: [/*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: 11,
-          fontWeight: 700,
-          letterSpacing: "0.6px",
-          color: "#6B7280",
-          textTransform: "uppercase",
-          mr: 0.5
-        },
-        children: "Active Filters"
-      }), activeFilterChips.map(function (chip) {
-        return /*#__PURE__*/jsx(Box, {
-          sx: {
-            px: 1.5,
-            py: 0.5,
-            borderRadius: "100px",
-            border: "1px solid ".concat(REPORT_COLORS.purple),
-            bgcolor: "#fff",
-            fontSize: 12,
-            fontWeight: 500,
-            color: REPORT_COLORS.purple
-          },
-          children: chip
-        }, chip);
-      })]
-    })]
-  });
-};
-
-var TrendPill = function TrendPill(_ref) {
-  var value = _ref.value,
-    _ref$trendPositiveWhe = _ref.trendPositiveWhenNegative,
-    trendPositiveWhenNegative = _ref$trendPositiveWhe === void 0 ? false : _ref$trendPositiveWhe;
-  var n = Number(String(value).replace(/[^0-9.-]/g, "") || 0);
-  var positive = trendPositiveWhenNegative ? n <= 0 : n >= 0;
-  return /*#__PURE__*/jsx(Box, {
-    sx: _objectSpread2({}, trendPillSx(positive ? 1 : -1)),
-    children: value
-  });
-};
-var MetricCard$1 = function MetricCard(_ref2) {
-  var title = _ref2.title,
-    value = _ref2.value,
-    trend = _ref2.trend,
-    detail = _ref2.detail,
-    trendPositiveWhenNegative = _ref2.trendPositiveWhenNegative,
-    exportMode = _ref2.exportMode;
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      bgcolor: "#fff",
-      border: "1px solid #E5E7EB",
-      borderRadius: exportMode ? "12px" : "16px",
-      p: exportMode ? 1.5 : 2.5,
-      boxShadow: "0 4px 24px rgba(0,0,0,0.04)",
-      display: "flex",
-      flexDirection: "column",
-      minHeight: exportMode ? 96 : 130
-    },
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        mb: 0.5
-      },
-      children: [/*#__PURE__*/jsx(Typography, {
+      }), actionLabel && /*#__PURE__*/jsx(Typography, {
         sx: {
-          fontSize: exportMode ? 11 : 13,
-          fontWeight: 500,
-          color: "#9CA3AF"
+          fontSize: compact ? "10px" : "13px",
+          fontWeight: 600,
+          color: "rgb(99, 99, 230)",
+          cursor: "pointer"
         },
-        children: title
-      }), /*#__PURE__*/jsx(TrendPill, {
-        value: trend,
-        trendPositiveWhenNegative: trendPositiveWhenNegative
+        children: actionLabel
       })]
-    }), /*#__PURE__*/jsx(Typography, {
-      sx: {
-        fontSize: exportMode ? 20 : 28,
-        fontWeight: 700,
-        color: "#111827",
-        lineHeight: 1.15,
-        mb: exportMode ? 0.75 : 1.5,
-        flex: 1
-      },
-      children: value
-    }), /*#__PURE__*/jsx(Typography, {
-      sx: {
-        fontSize: exportMode ? 10 : 12,
-        color: "#9CA3AF",
-        lineHeight: 1.35
-      },
-      children: detail
-    })]
-  });
-};
-var ReportKpiSection = function ReportKpiSection(_ref3) {
-  var hero = _ref3.hero,
-    metrics = _ref3.metrics,
-    _ref3$exportMode = _ref3.exportMode,
-    exportMode = _ref3$exportMode === void 0 ? false : _ref3$exportMode;
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      mb: exportMode ? 1.25 : 2
-    },
-    children: [/*#__PURE__*/jsxs(Box, {
+    }), /*#__PURE__*/jsx(Box, {
       sx: {
-        bgcolor: "#F7F7FF",
-        borderRadius: exportMode ? "12px" : "16px",
-        border: "1px solid #E8EAFF",
-        borderLeft: "5px solid ".concat(REPORT_COLORS.purple),
-        p: exportMode ? 2 : 3,
-        mb: exportMode ? 1.25 : 2,
-        boxShadow: "0 4px 24px rgba(99,99,230,0.06)"
+        overflowX: compact ? "hidden" : "auto"
       },
-      children: [/*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: 11,
-          fontWeight: 700,
-          letterSpacing: "0.8px",
-          color: REPORT_COLORS.purple,
-          textTransform: "uppercase",
-          mb: 1
-        },
-        children: "Total Raised"
-      }), /*#__PURE__*/jsxs(Box, {
+      children: /*#__PURE__*/jsxs(Box, {
         sx: {
-          display: "flex",
-          alignItems: "center",
-          flexWrap: "wrap",
-          gap: 1.5,
-          mb: exportMode ? 0.75 : 1.5
+          minWidth: compact ? 0 : "600px"
         },
-        children: [/*#__PURE__*/jsx(Typography, {
-          sx: {
-            fontSize: exportMode ? 30 : {
-              xs: 32,
-              md: 40
-            },
-            fontWeight: 800,
-            color: "#111827",
-            lineHeight: 1
-          },
-          children: hero.value
-        }), /*#__PURE__*/jsx(TrendPill, {
-          value: hero.trend
-        })]
-      }), /*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: exportMode ? 11 : 13,
-          color: "#9CA3AF"
-        },
-        children: hero.detail
-      })]
-    }), /*#__PURE__*/jsx(Box, {
-      sx: {
-        display: "grid",
-        gridTemplateColumns: exportMode ? "repeat(3, 1fr)" : {
-          xs: "1fr 1fr",
-          md: "repeat(3, 1fr)"
-        },
-        gap: exportMode ? 1 : 2
-      },
-      children: metrics.map(function (m) {
-        return /*#__PURE__*/jsx(MetricCard$1, _objectSpread2(_objectSpread2({}, m), {}, {
-          exportMode: exportMode
-        }), m.title);
-      })
-    })]
-  });
-};
-
-var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
-    _ref$subtitle = _ref.subtitle,
-    subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
-    actionLabel = _ref.actionLabel,
-    _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift"] : _ref$columns,
-    _ref$rows = _ref.rows,
-    rows = _ref$rows === void 0 ? [] : _ref$rows,
-    _ref$gridTemplateColu = _ref.gridTemplateColumns,
-    gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu,
-    height = _ref.height,
-    _ref$compact = _ref.compact,
-    compact = _ref$compact === void 0 ? false : _ref$compact;
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      bgcolor: "#fff",
-      borderRadius: compact ? 3 : 4,
-      border: "1px solid #f0f0f0",
-      boxShadow: compact ? "0 2px 12px rgba(0,0,0,0.05)" : "0 4px 24px rgba(0,0,0,0.06)",
-      p: compact ? 1.5 : 3,
-      height: height
-      // height: "100%",
-    },
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        mb: compact ? 1.25 : 3
-      },
-      children: [/*#__PURE__*/jsxs(Box, {
-        children: [/*#__PURE__*/jsx(Typography, {
-          sx: {
-            fontWeight: 700,
-            fontSize: compact ? "14px" : "18px",
-            color: "#000",
-            textAlign: "left"
-          },
-          children: title
-        }), /*#__PURE__*/jsx(Typography, {
-          sx: {
-            fontSize: compact ? "10px" : "13px",
-            color: "rgba(0, 0, 0, 0.4)",
-            mt: 0.2
-          },
-          children: subtitle
-        })]
-      }), actionLabel && /*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: compact ? "10px" : "13px",
-          fontWeight: 600,
-          color: "rgb(99, 99, 230)",
-          cursor: "pointer"
-        },
-        children: actionLabel
-      })]
-    }), /*#__PURE__*/jsx(Box, {
-      sx: {
-        overflowX: compact ? "hidden" : "auto"
-      },
-      children: /*#__PURE__*/jsxs(Box, {
-        sx: {
-          minWidth: compact ? 0 : "600px"
-        },
-        children: [/*#__PURE__*/jsx(Box, {
+        children: [/*#__PURE__*/jsx(Box, {
           sx: {
             display: "grid",
             gridTemplateColumns: gridTemplateColumns,
@@ -1679,6 +1148,537 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
   });
 };
 
+function formatNumber(num) {
+  if (num >= 1000000000) {
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
+  }
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
+  }
+  return (num !== null && num !== void 0 ? num : 0).toString();
+}
+
+var PURPLE = "#6363E6";
+var REPORT_COLORS = {
+  purple: PURPLE};
+var formatTrend = function formatTrend(value) {
+  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "percent";
+  var n = Number(value !== null && value !== void 0 ? value : 0);
+  var sign = n >= 0 ? "+" : "";
+  if (type === "pp") return "".concat(sign).concat(n.toFixed(2), "pp");
+  if (type === "x") return "".concat(sign).concat(n.toFixed(1), "x");
+  if (type === "percent") return "".concat(sign).concat(n.toFixed(1), "%");
+  return "".concat(sign).concat(n);
+};
+var trendPillSx = function trendPillSx(value) {
+  var n = Number(value !== null && value !== void 0 ? value : 0);
+  var positive = n >= 0;
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    px: 1.25,
+    py: 0.35,
+    borderRadius: "100px",
+    fontSize: "12px",
+    fontWeight: 600,
+    lineHeight: 1.4,
+    bgcolor: positive ? "#D1FAE5" : "#FEE2E2",
+    color: positive ? "#047857" : "#DC2626",
+    whiteSpace: "nowrap"
+  };
+};
+var getActiveFilterChips = function getActiveFilterChips(apiData) {
+  if (Array.isArray(apiData === null || apiData === void 0 ? void 0 : apiData.activeFilterChips) && apiData.activeFilterChips.length) {
+    return apiData.activeFilterChips;
+  }
+  if (typeof (apiData === null || apiData === void 0 ? void 0 : apiData.activeFilters) === "string" && apiData.activeFilters) {
+    return apiData.activeFilters.split("·").map(function (s) {
+      return s.trim();
+    }).filter(Boolean);
+  }
+  return ["Status: Successful", "Country: United States, UAE", "Amount: $50 – $5,000"];
+};
+var buildReportData = function buildReportData() {
+  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$totalDonati, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _growth$overallAVGDon, _growth$totalRevenue, _growth$netRevenue, _growth$totalDonation, _growth$overallAVGDon2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _apiData$roasCardPrev, _apiData$adSpend, _apiData$attributedRe, _growth$conversionRat, _refundsRaw$refundRat, _refundsRaw$refundRat2, _refundsRaw$refundCou, _apiData$overviewStat2, _growth$totalRevenue2;
+  var apiData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var dateName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "Last Period";
+  var overview = (apiData === null || apiData === void 0 || (_apiData$overviewStat = apiData.overviewStats) === null || _apiData$overviewStat === void 0 ? void 0 : _apiData$overviewStat.overview) || {};
+  var growth = (overview === null || overview === void 0 ? void 0 : overview.growthPercentage) || {};
+  var refundsRaw = (apiData === null || apiData === void 0 ? void 0 : apiData.refundAndChargeBacks) || {};
+  var totalRaised = Number((_overview$totalRevenu = overview === null || overview === void 0 ? void 0 : overview.totalRevenue) !== null && _overview$totalRevenu !== void 0 ? _overview$totalRevenu : 240938);
+  var netRaised = Number((_overview$netRevenue = overview === null || overview === void 0 ? void 0 : overview.netRevenue) !== null && _overview$netRevenue !== void 0 ? _overview$netRevenue : 222300);
+  var totalDonors = Number((_overview$totalDonati = overview === null || overview === void 0 ? void 0 : overview.totalDonations) !== null && _overview$totalDonati !== void 0 ? _overview$totalDonati : 215);
+  var avgDonation = Number((_overview$overallAVGD = overview === null || overview === void 0 ? void 0 : overview.overallAVGDonations) !== null && _overview$overallAVGD !== void 0 ? _overview$overallAVGD : 130.58);
+  var convRate = Number((_overview$conversionR = overview === null || overview === void 0 ? void 0 : overview.conversionRate) !== null && _overview$conversionR !== void 0 ? _overview$conversionR : 1.7);
+  var totalVisits = Number((_apiData$totalVisits = apiData === null || apiData === void 0 ? void 0 : apiData.totalVisits) !== null && _apiData$totalVisits !== void 0 ? _apiData$totalVisits : 12438);
+  var passThrough = totalRaised > 0 ? "".concat((netRaised / totalRaised * 100).toFixed(1), "% pass-through") : "92.3% pass-through";
+  var donorMixRaw = apiData === null || apiData === void 0 ? void 0 : apiData.donorPieChartData;
+  var newDonors = 31;
+  var returningDonors = 184;
+  var avgGift = avgDonation;
+  var donorMixPrev = Number((_growth$overallAVGDon = growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _growth$overallAVGDon !== void 0 ? _growth$overallAVGDon : 8.4);
+  if (Array.isArray(donorMixRaw)) {
+    var nd = donorMixRaw.find(function (d) {
+      return /new/i.test(d.type);
+    }) || {};
+    var rd = donorMixRaw.find(function (d) {
+      return /returning/i.test(d.type);
+    }) || {};
+    newDonors = nd.totalDonations || 0;
+    returningDonors = rd.totalDonations || 0;
+    var totAmt = (nd.totalAmount || 0) + (rd.totalAmount || 0);
+    var totCnt = newDonors + returningDonors;
+    avgGift = totCnt > 0 ? totAmt / totCnt : avgDonation;
+  } else if (donorMixRaw && _typeof(donorMixRaw) === "object") {
+    newDonors = donorMixRaw.newDonors || 0;
+    returningDonors = donorMixRaw.returningDonors || 0;
+    avgGift = donorMixRaw.avgGift || avgDonation;
+    donorMixPrev = donorMixRaw.donorMixPrev || donorMixPrev;
+  }
+  var totalMix = newDonors + returningDonors || 1;
+  var newPct = Math.round(newDonors / totalMix * 100);
+  var retPct = 100 - newPct;
+  var hero = {
+    value: "$".concat(formatNumber(totalRaised)),
+    trend: "".concat(formatTrend((_growth$totalRevenue = growth === null || growth === void 0 ? void 0 : growth.totalRevenue) !== null && _growth$totalRevenue !== void 0 ? _growth$totalRevenue : 18), " vs ").concat(dateName || "last month"),
+    detail: "".concat(passThrough, " \xB7 ").concat(formatNumber(totalDonors), " donors \xB7 $").concat(formatNumber(avgDonation), " avg \xB7 ").concat(formatNumber(totalVisits), " visits")
+  };
+  var metrics = [{
+    title: "Net Raised",
+    value: "$".concat(formatNumber(netRaised)),
+    trend: formatTrend((_growth$netRevenue = growth === null || growth === void 0 ? void 0 : growth.netRevenue) !== null && _growth$netRevenue !== void 0 ? _growth$netRevenue : 17.4),
+    detail: passThrough
+  }, {
+    title: "Total Donors",
+    value: formatNumber(totalDonors),
+    trend: formatTrend((_growth$totalDonation = growth === null || growth === void 0 ? void 0 : growth.totalDonations) !== null && _growth$totalDonation !== void 0 ? _growth$totalDonation : 16.8),
+    detail: "".concat(formatNumber(newDonors), " new \xB7 ").concat(formatNumber(returningDonors), " returning")
+  }, {
+    title: "Avg Donation",
+    value: "$".concat(formatNumber(avgDonation)),
+    trend: formatTrend((_growth$overallAVGDon2 = growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _growth$overallAVGDon2 !== void 0 ? _growth$overallAVGDon2 : 8.4),
+    detail: "Median $".concat(formatNumber((_apiData$medianGift = apiData === null || apiData === void 0 ? void 0 : apiData.medianGift) !== null && _apiData$medianGift !== void 0 ? _apiData$medianGift : 75), " \xB7 top decile $").concat(formatNumber((_apiData$topDecileGif = apiData === null || apiData === void 0 ? void 0 : apiData.topDecileGift) !== null && _apiData$topDecileGif !== void 0 ? _apiData$topDecileGif : 850))
+  }, {
+    title: "ROAS",
+    value: "".concat(formatNumber((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 3.0), "x"),
+    trend: formatTrend((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0.4, "x"),
+    detail: "$".concat(formatNumber((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 72000), " spend \xB7 $").concat(formatNumber((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 215000), " attrib.")
+  }, {
+    title: "Conversion",
+    value: "".concat(formatNumber(convRate), "%"),
+    trend: formatTrend((_growth$conversionRat = growth === null || growth === void 0 ? void 0 : growth.conversionRate) !== null && _growth$conversionRat !== void 0 ? _growth$conversionRat : 0.21, "pp"),
+    detail: "".concat(formatNumber(totalDonors), " from ").concat(formatNumber(totalVisits), " visits")
+  }, {
+    title: "Refund Rate",
+    value: "".concat(Number((_refundsRaw$refundRat = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRate) !== null && _refundsRaw$refundRat !== void 0 ? _refundsRaw$refundRat : 0.84).toFixed(2), "%"),
+    trend: formatTrend((_refundsRaw$refundRat2 = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) !== null && _refundsRaw$refundRat2 !== void 0 ? _refundsRaw$refundRat2 : -0.3, "pp"),
+    detail: "".concat(formatNumber((_refundsRaw$refundCou = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundCount) !== null && _refundsRaw$refundCou !== void 0 ? _refundsRaw$refundCou : 2), " refunds this period"),
+    trendPositiveWhenNegative: true
+  }];
+  var stackedTR = (apiData === null || apiData === void 0 || (_apiData$overviewStat2 = apiData.overviewStats) === null || _apiData$overviewStat2 === void 0 ? void 0 : _apiData$overviewStat2.totalRaised) || {};
+  var hasStackedData = (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.paidAds) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.email) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.organic);
+  var mainChart = {
+    label: "Total revenue trend",
+    subtitle: "Last 30 days · daily aggregation",
+    value: "$".concat(formatNumber(totalRaised)),
+    trend: "".concat(formatTrend((_growth$totalRevenue2 = growth === null || growth === void 0 ? void 0 : growth.totalRevenue) !== null && _growth$totalRevenue2 !== void 0 ? _growth$totalRevenue2 : 18), " vs ").concat(dateName || "last month"),
+    hideControls: true,
+    stacked: true,
+    colors: ["#6366F1", "#10B981", "#06B6D4"],
+    stroke: {
+      curve: "smooth",
+      width: 3
+    }
+  };
+  if (hasStackedData) {
+    var categories = ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.organic) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.paidAds) || (stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.email) || []).map(function (item) {
+      return item.date;
+    });
+    mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
+      series: [{
+        name: "Paid Ads",
+        data: ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.paidAds) || []).map(function (item) {
+          return item.value;
+        })
+      }, {
+        name: "Organic",
+        data: ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.organic) || []).map(function (item) {
+          return item.value;
+        })
+      }, {
+        name: "Email",
+        data: ((stackedTR === null || stackedTR === void 0 ? void 0 : stackedTR.email) || []).map(function (item) {
+          return item.value;
+        })
+      }],
+      categories: categories
+    });
+  } else {
+    var _categories = (apiData === null || apiData === void 0 ? void 0 : apiData.categories) || ["Apr 5", "Apr 11", "Apr 17", "Apr 23", "Apr 29", "May 4"];
+    var base = (apiData === null || apiData === void 0 ? void 0 : apiData.revenueData) || [3000, 4500, 5200, 5800, 6200, 7100, 8500, 9200, 9500];
+    mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
+      series: [{
+        name: "Paid Ads",
+        data: base.map(function (v) {
+          return v * 0.55;
+        })
+      }, {
+        name: "Organic",
+        data: base.map(function (v) {
+          return v * 0.28;
+        })
+      }, {
+        name: "Email",
+        data: base.map(function (v) {
+          return v * 0.17;
+        })
+      }],
+      categories: _categories
+    });
+  }
+  var sampleCampaigns = [{
+    title: "Orphan sponsorship — Yemen",
+    collectedAmount: 78400,
+    usdTargetAmount: 100000,
+    uniqueDonationsCount: 82,
+    status: "Active"
+  }, {
+    title: "Emergency food — Gaza",
+    collectedAmount: 62100,
+    usdTargetAmount: 75000,
+    uniqueDonationsCount: 61,
+    status: "Active"
+  }, {
+    title: "Masjid build — Somalia",
+    collectedAmount: 38200,
+    usdTargetAmount: 83000,
+    uniqueDonationsCount: 34,
+    status: "Slow"
+  }, {
+    title: "Water wells — Pakistan",
+    collectedAmount: 29800,
+    usdTargetAmount: 30000,
+    uniqueDonationsCount: 28,
+    status: "Closing"
+  }, {
+    title: "Ramadan packs — Egypt",
+    collectedAmount: 18400,
+    usdTargetAmount: 23500,
+    uniqueDonationsCount: 10,
+    status: "Active"
+  }];
+  var campaignSource = ((apiData === null || apiData === void 0 ? void 0 : apiData.activeCampaigns) || []).length ? apiData.activeCampaigns : sampleCampaigns;
+  var activeCampaigns = campaignSource.map(function (campaign) {
+    return {
+      id: campaign.campaignName ? campaign.campaignName.split(" ").filter(Boolean).map(function (w) {
+        return w[0];
+      }).join("").toUpperCase().slice(0, 2) : "??",
+      name: campaign.title || "Untitled Campaign",
+      val1: "$".concat(formatNumber(campaign.collectedAmount || 0)),
+      type: "progress",
+      progress: Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100),
+      val3: formatNumber(campaign.uniqueDonationsCount || 0),
+      val4: "$".concat(formatNumber(campaign.avgGift || 0))
+    };
+  });
+  return {
+    hero: hero,
+    metrics: metrics,
+    mainChart: mainChart,
+    growth: growth,
+    totalDonors: totalDonors,
+    donorMix: {
+      newDonors: newDonors,
+      returningDonors: returningDonors,
+      totalMix: totalMix,
+      newPct: newPct,
+      retPct: retPct,
+      avgGift: avgGift,
+      donorMixPrev: donorMixPrev
+    },
+    activeCampaigns: activeCampaigns,
+    donationTypeData: (apiData === null || apiData === void 0 ? void 0 : apiData.recurringBarChartData) || [],
+    donorGeographyData: (apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography) || [],
+    trafficSourceData: (apiData === null || apiData === void 0 ? void 0 : apiData.trafficSourceData) || [],
+    orderBumpData: (apiData === null || apiData === void 0 ? void 0 : apiData.orderBumpDetails) || [],
+    upsellData: (apiData === null || apiData === void 0 ? void 0 : apiData.upSellDetails) || {},
+    downsellData: (apiData === null || apiData === void 0 ? void 0 : apiData.downSellDetails) || {},
+    referralData: (apiData === null || apiData === void 0 ? void 0 : apiData.referralDetails) || {},
+    refundsChargebacksData: (apiData === null || apiData === void 0 ? void 0 : apiData.refundAndChargeBacks) || []
+  };
+};
+
+var ReportHeader = function ReportHeader(_ref) {
+  var dateName = _ref.dateName,
+    _ref$activeFilterChip = _ref.activeFilterChips,
+    activeFilterChips = _ref$activeFilterChip === void 0 ? [] : _ref$activeFilterChip,
+    _ref$exportMode = _ref.exportMode,
+    exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode;
+  var now = new Date();
+  var generatedLabel = now.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }) + " · " + now.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit"
+  }) + " GMT";
+  return /*#__PURE__*/jsxs(Box, {
+    sx: {
+      mb: exportMode ? 1.5 : 3
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        flexWrap: "wrap",
+        gap: exportMode ? 1 : 2,
+        mb: exportMode ? 1.25 : 2.5
+      },
+      children: [/*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: exportMode ? 26 : {
+              xs: 28,
+              md: 32
+            },
+            fontWeight: 800,
+            color: REPORT_COLORS.purple,
+            letterSpacing: "-0.5px",
+            lineHeight: 1.1
+          },
+          children: "MaDinah"
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 11,
+            fontWeight: 700,
+            letterSpacing: "1.6px",
+            color: "#9CA3AF",
+            textTransform: "uppercase",
+            mt: 0.5
+          },
+          children: "Performance Report"
+        })]
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          textAlign: {
+            xs: "left",
+            sm: "right"
+          }
+        },
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 14,
+            color: "#6B7280",
+            mb: 0.5
+          },
+          children: "Dashboard overview \u2014 Overall"
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: exportMode ? 16 : {
+              xs: 18,
+              md: 20
+            },
+            fontWeight: 700,
+            color: "#111827",
+            mb: 0.5
+          },
+          children: dateName
+        }), /*#__PURE__*/jsxs(Typography, {
+          sx: {
+            fontSize: exportMode ? 10 : 12,
+            color: "#9CA3AF"
+          },
+          children: ["30-day window \xB7 Generated ", generatedLabel]
+        })]
+      })]
+    }), /*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 1.25,
+        bgcolor: "#F3F4F6",
+        borderRadius: "12px",
+        px: 2,
+        py: 1.25
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: 11,
+          fontWeight: 700,
+          letterSpacing: "0.6px",
+          color: "#6B7280",
+          textTransform: "uppercase",
+          mr: 0.5
+        },
+        children: "Active Filters"
+      }), activeFilterChips.map(function (chip) {
+        return /*#__PURE__*/jsx(Box, {
+          sx: {
+            px: 1.5,
+            py: 0.5,
+            borderRadius: "100px",
+            border: "1px solid ".concat(REPORT_COLORS.purple),
+            bgcolor: "#fff",
+            fontSize: 12,
+            fontWeight: 500,
+            color: REPORT_COLORS.purple
+          },
+          children: chip
+        }, chip);
+      })]
+    })]
+  });
+};
+
+var TrendPill = function TrendPill(_ref) {
+  var value = _ref.value,
+    _ref$trendPositiveWhe = _ref.trendPositiveWhenNegative,
+    trendPositiveWhenNegative = _ref$trendPositiveWhe === void 0 ? false : _ref$trendPositiveWhe;
+  var n = Number(String(value).replace(/[^0-9.-]/g, "") || 0);
+  var positive = trendPositiveWhenNegative ? n <= 0 : n >= 0;
+  return /*#__PURE__*/jsx(Box, {
+    sx: _objectSpread2({}, trendPillSx(positive ? 1 : -1)),
+    children: value
+  });
+};
+var MetricCard$1 = function MetricCard(_ref2) {
+  var title = _ref2.title,
+    value = _ref2.value,
+    trend = _ref2.trend,
+    detail = _ref2.detail,
+    trendPositiveWhenNegative = _ref2.trendPositiveWhenNegative,
+    exportMode = _ref2.exportMode;
+  return /*#__PURE__*/jsxs(Box, {
+    sx: {
+      bgcolor: "#fff",
+      border: "1px solid #E5E7EB",
+      borderRadius: exportMode ? "12px" : "16px",
+      p: exportMode ? 1.5 : 2.5,
+      boxShadow: "0 4px 24px rgba(0,0,0,0.04)",
+      display: "flex",
+      flexDirection: "column",
+      minHeight: exportMode ? 96 : 130
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        mb: 0.5
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: exportMode ? 11 : 13,
+          fontWeight: 500,
+          color: "#9CA3AF"
+        },
+        children: title
+      }), /*#__PURE__*/jsx(TrendPill, {
+        value: trend,
+        trendPositiveWhenNegative: trendPositiveWhenNegative
+      })]
+    }), /*#__PURE__*/jsx(Typography, {
+      sx: {
+        fontSize: exportMode ? 20 : 28,
+        fontWeight: 700,
+        color: "#111827",
+        lineHeight: 1.15,
+        mb: exportMode ? 0.75 : 1.5,
+        flex: 1
+      },
+      children: value
+    }), /*#__PURE__*/jsx(Typography, {
+      sx: {
+        fontSize: exportMode ? 10 : 12,
+        color: "#9CA3AF",
+        lineHeight: 1.35
+      },
+      children: detail
+    })]
+  });
+};
+var ReportKpiSection = function ReportKpiSection(_ref3) {
+  var hero = _ref3.hero,
+    metrics = _ref3.metrics,
+    _ref3$exportMode = _ref3.exportMode,
+    exportMode = _ref3$exportMode === void 0 ? false : _ref3$exportMode;
+  return /*#__PURE__*/jsxs(Box, {
+    sx: {
+      mb: exportMode ? 1.25 : 2
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        bgcolor: "#F7F7FF",
+        borderRadius: exportMode ? "12px" : "16px",
+        border: "1px solid #E8EAFF",
+        borderLeft: "5px solid ".concat(REPORT_COLORS.purple),
+        p: exportMode ? 2 : 3,
+        mb: exportMode ? 1.25 : 2,
+        boxShadow: "0 4px 24px rgba(99,99,230,0.06)"
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: 11,
+          fontWeight: 700,
+          letterSpacing: "0.8px",
+          color: REPORT_COLORS.purple,
+          textTransform: "uppercase",
+          mb: 1
+        },
+        children: "Total Raised"
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: 1.5,
+          mb: exportMode ? 0.75 : 1.5
+        },
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: exportMode ? 30 : {
+              xs: 32,
+              md: 40
+            },
+            fontWeight: 800,
+            color: "#111827",
+            lineHeight: 1
+          },
+          children: hero.value
+        }), /*#__PURE__*/jsx(TrendPill, {
+          value: hero.trend
+        })]
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: exportMode ? 11 : 13,
+          color: "#9CA3AF"
+        },
+        children: hero.detail
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: exportMode ? "repeat(3, 1fr)" : {
+          xs: "1fr 1fr",
+          md: "repeat(3, 1fr)"
+        },
+        gap: exportMode ? 1 : 2
+      },
+      children: metrics.map(function (m) {
+        return /*#__PURE__*/jsx(MetricCard$1, _objectSpread2(_objectSpread2({}, m), {}, {
+          exportMode: exportMode
+        }), m.title);
+      })
+    })]
+  });
+};
+
 var DonorMixCard = function DonorMixCard(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Donor mix" : _ref$title,
@@ -4144,7 +4144,8 @@ var fourColGridSx = function fourColGridSx(exportMode) {
     gridTemplateColumns: exportMode ? "repeat(4, 1fr)" : {
       xs: "1fr",
       sm: "repeat(2, 1fr)",
-      md: "repeat(4, 1fr)"
+      md: "repeat(3, 1fr)",
+      xl: "repeat(4, 1fr)"
     },
     gap: GRID_GAP,
     mt: GRID_GAP,
@@ -16481,5 +16482,5 @@ var EmailSection$1 = /*#__PURE__*/Object.freeze({
   default: EmailSection
 });
 
-export { AbandonedDonationRecovery, Dashboard, DashboardReport, theme as DashboardTheme, DonorBehavior, MetricSelector, NewOverview, PerformanceSection, RecurringRevenueSection, RevenueChart, UTMPerformance, themeColors, themeTypography };
+export { AbandonedDonationRecovery, ActiveCampaignsCard, Dashboard, DashboardReport, theme as DashboardTheme, DonorBehavior, MetricSelector, NewOverview, PerformanceSection, RecurringRevenueSection, RenderChartCard, RevenueChart, UTMPerformance, themeColors, themeTypography };
 //# sourceMappingURL=index.es.js.map