@ammarkhalidfarooq/dashboard-package 0.3.3 → 0.3.4

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { Suspense, lazy, useState } from 'react';
+import React, { Suspense, lazy, useState, useEffect } from 'react';
 import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, LinearProgress, Divider, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Avatar } from '@mui/material';
 import { MoreHoriz, PaidOutlined, Adjust, FavoriteOutlined, SearchOutlined, PeopleAltOutlined, HighlightOff, NearMe, Email, IndeterminateCheckBoxOutlined, NotInterested, InfoOutlined, MoreVert, Check, Settings, TrendingUp, TrendingDown, PersonOutlined } from '@mui/icons-material';
 import { createTheme, useTheme } from '@mui/material/styles';
@@ -8,6 +8,49 @@ import Grid$1 from '@mui/material/Grid';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 
+var theme = createTheme({
+  cssVariables: true,
+  // Enable CSS variables for better SSR support
+  typography: {
+    fontFamily: ["var(--font-league-spartan)", "var(--font-noto-sans-arabic)",
+    // Added as a fallback for Arabic text
+    "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"].join(",")
+  },
+  palette: {
+    primary: {
+      main: "#6363E6",
+      mainLight: "#F7F7FF",
+      light: "#FFFFFF",
+      gray: "#A1A1A8",
+      lightGreen: "#E1FBF2",
+      green: "#0CAB72",
+      red: "#E61D1D",
+      lightRed: "#FFEDED",
+      lightGray: "#E9E9EB",
+      darkGray: "#606062",
+      dark: "#090909"
+    },
+    text: {
+      primary: "#666666"
+    },
+    secondary: {
+      main: "#E0C2FF",
+      light: "#F5EBFF",
+      // dark: will be calculated from palette.secondary.main,
+      contrastText: "#47008F"
+    },
+    white: {
+      main: "#FFFFFF",
+      light: "#F8F8F8"
+    },
+    gradients: {
+      primary: "linear-gradient(90deg, #6363E6 0.05%, #59C9F9 99.96%)",
+      secondary: "linear-gradient(180deg, #E9E9FF 0%, #C9EEFF 100%)"
+      // You can add more gradients if needed
+    }
+  }
+});
+
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
   for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
@@ -118,49 +161,6 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-var theme = createTheme({
-  cssVariables: true,
-  // Enable CSS variables for better SSR support
-  typography: {
-    fontFamily: ["var(--font-league-spartan)", "var(--font-noto-sans-arabic)",
-    // Added as a fallback for Arabic text
-    "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"].join(",")
-  },
-  palette: {
-    primary: {
-      main: "#6363E6",
-      mainLight: "#F7F7FF",
-      light: "#FFFFFF",
-      gray: "#A1A1A8",
-      lightGreen: "#E1FBF2",
-      green: "#0CAB72",
-      red: "#E61D1D",
-      lightRed: "#FFEDED",
-      lightGray: "#E9E9EB",
-      darkGray: "#606062",
-      dark: "#090909"
-    },
-    text: {
-      primary: "#666666"
-    },
-    secondary: {
-      main: "#E0C2FF",
-      light: "#F5EBFF",
-      // dark: will be calculated from palette.secondary.main,
-      contrastText: "#47008F"
-    },
-    white: {
-      main: "#FFFFFF",
-      light: "#F8F8F8"
-    },
-    gradients: {
-      primary: "linear-gradient(90deg, #6363E6 0.05%, #59C9F9 99.96%)",
-      secondary: "linear-gradient(180deg, #E9E9FF 0%, #C9EEFF 100%)"
-      // You can add more gradients if needed
-    }
-  }
-});
-
 var MetricSelector = function MetricSelector(_ref) {
   var metric = _ref.metric,
     onMetricChange = _ref.onMetricChange,
@@ -608,95 +608,17 @@ var RenderChartCard = function RenderChartCard(_ref) {
   }, item.label + index);
 };
 
-var PerformanceSection$1 = /*#__PURE__*/lazy(function () {
-  return Promise.resolve().then(function () { return index$4; });
-});
-var RecurringRevenueSection$1 = /*#__PURE__*/lazy(function () {
-  return Promise.resolve().then(function () { return index$3; });
-});
-var RecurringPlans$1 = /*#__PURE__*/lazy(function () {
-  return Promise.resolve().then(function () { return index$1; });
-});
-var DonorBehavior$1 = /*#__PURE__*/lazy(function () {
-  return Promise.resolve().then(function () { return index$2; });
-});
-var UpdateEmails$1 = /*#__PURE__*/lazy(function () {
-  return Promise.resolve().then(function () { return index; });
-});
 var NewOverview$1 = /*#__PURE__*/lazy(function () {
-  return Promise.resolve().then(function () { return index$5; });
+  return Promise.resolve().then(function () { return index; });
 });
 var Dashboard = function Dashboard(_ref) {
-  _ref.title;
-    var _ref$initialMetric = _ref.initialMetric,
-    initialMetric = _ref$initialMetric === void 0 ? "Revenue" : _ref$initialMetric,
-    _ref$revenueData = _ref.revenueData,
-    revenueData = _ref$revenueData === void 0 ? [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000] : _ref$revenueData,
-    _ref$donationsData = _ref.donationsData,
-    donationsData = _ref$donationsData === void 0 ? [15, 22, 18, 30, 25, 35, 42, 45, 28] : _ref$donationsData,
-    _ref$categories = _ref.categories,
-    categories = _ref$categories === void 0 ? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"] : _ref$categories,
-    _ref$apiData = _ref.apiData,
+  var _ref$apiData = _ref.apiData,
     apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
-    _ref$performanceData = _ref.performanceData,
-    performanceData = _ref$performanceData === void 0 ? {} : _ref$performanceData;
-  var _React$useState = React.useState(initialMetric),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    metric = _React$useState2[0];
-    _React$useState2[1];
-  var currentData = metric === "Revenue" ? revenueData : donationsData;
-  [{
-    label: "Total Revenue",
-    value: "$9,200.00",
-    subValue: "Total Donations: 215",
-    data: currentData,
-    categories: categories,
-    showSelector: true
-  }, {
-    label: "First installments",
-    value: "$510.00",
-    data: currentData.slice(-7),
-    categories: categories.slice(-7)
-  }, {
-    label: "One-time donations",
-    value: "$7,100.00",
-    data: currentData,
-    categories: categories
-  }];
-  [{
-    label: "New vs Returning Donors",
-    series: [{
-      name: "New Donors",
-      data: [10, 15, 12, 20, 18, 25, 30, 35, 20]
-    }, {
-      name: "Returning",
-      data: [5, 7, 6, 10, 7, 10, 12, 10, 8]
-    }],
-    categories: categories,
-    stacked: true,
-    footer: {
-      left: "New donors: 195",
-      right: "Returning donors: 20"
-    }
-  }, {
-    label: "Average Donation Amount",
-    value: "$42.80",
-    data: currentData.map(function (v) {
-      return v * 0.5;
-    }),
-    categories: categories
-  }, {
-    label: "Tip Amount",
-    value: "$1,250.00",
-    subValue: "Number of Tips: 110",
-    data: currentData.map(function (v) {
-      return v * 0.2;
-    }),
-    categories: categories
-  }];
-  return /*#__PURE__*/jsxs(ThemeProvider, {
+    _ref$overviewType = _ref.overviewType,
+    overviewType = _ref$overviewType === void 0 ? "overall" : _ref$overviewType;
+  return /*#__PURE__*/jsx(ThemeProvider, {
     theme: theme,
-    children: [/*#__PURE__*/jsx(Suspense, {
+    children: /*#__PURE__*/jsx(Suspense, {
       fallback: /*#__PURE__*/jsx(Box, {
         sx: {
           py: 5,
@@ -705,65 +627,10 @@ var Dashboard = function Dashboard(_ref) {
         children: /*#__PURE__*/jsx(CircularProgress, {})
       }),
       children: /*#__PURE__*/jsx(NewOverview$1, {
-        apiData: apiData
-      })
-    }), /*#__PURE__*/jsx(Suspense, {
-      fallback: /*#__PURE__*/jsx(Box, {
-        sx: {
-          py: 5,
-          textAlign: 'center'
-        },
-        children: /*#__PURE__*/jsx(CircularProgress, {})
-      }),
-      children: /*#__PURE__*/jsx(PerformanceSection$1, {
         apiData: apiData,
-        performanceData: performanceData
-      })
-    }), /*#__PURE__*/jsx(Suspense, {
-      fallback: /*#__PURE__*/jsx(Box, {
-        sx: {
-          py: 5,
-          textAlign: 'center'
-        },
-        children: /*#__PURE__*/jsx(CircularProgress, {})
-      }),
-      children: /*#__PURE__*/jsx(RecurringPlans$1, {
-        apiData: apiData
-      })
-    }), /*#__PURE__*/jsx(Suspense, {
-      fallback: /*#__PURE__*/jsx(Box, {
-        sx: {
-          py: 5,
-          textAlign: 'center'
-        },
-        children: /*#__PURE__*/jsx(CircularProgress, {})
-      }),
-      children: /*#__PURE__*/jsx(RecurringRevenueSection$1, {
-        apiData: apiData
-      })
-    }), /*#__PURE__*/jsx(Suspense, {
-      fallback: /*#__PURE__*/jsx(Box, {
-        sx: {
-          py: 5,
-          textAlign: 'center'
-        },
-        children: /*#__PURE__*/jsx(CircularProgress, {})
-      }),
-      children: /*#__PURE__*/jsx(DonorBehavior$1, {
-        apiData: apiData
-      })
-    }), /*#__PURE__*/jsx(Suspense, {
-      fallback: /*#__PURE__*/jsx(Box, {
-        sx: {
-          py: 5,
-          textAlign: 'center'
-        },
-        children: /*#__PURE__*/jsx(CircularProgress, {})
-      }),
-      children: /*#__PURE__*/jsx(UpdateEmails$1, {
-        apiData: apiData
+        activeSection: overviewType
       })
-    })]
+    })
   });
 };
 
@@ -2319,7 +2186,8 @@ var PaidSection$2 = /*#__PURE__*/lazy(function () {
 });
 var NewOverview = function NewOverview(_ref) {
   var _ref$apiData = _ref.apiData,
-    apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
+    activeSectionProp = _ref.activeSection;
   var initialMetric = "Revenue";
   var revenueData = (apiData === null || apiData === void 0 ? void 0 : apiData.revenueData) || [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
   var donationsData = (apiData === null || apiData === void 0 ? void 0 : apiData.donationsData) || [15, 22, 18, 30, 25, 35, 42, 45, 28];
@@ -2332,6 +2200,12 @@ var NewOverview = function NewOverview(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     activeSection = _useState4[0],
     setActiveSection = _useState4[1];
+  useEffect(function () {
+    if (activeSectionProp) {
+      var capitalized = activeSectionProp.charAt(0).toUpperCase() + activeSectionProp.slice(1).toLowerCase();
+      setActiveSection(capitalized);
+    }
+  }, [activeSectionProp]);
   var currentData = metric === "Revenue" ? revenueData : donationsData;
   var oneTimeData = (apiData === null || apiData === void 0 ? void 0 : apiData.oneTimeDonations) || [];
   var oneTimeValues = oneTimeData.length > 0 ? oneTimeData.map(function (item) {
@@ -2491,71 +2365,14 @@ var NewOverview = function NewOverview(_ref) {
     data: [8, 9, 11, 10, 10, 12, 9, 11, 10],
     categories: categories
   }];
-  return /*#__PURE__*/jsxs(Box, {
+  return /*#__PURE__*/jsx(Box, {
     sx: {
       minHeight: "100vh",
       display: "flex",
       flexDirection: "column",
       alignItems: "stretch"
     },
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: 'flex',
-        justifyContent: "space-between"
-      },
-      children: [/*#__PURE__*/jsx(Typography, {
-        variant: "h4",
-        gutterBottom: true,
-        sx: {
-          fontWeight: "bold",
-          color: "primary.dark",
-          mb: 2,
-          mt: 2
-        },
-        children: "Overview"
-      }), /*#__PURE__*/jsxs(Box, {
-        children: [/*#__PURE__*/jsx(Button, {
-          variant: activeSection === "Overall" ? "contained" : "outlined",
-          onClick: function onClick() {
-            return setActiveSection("Overall");
-          },
-          sx: {
-            borderRadius: "48px",
-            marginRight: "10px"
-          },
-          children: "Overall"
-        }), /*#__PURE__*/jsx(Button, {
-          variant: activeSection === "Paid" ? "contained" : "outlined",
-          onClick: function onClick() {
-            return setActiveSection("Paid");
-          },
-          sx: {
-            borderRadius: "48px",
-            marginRight: "10px"
-          },
-          children: "Paid"
-        }), /*#__PURE__*/jsx(Button, {
-          variant: activeSection === "Organic" ? "contained" : "outlined",
-          onClick: function onClick() {
-            return setActiveSection("Organic");
-          },
-          sx: {
-            borderRadius: "48px",
-            marginRight: "10px"
-          },
-          children: "Organic"
-        }), /*#__PURE__*/jsx(Button, {
-          variant: activeSection === "Email" ? "contained" : "outlined",
-          onClick: function onClick() {
-            return setActiveSection("Email");
-          },
-          sx: {
-            borderRadius: "48px"
-          },
-          children: "Email"
-        })]
-      })]
-    }), /*#__PURE__*/jsxs(Suspense, {
+    children: /*#__PURE__*/jsxs(Suspense, {
       fallback: /*#__PURE__*/jsx(Box, {
         sx: {
           display: "flex",
@@ -2584,11 +2401,11 @@ var NewOverview = function NewOverview(_ref) {
         sx: {},
         children: /*#__PURE__*/jsx(EmailSection, {})
       })]
-    })]
+    })
   });
 };
 
-var index$5 = /*#__PURE__*/Object.freeze({
+var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: NewOverview
 });
@@ -2767,11 +2584,6 @@ var PerformanceSection = function PerformanceSection(_ref) {
   });
 };
 
-var index$4 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: PerformanceSection
-});
-
 var data$1 = [{
   range: "$0 – $12",
   plans: 21,
@@ -3065,11 +2877,6 @@ var RecurringRevenueSection = function RecurringRevenueSection() {
   });
 };
 
-var index$3 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: RecurringRevenueSection
-});
-
 var UTM_COLORS = ["#1877F2",
 // Facebook blue
 "#4267B2",
@@ -3078,7 +2885,7 @@ var UTM_COLORS = ["#1877F2",
 // Instagram pink/purple
 "#000000" // Threads black
 ];
-var rawData$1 = [{
+var rawData = [{
   source: "facebook",
   donations: 156,
   totalRaised: 4520.50,
@@ -3111,14 +2918,14 @@ var rawData$1 = [{
     Donations: [2, 5, 8, 12, 5, 112, 145, 85, 50, 80]
   }
 }];
-var SORT_OPTIONS$1 = [{
+var SORT_OPTIONS = [{
   label: "Sort ascending",
   value: "asc"
 }, {
   label: "Sort descending",
   value: "desc"
 }];
-var dateCategories$1 = Array.from({
+var dateCategories = Array.from({
   length: 10
 }, function (_, i) {
   var d = new Date(2024, 2, 16 + i);
@@ -3143,14 +2950,14 @@ var UTMPerformance = function UTMPerformance() {
     _useState8 = _slicedToArray(_useState7, 2),
     parameter = _useState8[0],
     setParameter = _useState8[1];
-  var sortedData = [].concat(rawData$1).sort(function (a, b) {
+  var sortedData = [].concat(rawData).sort(function (a, b) {
     var valA = metric === "Revenue" ? a.totalRaised : a.donations;
     var valB = metric === "Revenue" ? b.totalRaised : b.donations;
     if (sortMode === "asc") return valA - valB;
     if (sortMode === "desc") return valB - valA;
     return 0;
   });
-  var chartSeries = rawData$1.map(function (d, i) {
+  var chartSeries = rawData.map(function (d, i) {
     return {
       name: d.source,
       data: d.series[metric],
@@ -3177,7 +2984,7 @@ var UTMPerformance = function UTMPerformance() {
     },
     colors: UTM_COLORS,
     xaxis: {
-      categories: dateCategories$1,
+      categories: dateCategories,
       tickAmount: 2,
       labels: {
         style: {
@@ -3221,7 +3028,7 @@ var UTMPerformance = function UTMPerformance() {
       custom: function custom(_ref) {
         var dataPointIndex = _ref.dataPointIndex,
           w = _ref.w;
-        var date = dateCategories$1[dataPointIndex];
+        var date = dateCategories[dataPointIndex];
         var items = w.config.series.map(function (s, i) {
           var val = s.data[dataPointIndex];
           return "<div style=\"display:flex;justify-content:space-between;gap:24px;padding:3px 0;font-size:12px\">\n            <span style=\"display:flex;align-items:center;gap:6px\">\n              <span style=\"display:inline-block;width:8px;height:8px;border-radius:50%;background:".concat(UTM_COLORS[i], "\"></span>\n              <span style=\"color:#333\">").concat(s.name, "</span>\n            </span>\n            <span style=\"font-weight:600;color:#111\">").concat(metric === "Revenue" ? "$".concat(val.toFixed(2)) : val, "</span>\n          </div>");
@@ -3357,7 +3164,7 @@ var UTMPerformance = function UTMPerformance() {
             })
           }), /*#__PURE__*/jsx(TableBody, {
             children: sortedData.map(function (row, i) {
-              var colorIdx = rawData$1.findIndex(function (d) {
+              var colorIdx = rawData.findIndex(function (d) {
                 return d.source === row.source;
               });
               var color = UTM_COLORS[colorIdx] || "#ccc";
@@ -3420,7 +3227,7 @@ var UTMPerformance = function UTMPerformance() {
           minWidth: 200
         }
       },
-      children: SORT_OPTIONS$1.map(function (opt) {
+      children: SORT_OPTIONS.map(function (opt) {
         return /*#__PURE__*/jsxs(MenuItem, {
           onClick: function onClick() {
             setSortMode(opt.value);
@@ -3678,12 +3485,7 @@ var DonorBehavior = function DonorBehavior() {
   });
 };
 
-var index$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: DonorBehavior
-});
-
-var miniChartOptions$3 = function miniChartOptions() {
+var miniChartOptions = function miniChartOptions() {
   var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#6363e6";
   return {
     chart: {
@@ -3713,11 +3515,11 @@ var miniChartOptions$3 = function miniChartOptions() {
     }
   };
 };
-var MiniChart$3 = function MiniChart(_ref) {
+var MiniChart = function MiniChart(_ref) {
   var data = _ref.data,
     color = _ref.color;
   return /*#__PURE__*/jsx(ReactApexChart, {
-    options: miniChartOptions$3(color),
+    options: miniChartOptions(color),
     series: [{
       data: data
     }],
@@ -3726,7 +3528,7 @@ var MiniChart$3 = function MiniChart(_ref) {
     height: 40
   });
 };
-var rows$3 = [{
+var rows = [{
   title: "Reminder 1 (1hr)",
   abandoned: "1,240",
   sent: "1,240",
@@ -3769,7 +3571,7 @@ var rows$3 = [{
   recovered: "25",
   recoveredData: [1, 1, 2, 1, 2, 2, 2, 2, 3]
 }];
-var aggregates$3 = {
+var aggregates = {
   abandoned: "1,240",
   sent: "3,469",
   sentData: [2, 3, 4, 5, 4, 6, 5, 7, 8],
@@ -3786,14 +3588,14 @@ var aggregates$3 = {
   recovered: "174",
   recoveredData: [2, 3, 4, 5, 4, 6, 5, 7, 6]
 };
-var BORDER$3 = "1px solid #e0e0e0";
-var headerCellSx$3 = {
+var BORDER = "1px solid #e0e0e0";
+var headerCellSx = {
   fontWeight: 900,
   fontSize: "0.78rem",
   color: "#111",
   bgcolor: "#f3f3f3",
-  borderBottom: BORDER$3,
-  borderRight: BORDER$3,
+  borderBottom: BORDER,
+  borderRight: BORDER,
   py: "20px",
   px: "5px",
   lineHeight: 1.4,
@@ -3802,11 +3604,11 @@ var headerCellSx$3 = {
     borderRight: 0
   }
 };
-var cellSx$3 = {
+var cellSx = {
   fontSize: "0.85rem",
   color: "#333",
-  borderBottom: BORDER$3,
-  borderRight: BORDER$3,
+  borderBottom: BORDER,
+  borderRight: BORDER,
   py: "10px",
   px: "5px",
   verticalAlign: "middle",
@@ -3815,7 +3617,7 @@ var cellSx$3 = {
     borderRight: 0
   }
 };
-var aggCellSx$3 = _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
+var aggCellSx = _objectSpread2(_objectSpread2({}, cellSx), {}, {
   bgcolor: "#f3f3f3",
   fontWeight: 900
 });
@@ -3890,7 +3692,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
           sx: {
             borderCollapse: "separate",
             borderSpacing: 0,
-            border: BORDER$3,
+            border: BORDER,
             borderRadius: "12px",
             overflow: "hidden",
             width: "100%",
@@ -3899,36 +3701,36 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
           children: [/*#__PURE__*/jsx(TableHead, {
             children: /*#__PURE__*/jsxs(TableRow, {
               children: [/*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx$3), {}, {
+                sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
                   textAlign: "left",
                   minWidth: 160
                 }),
                 children: "Reminder Email"
               }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$3,
+                sx: headerCellSx,
                 children: "Abandoned Count"
               }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$3,
+                sx: headerCellSx,
                 children: "Emails Sent"
               }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$3,
+                sx: headerCellSx,
                 children: "Open Rate (No.)"
               }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$3,
+                sx: headerCellSx,
                 children: "Click Rate (No.)"
               }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$3,
+                sx: headerCellSx,
                 children: "Recovery Rate"
               }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$3,
+                sx: headerCellSx,
                 children: "Recovered Revenue"
               }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$3,
+                sx: headerCellSx,
                 children: "Recovered Donations"
               })]
             })
           }), /*#__PURE__*/jsxs(TableBody, {
-            children: [rows$3.map(function (row, i) {
+            children: [rows.map(function (row, i) {
               return /*#__PURE__*/jsxs(TableRow, {
                 sx: {
                   "&:hover": {
@@ -3936,19 +3738,19 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   }
                 },
                 children: [/*#__PURE__*/jsx(TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
+                  sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
                     textAlign: "left",
                     fontWeight: 500
                   }),
                   children: row.title
                 }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$3,
+                  sx: cellSx,
                   children: row.abandoned
                 }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$3,
+                  sx: cellSx,
                   children: row.sent
                 }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$3,
+                  sx: cellSx,
                   children: [/*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 500,
@@ -3962,7 +3764,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                     children: row.openCount
                   })]
                 }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$3,
+                  sx: cellSx,
                   children: [/*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 500,
@@ -3976,7 +3778,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                     children: row.clickCount
                   })]
                 }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$3,
+                  sx: cellSx,
                   children: [/*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 500,
@@ -3986,12 +3788,12 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                       display: "flex",
                       justifyContent: "center"
                     },
-                    children: /*#__PURE__*/jsx(MiniChart$3, {
+                    children: /*#__PURE__*/jsx(MiniChart, {
                       data: row.recoveryData
                     })
                   })]
                 }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$3,
+                  sx: cellSx,
                   children: [/*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 500,
@@ -4001,12 +3803,12 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                       display: "flex",
                       justifyContent: "center"
                     },
-                    children: /*#__PURE__*/jsx(MiniChart$3, {
+                    children: /*#__PURE__*/jsx(MiniChart, {
                       data: row.revenueData
                     })
                   })]
                 }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$3,
+                  sx: cellSx,
                   children: [/*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 500,
@@ -4016,7 +3818,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                       display: "flex",
                       justifyContent: "center"
                     },
-                    children: /*#__PURE__*/jsx(MiniChart$3, {
+                    children: /*#__PURE__*/jsx(MiniChart, {
                       data: row.recoveredData
                     })
                   })]
@@ -4029,7 +3831,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                 }
               },
               children: [/*#__PURE__*/jsxs(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, aggCellSx$3), {}, {
+                sx: _objectSpread2(_objectSpread2({}, aggCellSx), {}, {
                   textAlign: "left"
                 }),
                 children: [/*#__PURE__*/jsx(Typography, {
@@ -4042,14 +3844,14 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: "(Mar 3 - Apr 3)"
                 })]
               }), /*#__PURE__*/jsx(TableCell, {
-                sx: aggCellSx$3,
+                sx: aggCellSx,
                 children: /*#__PURE__*/jsx(Typography, {
                   variant: "body2",
                   fontWeight: 700,
-                  children: aggregates$3.abandoned
+                  children: aggregates.abandoned
                 })
               }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$3,
+                sx: aggCellSx,
                 children: [/*#__PURE__*/jsx(Box, {
                   sx: {
                     minHeight: 42
@@ -4057,15 +3859,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: /*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 700,
-                    children: aggregates$3.sent
+                    children: aggregates.sent
                   })
                 }), /*#__PURE__*/jsx(Box, {
                   sx: {
                     display: "flex",
                     justifyContent: "center"
                   },
-                  children: /*#__PURE__*/jsx(MiniChart$3, {
-                    data: aggregates$3.sentData
+                  children: /*#__PURE__*/jsx(MiniChart, {
+                    data: aggregates.sentData
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   variant: "caption",
@@ -4073,7 +3875,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: "Mar 3 - Apr 3"
                 })]
               }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$3,
+                sx: aggCellSx,
                 children: [/*#__PURE__*/jsxs(Box, {
                   sx: {
                     minHeight: 42
@@ -4081,22 +3883,22 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: [/*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 700,
-                    children: aggregates$3.openRate
+                    children: aggregates.openRate
                   }), /*#__PURE__*/jsx(Typography, {
                     variant: "caption",
                     color: "text.secondary",
                     sx: {
                       fontWeight: 700
                     },
-                    children: aggregates$3.openCount
+                    children: aggregates.openCount
                   })]
                 }), /*#__PURE__*/jsx(Box, {
                   sx: {
                     display: "flex",
                     justifyContent: "center"
                   },
-                  children: /*#__PURE__*/jsx(MiniChart$3, {
-                    data: aggregates$3.openRateData
+                  children: /*#__PURE__*/jsx(MiniChart, {
+                    data: aggregates.openRateData
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   variant: "caption",
@@ -4104,7 +3906,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: "Mar 3 - Apr 3"
                 })]
               }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$3,
+                sx: aggCellSx,
                 children: [/*#__PURE__*/jsxs(Box, {
                   sx: {
                     minHeight: 42
@@ -4112,22 +3914,22 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: [/*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 700,
-                    children: aggregates$3.clickRate
+                    children: aggregates.clickRate
                   }), /*#__PURE__*/jsx(Typography, {
                     variant: "caption",
                     color: "text.secondary",
                     sx: {
                       fontWeight: 700
                     },
-                    children: aggregates$3.clickCount
+                    children: aggregates.clickCount
                   })]
                 }), /*#__PURE__*/jsx(Box, {
                   sx: {
                     display: "flex",
                     justifyContent: "center"
                   },
-                  children: /*#__PURE__*/jsx(MiniChart$3, {
-                    data: aggregates$3.clickRateData
+                  children: /*#__PURE__*/jsx(MiniChart, {
+                    data: aggregates.clickRateData
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   variant: "caption",
@@ -4135,7 +3937,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: "Mar 3 - Apr 3"
                 })]
               }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$3,
+                sx: aggCellSx,
                 children: [/*#__PURE__*/jsx(Box, {
                   sx: {
                     minHeight: 42
@@ -4143,15 +3945,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: /*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 700,
-                    children: aggregates$3.recoveryRate
+                    children: aggregates.recoveryRate
                   })
                 }), /*#__PURE__*/jsx(Box, {
                   sx: {
                     display: "flex",
                     justifyContent: "center"
                   },
-                  children: /*#__PURE__*/jsx(MiniChart$3, {
-                    data: aggregates$3.recoveryData
+                  children: /*#__PURE__*/jsx(MiniChart, {
+                    data: aggregates.recoveryData
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   variant: "caption",
@@ -4159,7 +3961,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: "Mar 3 - Apr 3"
                 })]
               }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$3,
+                sx: aggCellSx,
                 children: [/*#__PURE__*/jsx(Box, {
                   sx: {
                     minHeight: 42
@@ -4167,15 +3969,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: /*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 700,
-                    children: aggregates$3.revenue
+                    children: aggregates.revenue
                   })
                 }), /*#__PURE__*/jsx(Box, {
                   sx: {
                     display: "flex",
                     justifyContent: "center"
                   },
-                  children: /*#__PURE__*/jsx(MiniChart$3, {
-                    data: aggregates$3.revenueData
+                  children: /*#__PURE__*/jsx(MiniChart, {
+                    data: aggregates.revenueData
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   variant: "caption",
@@ -4183,7 +3985,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: "Mar 3 - Apr 3"
                 })]
               }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$3,
+                sx: aggCellSx,
                 children: [/*#__PURE__*/jsx(Box, {
                   sx: {
                     minHeight: 42
@@ -4191,15 +3993,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
                   children: /*#__PURE__*/jsx(Typography, {
                     variant: "body2",
                     fontWeight: 700,
-                    children: aggregates$3.recovered
+                    children: aggregates.recovered
                   })
                 }), /*#__PURE__*/jsx(Box, {
                   sx: {
                     display: "flex",
                     justifyContent: "center"
                   },
-                  children: /*#__PURE__*/jsx(MiniChart$3, {
-                    data: aggregates$3.recoveredData
+                  children: /*#__PURE__*/jsx(MiniChart, {
+                    data: aggregates.recoveredData
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   variant: "caption",
@@ -4262,2514 +4064,6 @@ var themeTypography = {
   fontFamily: ["var(--font-league-spartan)", "var(--font-noto-sans-arabic)", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"].join(",")
 };
 
-var RecurringPlans = function RecurringPlans(_ref) {
-  _ref.title;
-  var revenueData = [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
-  var visitorsData = [100, 200, 150, 250, 300, 275, 325, 350, 280];
-  var categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
-  var primaryCharts = [{
-    label: "Active Plans",
-    value: "77",
-    data: revenueData,
-    categories: categories
-  }, {
-    label: "New Plans",
-    value: "20",
-    data: visitorsData,
-    categories: categories
-  }];
-  var secondaryCharts = [{
-    label: "reactivated Plans",
-    value: "0",
-    data: visitorsData,
-    categories: categories
-  }, {
-    label: "Cancelled Plans",
-    value: "4",
-    data: revenueData,
-    categories: categories
-  }];
-  var cancelledReasons = [{
-    label: "No reason given",
-    color: "#6C63FF",
-    plans: 3,
-    share: "75%"
-  }, {
-    label: "Unclear reason",
-    color: "#683E80",
-    plans: 1,
-    share: "25%"
-  }];
-  return /*#__PURE__*/jsxs(Box$1, {
-    sx: {
-      // p: 4,
-      // bgcolor: "primary.mainLight",
-      minHeight: "100vh",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch"
-    },
-    children: [/*#__PURE__*/jsx(Box$1, {
-      sx: {
-        display: "flex"
-      },
-      children: /*#__PURE__*/jsx(Typography$1, {
-        variant: "h4",
-        gutterBottom: true,
-        sx: {
-          fontWeight: "bold",
-          color: "primary.dark",
-          mb: 2,
-          mt: 2
-        },
-        children: "Recurring Plans"
-      })
-    }), /*#__PURE__*/jsx(Grid$1, {
-      container: true,
-      spacing: 3,
-      sx: {
-        mb: 1
-      },
-      children: primaryCharts.map(function (item, index) {
-        return /*#__PURE__*/jsx(RenderChartCard, {
-          item: item,
-          index: index,
-          md: 6
-        }, item.label + index);
-      })
-    }), /*#__PURE__*/jsx(Grid$1, {
-      container: true,
-      spacing: 3,
-      sx: {
-        mt: 1
-      },
-      children: secondaryCharts.map(function (item, index) {
-        return item.label === "Cancelled Plans" ? /*#__PURE__*/jsx(Grid$1, {
-          item: true,
-          xs: 12,
-          md: 6,
-          sx: {
-            display: "flex"
-          },
-          children: /*#__PURE__*/jsxs(Box$1, {
-            sx: {
-              width: "100%",
-              display: "flex",
-              flexDirection: "column",
-              boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-              borderRadius: 4,
-              border: "1px solid #f0f0f0",
-              bgcolor: "#fff",
-              overflow: "hidden",
-              "& .MuiCard-root": {
-                borderRadius: "16px 16px 0 0 !important",
-                boxShadow: "none !important",
-                border: "none !important"
-              }
-            },
-            children: [/*#__PURE__*/jsx(RenderChartCard, {
-              item: item,
-              index: index,
-              md: 12
-            }, item.label + index), /*#__PURE__*/jsxs(Box$1, {
-              sx: {
-                px: 3,
-                pb: 2,
-                mt: -1
-              },
-              children: [/*#__PURE__*/jsxs(Box$1, {
-                sx: {
-                  display: "flex",
-                  borderRadius: "4px",
-                  overflow: "hidden",
-                  height: "8px",
-                  mb: 1.5,
-                  gap: "2px",
-                  bgcolor: "transparent"
-                },
-                children: [/*#__PURE__*/jsx(Box$1, {
-                  sx: {
-                    width: "70%",
-                    bgcolor: "#6C63FF",
-                    borderRadius: "4px"
-                  }
-                }), /*#__PURE__*/jsx(Box$1, {
-                  sx: {
-                    width: "30%",
-                    bgcolor: "#683E80",
-                    borderRadius: "4px"
-                  }
-                })]
-              }), /*#__PURE__*/jsxs(Box$1, {
-                sx: {
-                  display: "grid",
-                  gridTemplateColumns: "1fr 60px 60px",
-                  py: 0.75,
-                  borderBottom: "1px solid #f0f0f0",
-                  mb: 0.5,
-                  borderTop: "1px solid #f0f0f0"
-                },
-                children: [/*#__PURE__*/jsx(Typography$1, {
-                  variant: "caption",
-                  fontWeight: 600,
-                  color: "text.primary",
-                  textAlign: "left",
-                  children: "Reasons"
-                }), /*#__PURE__*/jsx(Typography$1, {
-                  variant: "caption",
-                  fontWeight: 600,
-                  color: "text.primary",
-                  textAlign: "right",
-                  sx: {
-                    mr: "20px"
-                  },
-                  children: "Plans"
-                }), /*#__PURE__*/jsx(Typography$1, {
-                  variant: "caption",
-                  fontWeight: 600,
-                  color: "text.primary",
-                  textAlign: "right",
-                  children: "Shares"
-                })]
-              }), cancelledReasons.map(function (row, i) {
-                return /*#__PURE__*/jsxs(Box$1, {
-                  sx: {
-                    display: "grid",
-                    gridTemplateColumns: "1fr 60px 60px",
-                    alignItems: "center",
-                    py: 0.75,
-                    borderBottom: "1px solid #f0f0f0"
-                  },
-                  children: [/*#__PURE__*/jsxs(Box$1, {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 1
-                    },
-                    children: [/*#__PURE__*/jsx(Box$1, {
-                      sx: {
-                        width: 24,
-                        height: 4,
-                        bgcolor: row.color,
-                        borderRadius: 1
-                      }
-                    }), /*#__PURE__*/jsx(Typography$1, {
-                      variant: "body2",
-                      children: row.label
-                    })]
-                  }), /*#__PURE__*/jsx(Typography$1, {
-                    variant: "body2",
-                    textAlign: "right",
-                    sx: {
-                      mr: "20px"
-                    },
-                    children: row.plans
-                  }), /*#__PURE__*/jsx(Typography$1, {
-                    variant: "body2",
-                    textAlign: "right",
-                    children: row.share
-                  })]
-                }, i);
-              })]
-            })]
-          })
-        }, item.label + index) : /*#__PURE__*/jsx(RenderChartCard, {
-          item: item,
-          index: index,
-          md: 6
-        }, item.label + index);
-      })
-    })]
-  });
-};
-
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: RecurringPlans
-});
-
-var miniChartOptions$2 = function miniChartOptions() {
-  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#6363e6";
-  return {
-    chart: {
-      type: "area",
-      sparkline: {
-        enabled: true
-      },
-      animations: {
-        enabled: false
-      }
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2
-    },
-    fill: {
-      type: "gradient",
-      gradient: {
-        shadeIntensity: 0.4,
-        opacityFrom: 5,
-        opacityTo: 5
-      }
-    },
-    colors: [color],
-    tooltip: {
-      enabled: false
-    }
-  };
-};
-var MiniChart$2 = function MiniChart(_ref) {
-  var data = _ref.data,
-    color = _ref.color;
-  return /*#__PURE__*/jsx(ReactApexChart, {
-    options: miniChartOptions$2(color),
-    series: [{
-      data: data
-    }],
-    type: "area",
-    width: 90,
-    height: 40
-  });
-};
-var rows$2 = [{
-  title: "March Impact Report",
-  sent: "100,000",
-  openRate: "24.1%",
-  openCount: "(24,100)",
-  clickRate: "2.9%",
-  clickCount: "(2,900)",
-  donations: 210,
-  donationsData: [2, 4, 3, 5, 4, 6, 4, 5, 3],
-  revenue: "$9,450",
-  revenueData: [3, 4, 3, 5, 4, 6, 5, 6, 5],
-  conversion: "0.21%",
-  avgDonation: "$45.00"
-}, {
-  title: "Spring Campaign Launch",
-  sent: "100,000",
-  openRate: "24.1%",
-  openCount: "(24,100)",
-  clickRate: "2.9%",
-  clickCount: "(2,900)",
-  donations: 210,
-  donationsData: [3, 5, 4, 3, 5, 4, 6, 4, 5],
-  revenue: "$9,450",
-  revenueData: [4, 5, 4, 6, 5, 4, 6, 5, 6],
-  conversion: "0.21%",
-  avgDonation: "$45.00"
-}, {
-  title: "Urgent Call to Action",
-  sent: "100,000",
-  openRate: "24.1%",
-  openCount: "(24,100)",
-  clickRate: "2.9%",
-  clickCount: "(2,900)",
-  donations: 60,
-  donationsData: [2, 3, 4, 3, 4, 3, 4, 3, 2],
-  revenue: "$9,450",
-  revenueData: [3, 4, 5, 4, 5, 4, 5, 4, 5],
-  conversion: "0.21%",
-  avgDonation: "$45.00"
-}];
-var aggregates$2 = {
-  sent: "100,000",
-  sentData: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-  openRate: "24.1%",
-  openCount: "(24,100)",
-  clickRate: "2.9%",
-  clickCount: "(2,900)",
-  donations: "210",
-  donationsData: [2, 4, 3, 5, 3, 6, 4, 5, 4],
-  revenue: "$9,450",
-  revenueData: [3, 5, 4, 6, 5, 7, 5, 6, 5],
-  conversion: "0.21%",
-  conversionData: [1, 1, 1, 1, 1, 1, 1, 1, 9],
-  avgDonation: "$45.00",
-  avgDonationData: [3, 4, 3, 5, 4, 5, 4, 5, 4],
-  openRateData: [8, 5, 4, 6, 5, 6, 5, 6, 5],
-  clickRateData: [4, 5, 6, 5, 6, 5, 6, 5, 6]
-};
-var BORDER$2 = "1px solid #e0e0e0";
-var headerCellSx$2 = {
-  fontWeight: 900,
-  fontSize: "0.78rem",
-  color: "#111",
-  bgcolor: "#f3f3f3f3",
-  borderBottom: BORDER$2,
-  borderRight: BORDER$2,
-  py: "20px",
-  px: "5px",
-  lineHeight: 1.4,
-  textAlign: "center",
-  "&:last-child": {
-    borderRight: 0
-  }
-};
-var cellSx$2 = {
-  fontSize: "0.85rem",
-  color: "#333",
-  borderBottom: BORDER$2,
-  borderRight: BORDER$2,
-  py: "10px",
-  px: "5px",
-  verticalAlign: "middle",
-  textAlign: "center",
-  "&:last-child": {
-    borderRight: 0
-  }
-};
-var aggCellSx$2 = _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
-  bgcolor: "#f3f3f3f3",
-  fontWeight: 900
-});
-var UpdateEmailsTable = function UpdateEmailsTable() {
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: "1px solid #f0f0f0",
-      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      overflow: "hidden",
-      width: "100%"
-    },
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        px: 3,
-        py: 2
-      },
-      children: [/*#__PURE__*/jsxs(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 1
-        },
-        children: [/*#__PURE__*/jsx(Typography, {
-          variant: "subtitle2",
-          sx: {
-            fontWeight: 600,
-            color: "#111"
-          },
-          children: "Update Emails"
-        }), /*#__PURE__*/jsx(InfoOutlined, {
-          sx: {
-            fontSize: "1rem",
-            color: "#9e9e9e"
-          }
-        }), /*#__PURE__*/jsx(Settings, {
-          sx: {
-            fontSize: "1rem",
-            color: "#9e9e9e"
-          }
-        })]
-      }), /*#__PURE__*/jsx(IconButton, {
-        sx: {
-          border: "1px solid #E9E9EB",
-          borderRadius: "8px",
-          height: "36px",
-          width: "36px"
-        },
-        children: /*#__PURE__*/jsx(Settings, {
-          sx: {
-            fontSize: "1.1rem",
-            color: "#555"
-          }
-        })
-      })]
-    }), /*#__PURE__*/jsx(TableContainer, {
-      sx: {
-        pb: 2,
-        overflowX: "auto",
-        width: "100%",
-        boxSizing: "border-box"
-      },
-      children: /*#__PURE__*/jsx(Box, {
-        sx: {
-          px: "25px"
-        },
-        children: /*#__PURE__*/jsxs(Table, {
-          sx: {
-            borderCollapse: "separate",
-            borderSpacing: 0,
-            border: BORDER$2,
-            borderRadius: "12px",
-            overflow: "hidden",
-            width: "100%",
-            minWidth: 800
-          },
-          children: [/*#__PURE__*/jsx(TableHead, {
-            children: /*#__PURE__*/jsxs(TableRow, {
-              children: [/*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx$2), {}, {
-                  textAlign: "left",
-                  minWidth: 160
-                }),
-                children: "Email Title"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$2,
-                children: "Emails Sent"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$2,
-                children: "Open Rate (Count)"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$2,
-                children: "Click Rate (Count)"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$2,
-                children: "Donations from Email"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$2,
-                children: "Revenue Generated"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$2,
-                children: "Conversion (Email \u2192 Donation)"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$2,
-                children: "Avg. Donation from Email"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$2,
-                children: "Actions Column"
-              })]
-            })
-          }), /*#__PURE__*/jsxs(TableBody, {
-            children: [rows$2.map(function (row, i) {
-              return /*#__PURE__*/jsxs(TableRow, {
-                sx: {
-                  "&:hover": {
-                    bgcolor: "#fafafa"
-                  }
-                },
-                children: [/*#__PURE__*/jsx(TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
-                    textAlign: "left",
-                    fontWeight: 500
-                  }),
-                  children: row.title
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$2,
-                  children: row.sent
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$2,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.openRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: "700"
-                    },
-                    children: row.openCount
-                  })]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$2,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.clickRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: "700"
-                    },
-                    children: row.clickCount
-                  })]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$2,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.donations
-                  }), /*#__PURE__*/jsx(Box, {
-                    sx: {
-                      display: "flex",
-                      justifyContent: "center"
-                    },
-                    children: /*#__PURE__*/jsx(MiniChart$2, {
-                      data: row.donationsData
-                    })
-                  })]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$2,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.revenue
-                  }), /*#__PURE__*/jsx(Box, {
-                    sx: {
-                      display: "flex",
-                      justifyContent: "center"
-                    },
-                    children: /*#__PURE__*/jsx(MiniChart$2, {
-                      data: row.revenueData
-                    })
-                  })]
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$2,
-                  children: row.conversion
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$2,
-                  children: row.avgDonation
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$2,
-                  children: /*#__PURE__*/jsx(IconButton, {
-                    size: "small",
-                    sx: {
-                      border: "1px solid #E9E9EB",
-                      borderRadius: "6px"
-                    },
-                    children: /*#__PURE__*/jsx(MoreHoriz, {
-                      fontSize: "small"
-                    })
-                  })
-                })]
-              }, i);
-            }), /*#__PURE__*/jsxs(TableRow, {
-              sx: {
-                "& td": {
-                  borderBottom: 0
-                }
-              },
-              children: [/*#__PURE__*/jsxs(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, aggCellSx$2), {}, {
-                  textAlign: "left"
-                }),
-                children: [/*#__PURE__*/jsx(Typography, {
-                  variant: "body2",
-                  fontWeight: 700,
-                  children: "March Aggregates"
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "(Mar 3 - Apr 3)"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$2,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$2.sent
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$2, {
-                    data: aggregates$2.sentData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$2,
-                children: [/*#__PURE__*/jsxs(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$2.openRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: "700"
-                    },
-                    children: aggregates$2.openCount
-                  })]
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$2, {
-                    data: aggregates$2.openRateData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$2,
-                children: [/*#__PURE__*/jsxs(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$2.clickRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: "700"
-                    },
-                    children: aggregates$2.clickCount
-                  })]
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$2, {
-                    data: aggregates$2.clickRateData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$2,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$2.donations
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$2, {
-                    data: aggregates$2.donationsData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$2,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$2.revenue
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$2, {
-                    data: aggregates$2.revenueData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$2,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$2.conversion
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$2, {
-                    data: aggregates$2.conversionData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$2,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$2.avgDonation
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$2, {
-                    data: aggregates$2.avgDonationData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: aggCellSx$2
-              })]
-            })]
-          })]
-        })
-      })
-    })]
-  });
-};
-
-var miniChartOptions$1 = function miniChartOptions() {
-  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#6363e6";
-  return {
-    chart: {
-      type: "area",
-      sparkline: {
-        enabled: true
-      },
-      animations: {
-        enabled: false
-      }
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2
-    },
-    fill: {
-      type: "gradient",
-      gradient: {
-        shadeIntensity: 0.4,
-        opacityFrom: 5,
-        opacityTo: 5
-      }
-    },
-    colors: [color],
-    tooltip: {
-      enabled: false
-    }
-  };
-};
-var MiniChart$1 = function MiniChart(_ref) {
-  var data = _ref.data,
-    color = _ref.color;
-  return /*#__PURE__*/jsx(ReactApexChart, {
-    options: miniChartOptions$1(color),
-    series: [{
-      data: data
-    }],
-    type: "area",
-    width: 90,
-    height: 40
-  });
-};
-var rows$1 = [{
-  title: "Lapsed 90 Days",
-  sent: "5,200",
-  openRate: "18.4%",
-  openCount: "(956)",
-  clickRate: "6.2%",
-  clickCount: "(322)",
-  reactivated: "241",
-  reactivatedData: [2, 3, 4, 5, 4, 6, 5, 7, 6],
-  donations: "241",
-  donationsData: [2, 4, 3, 5, 4, 6, 4, 5, 5],
-  revenue: "$8,435",
-  revenueData: [3, 5, 4, 6, 5, 7, 5, 7, 6],
-  conversion: "4.6%"
-}, {
-  title: "Lapsed 180 Days",
-  sent: "3,800",
-  openRate: "14.2%",
-  openCount: "(540)",
-  clickRate: "4.8%",
-  clickCount: "(182)",
-  reactivated: "134",
-  reactivatedData: [2, 3, 3, 4, 3, 4, 4, 5, 4],
-  donations: "134",
-  donationsData: [2, 3, 4, 3, 4, 3, 4, 4, 4],
-  revenue: "$4,690",
-  revenueData: [3, 4, 4, 5, 4, 5, 4, 6, 5],
-  conversion: "3.5%"
-}, {
-  title: "Lapsed 1 Year",
-  sent: "2,100",
-  openRate: "9.8%",
-  openCount: "(206)",
-  clickRate: "2.9%",
-  clickCount: "(61)",
-  reactivated: "42",
-  reactivatedData: [1, 2, 2, 2, 3, 2, 3, 3, 3],
-  donations: "42",
-  donationsData: [1, 2, 2, 3, 2, 3, 2, 3, 3],
-  revenue: "$1,260",
-  revenueData: [1, 2, 2, 3, 2, 3, 3, 3, 3],
-  conversion: "2.0%"
-}];
-var aggregates$1 = {
-  sent: "11,100",
-  sentData: [3, 4, 5, 6, 5, 7, 6, 8, 7],
-  openRate: "14.4%",
-  openCount: "(1,702)",
-  openRateData: [4, 5, 5, 6, 5, 7, 6, 7, 6],
-  clickRate: "5.1%",
-  clickCount: "(565)",
-  clickRateData: [2, 3, 4, 4, 5, 4, 5, 5, 5],
-  reactivated: "417",
-  reactivatedData: [3, 4, 5, 6, 5, 7, 6, 8, 7],
-  donations: "417",
-  donationsData: [3, 5, 4, 6, 5, 7, 5, 7, 6],
-  revenue: "$14,385",
-  revenueData: [4, 5, 6, 7, 6, 8, 7, 9, 8],
-  conversion: "3.8%",
-  conversionData: [2, 3, 3, 4, 3, 5, 4, 5, 4]
-};
-var BORDER$1 = "1px solid #e0e0e0";
-var headerCellSx$1 = {
-  fontWeight: 900,
-  fontSize: "0.78rem",
-  color: "#111",
-  bgcolor: "#f3f3f3",
-  borderBottom: BORDER$1,
-  borderRight: BORDER$1,
-  py: "20px",
-  px: "5px",
-  lineHeight: 1.4,
-  textAlign: "center",
-  "&:last-child": {
-    borderRight: 0
-  }
-};
-var cellSx$1 = {
-  fontSize: "0.85rem",
-  color: "#333",
-  borderBottom: BORDER$1,
-  borderRight: BORDER$1,
-  py: "10px",
-  px: "5px",
-  verticalAlign: "middle",
-  textAlign: "center",
-  "&:last-child": {
-    borderRight: 0
-  }
-};
-var aggCellSx$1 = _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
-  bgcolor: "#f3f3f3",
-  fontWeight: 900
-});
-var ReEngagementEmails = function ReEngagementEmails() {
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: "1px solid #f0f0f0",
-      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      overflow: "hidden",
-      width: "100%"
-    },
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        px: 3,
-        py: 2
-      },
-      children: [/*#__PURE__*/jsxs(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 1
-        },
-        children: [/*#__PURE__*/jsx(Typography, {
-          variant: "subtitle2",
-          sx: {
-            fontWeight: 600,
-            color: "#111"
-          },
-          children: "Re-engagement Emails"
-        }), /*#__PURE__*/jsx(InfoOutlined, {
-          sx: {
-            fontSize: "1rem",
-            color: "#9e9e9e"
-          }
-        }), /*#__PURE__*/jsx(Settings, {
-          sx: {
-            fontSize: "1rem",
-            color: "#9e9e9e"
-          }
-        })]
-      }), /*#__PURE__*/jsx(IconButton, {
-        sx: {
-          border: "1px solid #E9E9EB",
-          borderRadius: "8px",
-          height: "36px",
-          width: "36px"
-        },
-        children: /*#__PURE__*/jsx(Settings, {
-          sx: {
-            fontSize: "1.1rem",
-            color: "#555"
-          }
-        })
-      })]
-    }), /*#__PURE__*/jsx(TableContainer, {
-      sx: {
-        pb: 2,
-        overflowX: "auto",
-        width: "100%",
-        boxSizing: "border-box"
-      },
-      children: /*#__PURE__*/jsx(Box, {
-        sx: {
-          px: "25px"
-        },
-        children: /*#__PURE__*/jsxs(Table, {
-          sx: {
-            borderCollapse: "separate",
-            borderSpacing: 0,
-            border: BORDER$1,
-            borderRadius: "12px",
-            overflow: "hidden",
-            width: "100%",
-            minWidth: 800
-          },
-          children: [/*#__PURE__*/jsx(TableHead, {
-            children: /*#__PURE__*/jsxs(TableRow, {
-              children: [/*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
-                  textAlign: "left",
-                  minWidth: 160
-                }),
-                children: "Campaign"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$1,
-                children: "Emails Sent"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$1,
-                children: "Open Rate (No.)"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$1,
-                children: "Click Rate (No.)"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$1,
-                children: "Re-activated Donors"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$1,
-                children: "Donations"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$1,
-                children: "Revenue"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx$1,
-                children: "Conversion Rate"
-              })]
-            })
-          }), /*#__PURE__*/jsxs(TableBody, {
-            children: [rows$1.map(function (row, i) {
-              return /*#__PURE__*/jsxs(TableRow, {
-                sx: {
-                  "&:hover": {
-                    bgcolor: "#fafafa"
-                  }
-                },
-                children: [/*#__PURE__*/jsx(TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
-                    textAlign: "left",
-                    fontWeight: 500
-                  }),
-                  children: row.title
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$1,
-                  children: row.sent
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$1,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.openRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: 700
-                    },
-                    children: row.openCount
-                  })]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$1,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.clickRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: 700
-                    },
-                    children: row.clickCount
-                  })]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$1,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.reactivated
-                  }), /*#__PURE__*/jsx(Box, {
-                    sx: {
-                      display: "flex",
-                      justifyContent: "center"
-                    },
-                    children: /*#__PURE__*/jsx(MiniChart$1, {
-                      data: row.reactivatedData
-                    })
-                  })]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$1,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.donations
-                  }), /*#__PURE__*/jsx(Box, {
-                    sx: {
-                      display: "flex",
-                      justifyContent: "center"
-                    },
-                    children: /*#__PURE__*/jsx(MiniChart$1, {
-                      data: row.donationsData
-                    })
-                  })]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx$1,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.revenue
-                  }), /*#__PURE__*/jsx(Box, {
-                    sx: {
-                      display: "flex",
-                      justifyContent: "center"
-                    },
-                    children: /*#__PURE__*/jsx(MiniChart$1, {
-                      data: row.revenueData
-                    })
-                  })]
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx$1,
-                  children: row.conversion
-                })]
-              }, i);
-            }), /*#__PURE__*/jsxs(TableRow, {
-              sx: {
-                "& td": {
-                  borderBottom: 0
-                }
-              },
-              children: [/*#__PURE__*/jsxs(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, aggCellSx$1), {}, {
-                  textAlign: "left"
-                }),
-                children: [/*#__PURE__*/jsx(Typography, {
-                  variant: "body2",
-                  fontWeight: 700,
-                  children: "Mar Aggregates"
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "(Mar 3 - Apr 3)"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$1,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$1.sent
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$1, {
-                    data: aggregates$1.sentData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$1,
-                children: [/*#__PURE__*/jsxs(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$1.openRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: 700
-                    },
-                    children: aggregates$1.openCount
-                  })]
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$1, {
-                    data: aggregates$1.openRateData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$1,
-                children: [/*#__PURE__*/jsxs(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$1.clickRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: 700
-                    },
-                    children: aggregates$1.clickCount
-                  })]
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$1, {
-                    data: aggregates$1.clickRateData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$1,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$1.reactivated
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$1, {
-                    data: aggregates$1.reactivatedData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$1,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$1.donations
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$1, {
-                    data: aggregates$1.donationsData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$1,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$1.revenue
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$1, {
-                    data: aggregates$1.revenueData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx$1,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates$1.conversion
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart$1, {
-                    data: aggregates$1.conversionData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              })]
-            })]
-          })]
-        })
-      })
-    })]
-  });
-};
-
-var miniChartOptions = function miniChartOptions() {
-  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#6363e6";
-  return {
-    chart: {
-      type: "area",
-      sparkline: {
-        enabled: true
-      },
-      animations: {
-        enabled: false
-      }
-    },
-    stroke: {
-      curve: "smooth",
-      width: 2
-    },
-    fill: {
-      type: "gradient",
-      gradient: {
-        shadeIntensity: 0.4,
-        opacityFrom: 5,
-        opacityTo: 5
-      }
-    },
-    colors: [color],
-    tooltip: {
-      enabled: false
-    }
-  };
-};
-var MiniChart = function MiniChart(_ref) {
-  var data = _ref.data,
-    color = _ref.color;
-  return /*#__PURE__*/jsx(ReactApexChart, {
-    options: miniChartOptions(color),
-    series: [{
-      data: data
-    }],
-    type: "area",
-    width: 90,
-    height: 40
-  });
-};
-var rows = [{
-  title: "March Impact Report",
-  sent: "100,000",
-  openRate: "24.1%",
-  openCount: "(24,100)",
-  clickRate: "2.9%",
-  clickCount: "(2,900)",
-  engagement: "11.4%",
-  donations: "210",
-  donationsData: [2, 4, 3, 5, 4, 6, 4, 5, 3],
-  revenue: "$9,450",
-  revenueData: [3, 4, 3, 5, 4, 6, 5, 6, 5],
-  repeatRate: "34.2%"
-}, {
-  title: "Spring Impact Story",
-  sent: "100,000",
-  openRate: "21.8%",
-  openCount: "(21,800)",
-  clickRate: "2.4%",
-  clickCount: "(2,400)",
-  engagement: "9.8%",
-  donations: "185",
-  donationsData: [3, 4, 4, 5, 4, 5, 4, 5, 4],
-  revenue: "$8,325",
-  revenueData: [3, 4, 4, 5, 5, 5, 5, 6, 5],
-  repeatRate: "29.7%"
-}, {
-  title: "Donor Spotlight",
-  sent: "100,000",
-  openRate: "19.3%",
-  openCount: "(19,300)",
-  clickRate: "1.8%",
-  clickCount: "(1,800)",
-  engagement: "7.2%",
-  donations: "142",
-  donationsData: [2, 3, 3, 4, 3, 4, 3, 4, 3],
-  revenue: "$6,390",
-  revenueData: [2, 3, 3, 4, 4, 4, 4, 5, 4],
-  repeatRate: "22.5%"
-}];
-var aggregates = {
-  sent: "300,000",
-  sentData: [4, 5, 6, 7, 6, 8, 7, 9, 8],
-  openRate: "21.7%",
-  openCount: "(65,200)",
-  openRateData: [5, 6, 5, 7, 6, 7, 6, 8, 7],
-  clickRate: "2.4%",
-  clickCount: "(7,100)",
-  clickRateData: [2, 3, 4, 4, 5, 4, 5, 5, 5],
-  engagement: "9.5%",
-  engagementData: [3, 4, 4, 5, 4, 6, 5, 6, 5],
-  donations: "537",
-  donationsData: [3, 5, 4, 6, 5, 7, 5, 7, 6],
-  revenue: "$24,165",
-  revenueData: [4, 5, 6, 7, 6, 8, 7, 9, 8],
-  repeatRate: "28.8%",
-  repeatRateData: [3, 4, 4, 5, 5, 6, 5, 6, 6]
-};
-var BORDER = "1px solid #e0e0e0";
-var headerCellSx = {
-  fontWeight: 900,
-  fontSize: "0.78rem",
-  color: "#111",
-  bgcolor: "#f3f3f3",
-  borderBottom: BORDER,
-  borderRight: BORDER,
-  py: "20px",
-  px: "5px",
-  lineHeight: 1.4,
-  textAlign: "center",
-  "&:last-child": {
-    borderRight: 0
-  }
-};
-var cellSx = {
-  fontSize: "0.85rem",
-  color: "#333",
-  borderBottom: BORDER,
-  borderRight: BORDER,
-  py: "10px",
-  px: "5px",
-  verticalAlign: "middle",
-  textAlign: "center",
-  "&:last-child": {
-    borderRight: 0
-  }
-};
-var aggCellSx = _objectSpread2(_objectSpread2({}, cellSx), {}, {
-  bgcolor: "#f3f3f3",
-  fontWeight: 900
-});
-var ImpactEmails = function ImpactEmails() {
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: "1px solid #f0f0f0",
-      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      overflow: "hidden",
-      width: "100%"
-    },
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        px: 3,
-        py: 2
-      },
-      children: [/*#__PURE__*/jsxs(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 1
-        },
-        children: [/*#__PURE__*/jsx(Typography, {
-          variant: "subtitle2",
-          sx: {
-            fontWeight: 600,
-            color: "#111"
-          },
-          children: "Impact / Update Your Impact Emails"
-        }), /*#__PURE__*/jsx(InfoOutlined, {
-          sx: {
-            fontSize: "1rem",
-            color: "#9e9e9e"
-          }
-        }), /*#__PURE__*/jsx(Settings, {
-          sx: {
-            fontSize: "1rem",
-            color: "#9e9e9e"
-          }
-        })]
-      }), /*#__PURE__*/jsx(IconButton, {
-        sx: {
-          border: "1px solid #E9E9EB",
-          borderRadius: "8px",
-          height: "36px",
-          width: "36px"
-        },
-        children: /*#__PURE__*/jsx(Settings, {
-          sx: {
-            fontSize: "1.1rem",
-            color: "#555"
-          }
-        })
-      })]
-    }), /*#__PURE__*/jsx(TableContainer, {
-      sx: {
-        pb: 2,
-        overflowX: "auto",
-        width: "100%",
-        boxSizing: "border-box"
-      },
-      children: /*#__PURE__*/jsx(Box, {
-        sx: {
-          px: "25px"
-        },
-        children: /*#__PURE__*/jsxs(Table, {
-          sx: {
-            borderCollapse: "separate",
-            borderSpacing: 0,
-            border: BORDER,
-            borderRadius: "12px",
-            overflow: "hidden",
-            width: "100%",
-            minWidth: 800
-          },
-          children: [/*#__PURE__*/jsx(TableHead, {
-            children: /*#__PURE__*/jsxs(TableRow, {
-              children: [/*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
-                  textAlign: "left",
-                  minWidth: 160
-                }),
-                children: "Email Title"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx,
-                children: "Emails Sent"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx,
-                children: "Open Rate (No.)"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx,
-                children: "Click Rate (No.)"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx,
-                children: "Engagement Rate"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx,
-                children: "Donations Generated"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx,
-                children: "Revenue Generated"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: headerCellSx,
-                children: "Repeat Donation Rate"
-              })]
-            })
-          }), /*#__PURE__*/jsxs(TableBody, {
-            children: [rows.map(function (row, i) {
-              return /*#__PURE__*/jsxs(TableRow, {
-                sx: {
-                  "&:hover": {
-                    bgcolor: "#fafafa"
-                  }
-                },
-                children: [/*#__PURE__*/jsx(TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
-                    textAlign: "left",
-                    fontWeight: 500
-                  }),
-                  children: row.title
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx,
-                  children: row.sent
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.openRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: 700
-                    },
-                    children: row.openCount
-                  })]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.clickRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: 700
-                    },
-                    children: row.clickCount
-                  })]
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx,
-                  children: row.engagement
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.donations
-                  }), /*#__PURE__*/jsx(Box, {
-                    sx: {
-                      display: "flex",
-                      justifyContent: "center"
-                    },
-                    children: /*#__PURE__*/jsx(MiniChart, {
-                      data: row.donationsData
-                    })
-                  })]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: cellSx,
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 500,
-                    children: row.revenue
-                  }), /*#__PURE__*/jsx(Box, {
-                    sx: {
-                      display: "flex",
-                      justifyContent: "center"
-                    },
-                    children: /*#__PURE__*/jsx(MiniChart, {
-                      data: row.revenueData
-                    })
-                  })]
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: cellSx,
-                  children: row.repeatRate
-                })]
-              }, i);
-            }), /*#__PURE__*/jsxs(TableRow, {
-              sx: {
-                "& td": {
-                  borderBottom: 0
-                }
-              },
-              children: [/*#__PURE__*/jsxs(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, aggCellSx), {}, {
-                  textAlign: "left"
-                }),
-                children: [/*#__PURE__*/jsx(Typography, {
-                  variant: "body2",
-                  fontWeight: 700,
-                  children: "Mar Aggregates"
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "(Mar 3 - Apr 3)"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates.sent
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart, {
-                    data: aggregates.sentData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx,
-                children: [/*#__PURE__*/jsxs(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates.openRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: 700
-                    },
-                    children: aggregates.openCount
-                  })]
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart, {
-                    data: aggregates.openRateData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx,
-                children: [/*#__PURE__*/jsxs(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: [/*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates.clickRate
-                  }), /*#__PURE__*/jsx(Typography, {
-                    variant: "caption",
-                    color: "text.secondary",
-                    sx: {
-                      fontWeight: 700
-                    },
-                    children: aggregates.clickCount
-                  })]
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart, {
-                    data: aggregates.clickRateData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates.engagement
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart, {
-                    data: aggregates.engagementData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates.donations
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart, {
-                    data: aggregates.donationsData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates.revenue
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart, {
-                    data: aggregates.revenueData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              }), /*#__PURE__*/jsxs(TableCell, {
-                sx: aggCellSx,
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    minHeight: 42
-                  },
-                  children: /*#__PURE__*/jsx(Typography, {
-                    variant: "body2",
-                    fontWeight: 700,
-                    children: aggregates.repeatRate
-                  })
-                }), /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center"
-                  },
-                  children: /*#__PURE__*/jsx(MiniChart, {
-                    data: aggregates.repeatRateData
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
-                  variant: "caption",
-                  color: "text.secondary",
-                  children: "Mar 3 - Apr 3"
-                })]
-              })]
-            })]
-          })]
-        })
-      })
-    })]
-  });
-};
-
-var COUNTRY_COLORS = ["#5B8DEF", "#9B59B6", "#E8453C", "#27AE60", "#F39C12", "#1ABC9C", "#E74C3C", "#3498DB", "#FF6B6B", "#33213bff"];
-var FLAG_ICONS = {
-  "United States of America": "https://flagcdn.com/w40/us.png",
-  "United Arab Emirates": "https://flagcdn.com/w40/ae.png",
-  "United Kingdom": "https://flagcdn.com/w40/gb.png",
-  "Kuwait": "https://flagcdn.com/w40/kw.png",
-  "Australia": "https://flagcdn.com/w40/au.png",
-  "France": "https://flagcdn.com/w40/fr.png",
-  "Qatar": "https://flagcdn.com/w40/qa.png",
-  "Malta": "https://flagcdn.com/w40/mt.png",
-  "Morocco": "https://flagcdn.com/w40/ma.png",
-  "Oman": "https://flagcdn.com/w40/om.png"
-};
-var rawData = [{
-  country: "United States of America",
-  donations: 113,
-  oneTimeMedian: 27.50,
-  recurringMedian: 19.10,
-  totalRaised: 892.93,
-  series: [12, 250, 23, 67, 89, 34, 221, 78, 90, 23]
-}, {
-  country: "United Arab Emirates",
-  donations: 40,
-  oneTimeMedian: 16.88,
-  recurringMedian: 19.84,
-  totalRaised: 489.84,
-  series: [5, 10, 18, 25, 12, 8, 150, 22]
-}, {
-  country: "United Kingdom",
-  donations: 25,
-  oneTimeMedian: 15.01,
-  recurringMedian: 14.70,
-  totalRaised: 314.70,
-  series: [8, 15, 18, 12, 20, 15, 10, 180, 25]
-}, {
-  country: "Kuwait",
-  donations: 12,
-  oneTimeMedian: 22.05,
-  recurringMedian: 19.10,
-  totalRaised: 289.10,
-  series: [143, 338, 225, 112, 118, 228, 225, 310, 224, 110, 446]
-}, {
-  country: "Australia",
-  donations: 8,
-  oneTimeMedian: 17.56,
-  recurringMedian: 10.46,
-  totalRaised: 231.49,
-  series: [2, 5, 8, 12, 5, 120, 450, 85, 50, 80, 90, 75, 78, 400]
-}, {
-  country: "France",
-  donations: 6,
-  oneTimeMedian: 0.00,
-  recurringMedian: 25.65,
-  totalRaised: 154.36,
-  series: [5, 10, 8, 15, 100, 10, 15, 8, 12, 20, 10, 8, 15, 10]
-}, {
-  country: "Qatar",
-  donations: 5,
-  oneTimeMedian: 48.41,
-  recurringMedian: 11.47,
-  totalRaised: 142.79,
-  series: [1, 113, 445, 338, 443, 226, 110, 445, 322, 228, 445]
-}, {
-  country: "Malta",
-  donations: 6,
-  oneTimeMedian: 17.30,
-  recurringMedian: 19.33,
-  totalRaised: 142.29,
-  series: [200, 114, 226, 310, 224, 284, 118, 412, 336, 224, 110, 446]
-}, {
-  country: "Morocco",
-  donations: 2,
-  oneTimeMedian: 106.45,
-  recurringMedian: 11.76,
-  totalRaised: 118.21,
-  series: [150, 240, 32, 59, 200, 400, 256, 353, 250, 245, 113]
-}, {
-  country: "Oman",
-  donations: 6,
-  oneTimeMedian: 11.20,
-  recurringMedian: 13.40,
-  totalRaised: 112.70,
-  series: [100, 300, 89, 79, 300, 256, 154, 243, 357, 254]
-}];
-var SORT_OPTIONS = [{
-  label: "Sort ascending",
-  value: "asc"
-}, {
-  label: "Sort descending",
-  value: "desc"
-}, {
-  label: "Recurring average",
-  value: "recurringAvg"
-}, {
-  label: "Recurring median",
-  value: "recurringMedian"
-}];
-var ROWS_PER_PAGE = 10;
-var dateCategories = Array.from({
-  length: 31
-}, function (_, i) {
-  var d = new Date(2024, 2, 16 + i);
-  return "".concat(d.toLocaleString("default", {
-    month: "short"
-  }), " ").concat(d.getDate());
-});
-var CountriesPerformance = function CountriesPerformance() {
-  var _useState = useState("desc"),
-    _useState2 = _slicedToArray(_useState, 2),
-    sortMode = _useState2[0],
-    setSortMode = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    anchorEl = _useState4[0],
-    setAnchorEl = _useState4[1];
-  var _useState5 = useState("totalRaised"),
-    _useState6 = _slicedToArray(_useState5, 2);
-    _useState6[0];
-    _useState6[1];
-  var _useState7 = useState(1),
-    _useState8 = _slicedToArray(_useState7, 2),
-    page = _useState8[0],
-    setPage = _useState8[1];
-  var sortedData = [].concat(rawData).sort(function (a, b) {
-    if (sortMode === "asc") return a.totalRaised - b.totalRaised;
-    if (sortMode === "desc") return b.totalRaised - a.totalRaised;
-    if (sortMode === "recurringAvg") return b.recurringMedian - a.recurringMedian;
-    if (sortMode === "recurringMedian") return b.recurringMedian - a.recurringMedian;
-    return 0;
-  });
-  var paginated = sortedData.slice((page - 1) * ROWS_PER_PAGE, page * ROWS_PER_PAGE);
-  var totalPages = Math.ceil(sortedData.length / ROWS_PER_PAGE);
-  var chartSeries = rawData.map(function (d, i) {
-    return {
-      name: d.country,
-      data: d.series,
-      color: COUNTRY_COLORS[i]
-    };
-  });
-  var chartOptions = {
-    chart: {
-      type: "line",
-      height: 320,
-      toolbar: {
-        show: false
-      },
-      zoom: {
-        enabled: false
-      },
-      animations: {
-        enabled: false
-      }
-    },
-    stroke: {
-      curve: "straight",
-      width: 1.5
-    },
-    colors: COUNTRY_COLORS,
-    xaxis: {
-      categories: dateCategories,
-      tickAmount: 2,
-      labels: {
-        style: {
-          fontSize: "11px",
-          colors: "#888"
-        }
-      },
-      axisBorder: {
-        show: false
-      },
-      axisTicks: {
-        show: false
-      }
-    },
-    yaxis: {
-      opposite: true,
-      min: 0,
-      max: 507,
-      tickAmount: 3,
-      labels: {
-        formatter: function formatter(v) {
-          var val = Math.round(v);
-          if (val === 507) return "$506";
-          return "$".concat(val);
-        },
-        style: {
-          fontSize: "11px",
-          colors: "#888"
-        }
-      }
-    },
-    grid: {
-      borderColor: "#f0f0f0",
-      strokeDashArray: 0,
-      padding: {
-        left: 20
-      }
-    },
-    legend: {
-      show: false
-    },
-    tooltip: {
-      shared: true,
-      custom: function custom(_ref) {
-        var dataPointIndex = _ref.dataPointIndex,
-          w = _ref.w;
-        var date = dateCategories[dataPointIndex];
-        var items = w.config.series.map(function (s, i) {
-          var val = s.data[dataPointIndex];
-          var flag = FLAG_ICONS[s.name] || "";
-          return "<div style=\"display:flex;justify-content:space-between;gap:24px;padding:3px 0;font-size:12px\">\n            <span style=\"display:flex;align-items:center;gap:6px\">\n              <span style=\"display:inline-block;width:8px;height:8px;border-radius:50%;background:".concat(COUNTRY_COLORS[i], "\"></span>\n              <img src=\"").concat(flag, "\" alt=\"\" style=\"width:16px;height:auto;border-radius:2px\" />\n              <span style=\"color:#333\">").concat(s.name, "</span>\n            </span>\n            <span style=\"font-weight:600;color:#111\">$").concat(val.toFixed(2), "</span>\n          </div>");
-        }).join("");
-        return "<div style=\"background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:12px 16px;min-width:280px;box-shadow:0 4px 16px rgba(0,0,0,0.08)\">\n          <div style=\"font-weight:600;font-size:13px;color:#111;margin-bottom:8px\">".concat(date, "</div>\n          ").concat(items, "\n        </div>");
-      }
-    },
-    markers: {
-      size: 0
-    }
-  };
-  var BORDER = "1px solid #f0f0f0";
-  var headerCellSx = {
-    fontWeight: 600,
-    fontSize: "0.78rem",
-    color: "#555",
-    borderBottom: "1.5px solid #e8e8e8",
-    py: 1.5,
-    px: 2,
-    bgcolor: "#fff"
-  };
-  var cellSx = {
-    fontSize: "0.85rem",
-    color: "#333",
-    borderBottom: BORDER,
-    py: 1.5,
-    px: 2,
-    verticalAlign: "middle"
-  };
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      minHeight: "100vh"
-    },
-    children: [/*#__PURE__*/jsx(Typography, {
-      variant: "h4",
-      sx: {
-        fontWeight: "bold",
-        color: "primary.dark",
-        mb: 3,
-        textAlign: "left"
-      },
-      children: "Countries"
-    }), /*#__PURE__*/jsxs(Box, {
-      sx: {
-        bgcolor: "#ffffffff",
-        borderRadius: 4,
-        border: BORDER,
-        boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-        mb: 3,
-        p: 2,
-        overflow: "hidden"
-      },
-      children: [/*#__PURE__*/jsx(ReactApexChart, {
-        options: chartOptions,
-        series: chartSeries,
-        type: "line",
-        height: 320
-      }), /*#__PURE__*/jsx(TableContainer, {
-        children: /*#__PURE__*/jsxs(Table, {
-          sx: {
-            borderCollapse: "collapse"
-          },
-          children: [/*#__PURE__*/jsx(TableHead, {
-            children: /*#__PURE__*/jsxs(TableRow, {
-              children: [/*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
-                  minWidth: 220
-                }),
-                children: "Country"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
-                  textAlign: "right"
-                }),
-                children: "Donations"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
-                  textAlign: "right"
-                }),
-                children: "One-time median"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
-                  textAlign: "right"
-                }),
-                children: "Recurring median"
-              }), /*#__PURE__*/jsx(TableCell, {
-                sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
-                  textAlign: "right"
-                }),
-                children: /*#__PURE__*/jsxs(Box, {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "flex-end",
-                    gap: 0.5
-                  },
-                  children: ["Total raised \u2193", /*#__PURE__*/jsx(IconButton, {
-                    size: "small",
-                    onClick: function onClick(e) {
-                      return setAnchorEl(e.currentTarget);
-                    },
-                    sx: {
-                      ml: 0.5,
-                      p: 0.3
-                    },
-                    children: /*#__PURE__*/jsx(MoreVert, {
-                      fontSize: "small"
-                    })
-                  })]
-                })
-              })]
-            })
-          }), /*#__PURE__*/jsx(TableBody, {
-            children: paginated.map(function (row, i) {
-              var colorIdx = rawData.findIndex(function (d) {
-                return d.country === row.country;
-              });
-              var color = COUNTRY_COLORS[colorIdx] || "#ccc";
-              return /*#__PURE__*/jsxs(TableRow, {
-                sx: {
-                  "&:hover": {
-                    bgcolor: "#fafafa"
-                  }
-                },
-                children: [/*#__PURE__*/jsx(TableCell, {
-                  sx: _objectSpread2({}, cellSx),
-                  children: /*#__PURE__*/jsxs(Box, {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 1.5
-                    },
-                    children: [/*#__PURE__*/jsx(Box, {
-                      sx: {
-                        width: 20,
-                        height: 3,
-                        bgcolor: color,
-                        borderRadius: 2,
-                        flexShrink: 0
-                      }
-                    }), /*#__PURE__*/jsx(Box, {
-                      component: "img",
-                      src: FLAG_ICONS[row.country],
-                      sx: {
-                        width: 20,
-                        height: "auto",
-                        borderRadius: "2px"
-                      }
-                    }), /*#__PURE__*/jsx(Typography, {
-                      variant: "body2",
-                      fontWeight: 500,
-                      children: row.country
-                    })]
-                  })
-                }), /*#__PURE__*/jsx(TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
-                    textAlign: "right"
-                  }),
-                  children: row.donations
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
-                    textAlign: "right"
-                  }),
-                  children: ["$", row.oneTimeMedian.toFixed(2)]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
-                    textAlign: "right"
-                  }),
-                  children: ["$", row.recurringMedian.toFixed(2)]
-                }), /*#__PURE__*/jsxs(TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
-                    textAlign: "right",
-                    fontWeight: 600
-                  }),
-                  children: ["$", row.totalRaised.toFixed(2)]
-                })]
-              }, row.country);
-            })
-          })]
-        })
-      }), /*#__PURE__*/jsxs(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          px: 3,
-          py: 2,
-          borderTop: BORDER
-        },
-        children: [/*#__PURE__*/jsxs(Box, {
-          sx: {
-            display: "flex",
-            gap: 0.5
-          },
-          children: [[1, 2, 3, 4].map(function (p) {
-            return /*#__PURE__*/jsx(Box, {
-              onClick: function onClick() {
-                return setPage(p);
-              },
-              sx: {
-                width: 32,
-                height: 32,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                borderRadius: "6px",
-                cursor: "pointer",
-                fontSize: "13px",
-                fontWeight: page === p ? 700 : 400,
-                bgcolor: page === p ? "primary.main" : "transparent",
-                color: page === p ? "#fff" : "#333",
-                border: page === p ? "none" : "1px solid #e0e0e0",
-                "&:hover": {
-                  bgcolor: page === p ? "primary.main" : "#f5f5f5"
-                }
-              },
-              children: p
-            }, p);
-          }), /*#__PURE__*/jsx(Box, {
-            onClick: function onClick() {
-              return setPage(Math.min(page + 1, totalPages));
-            },
-            sx: {
-              px: 1.5,
-              height: 32,
-              display: "flex",
-              alignItems: "center",
-              gap: 0.5,
-              borderRadius: "6px",
-              cursor: "pointer",
-              fontSize: "13px",
-              color: "#333",
-              border: "1px solid #e0e0e0",
-              "&:hover": {
-                bgcolor: "#f5f5f5"
-              }
-            },
-            children: "Next \u203A"
-          })]
-        }), /*#__PURE__*/jsx(Typography, {
-          variant: "caption",
-          color: "text.secondary",
-          children: "35 records"
-        })]
-      })]
-    }), /*#__PURE__*/jsx(Menu, {
-      anchorEl: anchorEl,
-      open: Boolean(anchorEl),
-      onClose: function onClose() {
-        return setAnchorEl(null);
-      },
-      PaperProps: {
-        sx: {
-          borderRadius: 2,
-          boxShadow: "0 4px 16px rgba(0,0,0,0.1)",
-          border: "1px solid #f0f0f0",
-          minWidth: 200
-        }
-      },
-      children: SORT_OPTIONS.map(function (opt) {
-        return /*#__PURE__*/jsxs(MenuItem, {
-          onClick: function onClick() {
-            setSortMode(opt.value);
-            setAnchorEl(null);
-          },
-          sx: {
-            fontSize: "13px",
-            display: "flex",
-            justifyContent: "space-between",
-            gap: 2
-          },
-          children: [opt.label, sortMode === opt.value && /*#__PURE__*/jsx(Check, {
-            sx: {
-              fontSize: "16px",
-              color: "primary.main"
-            }
-          })]
-        }, opt.value);
-      })
-    })]
-  });
-};
-
-var UpdateEmails = function UpdateEmails() {
-  var revenueData = [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
-  var visitorsData = [100, 200, 150, 250, 300, 275, 325, 350, 280];
-  var categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
-  var primaryCharts = [{
-    label: "Email Sent",
-    value: "100,000",
-    subValue: "Total sent for March campaign",
-    data: revenueData,
-    categories: categories
-  }, {
-    label: "Open rate",
-    value: "24.1%",
-    subValue: "Total opens: 24,100",
-    data: visitorsData,
-    categories: categories
-  }];
-  var secondaryCharts = [{
-    label: "Click Rate",
-    value: "2.9%",
-    subValue: "Total Clicks: 2,900",
-    data: visitorsData,
-    categories: categories
-  }, {
-    label: "Donations from Emails",
-    value: "210",
-    subValue: "Conversion rate: 0.21%(Donations / Sent)",
-    data: visitorsData,
-    categories: categories
-  }];
-  var tertiaryCharts = [{
-    label: "Revenue from Emails",
-    value: "$9,450",
-    data: revenueData,
-    categories: categories
-  }, {
-    label: "Avg. Donation from Email",
-    value: "$45.00",
-    data: visitorsData,
-    categories: categories
-  }];
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      // p: 4,
-      // bgcolor: "primary.mainLight",
-      minHeight: "100vh",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch"
-    },
-    children: [/*#__PURE__*/jsx(Box, {
-      sx: {
-        display: "flex"
-      },
-      children: /*#__PURE__*/jsx(Typography, {
-        variant: "h4",
-        gutterBottom: true,
-        sx: {
-          fontWeight: "bold",
-          color: "primary.dark",
-          mb: 2,
-          mt: 2
-        },
-        children: "Update Emails"
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      container: true,
-      spacing: 3,
-      sx: {
-        mb: 1
-      },
-      children: primaryCharts.map(function (item, index) {
-        return /*#__PURE__*/jsx(RenderChartCard, {
-          item: item,
-          index: index,
-          md: 6
-        });
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      container: true,
-      spacing: 3,
-      sx: {
-        mt: 1
-      },
-      children: secondaryCharts.map(function (item, index) {
-        return /*#__PURE__*/jsx(RenderChartCard, {
-          item: item,
-          index: index,
-          md: 6
-        });
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      container: true,
-      spacing: 3,
-      sx: {
-        mt: 1
-      },
-      children: tertiaryCharts.map(function (item, index) {
-        return /*#__PURE__*/jsx(RenderChartCard, {
-          item: item,
-          index: index,
-          md: 6
-        });
-      })
-    }), /*#__PURE__*/jsx(Grid, {
-      item: true,
-      md: 12,
-      sx: {
-        mt: 4
-      },
-      children: /*#__PURE__*/jsx(UpdateEmailsTable, {})
-    }), /*#__PURE__*/jsx(Grid, {
-      item: true,
-      md: 12,
-      sx: {
-        mt: 4
-      },
-      children: /*#__PURE__*/jsx(AbandonedDonationRecovery, {})
-    }), /*#__PURE__*/jsx(Grid, {
-      item: true,
-      md: 12,
-      sx: {
-        mt: 4
-      },
-      children: /*#__PURE__*/jsx(ReEngagementEmails, {})
-    }), /*#__PURE__*/jsx(Grid, {
-      item: true,
-      md: 12,
-      sx: {
-        mt: 4
-      },
-      children: /*#__PURE__*/jsx(ImpactEmails, {})
-    }), /*#__PURE__*/jsx(Grid, {
-      item: true,
-      md: 12,
-      sx: {
-        mt: 4
-      },
-      children: /*#__PURE__*/jsx(CountriesPerformance, {})
-    }), /*#__PURE__*/jsx(Grid, {
-      item: true,
-      md: 12,
-      sx: {
-        mt: 4
-      },
-      children: /*#__PURE__*/jsx(UTMPerformance, {})
-    })]
-  });
-};
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: UpdateEmails
-});
-
 var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Active campaigns" : _ref$title,