@ammarkhalidfarooq/dashboard-package 0.6.103 → 0.6.104

package/dist/index.cjs.js

@@ -9,6 +9,7 @@ var Grid = require('@mui/material/Grid');
 var Box = require('@mui/material/Box');
 var Typography = require('@mui/material/Typography');
 var ReactApexChart = require('react-apexcharts');
+var CloseIcon = require('@mui/icons-material/Close');
 
 var theme = styles.createTheme({
   cssVariables: true,
@@ -7059,9 +7060,94 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   });
 };
 
+var CardDetailModal = function CardDetailModal(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    children = _ref.children;
+  return /*#__PURE__*/jsxRuntime.jsx(material.Dialog, {
+    open: open,
+    onClose: onClose,
+    maxWidth: "lg",
+    fullWidth: true,
+    PaperProps: {
+      sx: {
+        borderRadius: 4,
+        maxHeight: "90vh"
+      }
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        position: "relative"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
+        "aria-label": "Close",
+        onClick: onClose,
+        sx: {
+          position: "absolute",
+          right: 12,
+          top: 12,
+          zIndex: 2,
+          bgcolor: "#fff",
+          border: "1px solid #f0f0f0",
+          "&:hover": {
+            bgcolor: "#f9f9f9"
+          }
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(CloseIcon, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.DialogContent, {
+        sx: {
+          p: 3,
+          pt: 5
+        },
+        children: children
+      })]
+    })
+  });
+};
+
+var ClickableCard = function ClickableCard(_ref) {
+  var onClick = _ref.onClick,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    children = _ref.children,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx;
+  return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    onClick: disabled ? undefined : onClick,
+    role: disabled ? undefined : "button",
+    tabIndex: disabled ? undefined : 0,
+    onKeyDown: disabled ? undefined : function (event) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onClick === null || onClick === void 0 || onClick();
+      }
+    },
+    sx: _objectSpread2(_objectSpread2({
+      height: "100%",
+      cursor: disabled ? "default" : "pointer",
+      borderRadius: 4,
+      transition: "box-shadow 0.2s ease, transform 0.2s ease"
+    }, !disabled && {
+      "&:hover": {
+        boxShadow: "0 8px 32px rgba(0,0,0,0.1)"
+      },
+      "&:focus-visible": {
+        outline: "2px solid #4F46E5",
+        outlineOffset: 2
+      }
+    }), sx),
+    children: children
+  });
+};
+
 var CARD_SX = {
   maxHeight: 280
 };
+var MODAL_CARD_SX = {
+  maxHeight: "none"
+};
 var GRID_GAP = "6px";
 var fourColGridSx$1 = function fourColGridSx(exportMode) {
   return {
@@ -7106,6 +7192,10 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
     _ref.dateName;
     var _ref$numberOfDays = _ref.numberOfDays,
     numberOfDays = _ref$numberOfDays === void 0 ? 30 : _ref$numberOfDays;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    openModalKey = _useState2[0],
+    setOpenModalKey = _useState2[1];
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
   var _donorMix$newDonors = donorMix.newDonors,
     newDonors = _donorMix$newDonors === void 0 ? 0 : _donorMix$newDonors,
@@ -7121,6 +7211,150 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
     avgGift = _donorMix$avgGift === void 0 ? 0 : _donorMix$avgGift,
     _donorMix$donorMixPre = donorMix.donorMixPrev,
     donorMixPrev = _donorMix$donorMixPre === void 0 ? 0 : _donorMix$donorMixPre;
+  var activeCampaignsProps = {
+    title: "Active Campaigns",
+    subtitle: "Live fundraisers ranked by velocity",
+    columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
+    rows: activeCampaignsRows
+  };
+  var donorMixProps = {
+    title: "Donor Mix",
+    subtitle: "Acquisition vs retention",
+    series: [newDonors, returningDonors],
+    labels: ["New donors", "Returning"],
+    colors: ["rgb(99, 99, 230)", "#10B981"],
+    centerLabel: "donors",
+    centerValue: String(totalMix),
+    items: [{
+      label: "New Donors",
+      val: "".concat(newDonors, " - ").concat(newPct, "%"),
+      color: "rgb(99, 99, 230)"
+    }, {
+      label: "Returning",
+      val: "".concat(returningDonors, " - ").concat(retPct, "%"),
+      color: "#10B981"
+    }],
+    bottomSummaryValue: "$".concat(formatNumber(avgGift)),
+    bottomSummaryTrend: "".concat(donorMixPrev, "% vs pp"),
+    sx: {
+      width: "100%"
+    }
+  };
+  var orderBumpProps = {
+    title: "Order Bump",
+    subtitle: "Revenue trend - last ".concat(daysLabel),
+    value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalRevenue) || 0)),
+    trend: "".concat((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.growthPercentage) >= 0 ? "▲" : "▼", " ").concat(Math.abs((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.growthPercentage) || 0).toFixed(1), "% vs pp"),
+    chartData: (orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$chart = orderBumpData.chart) === null || _orderBumpData$chart === void 0 ? void 0 : _orderBumpData$chart.map(function (item) {
+      return {
+        label: item.label,
+        value: item.revenue
+      };
+    })) || [],
+    isAmount: true,
+    footerMetrics: [{
+      label: "Avg / Day",
+      value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.averagePerDay) || 0))
+    }, {
+      label: "Orders",
+      value: formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalOrders) || 0)
+    }, {
+      label: "Peak Day",
+      value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa = orderBumpData.peakDay) === null || _orderBumpData$peakDa === void 0 ? void 0 : _orderBumpData$peakDa.amount) || 0)),
+      subValue: orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa2 = orderBumpData.peakDay) === null || _orderBumpData$peakDa2 === void 0 ? void 0 : _orderBumpData$peakDa2.date
+    }],
+    bottomSection: true
+  };
+  var upsellProps = {
+    title: "Upsell",
+    subtitle: "Acceptance & raised",
+    acceptanceRate: (upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0,
+    acceptanceVal: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0), "%"),
+    acceptanceTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) || 0).toFixed(1), "%"),
+    raisedVal: "$".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raised) || 0)),
+    raisedTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) || 0).toFixed(1), "%")
+  };
+  var downsellProps = {
+    title: "Downsell",
+    subtitle: "Acceptance & raised",
+    acceptanceRate: (downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0,
+    acceptanceVal: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0), "%"),
+    acceptanceTrend: "".concat((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) || 0).toFixed(1), "%"),
+    raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raised) || 0)),
+    raisedTrend: "".concat((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) || 0).toFixed(1), "%")
+  };
+  var referralProps = {
+    title: "Referrals",
+    subtitle: "Revenue trend - last ".concat(daysLabel),
+    value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalRevenue) || 0)),
+    trend: "".concat((referralData === null || referralData === void 0 ? void 0 : referralData.growthPercentage) >= 0 ? "▲" : "▼", " ").concat(Math.abs((referralData === null || referralData === void 0 ? void 0 : referralData.growthPercentage) || 0).toFixed(1), "% vs pp"),
+    chartData: (referralData === null || referralData === void 0 || (_referralData$chartDa = referralData.chartData) === null || _referralData$chartDa === void 0 ? void 0 : _referralData$chartDa.map(function (item) {
+      return {
+        label: item.date,
+        value: item.revenue
+      };
+    })) || [],
+    isAmount: true,
+    footerMetrics: [{
+      label: "Referrers",
+      value: formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalReferrers) || 0)
+    }, {
+      label: "Avg gift",
+      value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.averageGift) || 0))
+    }, {
+      label: "Conv. rate",
+      value: "".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.conversionRate) || 0), "%")
+    }],
+    bottomSection: true
+  };
+  var modalContentByKey = {
+    activeCampaigns: /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, _objectSpread2(_objectSpread2({}, activeCampaignsProps), {}, {
+      sx: MODAL_CARD_SX
+    })),
+    donorMix: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, _objectSpread2(_objectSpread2({}, donorMixProps), {}, {
+      sx: MODAL_CARD_SX
+    })),
+    donationType: /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
+      sx: MODAL_CARD_SX,
+      donationTypeData: donationTypeData
+    }),
+    donorGeography: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
+      sx: MODAL_CARD_SX,
+      donorGeographyData: donorGeographyData
+    }),
+    refundsChargebacks: /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {
+      sx: MODAL_CARD_SX,
+      refundsChargebacksData: refundsChargebacksData,
+      numberOfDays: numberOfDays
+    }),
+    trafficSource: /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {
+      sx: MODAL_CARD_SX,
+      trafficSourceData: (trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.data) || [],
+      total: "$".concat(formatNumber((trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.totalRevenue) || 0)),
+      numberOfDays: numberOfDays
+    }),
+    orderBump: /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, _objectSpread2(_objectSpread2({}, orderBumpProps), {}, {
+      sx: MODAL_CARD_SX
+    })),
+    upsell: /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, _objectSpread2(_objectSpread2({}, upsellProps), {}, {
+      sx: MODAL_CARD_SX
+    })),
+    downsell: /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, _objectSpread2(_objectSpread2({}, downsellProps), {}, {
+      sx: MODAL_CARD_SX
+    })),
+    referrals: /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, _objectSpread2(_objectSpread2({}, referralProps), {}, {
+      sx: MODAL_CARD_SX
+    }))
+  };
+  var wrapCard = function wrapCard(modalKey, card) {
+    if (exportMode) return card;
+    return /*#__PURE__*/jsxRuntime.jsx(ClickableCard, {
+      onClick: function onClick() {
+        return setOpenModalKey(modalKey);
+      },
+      children: card
+    });
+  };
   var campaignsRow = exportMode ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
     sx: {
       display: "grid",
@@ -7128,34 +7362,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       gap: GRID_GAP,
       alignItems: "stretch"
     },
-    children: [/*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
-      title: "Active Campaigns",
-      subtitle: "Live fundraisers ranked by velocity",
-      columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
-      rows: activeCampaignsRows
-    }), /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
-      title: "Donor Mix",
-      subtitle: "Acquisition vs retention",
-      series: [newDonors, returningDonors],
-      labels: ["New donors", "Returning"],
-      colors: ["rgb(99, 99, 230)", "#10B981"],
-      centerLabel: "donors",
-      centerValue: String(totalMix),
-      items: [{
-        label: "New donors",
-        val: "".concat(newDonors, " - ").concat(newPct, "%"),
-        color: "rgb(99, 99, 230)"
-      }, {
-        label: "Returning",
-        val: "".concat(returningDonors, " - ").concat(retPct, "%"),
-        color: "#10B981"
-      }],
-      bottomSummaryValue: "$".concat(formatNumber(avgGift)),
-      bottomSummaryTrend: "".concat(donorMixPrev, "% vs pp"),
-      sx: {
-        width: "100%"
-      }
-    })]
+    children: [/*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, _objectSpread2({}, activeCampaignsProps)), /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, _objectSpread2({}, donorMixProps))]
   }) : /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
     container: true,
     spacing: GRID_GAP,
@@ -7169,12 +7376,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       sx: {
         paddingTop: "0px !important"
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
-        title: "Active Campaigns",
-        subtitle: "Live fundraisers ranked by velocity",
-        columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
-        rows: activeCampaignsRows
-      })
+      children: wrapCard("activeCampaigns", /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, _objectSpread2({}, activeCampaignsProps)))
     }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
       item: true,
       xs: 12,
@@ -7187,139 +7389,64 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
           md: 0
         }
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
-        title: "Donor Mix",
-        subtitle: "Acquisition vs retention",
-        series: [newDonors, returningDonors],
-        labels: ["New donors", "Returning"],
-        colors: ["rgb(99, 99, 230)", "#10B981"],
-        centerLabel: "donors",
-        centerValue: String(totalMix),
-        items: [{
-          label: "New Donors",
-          val: "".concat(newDonors, " - ").concat(newPct, "%"),
-          color: "rgb(99, 99, 230)"
-        }, {
-          label: "Returning",
-          val: "".concat(returningDonors, " - ").concat(retPct, "%"),
-          color: "#10B981"
-        }],
-        bottomSummaryValue: "$".concat(formatNumber(avgGift)),
-        bottomSummaryTrend: "".concat(donorMixPrev, "% vs pp"),
-        sx: {
-          width: "100%"
-        }
-      })
+      children: wrapCard("donorMix", /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, _objectSpread2({}, donorMixProps)))
     })]
   });
   var middleCards = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
+    children: [wrapCard("donationType", /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
       sx: CARD_SX,
       donationTypeData: donationTypeData
-    }), /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
+    })), wrapCard("donorGeography", /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
       sx: CARD_SX,
       donorGeographyData: donorGeographyData
-    }), /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {
+    })), wrapCard("refundsChargebacks", /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {
       sx: CARD_SX,
       refundsChargebacksData: refundsChargebacksData,
       numberOfDays: numberOfDays
-    }), /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {
+    })), wrapCard("trafficSource", /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {
       sx: CARD_SX,
       trafficSourceData: (trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.data) || [],
       total: "$".concat(formatNumber((trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.totalRevenue) || 0)),
       numberOfDays: numberOfDays
-    })]
+    }))]
   });
   var bottomCards = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
-      title: "Order Bump",
-      subtitle: "Revenue trend - last ".concat(daysLabel),
-      value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalRevenue) || 0)),
-      trend: "".concat((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.growthPercentage) >= 0 ? "▲" : "▼", " ").concat(Math.abs((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.growthPercentage) || 0).toFixed(1), "% vs pp"),
-      chartData: (orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$chart = orderBumpData.chart) === null || _orderBumpData$chart === void 0 ? void 0 : _orderBumpData$chart.map(function (item) {
-        return {
-          label: item.label,
-          value: item.revenue
-        };
-      })) || [],
-      isAmount: true,
-      footerMetrics: [{
-        label: "Avg / Day",
-        value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.averagePerDay) || 0))
-      }, {
-        label: "Orders",
-        value: formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalOrders) || 0)
-      }, {
-        label: "Peak Day",
-        value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa = orderBumpData.peakDay) === null || _orderBumpData$peakDa === void 0 ? void 0 : _orderBumpData$peakDa.amount) || 0)),
-        subValue: orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa2 = orderBumpData.peakDay) === null || _orderBumpData$peakDa2 === void 0 ? void 0 : _orderBumpData$peakDa2.date
-      }],
-      sx: CARD_SX,
-      bottomSection: true
-    }), /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
-      title: "Upsell",
-      subtitle: "Acceptance & raised",
-      acceptanceRate: (upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0,
-      acceptanceVal: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0), "%"),
-      acceptanceTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) || 0).toFixed(1), "%"),
-      raisedVal: "$".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raised) || 0)),
-      raisedTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) || 0).toFixed(1), "%"),
+    children: [wrapCard("orderBump", /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, _objectSpread2(_objectSpread2({}, orderBumpProps), {}, {
       sx: CARD_SX
-    }), /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
-      title: "Downsell",
-      subtitle: "Acceptance & raised",
-      acceptanceRate: (downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0,
-      acceptanceVal: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0), "%"),
-      acceptanceTrend: "".concat((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) || 0).toFixed(1), "%"),
-      raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raised) || 0)),
-      raisedTrend: "".concat((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) || 0).toFixed(1), "%"),
+    }))), wrapCard("upsell", /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, _objectSpread2(_objectSpread2({}, upsellProps), {}, {
       sx: CARD_SX
-    }), /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
-      title: "Referrals",
-      subtitle: "Revenue trend - last ".concat(daysLabel),
-      value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalRevenue) || 0)),
-      trend: "".concat((referralData === null || referralData === void 0 ? void 0 : referralData.growthPercentage) >= 0 ? "▲" : "▼", " ").concat(Math.abs((referralData === null || referralData === void 0 ? void 0 : referralData.growthPercentage) || 0).toFixed(1), "% vs pp"),
-      chartData: (referralData === null || referralData === void 0 || (_referralData$chartDa = referralData.chartData) === null || _referralData$chartDa === void 0 ? void 0 : _referralData$chartDa.map(function (item) {
-        return {
-          label: item.date,
-          value: item.revenue
-        };
-      })) || [],
-      isAmount: true,
-      footerMetrics: [{
-        label: "Referrers",
-        value: formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalReferrers) || 0)
-      }, {
-        label: "Avg gift",
-        value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.averageGift) || 0))
-      }, {
-        label: "Conv. rate",
-        value: "".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.conversionRate) || 0), "%")
-      }],
-      sx: CARD_SX,
-      bottomSection: true
-    })]
-  });
-  if (section === "campaigns") return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-    children: campaignsRow
-  });
-  if (section === "middle") return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-    sx: fourColGridSx$1(exportMode),
-    children: middleCards
-  });
-  if (section === "bottom") return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-    sx: fourColGridSx$1(exportMode),
-    children: bottomCards
+    }))), wrapCard("downsell", /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, _objectSpread2(_objectSpread2({}, downsellProps), {}, {
+      sx: CARD_SX
+    }))), wrapCard("referrals", /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, _objectSpread2(_objectSpread2({}, referralProps), {}, {
+      sx: CARD_SX
+    })))]
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    children: [campaignsRow, /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+  var content = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [section === "campaigns" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      children: campaignsRow
+    }), section === "middle" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: fourColGridSx$1(exportMode),
       children: middleCards
-    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    }), section === "bottom" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: fourColGridSx$1(exportMode),
       children: bottomCards
+    }), section === "all" && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      children: [campaignsRow, /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: fourColGridSx$1(exportMode),
+        children: middleCards
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+        sx: fourColGridSx$1(exportMode),
+        children: bottomCards
+      })]
+    }), !exportMode && /*#__PURE__*/jsxRuntime.jsx(CardDetailModal, {
+      open: Boolean(openModalKey),
+      onClose: function onClose() {
+        return setOpenModalKey(null);
+      },
+      children: openModalKey ? modalContentByKey[openModalKey] : null
     })]
   });
+  return content;
 };
 
 var ReportDetailsSection = function ReportDetailsSection(_ref) {