@ammarkhalidfarooq/dashboard-package 0.6.104 → 0.6.105

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import React, { Suspense, lazy, useState, useRef, useEffect, useMemo } from 'react';
-import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, Stack, Dialog, DialogContent, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } from '@mui/material';
+import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, Stack, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } from '@mui/material';
 import { MoreHoriz, TrendingDown, TrendingUp, MoreVert, Check, InfoOutlined, Settings, PeopleAltOutlined, PaidOutlined, PersonOutlined, IndeterminateCheckBoxOutlined, FavoriteOutlined, SearchOutlined, HighlightOff, Email } from '@mui/icons-material';
 import { createTheme, useTheme } from '@mui/material/styles';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -7,7 +7,6 @@ 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';
-import CloseIcon from '@mui/icons-material/Close';
 
 var theme = createTheme({
   cssVariables: true,
@@ -6586,7 +6585,7 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard(_ref8) {
 var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref9) {
   var sx = _ref9.sx,
     donorGeographyData = _ref9.donorGeographyData;
-  var rawCountries = Array.isArray(donorGeographyData) ? donorGeographyData : (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.countries) || [];
+  var rawCountries = Array.isArray(donorGeographyData) ? donorGeographyData : (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.countries) || (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.data) || [];
   var data = rawCountries.map(function (item) {
     return {
       country: item.countryName || item.country || "Unknown",
@@ -6623,7 +6622,14 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref9) {
         },
         children: "Where ad-acquired donors come from"
       })]
-    }), data.map(function (item, index) {
+    }), data.length === 0 ? /*#__PURE__*/jsx(Typography, {
+      sx: {
+        fontSize: "13px",
+        color: "rgba(0, 0, 0, 0.4)",
+        py: 2
+      },
+      children: "No geography data for this period"
+    }) : data.map(function (item, index) {
       return /*#__PURE__*/jsxs(Box, {
         sx: {
           display: "flex",
@@ -7058,94 +7064,9 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   });
 };
 
-var CardDetailModal = function CardDetailModal(_ref) {
-  var open = _ref.open,
-    onClose = _ref.onClose,
-    children = _ref.children;
-  return /*#__PURE__*/jsx(Dialog, {
-    open: open,
-    onClose: onClose,
-    maxWidth: "lg",
-    fullWidth: true,
-    PaperProps: {
-      sx: {
-        borderRadius: 4,
-        maxHeight: "90vh"
-      }
-    },
-    children: /*#__PURE__*/jsxs(Box, {
-      sx: {
-        position: "relative"
-      },
-      children: [/*#__PURE__*/jsx(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__*/jsx(CloseIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/jsx(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__*/jsx(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 {
@@ -7190,10 +7111,6 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
     _ref.dateName;
     var _ref$numberOfDays = _ref.numberOfDays,
     numberOfDays = _ref$numberOfDays === void 0 ? 30 : _ref$numberOfDays;
-  var _useState = 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,
@@ -7209,150 +7126,6 @@ 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__*/jsx(ActiveCampaignsCard, _objectSpread2(_objectSpread2({}, activeCampaignsProps), {}, {
-      sx: MODAL_CARD_SX
-    })),
-    donorMix: /*#__PURE__*/jsx(DonorMixCard, _objectSpread2(_objectSpread2({}, donorMixProps), {}, {
-      sx: MODAL_CARD_SX
-    })),
-    donationType: /*#__PURE__*/jsx(DonationTypeBarChart, {
-      sx: MODAL_CARD_SX,
-      donationTypeData: donationTypeData
-    }),
-    donorGeography: /*#__PURE__*/jsx(PaidDonorGeographyCard, {
-      sx: MODAL_CARD_SX,
-      donorGeographyData: donorGeographyData
-    }),
-    refundsChargebacks: /*#__PURE__*/jsx(RefundsChargebacksCard, {
-      sx: MODAL_CARD_SX,
-      refundsChargebacksData: refundsChargebacksData,
-      numberOfDays: numberOfDays
-    }),
-    trafficSource: /*#__PURE__*/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__*/jsx(MetricSparklineCard, _objectSpread2(_objectSpread2({}, orderBumpProps), {}, {
-      sx: MODAL_CARD_SX
-    })),
-    upsell: /*#__PURE__*/jsx(MetricDonutCard, _objectSpread2(_objectSpread2({}, upsellProps), {}, {
-      sx: MODAL_CARD_SX
-    })),
-    downsell: /*#__PURE__*/jsx(MetricDonutCard, _objectSpread2(_objectSpread2({}, downsellProps), {}, {
-      sx: MODAL_CARD_SX
-    })),
-    referrals: /*#__PURE__*/jsx(MetricSparklineCard, _objectSpread2(_objectSpread2({}, referralProps), {}, {
-      sx: MODAL_CARD_SX
-    }))
-  };
-  var wrapCard = function wrapCard(modalKey, card) {
-    if (exportMode) return card;
-    return /*#__PURE__*/jsx(ClickableCard, {
-      onClick: function onClick() {
-        return setOpenModalKey(modalKey);
-      },
-      children: card
-    });
-  };
   var campaignsRow = exportMode ? /*#__PURE__*/jsxs(Box, {
     sx: {
       display: "grid",
@@ -7360,7 +7133,34 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       gap: GRID_GAP,
       alignItems: "stretch"
     },
-    children: [/*#__PURE__*/jsx(ActiveCampaignsCard, _objectSpread2({}, activeCampaignsProps)), /*#__PURE__*/jsx(DonorMixCard, _objectSpread2({}, donorMixProps))]
+    children: [/*#__PURE__*/jsx(ActiveCampaignsCard, {
+      title: "Active Campaigns",
+      subtitle: "Live fundraisers ranked by velocity",
+      columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
+      rows: activeCampaignsRows
+    }), /*#__PURE__*/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%"
+      }
+    })]
   }) : /*#__PURE__*/jsxs(Grid, {
     container: true,
     spacing: GRID_GAP,
@@ -7374,7 +7174,12 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       sx: {
         paddingTop: "0px !important"
       },
-      children: wrapCard("activeCampaigns", /*#__PURE__*/jsx(ActiveCampaignsCard, _objectSpread2({}, activeCampaignsProps)))
+      children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
+        title: "Active Campaigns",
+        subtitle: "Live fundraisers ranked by velocity",
+        columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
+        rows: activeCampaignsRows
+      })
     }), /*#__PURE__*/jsx(Grid, {
       item: true,
       xs: 12,
@@ -7387,64 +7192,139 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
           md: 0
         }
       },
-      children: wrapCard("donorMix", /*#__PURE__*/jsx(DonorMixCard, _objectSpread2({}, donorMixProps)))
+      children: /*#__PURE__*/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%"
+        }
+      })
     })]
   });
   var middleCards = /*#__PURE__*/jsxs(Fragment, {
-    children: [wrapCard("donationType", /*#__PURE__*/jsx(DonationTypeBarChart, {
+    children: [/*#__PURE__*/jsx(DonationTypeBarChart, {
       sx: CARD_SX,
       donationTypeData: donationTypeData
-    })), wrapCard("donorGeography", /*#__PURE__*/jsx(PaidDonorGeographyCard, {
+    }), /*#__PURE__*/jsx(PaidDonorGeographyCard, {
       sx: CARD_SX,
       donorGeographyData: donorGeographyData
-    })), wrapCard("refundsChargebacks", /*#__PURE__*/jsx(RefundsChargebacksCard, {
+    }), /*#__PURE__*/jsx(RefundsChargebacksCard, {
       sx: CARD_SX,
       refundsChargebacksData: refundsChargebacksData,
       numberOfDays: numberOfDays
-    })), wrapCard("trafficSource", /*#__PURE__*/jsx(TrafficSourceCard, {
+    }), /*#__PURE__*/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__*/jsxs(Fragment, {
-    children: [wrapCard("orderBump", /*#__PURE__*/jsx(MetricSparklineCard, _objectSpread2(_objectSpread2({}, orderBumpProps), {}, {
-      sx: CARD_SX
-    }))), wrapCard("upsell", /*#__PURE__*/jsx(MetricDonutCard, _objectSpread2(_objectSpread2({}, upsellProps), {}, {
-      sx: CARD_SX
-    }))), wrapCard("downsell", /*#__PURE__*/jsx(MetricDonutCard, _objectSpread2(_objectSpread2({}, downsellProps), {}, {
+    children: [/*#__PURE__*/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__*/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), "%"),
       sx: CARD_SX
-    }))), wrapCard("referrals", /*#__PURE__*/jsx(MetricSparklineCard, _objectSpread2(_objectSpread2({}, referralProps), {}, {
+    }), /*#__PURE__*/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), "%"),
       sx: CARD_SX
-    })))]
+    }), /*#__PURE__*/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__*/jsx(Box, {
+    children: campaignsRow
+  });
+  if (section === "middle") return /*#__PURE__*/jsx(Box, {
+    sx: fourColGridSx$1(exportMode),
+    children: middleCards
   });
-  var content = /*#__PURE__*/jsxs(Fragment, {
-    children: [section === "campaigns" && /*#__PURE__*/jsx(Box, {
-      children: campaignsRow
-    }), section === "middle" && /*#__PURE__*/jsx(Box, {
+  if (section === "bottom") return /*#__PURE__*/jsx(Box, {
+    sx: fourColGridSx$1(exportMode),
+    children: bottomCards
+  });
+  return /*#__PURE__*/jsxs(Box, {
+    children: [campaignsRow, /*#__PURE__*/jsx(Box, {
       sx: fourColGridSx$1(exportMode),
       children: middleCards
-    }), section === "bottom" && /*#__PURE__*/jsx(Box, {
+    }), /*#__PURE__*/jsx(Box, {
       sx: fourColGridSx$1(exportMode),
       children: bottomCards
-    }), section === "all" && /*#__PURE__*/jsxs(Box, {
-      children: [campaignsRow, /*#__PURE__*/jsx(Box, {
-        sx: fourColGridSx$1(exportMode),
-        children: middleCards
-      }), /*#__PURE__*/jsx(Box, {
-        sx: fourColGridSx$1(exportMode),
-        children: bottomCards
-      })]
-    }), !exportMode && /*#__PURE__*/jsx(CardDetailModal, {
-      open: Boolean(openModalKey),
-      onClose: function onClose() {
-        return setOpenModalKey(null);
-      },
-      children: openModalKey ? modalContentByKey[openModalKey] : null
     })]
   });
-  return content;
 };
 
 var ReportDetailsSection = function ReportDetailsSection(_ref) {
@@ -18631,6 +18511,12 @@ var PaidSection = function PaidSection(_ref) {
       };
     });
   }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaigns, hasPaidOverview]);
+  var donorGeographyData = useMemo(function () {
+    var geography = apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography;
+    if (!hasPaidOverview) return [];
+    var rawCountries = Array.isArray(geography) ? geography : (geography === null || geography === void 0 ? void 0 : geography.countries) || (geography === null || geography === void 0 ? void 0 : geography.data) || [];
+    return Array.isArray(rawCountries) ? rawCountries : [];
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography, hasPaidOverview]);
   var renderCard = function renderCard(title) {
     return /*#__PURE__*/jsx(MetricCard$1, {
       title: title,
@@ -18864,7 +18750,7 @@ var PaidSection = function PaidSection(_ref) {
           }
         },
         children: /*#__PURE__*/jsx(PaidDonorGeographyCard, {
-          donorGeographyData: apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography
+          donorGeographyData: donorGeographyData
         })
       })]
     })]