@ammarkhalidfarooq/dashboard-package 0.3.39 → 0.4.0

package/dist/index.cjs.js

@@ -798,19 +798,17 @@ var CardWrapper = function CardWrapper(_ref) {
     children = _ref.children,
     sx = _ref.sx;
   return /*#__PURE__*/jsxRuntime.jsx(material.Card, {
-    sx: _objectSpread2({
-      width: "100%",
+    sx: _objectSpread2(_objectSpread2({
+      // width: "100%",
       display: "flex",
       flexDirection: "column",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       borderRadius: 4,
-      border: "1px solid #f0f0f0",
+      border: "1px solid #f0f0f0"
+    }, sx), {}, {
       height: "100%"
-    }, sx),
+    }),
     children: /*#__PURE__*/jsxRuntime.jsxs(material.CardContent, {
-      sx: {
-        p: 3
-      },
       children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
         variant: "subtitle2",
         sx: {
@@ -2069,29 +2067,29 @@ var OrganicSection = function OrganicSection(_ref) {
         xs: 12,
         md: 6,
         children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
-          title: "Spend allocation",
-          subtitle: "Where $80.3K went this month",
+          title: "Source breakdown",
+          subtitle: "Where organic visitors come from",
           series: [40.8, 35.1, 14.2, 3.3],
           labels: ["Meta Ads", "Google Ads", "TikTok", "Snapchat"],
-          colors: ["#4267B2", "#4285F4", "#06510bff", "#FFFC00"],
+          colors: ["#4267B2", "#4285F4", "#06510bff", "#f2b61dff"],
           centerLabel: "total spend",
           centerValue: "$8.3K",
           items: [{
-            label: "Meta Ads",
+            label: "Google Search",
             val: "40.8%",
             color: "#4267B2"
           }, {
-            label: "Google Ads",
+            label: "Direct",
             val: "35.1%",
             color: "#4285F4"
           }, {
-            label: "TikTok",
+            label: "Bing / Other",
             val: "14.2%",
             color: "#06510bff"
           }, {
-            label: "Snapchat",
+            label: "Referalls",
             val: "3.3%",
-            color: "#FFFC00"
+            color: "#f2b61dff"
           }],
           showBottomSummary: false,
           sx: {
@@ -2108,19 +2106,217 @@ var OrganicSection = function OrganicSection(_ref) {
         xs: 12,
         md: 6,
         children: /*#__PURE__*/jsxRuntime.jsx(GeographyCard, {
-          subtitle: "Organic traffic source locations"
+          subtitle: "Top countries by organic traffic"
         })
       })]
     })]
   });
 };
 
+var EmailTrendCard = function EmailTrendCard(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    value = _ref.value,
+    trend = _ref.trend,
+    series = _ref.series,
+    colors = _ref.colors,
+    _ref$yAxisMax = _ref.yAxisMax,
+    yAxisMax = _ref$yAxisMax === void 0 ? 60 : _ref$yAxisMax,
+    _ref$yAxisTickAmount = _ref.yAxisTickAmount,
+    yAxisTickAmount = _ref$yAxisTickAmount === void 0 ? 3 : _ref$yAxisTickAmount,
+    _ref$yAxisFormatter = _ref.yAxisFormatter,
+    yAxisFormatter = _ref$yAxisFormatter === void 0 ? function (val) {
+      return "".concat(val, "%");
+    } : _ref$yAxisFormatter;
+  var chartOptions = {
+    chart: {
+      type: "area",
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: false
+      },
+      fontFamily: "Inter, sans-serif"
+    },
+    stroke: {
+      curve: "smooth",
+      width: 2,
+      dashArray: series.map(function (s) {
+        return s.dashed ? 5 : 0;
+      })
+    },
+    fill: {
+      type: "gradient",
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.3,
+        opacityTo: 0.8,
+        stops: [0, 90, 100]
+      }
+    },
+    colors: colors,
+    xaxis: {
+      categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
+      labels: {
+        show: true,
+        style: {
+          colors: 'rgba(0, 0, 0, 0.3)',
+          fontSize: '10px'
+        },
+        offsetY: -5
+      },
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      },
+      position: 'bottom'
+    },
+    yaxis: {
+      max: yAxisMax,
+      tickAmount: yAxisTickAmount,
+      labels: {
+        show: true,
+        style: {
+          colors: 'rgba(0, 0, 0, 0.3)',
+          fontSize: '10px'
+        },
+        formatter: yAxisFormatter
+      }
+    },
+    grid: {
+      show: true,
+      borderColor: "rgba(0, 0, 0, 0.05)",
+      strokeDashArray: 0,
+      xaxis: {
+        lines: {
+          show: false
+        }
+      },
+      yaxis: {
+        lines: {
+          show: true
+        }
+      },
+      padding: {
+        left: 10,
+        right: 10,
+        bottom: 0
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    legend: {
+      show: series.length > 1,
+      position: 'bottom',
+      horizontalAlign: 'left',
+      fontSize: '11px',
+      fontFamily: 'Inter, sans-serif',
+      offsetY: -5,
+      markers: {
+        width: 8,
+        height: 8,
+        radius: 12
+      },
+      itemMargin: {
+        horizontal: 10,
+        vertical: 0
+      }
+    },
+    tooltip: {
+      theme: 'light'
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
+    sx: {
+      p: 3,
+      borderRadius: 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      bgcolor: "#fff",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        mb: 1,
+        textAlign: 'left'
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          fontWeight: 700,
+          fontSize: "18px",
+          color: "#000"
+        },
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500
+        },
+        children: subtitle
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        mb: 1
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          fontSize: "28px",
+          fontWeight: 700,
+          color: "#000"
+        },
+        children: value
+      }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+        sx: {
+          bgcolor: "#ebfcf4",
+          color: "#10b981",
+          px: 1,
+          py: 0.4,
+          borderRadius: "100px",
+          fontSize: "12px",
+          fontWeight: 700,
+          display: "flex",
+          alignItems: "center",
+          gap: 0.3
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          style: {
+            fontSize: '10px'
+          },
+          children: "\u25B2"
+        }), " ", trend]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: {
+        flexGrow: 1,
+        height: 150,
+        ml: -2,
+        mr: -1
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
+        options: chartOptions,
+        series: series,
+        type: "area",
+        height: "100%"
+      })
+    })]
+  });
+};
+
 var EmailSection = function EmailSection() {
   var _useState = React.useState("Total raised"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
-  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
   var metricInfo = {
     "Total raised": {
       value: "$48,920",
@@ -2183,14 +2379,6 @@ var EmailSection = function EmailSection() {
       data: [28, 32, 29, 34, 30, 30, 30.35]
     }
   };
-  var selectedInfo = metricInfo[activeMetric];
-  var mainChart = {
-    label: activeMetric,
-    value: selectedInfo.value,
-    trend: selectedInfo.subValue,
-    data: selectedInfo.data,
-    categories: categories
-  };
   var renderCard = function renderCard(title) {
     return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
       title: title,
@@ -2203,12 +2391,8 @@ var EmailSection = function EmailSection() {
       isActive: activeMetric === title,
       sx: {
         flex: 1
-        // border:
-        //   activeMetric === title
-        //     ? "2px solid rgb(99, 99, 230)"
-        //     : "2px solid #f0f0f0",
       }
-    });
+    }, title);
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
@@ -2227,20 +2411,72 @@ var EmailSection = function EmailSection() {
         flexWrap: "wrap"
       },
       children: ["Open rate", "Clicks", "Unique Clicks", "Bounce rate", "Revenue per Click"].map(renderCard)
-    }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+    }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
       container: true,
       spacing: 3,
       sx: {
-        mt: 1
+        mt: 1,
+        mb: 8
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
-        item: mainChart,
-        index: 0,
-        md: 12,
-        type: "area",
-        isPrimary: true,
-        isPremium: true
-      })
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsxRuntime.jsx(EmailTrendCard, {
+          title: "Open rate trend",
+          subtitle: "Daily \xB7 30 days",
+          value: "42.3%",
+          trend: "2.1pp",
+          series: [{
+            name: 'Open Rate',
+            data: [38, 42, 41, 43, 42.3]
+          }],
+          colors: ['rgb(99, 99, 230)'],
+          yAxisMax: 53,
+          yAxisTickAmount: 3
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsxRuntime.jsx(EmailTrendCard, {
+          title: "Clicks trend",
+          subtitle: "Total + unique \xB7 30 days",
+          value: "1,612",
+          trend: "14%",
+          series: [{
+            name: 'Total clicks',
+            data: [56, 112, 80, 150, 112]
+          }, {
+            name: 'Unique clicks',
+            data: [30, 70, 45, 100, 75],
+            dashed: true
+          }],
+          colors: ['#10B981', '#10B981'],
+          yAxisMax: 168,
+          yAxisTickAmount: 3,
+          yAxisFormatter: function yAxisFormatter(val) {
+            return val;
+          }
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsxRuntime.jsx(EmailTrendCard, {
+          title: "Bounce rate trend",
+          subtitle: "Daily \xB7 lower is better",
+          value: "1.8%",
+          trend: "0.3pp",
+          series: [{
+            name: 'Bounce Rate',
+            data: [2.2, 1.9, 2.0, 1.7, 1.8]
+          }],
+          colors: ['#f2994a'],
+          yAxisMax: 2.5,
+          yAxisTickAmount: 3
+        })
+      })]
     }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
       container: true,
       spacing: 3,
@@ -4254,24 +4490,43 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 },
                 children: row.val4
               }), columns.length > 5 && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-                children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+                children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
                   sx: {
                     display: "flex",
                     alignItems: "center",
-                    gap: 0.5,
-                    color: row.trendType === "up" ? "#22C55E" : "#EF4444",
-                    fontSize: "12px",
-                    fontWeight: 600
+                    gap: 0.5
                   },
-                  children: [row.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {
-                    sx: {
-                      fontSize: "14px"
-                    }
-                  }) : /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingDown, {
-                    sx: {
-                      fontSize: "14px"
-                    }
-                  }), row.trendLabel]
+                  children: row.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                      sx: {
+                        fontSize: "14px",
+                        color: "#22C55E"
+                      },
+                      children: "\u25B2"
+                    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                      sx: {
+                        fontSize: "12px",
+                        color: "#22C55E",
+                        fontWeight: 700
+                      },
+                      children: row.trendLabel
+                    })]
+                  }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                      sx: {
+                        fontSize: "14px",
+                        color: "#EF4444"
+                      },
+                      children: "\u25BC"
+                    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+                      sx: {
+                        fontSize: "12px",
+                        color: "#EF4444",
+                        fontWeight: 700
+                      },
+                      children: row.trendLabel
+                    })]
+                  })
                 }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
                   sx: {
                     display: "inline-block",
@@ -4912,8 +5167,26 @@ var MetricDonutCard = function MetricDonutCard(_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 DonationTypeBarChart = function DonationTypeBarChart(_ref) {
-  var sx = _ref.sx;
+  var _donationTypeData$sum, _donationTypeData$sum2, _donationTypeData$sum3, _donationTypeData$sum4, _donationTypeData$sum5, _donationTypeData$sum6;
+  var sx = _ref.sx,
+    _ref$donationTypeData = _ref.donationTypeData,
+    donationTypeData = _ref$donationTypeData === void 0 ? [] : _ref$donationTypeData;
+  var recurringColor = (donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum = donationTypeData.summary) === null || _donationTypeData$sum === void 0 || (_donationTypeData$sum = _donationTypeData$sum.recurring) === null || _donationTypeData$sum === void 0 ? void 0 : _donationTypeData$sum.color) || "rgb(99, 99, 230)";
+  var oneTimeColor = (donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum2 = donationTypeData.summary) === null || _donationTypeData$sum2 === void 0 || (_donationTypeData$sum2 = _donationTypeData$sum2.oneTime) === null || _donationTypeData$sum2 === void 0 ? void 0 : _donationTypeData$sum2.color) || "#10B981";
   var chartOptions = {
     chart: {
       type: "bar",
@@ -4938,7 +5211,7 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
     dataLabels: {
       enabled: true,
       formatter: function formatter(val) {
-        return "$".concat(val, "K");
+        return "$".concat(formatNumber(val));
       },
       offsetY: -22,
       style: {
@@ -4953,7 +5226,7 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
       colors: ["transparent"]
     },
     xaxis: {
-      categories: ["Wk 1", "Wk 2", "Wk 3", "May 3-4"],
+      categories: (donationTypeData === null || donationTypeData === void 0 ? void 0 : donationTypeData.categories) || [],
       axisBorder: {
         show: false
       },
@@ -4973,7 +5246,7 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
       tickAmount: 3,
       labels: {
         formatter: function formatter(val) {
-          return val === 40 ? "" : "$".concat(val, "K");
+          return "$".concat(formatNumber(val));
         },
         style: {
           colors: "rgba(0, 0, 0, 0.4)",
@@ -4984,7 +5257,7 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
     fill: {
       opacity: 1
     },
-    colors: ["rgb(99, 99, 230)", "#10B981"],
+    colors: [recurringColor, oneTimeColor],
     grid: {
       borderColor: "#f1f1f1",
       strokeDashArray: 4,
@@ -5004,18 +5277,12 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
     tooltip: {
       y: {
         formatter: function formatter(val) {
-          return "$".concat(val, "K");
+          return "$".concat(formatNumber(val));
         }
       }
     }
   };
-  var series = [{
-    name: "Recurring",
-    data: [9.2, 11.8, 13.4, 4.9]
-  }, {
-    name: "One-time",
-    data: [32.4, 41.2, 46.8, 14.3]
-  }];
+  var series = (donationTypeData === null || donationTypeData === void 0 ? void 0 : donationTypeData.series) || [];
   return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
     sx: _objectSpread2({
       bgcolor: "#fff",
@@ -5075,14 +5342,14 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
               color: "rgba(0, 0, 0, 0.5)",
               fontWeight: 500
             },
-            children: "Recurring"
-          }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            children: donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum3 = donationTypeData.summary) === null || _donationTypeData$sum3 === void 0 || (_donationTypeData$sum3 = _donationTypeData$sum3.recurring) === null || _donationTypeData$sum3 === void 0 ? void 0 : _donationTypeData$sum3.label
+          }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
             sx: {
               fontSize: "13px",
               fontWeight: 600,
               color: "#000"
             },
-            children: "$54,937"
+            children: ["$", formatNumber((donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum4 = donationTypeData.summary) === null || _donationTypeData$sum4 === void 0 || (_donationTypeData$sum4 = _donationTypeData$sum4.recurring) === null || _donationTypeData$sum4 === void 0 ? void 0 : _donationTypeData$sum4.total) || 0)]
           })]
         }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
           sx: {
@@ -5103,14 +5370,14 @@ var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
               color: "rgba(0, 0, 0, 0.5)",
               fontWeight: 500
             },
-            children: "One-time"
-          }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+            children: donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum5 = donationTypeData.summary) === null || _donationTypeData$sum5 === void 0 || (_donationTypeData$sum5 = _donationTypeData$sum5.oneTime) === null || _donationTypeData$sum5 === void 0 ? void 0 : _donationTypeData$sum5.label
+          }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
             sx: {
               fontSize: "13px",
               fontWeight: 600,
               color: "#000"
             },
-            children: "$188,001"
+            children: ["$", formatNumber((donationTypeData === null || donationTypeData === void 0 || (_donationTypeData$sum6 = donationTypeData.summary) === null || _donationTypeData$sum6 === void 0 || (_donationTypeData$sum6 = _donationTypeData$sum6.oneTime) === null || _donationTypeData$sum6 === void 0 ? void 0 : _donationTypeData$sum6.total) || 0)]
           })]
         })]
       })]
@@ -5244,7 +5511,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
     sx: _objectSpread2({
       bgcolor: "#fff",
-      borderRadius: "24px",
+      borderRadius: 4,
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       p: 3,
@@ -5403,7 +5670,8 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
         height: 160,
-        width: "100%"
+        width: "100%",
+        flexShrink: 0
       },
       children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
         options: chartOptions,
@@ -5415,19 +5683,6 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_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 OverallSection = function OverallSection(_ref) {
   var _apiData$totalRaisedP, _apiData$netRaisedCar, _apiData$netRaisedPre, _apiData$averageDonat, _apiData$averageDonat2, _apiData$roasCard, _apiData$roasCardPrev;
   var _ref$apiData = _ref.apiData,
@@ -5441,6 +5696,7 @@ var OverallSection = function OverallSection(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
+  var donationTypeData = (apiData === null || apiData === void 0 ? void 0 : apiData.donationType) || [];
   var allCharts = [].concat(_toConsumableArray(primaryCharts), _toConsumableArray(secondaryCharts), _toConsumableArray(tertiaryCharts), _toConsumableArray(quaternaryCharts));
   var getExtendedCharts = function getExtendedCharts() {
     var charts = _toConsumableArray(allCharts);
@@ -5519,6 +5775,10 @@ var OverallSection = function OverallSection(_ref) {
     }
   };
   var activeCampaignsData = (apiData === null || apiData === void 0 ? void 0 : apiData.activeCampaigns) || [];
+  var donorMix = (apiData === null || apiData === void 0 ? void 0 : apiData.donorMix) || {};
+  var totalDonorsMix = (donorMix.newDonors || 0) + (donorMix.returningDonors || 0);
+  var newDonorsPerc = totalDonorsMix > 0 ? Math.round(donorMix.newDonors / totalDonorsMix * 100) : 0;
+  var returningDonorsPerc = totalDonorsMix > 0 ? Math.round(donorMix.returningDonors / totalDonorsMix * 100) : 0;
   var renderCard = function renderCard(title) {
     return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
       title: title,
@@ -5881,22 +6141,22 @@ var OverallSection = function OverallSection(_ref) {
         children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
           title: "Donor mix",
           subtitle: "Acquisition vs retention",
-          series: [68, 32],
+          series: [donorMix.newDonors || 0, donorMix.returningDonors || 0],
           labels: ["New donors", "Returning"],
           colors: ["rgb(99, 99, 230)", "#10B981"],
           centerLabel: "donors",
-          centerValue: "215",
+          centerValue: totalDonorsMix.toString(),
           items: [{
             label: "New donors",
-            val: "146 · 68%",
+            val: "".concat(donorMix.newDonors || 0, " \xB7 ").concat(newDonorsPerc, "%"),
             color: "rgb(99, 99, 230)"
           }, {
             label: "Returning",
-            val: "69 · 32%",
+            val: "".concat(donorMix.returningDonors || 0, " \xB7 ").concat(returningDonorsPerc, "%"),
             color: "#10B981"
           }],
-          bottomSummaryValue: "$130.58",
-          bottomSummaryTrend: "8.4% vs last month",
+          bottomSummaryValue: "$".concat(donorMix.avgGift || 0),
+          bottomSummaryTrend: "".concat(donorMix.donorMixPrev || 0, "% vs ").concat(dateName || "last month"),
           sx: {
             width: "100%"
           }
@@ -5906,7 +6166,8 @@ var OverallSection = function OverallSection(_ref) {
       container: true,
       spacing: 3,
       sx: {
-        mt: 2
+        mt: 2,
+        alignItems: "stretch"
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
@@ -5914,8 +6175,9 @@ var OverallSection = function OverallSection(_ref) {
         md: 3,
         children: /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
           sx: {
-            minHeight: 330
-          }
+            height: 330
+          },
+          donationTypeData: donationTypeData
         })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
@@ -5923,7 +6185,7 @@ var OverallSection = function OverallSection(_ref) {
         md: 3,
         children: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
           sx: {
-            minHeight: 330
+            height: 330
           }
         })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
@@ -5932,7 +6194,7 @@ var OverallSection = function OverallSection(_ref) {
         md: 3,
         children: /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {
           sx: {
-            minHeight: 330
+            height: 330
           }
         })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
@@ -5941,7 +6203,7 @@ var OverallSection = function OverallSection(_ref) {
         md: 3,
         children: /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {
           sx: {
-            minHeight: 330
+            height: 330
           }
         })
       })]
@@ -5949,8 +6211,7 @@ var OverallSection = function OverallSection(_ref) {
       container: true,
       spacing: 3,
       sx: {
-        mt: 1,
-        mb: 2
+        mt: 1
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,