@ammarkhalidfarooq/dashboard-package 0.5.38 → 0.5.39

package/dist/index.cjs.js

@@ -111,7 +111,10 @@ function _iterableToArrayLimit(r, l) {
       f = true,
       o = false;
     try {
-      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
       o = true, n = r;
     } finally {
@@ -3268,8 +3271,9 @@ var GeographyCard = function GeographyCard(_ref4) {
     })
   });
 };
-var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
-  var data = [{
+var TopCampaignsRaisedCard = function TopCampaignsRaisedCard(_ref5) {
+  var dataProp = _ref5.data;
+  var data = dataProp !== null && dataProp !== void 0 ? dataProp : [{
     id: "RK",
     name: "Ramadan kickoff",
     value: "$14,200"
@@ -3315,7 +3319,15 @@ var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
         },
         children: "Raised"
       })]
-    }), data.map(function (item, index) {
+    }), data.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      sx: {
+        fontSize: "13px",
+        color: "rgba(0, 0, 0, 0.45)",
+        py: 2,
+        textAlign: "left"
+      },
+      children: "No campaign data for this period."
+    }) : data.map(function (item, index) {
       return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
         sx: {
           display: "flex",
@@ -3365,8 +3377,9 @@ var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
     })]
   });
 };
-var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
-  var data = [{
+var TopCampaignsCTRCard = function TopCampaignsCTRCard(_ref6) {
+  var dataProp = _ref6.data;
+  var data = dataProp !== null && dataProp !== void 0 ? dataProp : [{
     id: "RK",
     name: "Ramadan kickoff",
     value: "12.4%"
@@ -3412,7 +3425,15 @@ var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
         },
         children: "CTR"
       })]
-    }), data.map(function (item, index) {
+    }), data.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      sx: {
+        fontSize: "13px",
+        color: "rgba(0, 0, 0, 0.45)",
+        py: 2,
+        textAlign: "left"
+      },
+      children: "No campaign data for this period."
+    }) : data.map(function (item, index) {
       return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
         sx: {
           display: "flex",
@@ -3462,8 +3483,9 @@ var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
     })]
   });
 };
-var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
-  var data = [{
+var TopCampaignsConvRateCard = function TopCampaignsConvRateCard(_ref7) {
+  var dataProp = _ref7.data;
+  var data = dataProp !== null && dataProp !== void 0 ? dataProp : [{
     id: "YO",
     name: "Yemen orphans drive",
     value: "5.2%"
@@ -3509,7 +3531,15 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
         },
         children: "Conv. rate"
       })]
-    }), data.map(function (item, index) {
+    }), data.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      sx: {
+        fontSize: "13px",
+        color: "rgba(0, 0, 0, 0.45)",
+        py: 2,
+        textAlign: "left"
+      },
+      children: "No campaign data for this period."
+    }) : data.map(function (item, index) {
       return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
         sx: {
           display: "flex",
@@ -3706,9 +3736,9 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
     })]
   });
 };
-var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref5) {
-  var sx = _ref5.sx,
-    donorGeographyData = _ref5.donorGeographyData;
+var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref8) {
+  var sx = _ref8.sx,
+    donorGeographyData = _ref8.donorGeographyData;
   var rawCountries = Array.isArray(donorGeographyData) ? donorGeographyData : (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.countries) || [];
   var data = rawCountries.map(function (item) {
     return {
@@ -4948,7 +4978,10 @@ var NewOverview = function NewOverview(_ref) {
         })
       }), activeSection === "Email" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {},
-        children: /*#__PURE__*/jsxRuntime.jsx(EmailSection$2, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(EmailSection$2, {
+          apiData: apiData,
+          dateName: dateName
+        })
       })]
     }), showExportLayout && /*#__PURE__*/jsxRuntime.jsx("div", {
       "aria-hidden": "true",
@@ -15320,10 +15353,10 @@ var PaidSection$1 = /*#__PURE__*/Object.freeze({
   default: PaidSection
 });
 
-var formatGrowth = function formatGrowth(value, dateName) {
+var formatGrowth$1 = function formatGrowth(value, dateName) {
   return "".concat(Number(value !== null && value !== void 0 ? value : 0).toFixed(2), "% vs ").concat(dateName || "previous period");
 };
-var mapTimeSeries = function mapTimeSeries(series) {
+var mapTimeSeries$1 = function mapTimeSeries(series) {
   if (!Array.isArray(series) || series.length === 0) {
     return {
       categories: [],
@@ -15353,14 +15386,14 @@ var OrganicSection = function OrganicSection(_ref) {
   var overview = (apiData === null || apiData === void 0 ? void 0 : apiData.overview) || {};
   var growth = (overview === null || overview === void 0 ? void 0 : overview.growthPercentage) || {};
   var hasOrganicOverview = Boolean(apiData === null || apiData === void 0 ? void 0 : apiData.overview);
-  var organicUsersSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.organicUsers);
-  var donationsSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations);
-  var conversionSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.conversionRate);
-  var revenueSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue);
-  var avgDonationSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.avgDonations);
+  var organicUsersSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.organicUsers);
+  var donationsSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations);
+  var conversionSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.conversionRate);
+  var revenueSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue);
+  var avgDonationSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.avgDonations);
   var fallbackCategories = organicUsersSeries.categories.length ? organicUsersSeries.categories : ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
   var growthCaption = function growthCaption(key) {
-    return formatGrowth(growth[key], dateName);
+    return formatGrowth$1(growth[key], dateName);
   };
   var metricInfo = React.useMemo(function () {
     var _overview$totalRevenu2, _overview$overallAVGD2, _overview$organicUser, _apiData$topOrganicKe, _overview$totalDonati, _overview$conversionR, _overview$totalRevenu3, _overview$overallAVGD3;
@@ -15715,13 +15748,42 @@ var OrganicSection$1 = /*#__PURE__*/Object.freeze({
   default: OrganicSection
 });
 
+var formatCategoryLabel = function formatCategoryLabel(val) {
+  if (!val || typeof val !== "string") return val;
+  var ddMmYyyy = val.match(/^(\d{2})-(\d{2})-(\d{4})$/);
+  if (ddMmYyyy) {
+    var _ddMmYyyy = _slicedToArray(ddMmYyyy, 4),
+      day = _ddMmYyyy[1],
+      month = _ddMmYyyy[2],
+      year = _ddMmYyyy[3];
+    var _date = new Date(Number(year), Number(month) - 1, Number(day));
+    if (!Number.isNaN(_date.getTime())) {
+      return _date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric"
+      });
+    }
+  }
+  var date = new Date(val);
+  if (!Number.isNaN(date.getTime())) {
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric"
+    });
+  }
+  return val;
+};
 var EmailTrendCard = function EmailTrendCard(_ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,
     value = _ref.value,
     trend = _ref.trend,
-    series = _ref.series,
+    _ref$series = _ref.series,
+    series = _ref$series === void 0 ? [] : _ref$series,
+    trendData = _ref.trendData,
+    trendSeries = _ref.trendSeries,
     colors = _ref.colors,
+    categoriesProp = _ref.categories,
     _ref$yAxisMax = _ref.yAxisMax,
     yAxisMax = _ref$yAxisMax === void 0 ? 60 : _ref$yAxisMax,
     _ref$yAxisTickAmount = _ref.yAxisTickAmount,
@@ -15730,6 +15792,47 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
     yAxisFormatter = _ref$yAxisFormatter === void 0 ? function (val) {
       return "".concat(val, "%");
     } : _ref$yAxisFormatter;
+  var categories = React.useMemo(function () {
+    var _trendSeries$;
+    if (Array.isArray(trendSeries) && ((_trendSeries$ = trendSeries[0]) === null || _trendSeries$ === void 0 || (_trendSeries$ = _trendSeries$.data) === null || _trendSeries$ === void 0 ? void 0 : _trendSeries$.length) > 0) {
+      return trendSeries[0].data.map(function (item) {
+        return item.date;
+      });
+    }
+    if (Array.isArray(trendData) && trendData.length > 0) {
+      return trendData.map(function (item) {
+        return item.date;
+      });
+    }
+    return categoriesProp !== null && categoriesProp !== void 0 ? categoriesProp : [];
+  }, [trendData, trendSeries, categoriesProp]);
+  var chartSeries = React.useMemo(function () {
+    if (Array.isArray(trendSeries) && trendSeries.length > 0) {
+      return trendSeries.map(function (item) {
+        var _item$data;
+        return {
+          name: item.name,
+          data: ((_item$data = item.data) !== null && _item$data !== void 0 ? _item$data : []).map(function (point) {
+            var _point$value;
+            return (_point$value = point.value) !== null && _point$value !== void 0 ? _point$value : 0;
+          }),
+          dashed: item.dashed
+        };
+      });
+    }
+    if (Array.isArray(trendData) && trendData.length > 0) {
+      var _series$0$name, _series$, _series$2;
+      return [{
+        name: (_series$0$name = (_series$ = series[0]) === null || _series$ === void 0 ? void 0 : _series$.name) !== null && _series$0$name !== void 0 ? _series$0$name : "Value",
+        data: trendData.map(function (item) {
+          var _item$value;
+          return (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 0;
+        }),
+        dashed: (_series$2 = series[0]) === null || _series$2 === void 0 ? void 0 : _series$2.dashed
+      }];
+    }
+    return series;
+  }, [trendData, trendSeries, series]);
   var chartOptions = {
     chart: {
       type: "area",
@@ -15744,7 +15847,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
     stroke: {
       curve: "smooth",
       width: 2,
-      dashArray: series.map(function (s) {
+      dashArray: chartSeries.map(function (s) {
         return s.dashed ? 5 : 0;
       })
     },
@@ -15759,14 +15862,18 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
     },
     colors: colors,
     xaxis: {
-      categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
+      categories: categories,
+      tickAmount: 5,
       labels: {
         show: true,
+        rotate: 0,
+        hideOverlappingLabels: true,
         style: {
-          colors: 'rgba(0, 0, 0, 0.3)',
-          fontSize: '10px'
+          colors: "rgba(0, 0, 0, 0.3)",
+          fontSize: "10px"
         },
-        offsetY: -5
+        offsetY: -5,
+        formatter: formatCategoryLabel
       },
       axisBorder: {
         show: false
@@ -15774,7 +15881,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
       axisTicks: {
         show: false
       },
-      position: 'bottom'
+      position: "bottom"
     },
     yaxis: {
       max: yAxisMax,
@@ -15782,8 +15889,8 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
       labels: {
         show: true,
         style: {
-          colors: 'rgba(0, 0, 0, 0.3)',
-          fontSize: '10px'
+          colors: "rgba(0, 0, 0, 0.3)",
+          fontSize: "10px"
         },
         formatter: yAxisFormatter
       }
@@ -15812,11 +15919,11 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
       enabled: false
     },
     legend: {
-      show: series.length > 1,
-      position: 'bottom',
-      horizontalAlign: 'left',
-      fontSize: '11px',
-      fontFamily: 'Inter, sans-serif',
+      show: chartSeries.length > 1,
+      position: "bottom",
+      horizontalAlign: "left",
+      fontSize: "11px",
+      fontFamily: "Inter, sans-serif",
       offsetY: -5,
       markers: {
         width: 8,
@@ -15829,7 +15936,13 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
       }
     },
     tooltip: {
-      theme: 'light'
+      theme: "light",
+      x: {
+        formatter: function formatter(_, _ref2) {
+          var dataPointIndex = _ref2.dataPointIndex;
+          return formatCategoryLabel(categories[dataPointIndex]);
+        }
+      }
     }
   };
   return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
@@ -15846,7 +15959,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
       sx: {
         mb: 1,
-        textAlign: 'left'
+        textAlign: "left"
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
         sx: {
@@ -15892,7 +16005,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
         },
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
           style: {
-            fontSize: '10px'
+            fontSize: "10px"
           },
           children: "\u25B2"
         }), " ", trend]
@@ -15906,7 +16019,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
       },
       children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
         options: chartOptions,
-        series: series,
+        series: chartSeries,
         type: "area",
         height: "100%"
       })
@@ -15914,109 +16027,282 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
   });
 };
 
-var EmailSection = function EmailSection() {
+var formatGrowth = function formatGrowth(value, dateName) {
+  return "".concat(Number(value !== null && value !== void 0 ? value : 0).toFixed(2), "% vs ").concat(dateName || "previous period");
+};
+var mapTimeSeries = function mapTimeSeries(series) {
+  if (!Array.isArray(series) || series.length === 0) {
+    return {
+      categories: [],
+      data: []
+    };
+  }
+  return {
+    categories: series.map(function (item) {
+      return item.date;
+    }),
+    data: series.map(function (item) {
+      var _item$value;
+      return (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 0;
+    })
+  };
+};
+var getCampaignInitials = function getCampaignInitials() {
+  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase() || "—";
+};
+var computeYAxisMax = function computeYAxisMax(values) {
+  var defaultMax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+  var max = Math.max.apply(Math, _toConsumableArray(values.length ? values : [0]).concat([0]));
+  return max === 0 ? defaultMax : Math.ceil(max * 1.2);
+};
+var formatTrendBadge = function formatTrendBadge(value) {
+  var isPercentage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var num = Number(value !== null && value !== void 0 ? value : 0);
+  if (isPercentage) {
+    return "".concat(num >= 0 ? "+" : "").concat(num.toFixed(1), "pp");
+  }
+  return "".concat(num >= 0 ? "+" : "").concat(num.toFixed(1), "%");
+};
+var EmailSection = function EmailSection(_ref) {
+  var _deliverability$openR2, _deliverability$total2, _deliverability$bounc2;
+  var _ref$apiData = _ref.apiData,
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
+    _ref$dateName = _ref.dateName,
+    dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName;
   var _useState = React.useState("Total raised"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
-  var metricInfo = {
-    "Total raised": {
-      value: "$".concat(formatNumber(48920)),
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
-      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
-      money: true,
-      error: false,
-      warning: false
-    },
-    Donations: {
-      value: "62",
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.FavoriteOutlined, {}),
-      data: [4, 8, 5, 12, 10, 11, 12],
-      money: false,
-      error: false,
-      warning: false
-    },
-    "Conversion rate": {
-      value: "3.2%",
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
-      data: [2.8, 3.1, 2.9, 3.4, 3.2, 3.1, 3.2],
-      money: false,
-      error: false,
-      warning: false
-    },
-    CTR: {
-      value: "8.1%",
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NotInterested, {}),
-      data: [7.2, 8.4, 7.8, 8.9, 8.1, 8.0, 8.1],
-      money: false,
-      error: false,
-      warning: false
-    },
-    "Revenue per email": {
-      value: "$".concat(formatNumber(2.45)),
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
-      data: [2.1, 2.5, 2.3, 2.8, 2.4, 2.4, 2.45],
-      money: true,
-      error: false,
-      warning: false
-    },
-    "Open rate": {
-      value: "42.3%",
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Email, {}),
-      data: [38, 44, 40, 46, 42, 41, 42.3],
-      money: false,
-      error: false,
-      warning: false
-    },
-    Clicks: {
-      value: "1,612",
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
-      data: [210, 240, 220, 280, 250, 245, 245],
-      money: false,
-      error: false,
-      warning: false
-    },
-    "Unique Clicks": {
-      value: "".concat(formatNumber(1148)),
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
-      data: [150, 180, 160, 210, 190, 185, 185],
-      money: false,
-      error: false,
-      warning: false
-    },
-    "Bounce rate": {
-      value: "1.8%",
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
-      data: [2.1, 1.9, 1.8, 1.7, 1.8, 1.8, 1.8],
-      money: false,
-      error: false,
-      warning: false
-    },
-    "Revenue per Click": {
-      value: "$".concat(formatNumber(30.35)),
-      subValue: "12% vs last month",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
-      data: [28, 32, 29, 34, 30, 30, 30.35],
-      money: true,
-      error: false,
-      warning: false
-    }
+  var overview = (apiData === null || apiData === void 0 ? void 0 : apiData.overview) || {};
+  var overviewGrowth = (overview === null || overview === void 0 ? void 0 : overview.growthPercentage) || {};
+  var deliverability = (apiData === null || apiData === void 0 ? void 0 : apiData.deliverability) || {};
+  var deliverabilityGrowth = (deliverability === null || deliverability === void 0 ? void 0 : deliverability.growthPercentage) || {};
+  var hasEmailOverview = Boolean(apiData === null || apiData === void 0 ? void 0 : apiData.overview);
+  var openRateTrend = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.openRateTrend);
+  var totalClicksTrend = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.totalClicksTrend);
+  var uniqueClicksTrend = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.uniqueClicksTrend);
+  var bounceRateTrend = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.bounceRateTrend);
+  var growthCaption = function growthCaption(key) {
+    var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : overviewGrowth;
+    return formatGrowth(source[key], dateName);
   };
+  var metricInfo = React.useMemo(function () {
+    var _overview$totalRevenu, _overview$totalDonati, _overview$conversionR, _overview$ctr, _overview$revenuePerE, _deliverability$openR, _deliverability$total, _deliverability$uniqu, _deliverability$bounc, _deliverability$reven;
+    if (!hasEmailOverview) {
+      return {
+        "Total raised": {
+          value: "$".concat(formatNumber(48920)),
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+          money: true,
+          error: false,
+          warning: false
+        },
+        Donations: {
+          value: "62",
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.FavoriteOutlined, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        "Conversion rate": {
+          value: "3.2%",
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        CTR: {
+          value: "8.1%",
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NotInterested, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        "Revenue per email": {
+          value: "$".concat(formatNumber(2.45)),
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
+          money: true,
+          error: false,
+          warning: false
+        },
+        "Open rate": {
+          value: "42.3%",
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Email, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        Clicks: {
+          value: "1,612",
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        "Unique Clicks": {
+          value: formatNumber(1148),
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        "Bounce rate": {
+          value: "1.8%",
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        "Revenue per Click": {
+          value: "$".concat(formatNumber(30.35)),
+          subValue: "12% vs last month",
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
+          money: true,
+          error: false,
+          warning: false
+        }
+      };
+    }
+    return {
+      "Total raised": {
+        value: "$".concat(formatNumber((_overview$totalRevenu = overview.totalRevenue) !== null && _overview$totalRevenu !== void 0 ? _overview$totalRevenu : 0)),
+        subValue: growthCaption("totalRevenue"),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+        money: true,
+        error: false,
+        warning: false
+      },
+      Donations: {
+        value: formatNumber((_overview$totalDonati = overview.totalDonations) !== null && _overview$totalDonati !== void 0 ? _overview$totalDonati : 0),
+        subValue: growthCaption("totalDonations"),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.FavoriteOutlined, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      "Conversion rate": {
+        value: "".concat(Number((_overview$conversionR = overview.conversionRate) !== null && _overview$conversionR !== void 0 ? _overview$conversionR : 0).toFixed(2), "%"),
+        subValue: growthCaption("conversionRate"),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      CTR: {
+        value: "".concat(Number((_overview$ctr = overview.ctr) !== null && _overview$ctr !== void 0 ? _overview$ctr : 0).toFixed(2), "%"),
+        subValue: growthCaption("ctr"),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NotInterested, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      "Revenue per email": {
+        value: "$".concat(formatNumber((_overview$revenuePerE = overview.revenuePerEmail) !== null && _overview$revenuePerE !== void 0 ? _overview$revenuePerE : 0)),
+        subValue: growthCaption("revenuePerEmail"),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
+        money: true,
+        error: false,
+        warning: false
+      },
+      "Open rate": {
+        value: "".concat(Number((_deliverability$openR = deliverability.openRate) !== null && _deliverability$openR !== void 0 ? _deliverability$openR : 0).toFixed(2), "%"),
+        subValue: growthCaption("openRate", deliverabilityGrowth),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Email, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      Clicks: {
+        value: formatNumber((_deliverability$total = deliverability.totalClicks) !== null && _deliverability$total !== void 0 ? _deliverability$total : 0),
+        subValue: growthCaption("totalClicks", deliverabilityGrowth),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      "Unique Clicks": {
+        value: formatNumber((_deliverability$uniqu = deliverability.uniqueClicks) !== null && _deliverability$uniqu !== void 0 ? _deliverability$uniqu : 0),
+        subValue: growthCaption("uniqueClicks", deliverabilityGrowth),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      "Bounce rate": {
+        value: "".concat(Number((_deliverability$bounc = deliverability.bounceRate) !== null && _deliverability$bounc !== void 0 ? _deliverability$bounc : 0).toFixed(2), "%"),
+        subValue: growthCaption("bounceRate", deliverabilityGrowth),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      "Revenue per Click": {
+        value: "$".concat(formatNumber((_deliverability$reven = deliverability.revenuePerClick) !== null && _deliverability$reven !== void 0 ? _deliverability$reven : 0)),
+        subValue: growthCaption("revenuePerClick", deliverabilityGrowth),
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
+        money: true,
+        error: false,
+        warning: false
+      }
+    };
+  }, [deliverability, deliverabilityGrowth, hasEmailOverview, overview, overviewGrowth, dateName]);
+  var campaignsRaisedData = React.useMemo(function () {
+    var campaigns = apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByRaised;
+    if (!hasEmailOverview) return null;
+    if (!Array.isArray(campaigns) || campaigns.length === 0) return [];
+    return campaigns.map(function (item) {
+      var _item$value2;
+      return {
+        id: getCampaignInitials(item.campaignName),
+        name: item.campaignName || "Unknown",
+        value: "$".concat(formatNumber((_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : 0))
+      };
+    });
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByRaised, hasEmailOverview]);
+  var campaignsCtrData = React.useMemo(function () {
+    var campaigns = apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByCtr;
+    if (!hasEmailOverview) return null;
+    if (!Array.isArray(campaigns) || campaigns.length === 0) return [];
+    return campaigns.map(function (item) {
+      var _item$value3;
+      return {
+        id: getCampaignInitials(item.campaignName),
+        name: item.campaignName || "Unknown",
+        value: "".concat(Number((_item$value3 = item.value) !== null && _item$value3 !== void 0 ? _item$value3 : 0).toFixed(2), "%")
+      };
+    });
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByCtr, hasEmailOverview]);
+  var campaignsConversionData = React.useMemo(function () {
+    var campaigns = apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByConversion;
+    if (!hasEmailOverview) return null;
+    if (!Array.isArray(campaigns) || campaigns.length === 0) return [];
+    return campaigns.map(function (item) {
+      var _item$value4;
+      return {
+        id: getCampaignInitials(item.campaignName),
+        name: item.campaignName || "Unknown",
+        value: "".concat(Number((_item$value4 = item.value) !== null && _item$value4 !== void 0 ? _item$value4 : 0).toFixed(2), "%")
+      };
+    });
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByConversion, hasEmailOverview]);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsxRuntime.jsx(MetricCard
-    // key={title}
-    , {
+    return /*#__PURE__*/jsxRuntime.jsx(MetricCard, {
       title: title,
-      value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
+      value: metricInfo[title].value,
       caption: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
       error: metricInfo[title].error,
@@ -16028,19 +16314,7 @@ var EmailSection = function EmailSection() {
         border: "2px solid #ef4444",
         bgcolor: "#fffafa"
       } : {}
-    })
-    // <DisplayCard
-    //   key={title}
-    //   title={title}
-    //   value={metricInfo[title].value}
-    //   subValue={metricInfo[title].subValue}
-    //   icon={metricInfo[title].icon}
-    //   // onClick={() => setActiveMetric(title)}
-    //   // isActive={activeMetric === title}
-    //   sx={{
-    //   }}
-    // />
-;
+    });
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
@@ -16072,14 +16346,16 @@ var EmailSection = function EmailSection() {
         children: /*#__PURE__*/jsxRuntime.jsx(EmailTrendCard, {
           title: "Open rate trend",
           subtitle: "Daily \xB7 30 days",
-          value: "42.3%",
-          trend: "2.1pp",
+          value: hasEmailOverview ? "".concat(Number((_deliverability$openR2 = deliverability.openRate) !== null && _deliverability$openR2 !== void 0 ? _deliverability$openR2 : 0).toFixed(2), "%") : "42.3%",
+          trend: hasEmailOverview ? formatTrendBadge(deliverabilityGrowth.openRate, true) : "2.1pp",
+          trendData: hasEmailOverview ? apiData === null || apiData === void 0 ? void 0 : apiData.openRateTrend : undefined,
           series: [{
-            name: 'Open Rate',
+            name: "Open Rate",
             data: [38, 42, 41, 43, 42.3]
           }],
-          colors: ['rgb(99, 99, 230)'],
-          yAxisMax: 53,
+          categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
+          colors: ["rgb(99, 99, 230)"],
+          yAxisMax: computeYAxisMax(openRateTrend.data, 5),
           yAxisTickAmount: 3
         })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
@@ -16097,18 +16373,27 @@ var EmailSection = function EmailSection() {
         children: /*#__PURE__*/jsxRuntime.jsx(EmailTrendCard, {
           title: "Clicks trend",
           subtitle: "Total + unique \xB7 30 days",
-          value: "1,612",
-          trend: "14%",
+          value: hasEmailOverview ? formatNumber((_deliverability$total2 = deliverability.totalClicks) !== null && _deliverability$total2 !== void 0 ? _deliverability$total2 : 0) : "1,612",
+          trend: hasEmailOverview ? formatTrendBadge(deliverabilityGrowth.totalClicks) : "14%",
+          trendSeries: hasEmailOverview ? [{
+            name: "Total clicks",
+            data: apiData === null || apiData === void 0 ? void 0 : apiData.totalClicksTrend
+          }, {
+            name: "Unique clicks",
+            data: apiData === null || apiData === void 0 ? void 0 : apiData.uniqueClicksTrend,
+            dashed: true
+          }] : undefined,
           series: [{
-            name: 'Total clicks',
+            name: "Total clicks",
             data: [56, 112, 80, 150, 112]
           }, {
-            name: 'Unique clicks',
+            name: "Unique clicks",
             data: [30, 70, 45, 100, 75],
             dashed: true
           }],
-          colors: ['#10B981', '#10B981'],
-          yAxisMax: 168,
+          categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
+          colors: ["#10B981", "#10B981"],
+          yAxisMax: computeYAxisMax([].concat(_toConsumableArray(totalClicksTrend.data), _toConsumableArray(uniqueClicksTrend.data)), 10),
           yAxisTickAmount: 3,
           yAxisFormatter: function yAxisFormatter(val) {
             return val;
@@ -16129,14 +16414,16 @@ var EmailSection = function EmailSection() {
         children: /*#__PURE__*/jsxRuntime.jsx(EmailTrendCard, {
           title: "Bounce rate trend",
           subtitle: "Daily \xB7 lower is better",
-          value: "1.8%",
-          trend: "0.3pp",
+          value: hasEmailOverview ? "".concat(Number((_deliverability$bounc2 = deliverability.bounceRate) !== null && _deliverability$bounc2 !== void 0 ? _deliverability$bounc2 : 0).toFixed(2), "%") : "1.8%",
+          trend: hasEmailOverview ? formatTrendBadge(deliverabilityGrowth.bounceRate, true) : "0.3pp",
+          trendData: hasEmailOverview ? apiData === null || apiData === void 0 ? void 0 : apiData.bounceRateTrend : undefined,
           series: [{
-            name: 'Bounce Rate',
+            name: "Bounce Rate",
             data: [2.2, 1.9, 2.0, 1.7, 1.8]
           }],
-          colors: ['#f2994a'],
-          yAxisMax: 2.5,
+          categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
+          colors: ["#f2994a"],
+          yAxisMax: computeYAxisMax(bounceRateTrend.data, 2.5),
           yAxisTickAmount: 3
         })
       })]
@@ -16153,7 +16440,9 @@ var EmailSection = function EmailSection() {
         sx: {
           paddingTop: "0px !important"
         },
-        children: /*#__PURE__*/jsxRuntime.jsx(TopCampaignsRaisedCard, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(TopCampaignsRaisedCard, {
+          data: campaignsRaisedData
+        })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
         xs: 12,
@@ -16166,7 +16455,9 @@ var EmailSection = function EmailSection() {
             md: "0px"
           }
         },
-        children: /*#__PURE__*/jsxRuntime.jsx(TopCampaignsCTRCard, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(TopCampaignsCTRCard, {
+          data: campaignsCtrData
+        })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
         xs: 12,
@@ -16179,7 +16470,9 @@ var EmailSection = function EmailSection() {
             md: "0px"
           }
         },
-        children: /*#__PURE__*/jsxRuntime.jsx(TopCampaignsConvRateCard, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(TopCampaignsConvRateCard, {
+          data: campaignsConversionData
+        })
       })]
     })]
   });