@ammarkhalidfarooq/dashboard-package 0.3.3 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs.js +145 -2845
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +146 -2846
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -10,6 +10,49 @@ var Grid = require('@mui/material/Grid');
10
10
  var Box = require('@mui/material/Box');
11
11
  var Typography = require('@mui/material/Typography');
12
12
 
13
+ var theme = styles.createTheme({
14
+ cssVariables: true,
15
+ // Enable CSS variables for better SSR support
16
+ typography: {
17
+ fontFamily: ["var(--font-league-spartan)", "var(--font-noto-sans-arabic)",
18
+ // Added as a fallback for Arabic text
19
+ "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"].join(",")
20
+ },
21
+ palette: {
22
+ primary: {
23
+ main: "#6363E6",
24
+ mainLight: "#F7F7FF",
25
+ light: "#FFFFFF",
26
+ gray: "#A1A1A8",
27
+ lightGreen: "#E1FBF2",
28
+ green: "#0CAB72",
29
+ red: "#E61D1D",
30
+ lightRed: "#FFEDED",
31
+ lightGray: "#E9E9EB",
32
+ darkGray: "#606062",
33
+ dark: "#090909"
34
+ },
35
+ text: {
36
+ primary: "#666666"
37
+ },
38
+ secondary: {
39
+ main: "#E0C2FF",
40
+ light: "#F5EBFF",
41
+ // dark: will be calculated from palette.secondary.main,
42
+ contrastText: "#47008F"
43
+ },
44
+ white: {
45
+ main: "#FFFFFF",
46
+ light: "#F8F8F8"
47
+ },
48
+ gradients: {
49
+ primary: "linear-gradient(90deg, #6363E6 0.05%, #59C9F9 99.96%)",
50
+ secondary: "linear-gradient(180deg, #E9E9FF 0%, #C9EEFF 100%)"
51
+ // You can add more gradients if needed
52
+ }
53
+ }
54
+ });
55
+
13
56
  function _arrayLikeToArray(r, a) {
14
57
  (null == a || a > r.length) && (a = r.length);
15
58
  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
@@ -120,49 +163,6 @@ function _unsupportedIterableToArray(r, a) {
120
163
  }
121
164
  }
122
165
 
123
- var theme = styles.createTheme({
124
- cssVariables: true,
125
- // Enable CSS variables for better SSR support
126
- typography: {
127
- fontFamily: ["var(--font-league-spartan)", "var(--font-noto-sans-arabic)",
128
- // Added as a fallback for Arabic text
129
- "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"].join(",")
130
- },
131
- palette: {
132
- primary: {
133
- main: "#6363E6",
134
- mainLight: "#F7F7FF",
135
- light: "#FFFFFF",
136
- gray: "#A1A1A8",
137
- lightGreen: "#E1FBF2",
138
- green: "#0CAB72",
139
- red: "#E61D1D",
140
- lightRed: "#FFEDED",
141
- lightGray: "#E9E9EB",
142
- darkGray: "#606062",
143
- dark: "#090909"
144
- },
145
- text: {
146
- primary: "#666666"
147
- },
148
- secondary: {
149
- main: "#E0C2FF",
150
- light: "#F5EBFF",
151
- // dark: will be calculated from palette.secondary.main,
152
- contrastText: "#47008F"
153
- },
154
- white: {
155
- main: "#FFFFFF",
156
- light: "#F8F8F8"
157
- },
158
- gradients: {
159
- primary: "linear-gradient(90deg, #6363E6 0.05%, #59C9F9 99.96%)",
160
- secondary: "linear-gradient(180deg, #E9E9FF 0%, #C9EEFF 100%)"
161
- // You can add more gradients if needed
162
- }
163
- }
164
- });
165
-
166
166
  var MetricSelector = function MetricSelector(_ref) {
167
167
  var metric = _ref.metric,
168
168
  onMetricChange = _ref.onMetricChange,
@@ -610,95 +610,17 @@ var RenderChartCard = function RenderChartCard(_ref) {
610
610
  }, item.label + index);
611
611
  };
612
612
 
613
- var PerformanceSection$1 = /*#__PURE__*/React.lazy(function () {
614
- return Promise.resolve().then(function () { return index$4; });
615
- });
616
- var RecurringRevenueSection$1 = /*#__PURE__*/React.lazy(function () {
617
- return Promise.resolve().then(function () { return index$3; });
618
- });
619
- var RecurringPlans$1 = /*#__PURE__*/React.lazy(function () {
620
- return Promise.resolve().then(function () { return index$1; });
621
- });
622
- var DonorBehavior$1 = /*#__PURE__*/React.lazy(function () {
623
- return Promise.resolve().then(function () { return index$2; });
624
- });
625
- var UpdateEmails$1 = /*#__PURE__*/React.lazy(function () {
626
- return Promise.resolve().then(function () { return index; });
627
- });
628
613
  var NewOverview$1 = /*#__PURE__*/React.lazy(function () {
629
- return Promise.resolve().then(function () { return index$5; });
614
+ return Promise.resolve().then(function () { return index; });
630
615
  });
631
616
  var Dashboard = function Dashboard(_ref) {
632
- _ref.title;
633
- var _ref$initialMetric = _ref.initialMetric,
634
- initialMetric = _ref$initialMetric === void 0 ? "Revenue" : _ref$initialMetric,
635
- _ref$revenueData = _ref.revenueData,
636
- revenueData = _ref$revenueData === void 0 ? [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000] : _ref$revenueData,
637
- _ref$donationsData = _ref.donationsData,
638
- donationsData = _ref$donationsData === void 0 ? [15, 22, 18, 30, 25, 35, 42, 45, 28] : _ref$donationsData,
639
- _ref$categories = _ref.categories,
640
- categories = _ref$categories === void 0 ? ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"] : _ref$categories,
641
- _ref$apiData = _ref.apiData,
617
+ var _ref$apiData = _ref.apiData,
642
618
  apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
643
- _ref$performanceData = _ref.performanceData,
644
- performanceData = _ref$performanceData === void 0 ? {} : _ref$performanceData;
645
- var _React$useState = React.useState(initialMetric),
646
- _React$useState2 = _slicedToArray(_React$useState, 2),
647
- metric = _React$useState2[0];
648
- _React$useState2[1];
649
- var currentData = metric === "Revenue" ? revenueData : donationsData;
650
- [{
651
- label: "Total Revenue",
652
- value: "$9,200.00",
653
- subValue: "Total Donations: 215",
654
- data: currentData,
655
- categories: categories,
656
- showSelector: true
657
- }, {
658
- label: "First installments",
659
- value: "$510.00",
660
- data: currentData.slice(-7),
661
- categories: categories.slice(-7)
662
- }, {
663
- label: "One-time donations",
664
- value: "$7,100.00",
665
- data: currentData,
666
- categories: categories
667
- }];
668
- [{
669
- label: "New vs Returning Donors",
670
- series: [{
671
- name: "New Donors",
672
- data: [10, 15, 12, 20, 18, 25, 30, 35, 20]
673
- }, {
674
- name: "Returning",
675
- data: [5, 7, 6, 10, 7, 10, 12, 10, 8]
676
- }],
677
- categories: categories,
678
- stacked: true,
679
- footer: {
680
- left: "New donors: 195",
681
- right: "Returning donors: 20"
682
- }
683
- }, {
684
- label: "Average Donation Amount",
685
- value: "$42.80",
686
- data: currentData.map(function (v) {
687
- return v * 0.5;
688
- }),
689
- categories: categories
690
- }, {
691
- label: "Tip Amount",
692
- value: "$1,250.00",
693
- subValue: "Number of Tips: 110",
694
- data: currentData.map(function (v) {
695
- return v * 0.2;
696
- }),
697
- categories: categories
698
- }];
699
- return /*#__PURE__*/jsxRuntime.jsxs(material.ThemeProvider, {
619
+ _ref$overviewType = _ref.overviewType,
620
+ overviewType = _ref$overviewType === void 0 ? "overall" : _ref$overviewType;
621
+ return /*#__PURE__*/jsxRuntime.jsx(material.ThemeProvider, {
700
622
  theme: theme,
701
- children: [/*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
623
+ children: /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
702
624
  fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
703
625
  sx: {
704
626
  py: 5,
@@ -707,65 +629,10 @@ var Dashboard = function Dashboard(_ref) {
707
629
  children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
708
630
  }),
709
631
  children: /*#__PURE__*/jsxRuntime.jsx(NewOverview$1, {
710
- apiData: apiData
711
- })
712
- }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
713
- fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
714
- sx: {
715
- py: 5,
716
- textAlign: 'center'
717
- },
718
- children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
719
- }),
720
- children: /*#__PURE__*/jsxRuntime.jsx(PerformanceSection$1, {
721
632
  apiData: apiData,
722
- performanceData: performanceData
723
- })
724
- }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
725
- fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
726
- sx: {
727
- py: 5,
728
- textAlign: 'center'
729
- },
730
- children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
731
- }),
732
- children: /*#__PURE__*/jsxRuntime.jsx(RecurringPlans$1, {
733
- apiData: apiData
734
- })
735
- }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
736
- fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
737
- sx: {
738
- py: 5,
739
- textAlign: 'center'
740
- },
741
- children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
742
- }),
743
- children: /*#__PURE__*/jsxRuntime.jsx(RecurringRevenueSection$1, {
744
- apiData: apiData
745
- })
746
- }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
747
- fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
748
- sx: {
749
- py: 5,
750
- textAlign: 'center'
751
- },
752
- children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
753
- }),
754
- children: /*#__PURE__*/jsxRuntime.jsx(DonorBehavior$1, {
755
- apiData: apiData
756
- })
757
- }), /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
758
- fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
759
- sx: {
760
- py: 5,
761
- textAlign: 'center'
762
- },
763
- children: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {})
764
- }),
765
- children: /*#__PURE__*/jsxRuntime.jsx(UpdateEmails$1, {
766
- apiData: apiData
633
+ activeSection: overviewType
767
634
  })
768
- })]
635
+ })
769
636
  });
770
637
  };
771
638
 
@@ -776,7 +643,9 @@ var DisplayCard = function DisplayCard(_ref) {
776
643
  Icon = _ref.icon,
777
644
  onClick = _ref.onClick,
778
645
  _ref$sx = _ref.sx,
779
- sx = _ref$sx === void 0 ? {} : _ref$sx;
646
+ sx = _ref$sx === void 0 ? {} : _ref$sx,
647
+ _ref$isActive = _ref.isActive,
648
+ isActive = _ref$isActive === void 0 ? false : _ref$isActive;
780
649
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
781
650
  onClick: onClick,
782
651
  sx: _objectSpread2({
@@ -807,8 +676,8 @@ var DisplayCard = function DisplayCard(_ref) {
807
676
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
808
677
  sx: {
809
678
  fontWeight: "400",
810
- color: "rgba(0, 0, 0, 0.4)",
811
- fontSize: "12px",
679
+ color: isActive ? "#c1c1f5" : "#a1a1a8",
680
+ fontSize: "14px",
812
681
  lineHeight: "16px",
813
682
  textAlign: "left"
814
683
  },
@@ -817,7 +686,7 @@ var DisplayCard = function DisplayCard(_ref) {
817
686
  sx: {
818
687
  lineHeight: "1.2",
819
688
  textAlign: "left",
820
- color: "#000",
689
+ color: isActive ? "#6363e6" : "#000",
821
690
  fontSize: "20px",
822
691
  fontWeight: "700",
823
692
  mb: 0.5
@@ -2092,6 +1961,7 @@ var OrganicSection = function OrganicSection(_ref) {
2092
1961
  onClick: function onClick() {
2093
1962
  return setActiveMetric(title);
2094
1963
  },
1964
+ isActive: activeMetric === title,
2095
1965
  sx: {
2096
1966
  flex: 1,
2097
1967
  border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
@@ -2250,6 +2120,7 @@ var EmailSection = function EmailSection() {
2250
2120
  onClick: function onClick() {
2251
2121
  return setActiveMetric(title);
2252
2122
  },
2123
+ isActive: activeMetric === title,
2253
2124
  sx: {
2254
2125
  flex: 1,
2255
2126
  border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
@@ -2321,7 +2192,8 @@ var PaidSection$2 = /*#__PURE__*/React.lazy(function () {
2321
2192
  });
2322
2193
  var NewOverview = function NewOverview(_ref) {
2323
2194
  var _ref$apiData = _ref.apiData,
2324
- apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
2195
+ apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
2196
+ activeSectionProp = _ref.activeSection;
2325
2197
  var initialMetric = "Revenue";
2326
2198
  var revenueData = (apiData === null || apiData === void 0 ? void 0 : apiData.revenueData) || [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
2327
2199
  var donationsData = (apiData === null || apiData === void 0 ? void 0 : apiData.donationsData) || [15, 22, 18, 30, 25, 35, 42, 45, 28];
@@ -2334,6 +2206,12 @@ var NewOverview = function NewOverview(_ref) {
2334
2206
  _useState4 = _slicedToArray(_useState3, 2),
2335
2207
  activeSection = _useState4[0],
2336
2208
  setActiveSection = _useState4[1];
2209
+ React.useEffect(function () {
2210
+ if (activeSectionProp) {
2211
+ var capitalized = activeSectionProp.charAt(0).toUpperCase() + activeSectionProp.slice(1).toLowerCase();
2212
+ setActiveSection(capitalized);
2213
+ }
2214
+ }, [activeSectionProp]);
2337
2215
  var currentData = metric === "Revenue" ? revenueData : donationsData;
2338
2216
  var oneTimeData = (apiData === null || apiData === void 0 ? void 0 : apiData.oneTimeDonations) || [];
2339
2217
  var oneTimeValues = oneTimeData.length > 0 ? oneTimeData.map(function (item) {
@@ -2493,71 +2371,14 @@ var NewOverview = function NewOverview(_ref) {
2493
2371
  data: [8, 9, 11, 10, 10, 12, 9, 11, 10],
2494
2372
  categories: categories
2495
2373
  }];
2496
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2374
+ return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
2497
2375
  sx: {
2498
2376
  minHeight: "100vh",
2499
2377
  display: "flex",
2500
2378
  flexDirection: "column",
2501
2379
  alignItems: "stretch"
2502
2380
  },
2503
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2504
- sx: {
2505
- display: 'flex',
2506
- justifyContent: "space-between"
2507
- },
2508
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2509
- variant: "h4",
2510
- gutterBottom: true,
2511
- sx: {
2512
- fontWeight: "bold",
2513
- color: "primary.dark",
2514
- mb: 2,
2515
- mt: 2
2516
- },
2517
- children: "Overview"
2518
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2519
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Button, {
2520
- variant: activeSection === "Overall" ? "contained" : "outlined",
2521
- onClick: function onClick() {
2522
- return setActiveSection("Overall");
2523
- },
2524
- sx: {
2525
- borderRadius: "48px",
2526
- marginRight: "10px"
2527
- },
2528
- children: "Overall"
2529
- }), /*#__PURE__*/jsxRuntime.jsx(material.Button, {
2530
- variant: activeSection === "Paid" ? "contained" : "outlined",
2531
- onClick: function onClick() {
2532
- return setActiveSection("Paid");
2533
- },
2534
- sx: {
2535
- borderRadius: "48px",
2536
- marginRight: "10px"
2537
- },
2538
- children: "Paid"
2539
- }), /*#__PURE__*/jsxRuntime.jsx(material.Button, {
2540
- variant: activeSection === "Organic" ? "contained" : "outlined",
2541
- onClick: function onClick() {
2542
- return setActiveSection("Organic");
2543
- },
2544
- sx: {
2545
- borderRadius: "48px",
2546
- marginRight: "10px"
2547
- },
2548
- children: "Organic"
2549
- }), /*#__PURE__*/jsxRuntime.jsx(material.Button, {
2550
- variant: activeSection === "Email" ? "contained" : "outlined",
2551
- onClick: function onClick() {
2552
- return setActiveSection("Email");
2553
- },
2554
- sx: {
2555
- borderRadius: "48px"
2556
- },
2557
- children: "Email"
2558
- })]
2559
- })]
2560
- }), /*#__PURE__*/jsxRuntime.jsxs(React.Suspense, {
2381
+ children: /*#__PURE__*/jsxRuntime.jsxs(React.Suspense, {
2561
2382
  fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
2562
2383
  sx: {
2563
2384
  display: "flex",
@@ -2586,11 +2407,11 @@ var NewOverview = function NewOverview(_ref) {
2586
2407
  sx: {},
2587
2408
  children: /*#__PURE__*/jsxRuntime.jsx(EmailSection, {})
2588
2409
  })]
2589
- })]
2410
+ })
2590
2411
  });
2591
2412
  };
2592
2413
 
2593
- var index$5 = /*#__PURE__*/Object.freeze({
2414
+ var index = /*#__PURE__*/Object.freeze({
2594
2415
  __proto__: null,
2595
2416
  default: NewOverview
2596
2417
  });
@@ -2769,11 +2590,6 @@ var PerformanceSection = function PerformanceSection(_ref) {
2769
2590
  });
2770
2591
  };
2771
2592
 
2772
- var index$4 = /*#__PURE__*/Object.freeze({
2773
- __proto__: null,
2774
- default: PerformanceSection
2775
- });
2776
-
2777
2593
  var data$1 = [{
2778
2594
  range: "$0 – $12",
2779
2595
  plans: 21,
@@ -3067,11 +2883,6 @@ var RecurringRevenueSection = function RecurringRevenueSection() {
3067
2883
  });
3068
2884
  };
3069
2885
 
3070
- var index$3 = /*#__PURE__*/Object.freeze({
3071
- __proto__: null,
3072
- default: RecurringRevenueSection
3073
- });
3074
-
3075
2886
  var UTM_COLORS = ["#1877F2",
3076
2887
  // Facebook blue
3077
2888
  "#4267B2",
@@ -3080,7 +2891,7 @@ var UTM_COLORS = ["#1877F2",
3080
2891
  // Instagram pink/purple
3081
2892
  "#000000" // Threads black
3082
2893
  ];
3083
- var rawData$1 = [{
2894
+ var rawData = [{
3084
2895
  source: "facebook",
3085
2896
  donations: 156,
3086
2897
  totalRaised: 4520.50,
@@ -3113,14 +2924,14 @@ var rawData$1 = [{
3113
2924
  Donations: [2, 5, 8, 12, 5, 112, 145, 85, 50, 80]
3114
2925
  }
3115
2926
  }];
3116
- var SORT_OPTIONS$1 = [{
2927
+ var SORT_OPTIONS = [{
3117
2928
  label: "Sort ascending",
3118
2929
  value: "asc"
3119
2930
  }, {
3120
2931
  label: "Sort descending",
3121
2932
  value: "desc"
3122
2933
  }];
3123
- var dateCategories$1 = Array.from({
2934
+ var dateCategories = Array.from({
3124
2935
  length: 10
3125
2936
  }, function (_, i) {
3126
2937
  var d = new Date(2024, 2, 16 + i);
@@ -3145,14 +2956,14 @@ var UTMPerformance = function UTMPerformance() {
3145
2956
  _useState8 = _slicedToArray(_useState7, 2),
3146
2957
  parameter = _useState8[0],
3147
2958
  setParameter = _useState8[1];
3148
- var sortedData = [].concat(rawData$1).sort(function (a, b) {
2959
+ var sortedData = [].concat(rawData).sort(function (a, b) {
3149
2960
  var valA = metric === "Revenue" ? a.totalRaised : a.donations;
3150
2961
  var valB = metric === "Revenue" ? b.totalRaised : b.donations;
3151
2962
  if (sortMode === "asc") return valA - valB;
3152
2963
  if (sortMode === "desc") return valB - valA;
3153
2964
  return 0;
3154
2965
  });
3155
- var chartSeries = rawData$1.map(function (d, i) {
2966
+ var chartSeries = rawData.map(function (d, i) {
3156
2967
  return {
3157
2968
  name: d.source,
3158
2969
  data: d.series[metric],
@@ -3179,7 +2990,7 @@ var UTMPerformance = function UTMPerformance() {
3179
2990
  },
3180
2991
  colors: UTM_COLORS,
3181
2992
  xaxis: {
3182
- categories: dateCategories$1,
2993
+ categories: dateCategories,
3183
2994
  tickAmount: 2,
3184
2995
  labels: {
3185
2996
  style: {
@@ -3223,7 +3034,7 @@ var UTMPerformance = function UTMPerformance() {
3223
3034
  custom: function custom(_ref) {
3224
3035
  var dataPointIndex = _ref.dataPointIndex,
3225
3036
  w = _ref.w;
3226
- var date = dateCategories$1[dataPointIndex];
3037
+ var date = dateCategories[dataPointIndex];
3227
3038
  var items = w.config.series.map(function (s, i) {
3228
3039
  var val = s.data[dataPointIndex];
3229
3040
  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>");
@@ -3359,7 +3170,7 @@ var UTMPerformance = function UTMPerformance() {
3359
3170
  })
3360
3171
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableBody, {
3361
3172
  children: sortedData.map(function (row, i) {
3362
- var colorIdx = rawData$1.findIndex(function (d) {
3173
+ var colorIdx = rawData.findIndex(function (d) {
3363
3174
  return d.source === row.source;
3364
3175
  });
3365
3176
  var color = UTM_COLORS[colorIdx] || "#ccc";
@@ -3422,7 +3233,7 @@ var UTMPerformance = function UTMPerformance() {
3422
3233
  minWidth: 200
3423
3234
  }
3424
3235
  },
3425
- children: SORT_OPTIONS$1.map(function (opt) {
3236
+ children: SORT_OPTIONS.map(function (opt) {
3426
3237
  return /*#__PURE__*/jsxRuntime.jsxs(material.MenuItem, {
3427
3238
  onClick: function onClick() {
3428
3239
  setSortMode(opt.value);
@@ -3680,12 +3491,7 @@ var DonorBehavior = function DonorBehavior() {
3680
3491
  });
3681
3492
  };
3682
3493
 
3683
- var index$2 = /*#__PURE__*/Object.freeze({
3684
- __proto__: null,
3685
- default: DonorBehavior
3686
- });
3687
-
3688
- var miniChartOptions$3 = function miniChartOptions() {
3494
+ var miniChartOptions = function miniChartOptions() {
3689
3495
  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#6363e6";
3690
3496
  return {
3691
3497
  chart: {
@@ -3715,11 +3521,11 @@ var miniChartOptions$3 = function miniChartOptions() {
3715
3521
  }
3716
3522
  };
3717
3523
  };
3718
- var MiniChart$3 = function MiniChart(_ref) {
3524
+ var MiniChart = function MiniChart(_ref) {
3719
3525
  var data = _ref.data,
3720
3526
  color = _ref.color;
3721
3527
  return /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
3722
- options: miniChartOptions$3(color),
3528
+ options: miniChartOptions(color),
3723
3529
  series: [{
3724
3530
  data: data
3725
3531
  }],
@@ -3728,7 +3534,7 @@ var MiniChart$3 = function MiniChart(_ref) {
3728
3534
  height: 40
3729
3535
  });
3730
3536
  };
3731
- var rows$3 = [{
3537
+ var rows = [{
3732
3538
  title: "Reminder 1 (1hr)",
3733
3539
  abandoned: "1,240",
3734
3540
  sent: "1,240",
@@ -3771,7 +3577,7 @@ var rows$3 = [{
3771
3577
  recovered: "25",
3772
3578
  recoveredData: [1, 1, 2, 1, 2, 2, 2, 2, 3]
3773
3579
  }];
3774
- var aggregates$3 = {
3580
+ var aggregates = {
3775
3581
  abandoned: "1,240",
3776
3582
  sent: "3,469",
3777
3583
  sentData: [2, 3, 4, 5, 4, 6, 5, 7, 8],
@@ -3788,14 +3594,14 @@ var aggregates$3 = {
3788
3594
  recovered: "174",
3789
3595
  recoveredData: [2, 3, 4, 5, 4, 6, 5, 7, 6]
3790
3596
  };
3791
- var BORDER$3 = "1px solid #e0e0e0";
3792
- var headerCellSx$3 = {
3597
+ var BORDER = "1px solid #e0e0e0";
3598
+ var headerCellSx = {
3793
3599
  fontWeight: 900,
3794
3600
  fontSize: "0.78rem",
3795
3601
  color: "#111",
3796
3602
  bgcolor: "#f3f3f3",
3797
- borderBottom: BORDER$3,
3798
- borderRight: BORDER$3,
3603
+ borderBottom: BORDER,
3604
+ borderRight: BORDER,
3799
3605
  py: "20px",
3800
3606
  px: "5px",
3801
3607
  lineHeight: 1.4,
@@ -3804,11 +3610,11 @@ var headerCellSx$3 = {
3804
3610
  borderRight: 0
3805
3611
  }
3806
3612
  };
3807
- var cellSx$3 = {
3613
+ var cellSx = {
3808
3614
  fontSize: "0.85rem",
3809
3615
  color: "#333",
3810
- borderBottom: BORDER$3,
3811
- borderRight: BORDER$3,
3616
+ borderBottom: BORDER,
3617
+ borderRight: BORDER,
3812
3618
  py: "10px",
3813
3619
  px: "5px",
3814
3620
  verticalAlign: "middle",
@@ -3817,7 +3623,7 @@ var cellSx$3 = {
3817
3623
  borderRight: 0
3818
3624
  }
3819
3625
  };
3820
- var aggCellSx$3 = _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
3626
+ var aggCellSx = _objectSpread2(_objectSpread2({}, cellSx), {}, {
3821
3627
  bgcolor: "#f3f3f3",
3822
3628
  fontWeight: 900
3823
3629
  });
@@ -3892,7 +3698,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3892
3698
  sx: {
3893
3699
  borderCollapse: "separate",
3894
3700
  borderSpacing: 0,
3895
- border: BORDER$3,
3701
+ border: BORDER,
3896
3702
  borderRadius: "12px",
3897
3703
  overflow: "hidden",
3898
3704
  width: "100%",
@@ -3901,36 +3707,36 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3901
3707
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
3902
3708
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
3903
3709
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3904
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$3), {}, {
3710
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
3905
3711
  textAlign: "left",
3906
3712
  minWidth: 160
3907
3713
  }),
3908
3714
  children: "Reminder Email"
3909
3715
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3910
- sx: headerCellSx$3,
3716
+ sx: headerCellSx,
3911
3717
  children: "Abandoned Count"
3912
3718
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3913
- sx: headerCellSx$3,
3719
+ sx: headerCellSx,
3914
3720
  children: "Emails Sent"
3915
3721
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3916
- sx: headerCellSx$3,
3722
+ sx: headerCellSx,
3917
3723
  children: "Open Rate (No.)"
3918
3724
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3919
- sx: headerCellSx$3,
3725
+ sx: headerCellSx,
3920
3726
  children: "Click Rate (No.)"
3921
3727
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3922
- sx: headerCellSx$3,
3728
+ sx: headerCellSx,
3923
3729
  children: "Recovery Rate"
3924
3730
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3925
- sx: headerCellSx$3,
3731
+ sx: headerCellSx,
3926
3732
  children: "Recovered Revenue"
3927
3733
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3928
- sx: headerCellSx$3,
3734
+ sx: headerCellSx,
3929
3735
  children: "Recovered Donations"
3930
3736
  })]
3931
3737
  })
3932
3738
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
3933
- children: [rows$3.map(function (row, i) {
3739
+ children: [rows.map(function (row, i) {
3934
3740
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
3935
3741
  sx: {
3936
3742
  "&:hover": {
@@ -3938,19 +3744,19 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3938
3744
  }
3939
3745
  },
3940
3746
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3941
- sx: _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
3747
+ sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
3942
3748
  textAlign: "left",
3943
3749
  fontWeight: 500
3944
3750
  }),
3945
3751
  children: row.title
3946
3752
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3947
- sx: cellSx$3,
3753
+ sx: cellSx,
3948
3754
  children: row.abandoned
3949
3755
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3950
- sx: cellSx$3,
3756
+ sx: cellSx,
3951
3757
  children: row.sent
3952
3758
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3953
- sx: cellSx$3,
3759
+ sx: cellSx,
3954
3760
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3955
3761
  variant: "body2",
3956
3762
  fontWeight: 500,
@@ -3964,7 +3770,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3964
3770
  children: row.openCount
3965
3771
  })]
3966
3772
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3967
- sx: cellSx$3,
3773
+ sx: cellSx,
3968
3774
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3969
3775
  variant: "body2",
3970
3776
  fontWeight: 500,
@@ -3978,7 +3784,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3978
3784
  children: row.clickCount
3979
3785
  })]
3980
3786
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3981
- sx: cellSx$3,
3787
+ sx: cellSx,
3982
3788
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3983
3789
  variant: "body2",
3984
3790
  fontWeight: 500,
@@ -3988,12 +3794,12 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3988
3794
  display: "flex",
3989
3795
  justifyContent: "center"
3990
3796
  },
3991
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
3797
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3992
3798
  data: row.recoveryData
3993
3799
  })
3994
3800
  })]
3995
3801
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3996
- sx: cellSx$3,
3802
+ sx: cellSx,
3997
3803
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3998
3804
  variant: "body2",
3999
3805
  fontWeight: 500,
@@ -4003,12 +3809,12 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4003
3809
  display: "flex",
4004
3810
  justifyContent: "center"
4005
3811
  },
4006
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
3812
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
4007
3813
  data: row.revenueData
4008
3814
  })
4009
3815
  })]
4010
3816
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4011
- sx: cellSx$3,
3817
+ sx: cellSx,
4012
3818
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4013
3819
  variant: "body2",
4014
3820
  fontWeight: 500,
@@ -4018,7 +3824,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4018
3824
  display: "flex",
4019
3825
  justifyContent: "center"
4020
3826
  },
4021
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
3827
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
4022
3828
  data: row.recoveredData
4023
3829
  })
4024
3830
  })]
@@ -4031,7 +3837,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4031
3837
  }
4032
3838
  },
4033
3839
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4034
- sx: _objectSpread2(_objectSpread2({}, aggCellSx$3), {}, {
3840
+ sx: _objectSpread2(_objectSpread2({}, aggCellSx), {}, {
4035
3841
  textAlign: "left"
4036
3842
  }),
4037
3843
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -4044,14 +3850,14 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4044
3850
  children: "(Mar 3 - Apr 3)"
4045
3851
  })]
4046
3852
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4047
- sx: aggCellSx$3,
3853
+ sx: aggCellSx,
4048
3854
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4049
3855
  variant: "body2",
4050
3856
  fontWeight: 700,
4051
- children: aggregates$3.abandoned
3857
+ children: aggregates.abandoned
4052
3858
  })
4053
3859
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4054
- sx: aggCellSx$3,
3860
+ sx: aggCellSx,
4055
3861
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4056
3862
  sx: {
4057
3863
  minHeight: 42
@@ -4059,15 +3865,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4059
3865
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4060
3866
  variant: "body2",
4061
3867
  fontWeight: 700,
4062
- children: aggregates$3.sent
3868
+ children: aggregates.sent
4063
3869
  })
4064
3870
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4065
3871
  sx: {
4066
3872
  display: "flex",
4067
3873
  justifyContent: "center"
4068
3874
  },
4069
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4070
- data: aggregates$3.sentData
3875
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3876
+ data: aggregates.sentData
4071
3877
  })
4072
3878
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4073
3879
  variant: "caption",
@@ -4075,7 +3881,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4075
3881
  children: "Mar 3 - Apr 3"
4076
3882
  })]
4077
3883
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4078
- sx: aggCellSx$3,
3884
+ sx: aggCellSx,
4079
3885
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4080
3886
  sx: {
4081
3887
  minHeight: 42
@@ -4083,22 +3889,22 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4083
3889
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4084
3890
  variant: "body2",
4085
3891
  fontWeight: 700,
4086
- children: aggregates$3.openRate
3892
+ children: aggregates.openRate
4087
3893
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4088
3894
  variant: "caption",
4089
3895
  color: "text.secondary",
4090
3896
  sx: {
4091
3897
  fontWeight: 700
4092
3898
  },
4093
- children: aggregates$3.openCount
3899
+ children: aggregates.openCount
4094
3900
  })]
4095
3901
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4096
3902
  sx: {
4097
3903
  display: "flex",
4098
3904
  justifyContent: "center"
4099
3905
  },
4100
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4101
- data: aggregates$3.openRateData
3906
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3907
+ data: aggregates.openRateData
4102
3908
  })
4103
3909
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4104
3910
  variant: "caption",
@@ -4106,7 +3912,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4106
3912
  children: "Mar 3 - Apr 3"
4107
3913
  })]
4108
3914
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4109
- sx: aggCellSx$3,
3915
+ sx: aggCellSx,
4110
3916
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4111
3917
  sx: {
4112
3918
  minHeight: 42
@@ -4114,22 +3920,22 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4114
3920
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4115
3921
  variant: "body2",
4116
3922
  fontWeight: 700,
4117
- children: aggregates$3.clickRate
3923
+ children: aggregates.clickRate
4118
3924
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4119
3925
  variant: "caption",
4120
3926
  color: "text.secondary",
4121
3927
  sx: {
4122
3928
  fontWeight: 700
4123
3929
  },
4124
- children: aggregates$3.clickCount
3930
+ children: aggregates.clickCount
4125
3931
  })]
4126
3932
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4127
3933
  sx: {
4128
3934
  display: "flex",
4129
3935
  justifyContent: "center"
4130
3936
  },
4131
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4132
- data: aggregates$3.clickRateData
3937
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3938
+ data: aggregates.clickRateData
4133
3939
  })
4134
3940
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4135
3941
  variant: "caption",
@@ -4137,7 +3943,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4137
3943
  children: "Mar 3 - Apr 3"
4138
3944
  })]
4139
3945
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4140
- sx: aggCellSx$3,
3946
+ sx: aggCellSx,
4141
3947
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4142
3948
  sx: {
4143
3949
  minHeight: 42
@@ -4145,15 +3951,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4145
3951
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4146
3952
  variant: "body2",
4147
3953
  fontWeight: 700,
4148
- children: aggregates$3.recoveryRate
3954
+ children: aggregates.recoveryRate
4149
3955
  })
4150
3956
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4151
3957
  sx: {
4152
3958
  display: "flex",
4153
3959
  justifyContent: "center"
4154
3960
  },
4155
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4156
- data: aggregates$3.recoveryData
3961
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3962
+ data: aggregates.recoveryData
4157
3963
  })
4158
3964
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4159
3965
  variant: "caption",
@@ -4161,7 +3967,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4161
3967
  children: "Mar 3 - Apr 3"
4162
3968
  })]
4163
3969
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4164
- sx: aggCellSx$3,
3970
+ sx: aggCellSx,
4165
3971
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4166
3972
  sx: {
4167
3973
  minHeight: 42
@@ -4169,15 +3975,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4169
3975
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4170
3976
  variant: "body2",
4171
3977
  fontWeight: 700,
4172
- children: aggregates$3.revenue
3978
+ children: aggregates.revenue
4173
3979
  })
4174
3980
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4175
3981
  sx: {
4176
3982
  display: "flex",
4177
3983
  justifyContent: "center"
4178
3984
  },
4179
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4180
- data: aggregates$3.revenueData
3985
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3986
+ data: aggregates.revenueData
4181
3987
  })
4182
3988
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4183
3989
  variant: "caption",
@@ -4185,7 +3991,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4185
3991
  children: "Mar 3 - Apr 3"
4186
3992
  })]
4187
3993
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4188
- sx: aggCellSx$3,
3994
+ sx: aggCellSx,
4189
3995
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4190
3996
  sx: {
4191
3997
  minHeight: 42
@@ -4193,15 +3999,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4193
3999
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4194
4000
  variant: "body2",
4195
4001
  fontWeight: 700,
4196
- children: aggregates$3.recovered
4002
+ children: aggregates.recovered
4197
4003
  })
4198
4004
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4199
4005
  sx: {
4200
4006
  display: "flex",
4201
4007
  justifyContent: "center"
4202
4008
  },
4203
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4204
- data: aggregates$3.recoveredData
4009
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
4010
+ data: aggregates.recoveredData
4205
4011
  })
4206
4012
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4207
4013
  variant: "caption",
@@ -4264,2514 +4070,6 @@ var themeTypography = {
4264
4070
  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(",")
4265
4071
  };
4266
4072
 
4267
- var RecurringPlans = function RecurringPlans(_ref) {
4268
- _ref.title;
4269
- var revenueData = [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
4270
- var visitorsData = [100, 200, 150, 250, 300, 275, 325, 350, 280];
4271
- var categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
4272
- var primaryCharts = [{
4273
- label: "Active Plans",
4274
- value: "77",
4275
- data: revenueData,
4276
- categories: categories
4277
- }, {
4278
- label: "New Plans",
4279
- value: "20",
4280
- data: visitorsData,
4281
- categories: categories
4282
- }];
4283
- var secondaryCharts = [{
4284
- label: "reactivated Plans",
4285
- value: "0",
4286
- data: visitorsData,
4287
- categories: categories
4288
- }, {
4289
- label: "Cancelled Plans",
4290
- value: "4",
4291
- data: revenueData,
4292
- categories: categories
4293
- }];
4294
- var cancelledReasons = [{
4295
- label: "No reason given",
4296
- color: "#6C63FF",
4297
- plans: 3,
4298
- share: "75%"
4299
- }, {
4300
- label: "Unclear reason",
4301
- color: "#683E80",
4302
- plans: 1,
4303
- share: "25%"
4304
- }];
4305
- return /*#__PURE__*/jsxRuntime.jsxs(Box, {
4306
- sx: {
4307
- // p: 4,
4308
- // bgcolor: "primary.mainLight",
4309
- minHeight: "100vh",
4310
- display: "flex",
4311
- flexDirection: "column",
4312
- alignItems: "stretch"
4313
- },
4314
- children: [/*#__PURE__*/jsxRuntime.jsx(Box, {
4315
- sx: {
4316
- display: "flex"
4317
- },
4318
- children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
4319
- variant: "h4",
4320
- gutterBottom: true,
4321
- sx: {
4322
- fontWeight: "bold",
4323
- color: "primary.dark",
4324
- mb: 2,
4325
- mt: 2
4326
- },
4327
- children: "Recurring Plans"
4328
- })
4329
- }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
4330
- container: true,
4331
- spacing: 3,
4332
- sx: {
4333
- mb: 1
4334
- },
4335
- children: primaryCharts.map(function (item, index) {
4336
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
4337
- item: item,
4338
- index: index,
4339
- md: 6
4340
- }, item.label + index);
4341
- })
4342
- }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
4343
- container: true,
4344
- spacing: 3,
4345
- sx: {
4346
- mt: 1
4347
- },
4348
- children: secondaryCharts.map(function (item, index) {
4349
- return item.label === "Cancelled Plans" ? /*#__PURE__*/jsxRuntime.jsx(Grid, {
4350
- item: true,
4351
- xs: 12,
4352
- md: 6,
4353
- sx: {
4354
- display: "flex"
4355
- },
4356
- children: /*#__PURE__*/jsxRuntime.jsxs(Box, {
4357
- sx: {
4358
- width: "100%",
4359
- display: "flex",
4360
- flexDirection: "column",
4361
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
4362
- borderRadius: 4,
4363
- border: "1px solid #f0f0f0",
4364
- bgcolor: "#fff",
4365
- overflow: "hidden",
4366
- "& .MuiCard-root": {
4367
- borderRadius: "16px 16px 0 0 !important",
4368
- boxShadow: "none !important",
4369
- border: "none !important"
4370
- }
4371
- },
4372
- children: [/*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
4373
- item: item,
4374
- index: index,
4375
- md: 12
4376
- }, item.label + index), /*#__PURE__*/jsxRuntime.jsxs(Box, {
4377
- sx: {
4378
- px: 3,
4379
- pb: 2,
4380
- mt: -1
4381
- },
4382
- children: [/*#__PURE__*/jsxRuntime.jsxs(Box, {
4383
- sx: {
4384
- display: "flex",
4385
- borderRadius: "4px",
4386
- overflow: "hidden",
4387
- height: "8px",
4388
- mb: 1.5,
4389
- gap: "2px",
4390
- bgcolor: "transparent"
4391
- },
4392
- children: [/*#__PURE__*/jsxRuntime.jsx(Box, {
4393
- sx: {
4394
- width: "70%",
4395
- bgcolor: "#6C63FF",
4396
- borderRadius: "4px"
4397
- }
4398
- }), /*#__PURE__*/jsxRuntime.jsx(Box, {
4399
- sx: {
4400
- width: "30%",
4401
- bgcolor: "#683E80",
4402
- borderRadius: "4px"
4403
- }
4404
- })]
4405
- }), /*#__PURE__*/jsxRuntime.jsxs(Box, {
4406
- sx: {
4407
- display: "grid",
4408
- gridTemplateColumns: "1fr 60px 60px",
4409
- py: 0.75,
4410
- borderBottom: "1px solid #f0f0f0",
4411
- mb: 0.5,
4412
- borderTop: "1px solid #f0f0f0"
4413
- },
4414
- children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
4415
- variant: "caption",
4416
- fontWeight: 600,
4417
- color: "text.primary",
4418
- textAlign: "left",
4419
- children: "Reasons"
4420
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
4421
- variant: "caption",
4422
- fontWeight: 600,
4423
- color: "text.primary",
4424
- textAlign: "right",
4425
- sx: {
4426
- mr: "20px"
4427
- },
4428
- children: "Plans"
4429
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
4430
- variant: "caption",
4431
- fontWeight: 600,
4432
- color: "text.primary",
4433
- textAlign: "right",
4434
- children: "Shares"
4435
- })]
4436
- }), cancelledReasons.map(function (row, i) {
4437
- return /*#__PURE__*/jsxRuntime.jsxs(Box, {
4438
- sx: {
4439
- display: "grid",
4440
- gridTemplateColumns: "1fr 60px 60px",
4441
- alignItems: "center",
4442
- py: 0.75,
4443
- borderBottom: "1px solid #f0f0f0"
4444
- },
4445
- children: [/*#__PURE__*/jsxRuntime.jsxs(Box, {
4446
- sx: {
4447
- display: "flex",
4448
- alignItems: "center",
4449
- gap: 1
4450
- },
4451
- children: [/*#__PURE__*/jsxRuntime.jsx(Box, {
4452
- sx: {
4453
- width: 24,
4454
- height: 4,
4455
- bgcolor: row.color,
4456
- borderRadius: 1
4457
- }
4458
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
4459
- variant: "body2",
4460
- children: row.label
4461
- })]
4462
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
4463
- variant: "body2",
4464
- textAlign: "right",
4465
- sx: {
4466
- mr: "20px"
4467
- },
4468
- children: row.plans
4469
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
4470
- variant: "body2",
4471
- textAlign: "right",
4472
- children: row.share
4473
- })]
4474
- }, i);
4475
- })]
4476
- })]
4477
- })
4478
- }, item.label + index) : /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
4479
- item: item,
4480
- index: index,
4481
- md: 6
4482
- }, item.label + index);
4483
- })
4484
- })]
4485
- });
4486
- };
4487
-
4488
- var index$1 = /*#__PURE__*/Object.freeze({
4489
- __proto__: null,
4490
- default: RecurringPlans
4491
- });
4492
-
4493
- var miniChartOptions$2 = function miniChartOptions() {
4494
- var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#6363e6";
4495
- return {
4496
- chart: {
4497
- type: "area",
4498
- sparkline: {
4499
- enabled: true
4500
- },
4501
- animations: {
4502
- enabled: false
4503
- }
4504
- },
4505
- stroke: {
4506
- curve: "smooth",
4507
- width: 2
4508
- },
4509
- fill: {
4510
- type: "gradient",
4511
- gradient: {
4512
- shadeIntensity: 0.4,
4513
- opacityFrom: 5,
4514
- opacityTo: 5
4515
- }
4516
- },
4517
- colors: [color],
4518
- tooltip: {
4519
- enabled: false
4520
- }
4521
- };
4522
- };
4523
- var MiniChart$2 = function MiniChart(_ref) {
4524
- var data = _ref.data,
4525
- color = _ref.color;
4526
- return /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
4527
- options: miniChartOptions$2(color),
4528
- series: [{
4529
- data: data
4530
- }],
4531
- type: "area",
4532
- width: 90,
4533
- height: 40
4534
- });
4535
- };
4536
- var rows$2 = [{
4537
- title: "March Impact Report",
4538
- sent: "100,000",
4539
- openRate: "24.1%",
4540
- openCount: "(24,100)",
4541
- clickRate: "2.9%",
4542
- clickCount: "(2,900)",
4543
- donations: 210,
4544
- donationsData: [2, 4, 3, 5, 4, 6, 4, 5, 3],
4545
- revenue: "$9,450",
4546
- revenueData: [3, 4, 3, 5, 4, 6, 5, 6, 5],
4547
- conversion: "0.21%",
4548
- avgDonation: "$45.00"
4549
- }, {
4550
- title: "Spring Campaign Launch",
4551
- sent: "100,000",
4552
- openRate: "24.1%",
4553
- openCount: "(24,100)",
4554
- clickRate: "2.9%",
4555
- clickCount: "(2,900)",
4556
- donations: 210,
4557
- donationsData: [3, 5, 4, 3, 5, 4, 6, 4, 5],
4558
- revenue: "$9,450",
4559
- revenueData: [4, 5, 4, 6, 5, 4, 6, 5, 6],
4560
- conversion: "0.21%",
4561
- avgDonation: "$45.00"
4562
- }, {
4563
- title: "Urgent Call to Action",
4564
- sent: "100,000",
4565
- openRate: "24.1%",
4566
- openCount: "(24,100)",
4567
- clickRate: "2.9%",
4568
- clickCount: "(2,900)",
4569
- donations: 60,
4570
- donationsData: [2, 3, 4, 3, 4, 3, 4, 3, 2],
4571
- revenue: "$9,450",
4572
- revenueData: [3, 4, 5, 4, 5, 4, 5, 4, 5],
4573
- conversion: "0.21%",
4574
- avgDonation: "$45.00"
4575
- }];
4576
- var aggregates$2 = {
4577
- sent: "100,000",
4578
- sentData: [1, 2, 3, 4, 5, 6, 7, 8, 9],
4579
- openRate: "24.1%",
4580
- openCount: "(24,100)",
4581
- clickRate: "2.9%",
4582
- clickCount: "(2,900)",
4583
- donations: "210",
4584
- donationsData: [2, 4, 3, 5, 3, 6, 4, 5, 4],
4585
- revenue: "$9,450",
4586
- revenueData: [3, 5, 4, 6, 5, 7, 5, 6, 5],
4587
- conversion: "0.21%",
4588
- conversionData: [1, 1, 1, 1, 1, 1, 1, 1, 9],
4589
- avgDonation: "$45.00",
4590
- avgDonationData: [3, 4, 3, 5, 4, 5, 4, 5, 4],
4591
- openRateData: [8, 5, 4, 6, 5, 6, 5, 6, 5],
4592
- clickRateData: [4, 5, 6, 5, 6, 5, 6, 5, 6]
4593
- };
4594
- var BORDER$2 = "1px solid #e0e0e0";
4595
- var headerCellSx$2 = {
4596
- fontWeight: 900,
4597
- fontSize: "0.78rem",
4598
- color: "#111",
4599
- bgcolor: "#f3f3f3f3",
4600
- borderBottom: BORDER$2,
4601
- borderRight: BORDER$2,
4602
- py: "20px",
4603
- px: "5px",
4604
- lineHeight: 1.4,
4605
- textAlign: "center",
4606
- "&:last-child": {
4607
- borderRight: 0
4608
- }
4609
- };
4610
- var cellSx$2 = {
4611
- fontSize: "0.85rem",
4612
- color: "#333",
4613
- borderBottom: BORDER$2,
4614
- borderRight: BORDER$2,
4615
- py: "10px",
4616
- px: "5px",
4617
- verticalAlign: "middle",
4618
- textAlign: "center",
4619
- "&:last-child": {
4620
- borderRight: 0
4621
- }
4622
- };
4623
- var aggCellSx$2 = _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
4624
- bgcolor: "#f3f3f3f3",
4625
- fontWeight: 900
4626
- });
4627
- var UpdateEmailsTable = function UpdateEmailsTable() {
4628
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4629
- sx: {
4630
- bgcolor: "#fff",
4631
- borderRadius: 4,
4632
- border: "1px solid #f0f0f0",
4633
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
4634
- overflow: "hidden",
4635
- width: "100%"
4636
- },
4637
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4638
- sx: {
4639
- display: "flex",
4640
- justifyContent: "space-between",
4641
- alignItems: "center",
4642
- px: 3,
4643
- py: 2
4644
- },
4645
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4646
- sx: {
4647
- display: "flex",
4648
- alignItems: "center",
4649
- gap: 1
4650
- },
4651
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4652
- variant: "subtitle2",
4653
- sx: {
4654
- fontWeight: 600,
4655
- color: "#111"
4656
- },
4657
- children: "Update Emails"
4658
- }), /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.InfoOutlined, {
4659
- sx: {
4660
- fontSize: "1rem",
4661
- color: "#9e9e9e"
4662
- }
4663
- }), /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Settings, {
4664
- sx: {
4665
- fontSize: "1rem",
4666
- color: "#9e9e9e"
4667
- }
4668
- })]
4669
- }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
4670
- sx: {
4671
- border: "1px solid #E9E9EB",
4672
- borderRadius: "8px",
4673
- height: "36px",
4674
- width: "36px"
4675
- },
4676
- children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Settings, {
4677
- sx: {
4678
- fontSize: "1.1rem",
4679
- color: "#555"
4680
- }
4681
- })
4682
- })]
4683
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableContainer, {
4684
- sx: {
4685
- pb: 2,
4686
- overflowX: "auto",
4687
- width: "100%",
4688
- boxSizing: "border-box"
4689
- },
4690
- children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4691
- sx: {
4692
- px: "25px"
4693
- },
4694
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Table, {
4695
- sx: {
4696
- borderCollapse: "separate",
4697
- borderSpacing: 0,
4698
- border: BORDER$2,
4699
- borderRadius: "12px",
4700
- overflow: "hidden",
4701
- width: "100%",
4702
- minWidth: 800
4703
- },
4704
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
4705
- children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4706
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4707
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$2), {}, {
4708
- textAlign: "left",
4709
- minWidth: 160
4710
- }),
4711
- children: "Email Title"
4712
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4713
- sx: headerCellSx$2,
4714
- children: "Emails Sent"
4715
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4716
- sx: headerCellSx$2,
4717
- children: "Open Rate (Count)"
4718
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4719
- sx: headerCellSx$2,
4720
- children: "Click Rate (Count)"
4721
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4722
- sx: headerCellSx$2,
4723
- children: "Donations from Email"
4724
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4725
- sx: headerCellSx$2,
4726
- children: "Revenue Generated"
4727
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4728
- sx: headerCellSx$2,
4729
- children: "Conversion (Email \u2192 Donation)"
4730
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4731
- sx: headerCellSx$2,
4732
- children: "Avg. Donation from Email"
4733
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4734
- sx: headerCellSx$2,
4735
- children: "Actions Column"
4736
- })]
4737
- })
4738
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
4739
- children: [rows$2.map(function (row, i) {
4740
- return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4741
- sx: {
4742
- "&:hover": {
4743
- bgcolor: "#fafafa"
4744
- }
4745
- },
4746
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4747
- sx: _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
4748
- textAlign: "left",
4749
- fontWeight: 500
4750
- }),
4751
- children: row.title
4752
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4753
- sx: cellSx$2,
4754
- children: row.sent
4755
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4756
- sx: cellSx$2,
4757
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4758
- variant: "body2",
4759
- fontWeight: 500,
4760
- children: row.openRate
4761
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4762
- variant: "caption",
4763
- color: "text.secondary",
4764
- sx: {
4765
- fontWeight: "700"
4766
- },
4767
- children: row.openCount
4768
- })]
4769
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4770
- sx: cellSx$2,
4771
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4772
- variant: "body2",
4773
- fontWeight: 500,
4774
- children: row.clickRate
4775
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4776
- variant: "caption",
4777
- color: "text.secondary",
4778
- sx: {
4779
- fontWeight: "700"
4780
- },
4781
- children: row.clickCount
4782
- })]
4783
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4784
- sx: cellSx$2,
4785
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4786
- variant: "body2",
4787
- fontWeight: 500,
4788
- children: row.donations
4789
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4790
- sx: {
4791
- display: "flex",
4792
- justifyContent: "center"
4793
- },
4794
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$2, {
4795
- data: row.donationsData
4796
- })
4797
- })]
4798
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4799
- sx: cellSx$2,
4800
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4801
- variant: "body2",
4802
- fontWeight: 500,
4803
- children: row.revenue
4804
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4805
- sx: {
4806
- display: "flex",
4807
- justifyContent: "center"
4808
- },
4809
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$2, {
4810
- data: row.revenueData
4811
- })
4812
- })]
4813
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4814
- sx: cellSx$2,
4815
- children: row.conversion
4816
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4817
- sx: cellSx$2,
4818
- children: row.avgDonation
4819
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4820
- sx: cellSx$2,
4821
- children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
4822
- size: "small",
4823
- sx: {
4824
- border: "1px solid #E9E9EB",
4825
- borderRadius: "6px"
4826
- },
4827
- children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.MoreHoriz, {
4828
- fontSize: "small"
4829
- })
4830
- })
4831
- })]
4832
- }, i);
4833
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4834
- sx: {
4835
- "& td": {
4836
- borderBottom: 0
4837
- }
4838
- },
4839
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4840
- sx: _objectSpread2(_objectSpread2({}, aggCellSx$2), {}, {
4841
- textAlign: "left"
4842
- }),
4843
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4844
- variant: "body2",
4845
- fontWeight: 700,
4846
- children: "March Aggregates"
4847
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4848
- variant: "caption",
4849
- color: "text.secondary",
4850
- children: "(Mar 3 - Apr 3)"
4851
- })]
4852
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4853
- sx: aggCellSx$2,
4854
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4855
- sx: {
4856
- minHeight: 42
4857
- },
4858
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4859
- variant: "body2",
4860
- fontWeight: 700,
4861
- children: aggregates$2.sent
4862
- })
4863
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4864
- sx: {
4865
- display: "flex",
4866
- justifyContent: "center"
4867
- },
4868
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$2, {
4869
- data: aggregates$2.sentData
4870
- })
4871
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4872
- variant: "caption",
4873
- color: "text.secondary",
4874
- children: "Mar 3 - Apr 3"
4875
- })]
4876
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4877
- sx: aggCellSx$2,
4878
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4879
- sx: {
4880
- minHeight: 42
4881
- },
4882
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4883
- variant: "body2",
4884
- fontWeight: 700,
4885
- children: aggregates$2.openRate
4886
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4887
- variant: "caption",
4888
- color: "text.secondary",
4889
- sx: {
4890
- fontWeight: "700"
4891
- },
4892
- children: aggregates$2.openCount
4893
- })]
4894
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4895
- sx: {
4896
- display: "flex",
4897
- justifyContent: "center"
4898
- },
4899
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$2, {
4900
- data: aggregates$2.openRateData
4901
- })
4902
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4903
- variant: "caption",
4904
- color: "text.secondary",
4905
- children: "Mar 3 - Apr 3"
4906
- })]
4907
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4908
- sx: aggCellSx$2,
4909
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4910
- sx: {
4911
- minHeight: 42
4912
- },
4913
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4914
- variant: "body2",
4915
- fontWeight: 700,
4916
- children: aggregates$2.clickRate
4917
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4918
- variant: "caption",
4919
- color: "text.secondary",
4920
- sx: {
4921
- fontWeight: "700"
4922
- },
4923
- children: aggregates$2.clickCount
4924
- })]
4925
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4926
- sx: {
4927
- display: "flex",
4928
- justifyContent: "center"
4929
- },
4930
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$2, {
4931
- data: aggregates$2.clickRateData
4932
- })
4933
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4934
- variant: "caption",
4935
- color: "text.secondary",
4936
- children: "Mar 3 - Apr 3"
4937
- })]
4938
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4939
- sx: aggCellSx$2,
4940
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4941
- sx: {
4942
- minHeight: 42
4943
- },
4944
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4945
- variant: "body2",
4946
- fontWeight: 700,
4947
- children: aggregates$2.donations
4948
- })
4949
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4950
- sx: {
4951
- display: "flex",
4952
- justifyContent: "center"
4953
- },
4954
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$2, {
4955
- data: aggregates$2.donationsData
4956
- })
4957
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4958
- variant: "caption",
4959
- color: "text.secondary",
4960
- children: "Mar 3"
4961
- })]
4962
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4963
- sx: aggCellSx$2,
4964
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4965
- sx: {
4966
- minHeight: 42
4967
- },
4968
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4969
- variant: "body2",
4970
- fontWeight: 700,
4971
- children: aggregates$2.revenue
4972
- })
4973
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4974
- sx: {
4975
- display: "flex",
4976
- justifyContent: "center"
4977
- },
4978
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$2, {
4979
- data: aggregates$2.revenueData
4980
- })
4981
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4982
- variant: "caption",
4983
- color: "text.secondary",
4984
- children: "Mar 3 - Apr 3"
4985
- })]
4986
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4987
- sx: aggCellSx$2,
4988
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4989
- sx: {
4990
- minHeight: 42
4991
- },
4992
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4993
- variant: "body2",
4994
- fontWeight: 700,
4995
- children: aggregates$2.conversion
4996
- })
4997
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4998
- sx: {
4999
- display: "flex",
5000
- justifyContent: "center"
5001
- },
5002
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$2, {
5003
- data: aggregates$2.conversionData
5004
- })
5005
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5006
- variant: "caption",
5007
- color: "text.secondary",
5008
- children: "Mar 3 - Apr 3"
5009
- })]
5010
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5011
- sx: aggCellSx$2,
5012
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
5013
- sx: {
5014
- minHeight: 42
5015
- },
5016
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5017
- variant: "body2",
5018
- fontWeight: 700,
5019
- children: aggregates$2.avgDonation
5020
- })
5021
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5022
- sx: {
5023
- display: "flex",
5024
- justifyContent: "center"
5025
- },
5026
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$2, {
5027
- data: aggregates$2.avgDonationData
5028
- })
5029
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5030
- variant: "caption",
5031
- color: "text.secondary",
5032
- children: "Mar 3 - Apr 3"
5033
- })]
5034
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5035
- sx: aggCellSx$2
5036
- })]
5037
- })]
5038
- })]
5039
- })
5040
- })
5041
- })]
5042
- });
5043
- };
5044
-
5045
- var miniChartOptions$1 = function miniChartOptions() {
5046
- var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#6363e6";
5047
- return {
5048
- chart: {
5049
- type: "area",
5050
- sparkline: {
5051
- enabled: true
5052
- },
5053
- animations: {
5054
- enabled: false
5055
- }
5056
- },
5057
- stroke: {
5058
- curve: "smooth",
5059
- width: 2
5060
- },
5061
- fill: {
5062
- type: "gradient",
5063
- gradient: {
5064
- shadeIntensity: 0.4,
5065
- opacityFrom: 5,
5066
- opacityTo: 5
5067
- }
5068
- },
5069
- colors: [color],
5070
- tooltip: {
5071
- enabled: false
5072
- }
5073
- };
5074
- };
5075
- var MiniChart$1 = function MiniChart(_ref) {
5076
- var data = _ref.data,
5077
- color = _ref.color;
5078
- return /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
5079
- options: miniChartOptions$1(color),
5080
- series: [{
5081
- data: data
5082
- }],
5083
- type: "area",
5084
- width: 90,
5085
- height: 40
5086
- });
5087
- };
5088
- var rows$1 = [{
5089
- title: "Lapsed 90 Days",
5090
- sent: "5,200",
5091
- openRate: "18.4%",
5092
- openCount: "(956)",
5093
- clickRate: "6.2%",
5094
- clickCount: "(322)",
5095
- reactivated: "241",
5096
- reactivatedData: [2, 3, 4, 5, 4, 6, 5, 7, 6],
5097
- donations: "241",
5098
- donationsData: [2, 4, 3, 5, 4, 6, 4, 5, 5],
5099
- revenue: "$8,435",
5100
- revenueData: [3, 5, 4, 6, 5, 7, 5, 7, 6],
5101
- conversion: "4.6%"
5102
- }, {
5103
- title: "Lapsed 180 Days",
5104
- sent: "3,800",
5105
- openRate: "14.2%",
5106
- openCount: "(540)",
5107
- clickRate: "4.8%",
5108
- clickCount: "(182)",
5109
- reactivated: "134",
5110
- reactivatedData: [2, 3, 3, 4, 3, 4, 4, 5, 4],
5111
- donations: "134",
5112
- donationsData: [2, 3, 4, 3, 4, 3, 4, 4, 4],
5113
- revenue: "$4,690",
5114
- revenueData: [3, 4, 4, 5, 4, 5, 4, 6, 5],
5115
- conversion: "3.5%"
5116
- }, {
5117
- title: "Lapsed 1 Year",
5118
- sent: "2,100",
5119
- openRate: "9.8%",
5120
- openCount: "(206)",
5121
- clickRate: "2.9%",
5122
- clickCount: "(61)",
5123
- reactivated: "42",
5124
- reactivatedData: [1, 2, 2, 2, 3, 2, 3, 3, 3],
5125
- donations: "42",
5126
- donationsData: [1, 2, 2, 3, 2, 3, 2, 3, 3],
5127
- revenue: "$1,260",
5128
- revenueData: [1, 2, 2, 3, 2, 3, 3, 3, 3],
5129
- conversion: "2.0%"
5130
- }];
5131
- var aggregates$1 = {
5132
- sent: "11,100",
5133
- sentData: [3, 4, 5, 6, 5, 7, 6, 8, 7],
5134
- openRate: "14.4%",
5135
- openCount: "(1,702)",
5136
- openRateData: [4, 5, 5, 6, 5, 7, 6, 7, 6],
5137
- clickRate: "5.1%",
5138
- clickCount: "(565)",
5139
- clickRateData: [2, 3, 4, 4, 5, 4, 5, 5, 5],
5140
- reactivated: "417",
5141
- reactivatedData: [3, 4, 5, 6, 5, 7, 6, 8, 7],
5142
- donations: "417",
5143
- donationsData: [3, 5, 4, 6, 5, 7, 5, 7, 6],
5144
- revenue: "$14,385",
5145
- revenueData: [4, 5, 6, 7, 6, 8, 7, 9, 8],
5146
- conversion: "3.8%",
5147
- conversionData: [2, 3, 3, 4, 3, 5, 4, 5, 4]
5148
- };
5149
- var BORDER$1 = "1px solid #e0e0e0";
5150
- var headerCellSx$1 = {
5151
- fontWeight: 900,
5152
- fontSize: "0.78rem",
5153
- color: "#111",
5154
- bgcolor: "#f3f3f3",
5155
- borderBottom: BORDER$1,
5156
- borderRight: BORDER$1,
5157
- py: "20px",
5158
- px: "5px",
5159
- lineHeight: 1.4,
5160
- textAlign: "center",
5161
- "&:last-child": {
5162
- borderRight: 0
5163
- }
5164
- };
5165
- var cellSx$1 = {
5166
- fontSize: "0.85rem",
5167
- color: "#333",
5168
- borderBottom: BORDER$1,
5169
- borderRight: BORDER$1,
5170
- py: "10px",
5171
- px: "5px",
5172
- verticalAlign: "middle",
5173
- textAlign: "center",
5174
- "&:last-child": {
5175
- borderRight: 0
5176
- }
5177
- };
5178
- var aggCellSx$1 = _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
5179
- bgcolor: "#f3f3f3",
5180
- fontWeight: 900
5181
- });
5182
- var ReEngagementEmails = function ReEngagementEmails() {
5183
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5184
- sx: {
5185
- bgcolor: "#fff",
5186
- borderRadius: 4,
5187
- border: "1px solid #f0f0f0",
5188
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
5189
- overflow: "hidden",
5190
- width: "100%"
5191
- },
5192
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5193
- sx: {
5194
- display: "flex",
5195
- justifyContent: "space-between",
5196
- alignItems: "center",
5197
- px: 3,
5198
- py: 2
5199
- },
5200
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5201
- sx: {
5202
- display: "flex",
5203
- alignItems: "center",
5204
- gap: 1
5205
- },
5206
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5207
- variant: "subtitle2",
5208
- sx: {
5209
- fontWeight: 600,
5210
- color: "#111"
5211
- },
5212
- children: "Re-engagement Emails"
5213
- }), /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.InfoOutlined, {
5214
- sx: {
5215
- fontSize: "1rem",
5216
- color: "#9e9e9e"
5217
- }
5218
- }), /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Settings, {
5219
- sx: {
5220
- fontSize: "1rem",
5221
- color: "#9e9e9e"
5222
- }
5223
- })]
5224
- }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
5225
- sx: {
5226
- border: "1px solid #E9E9EB",
5227
- borderRadius: "8px",
5228
- height: "36px",
5229
- width: "36px"
5230
- },
5231
- children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Settings, {
5232
- sx: {
5233
- fontSize: "1.1rem",
5234
- color: "#555"
5235
- }
5236
- })
5237
- })]
5238
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableContainer, {
5239
- sx: {
5240
- pb: 2,
5241
- overflowX: "auto",
5242
- width: "100%",
5243
- boxSizing: "border-box"
5244
- },
5245
- children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5246
- sx: {
5247
- px: "25px"
5248
- },
5249
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Table, {
5250
- sx: {
5251
- borderCollapse: "separate",
5252
- borderSpacing: 0,
5253
- border: BORDER$1,
5254
- borderRadius: "12px",
5255
- overflow: "hidden",
5256
- width: "100%",
5257
- minWidth: 800
5258
- },
5259
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
5260
- children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5261
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5262
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
5263
- textAlign: "left",
5264
- minWidth: 160
5265
- }),
5266
- children: "Campaign"
5267
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5268
- sx: headerCellSx$1,
5269
- children: "Emails Sent"
5270
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5271
- sx: headerCellSx$1,
5272
- children: "Open Rate (No.)"
5273
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5274
- sx: headerCellSx$1,
5275
- children: "Click Rate (No.)"
5276
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5277
- sx: headerCellSx$1,
5278
- children: "Re-activated Donors"
5279
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5280
- sx: headerCellSx$1,
5281
- children: "Donations"
5282
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5283
- sx: headerCellSx$1,
5284
- children: "Revenue"
5285
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5286
- sx: headerCellSx$1,
5287
- children: "Conversion Rate"
5288
- })]
5289
- })
5290
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
5291
- children: [rows$1.map(function (row, i) {
5292
- return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5293
- sx: {
5294
- "&:hover": {
5295
- bgcolor: "#fafafa"
5296
- }
5297
- },
5298
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5299
- sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
5300
- textAlign: "left",
5301
- fontWeight: 500
5302
- }),
5303
- children: row.title
5304
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5305
- sx: cellSx$1,
5306
- children: row.sent
5307
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5308
- sx: cellSx$1,
5309
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5310
- variant: "body2",
5311
- fontWeight: 500,
5312
- children: row.openRate
5313
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5314
- variant: "caption",
5315
- color: "text.secondary",
5316
- sx: {
5317
- fontWeight: 700
5318
- },
5319
- children: row.openCount
5320
- })]
5321
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5322
- sx: cellSx$1,
5323
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5324
- variant: "body2",
5325
- fontWeight: 500,
5326
- children: row.clickRate
5327
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5328
- variant: "caption",
5329
- color: "text.secondary",
5330
- sx: {
5331
- fontWeight: 700
5332
- },
5333
- children: row.clickCount
5334
- })]
5335
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5336
- sx: cellSx$1,
5337
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5338
- variant: "body2",
5339
- fontWeight: 500,
5340
- children: row.reactivated
5341
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5342
- sx: {
5343
- display: "flex",
5344
- justifyContent: "center"
5345
- },
5346
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5347
- data: row.reactivatedData
5348
- })
5349
- })]
5350
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5351
- sx: cellSx$1,
5352
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5353
- variant: "body2",
5354
- fontWeight: 500,
5355
- children: row.donations
5356
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5357
- sx: {
5358
- display: "flex",
5359
- justifyContent: "center"
5360
- },
5361
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5362
- data: row.donationsData
5363
- })
5364
- })]
5365
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5366
- sx: cellSx$1,
5367
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5368
- variant: "body2",
5369
- fontWeight: 500,
5370
- children: row.revenue
5371
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5372
- sx: {
5373
- display: "flex",
5374
- justifyContent: "center"
5375
- },
5376
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5377
- data: row.revenueData
5378
- })
5379
- })]
5380
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5381
- sx: cellSx$1,
5382
- children: row.conversion
5383
- })]
5384
- }, i);
5385
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5386
- sx: {
5387
- "& td": {
5388
- borderBottom: 0
5389
- }
5390
- },
5391
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5392
- sx: _objectSpread2(_objectSpread2({}, aggCellSx$1), {}, {
5393
- textAlign: "left"
5394
- }),
5395
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5396
- variant: "body2",
5397
- fontWeight: 700,
5398
- children: "Mar Aggregates"
5399
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5400
- variant: "caption",
5401
- color: "text.secondary",
5402
- children: "(Mar 3 - Apr 3)"
5403
- })]
5404
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5405
- sx: aggCellSx$1,
5406
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
5407
- sx: {
5408
- minHeight: 42
5409
- },
5410
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5411
- variant: "body2",
5412
- fontWeight: 700,
5413
- children: aggregates$1.sent
5414
- })
5415
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5416
- sx: {
5417
- display: "flex",
5418
- justifyContent: "center"
5419
- },
5420
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5421
- data: aggregates$1.sentData
5422
- })
5423
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5424
- variant: "caption",
5425
- color: "text.secondary",
5426
- children: "Mar 3 - Apr 3"
5427
- })]
5428
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5429
- sx: aggCellSx$1,
5430
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5431
- sx: {
5432
- minHeight: 42
5433
- },
5434
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5435
- variant: "body2",
5436
- fontWeight: 700,
5437
- children: aggregates$1.openRate
5438
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5439
- variant: "caption",
5440
- color: "text.secondary",
5441
- sx: {
5442
- fontWeight: 700
5443
- },
5444
- children: aggregates$1.openCount
5445
- })]
5446
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5447
- sx: {
5448
- display: "flex",
5449
- justifyContent: "center"
5450
- },
5451
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5452
- data: aggregates$1.openRateData
5453
- })
5454
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5455
- variant: "caption",
5456
- color: "text.secondary",
5457
- children: "Mar 3 - Apr 3"
5458
- })]
5459
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5460
- sx: aggCellSx$1,
5461
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5462
- sx: {
5463
- minHeight: 42
5464
- },
5465
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5466
- variant: "body2",
5467
- fontWeight: 700,
5468
- children: aggregates$1.clickRate
5469
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5470
- variant: "caption",
5471
- color: "text.secondary",
5472
- sx: {
5473
- fontWeight: 700
5474
- },
5475
- children: aggregates$1.clickCount
5476
- })]
5477
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5478
- sx: {
5479
- display: "flex",
5480
- justifyContent: "center"
5481
- },
5482
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5483
- data: aggregates$1.clickRateData
5484
- })
5485
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5486
- variant: "caption",
5487
- color: "text.secondary",
5488
- children: "Mar 3 - Apr 3"
5489
- })]
5490
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5491
- sx: aggCellSx$1,
5492
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
5493
- sx: {
5494
- minHeight: 42
5495
- },
5496
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5497
- variant: "body2",
5498
- fontWeight: 700,
5499
- children: aggregates$1.reactivated
5500
- })
5501
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5502
- sx: {
5503
- display: "flex",
5504
- justifyContent: "center"
5505
- },
5506
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5507
- data: aggregates$1.reactivatedData
5508
- })
5509
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5510
- variant: "caption",
5511
- color: "text.secondary",
5512
- children: "Mar 3 - Apr 3"
5513
- })]
5514
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5515
- sx: aggCellSx$1,
5516
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
5517
- sx: {
5518
- minHeight: 42
5519
- },
5520
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5521
- variant: "body2",
5522
- fontWeight: 700,
5523
- children: aggregates$1.donations
5524
- })
5525
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5526
- sx: {
5527
- display: "flex",
5528
- justifyContent: "center"
5529
- },
5530
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5531
- data: aggregates$1.donationsData
5532
- })
5533
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5534
- variant: "caption",
5535
- color: "text.secondary",
5536
- children: "Mar 3 - Apr 3"
5537
- })]
5538
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5539
- sx: aggCellSx$1,
5540
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
5541
- sx: {
5542
- minHeight: 42
5543
- },
5544
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5545
- variant: "body2",
5546
- fontWeight: 700,
5547
- children: aggregates$1.revenue
5548
- })
5549
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5550
- sx: {
5551
- display: "flex",
5552
- justifyContent: "center"
5553
- },
5554
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5555
- data: aggregates$1.revenueData
5556
- })
5557
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5558
- variant: "caption",
5559
- color: "text.secondary",
5560
- children: "Mar 3 - Apr 3"
5561
- })]
5562
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5563
- sx: aggCellSx$1,
5564
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
5565
- sx: {
5566
- minHeight: 42
5567
- },
5568
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5569
- variant: "body2",
5570
- fontWeight: 700,
5571
- children: aggregates$1.conversion
5572
- })
5573
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5574
- sx: {
5575
- display: "flex",
5576
- justifyContent: "center"
5577
- },
5578
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$1, {
5579
- data: aggregates$1.conversionData
5580
- })
5581
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5582
- variant: "caption",
5583
- color: "text.secondary",
5584
- children: "Mar 3 - Apr 3"
5585
- })]
5586
- })]
5587
- })]
5588
- })]
5589
- })
5590
- })
5591
- })]
5592
- });
5593
- };
5594
-
5595
- var miniChartOptions = function miniChartOptions() {
5596
- var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#6363e6";
5597
- return {
5598
- chart: {
5599
- type: "area",
5600
- sparkline: {
5601
- enabled: true
5602
- },
5603
- animations: {
5604
- enabled: false
5605
- }
5606
- },
5607
- stroke: {
5608
- curve: "smooth",
5609
- width: 2
5610
- },
5611
- fill: {
5612
- type: "gradient",
5613
- gradient: {
5614
- shadeIntensity: 0.4,
5615
- opacityFrom: 5,
5616
- opacityTo: 5
5617
- }
5618
- },
5619
- colors: [color],
5620
- tooltip: {
5621
- enabled: false
5622
- }
5623
- };
5624
- };
5625
- var MiniChart = function MiniChart(_ref) {
5626
- var data = _ref.data,
5627
- color = _ref.color;
5628
- return /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
5629
- options: miniChartOptions(color),
5630
- series: [{
5631
- data: data
5632
- }],
5633
- type: "area",
5634
- width: 90,
5635
- height: 40
5636
- });
5637
- };
5638
- var rows = [{
5639
- title: "March Impact Report",
5640
- sent: "100,000",
5641
- openRate: "24.1%",
5642
- openCount: "(24,100)",
5643
- clickRate: "2.9%",
5644
- clickCount: "(2,900)",
5645
- engagement: "11.4%",
5646
- donations: "210",
5647
- donationsData: [2, 4, 3, 5, 4, 6, 4, 5, 3],
5648
- revenue: "$9,450",
5649
- revenueData: [3, 4, 3, 5, 4, 6, 5, 6, 5],
5650
- repeatRate: "34.2%"
5651
- }, {
5652
- title: "Spring Impact Story",
5653
- sent: "100,000",
5654
- openRate: "21.8%",
5655
- openCount: "(21,800)",
5656
- clickRate: "2.4%",
5657
- clickCount: "(2,400)",
5658
- engagement: "9.8%",
5659
- donations: "185",
5660
- donationsData: [3, 4, 4, 5, 4, 5, 4, 5, 4],
5661
- revenue: "$8,325",
5662
- revenueData: [3, 4, 4, 5, 5, 5, 5, 6, 5],
5663
- repeatRate: "29.7%"
5664
- }, {
5665
- title: "Donor Spotlight",
5666
- sent: "100,000",
5667
- openRate: "19.3%",
5668
- openCount: "(19,300)",
5669
- clickRate: "1.8%",
5670
- clickCount: "(1,800)",
5671
- engagement: "7.2%",
5672
- donations: "142",
5673
- donationsData: [2, 3, 3, 4, 3, 4, 3, 4, 3],
5674
- revenue: "$6,390",
5675
- revenueData: [2, 3, 3, 4, 4, 4, 4, 5, 4],
5676
- repeatRate: "22.5%"
5677
- }];
5678
- var aggregates = {
5679
- sent: "300,000",
5680
- sentData: [4, 5, 6, 7, 6, 8, 7, 9, 8],
5681
- openRate: "21.7%",
5682
- openCount: "(65,200)",
5683
- openRateData: [5, 6, 5, 7, 6, 7, 6, 8, 7],
5684
- clickRate: "2.4%",
5685
- clickCount: "(7,100)",
5686
- clickRateData: [2, 3, 4, 4, 5, 4, 5, 5, 5],
5687
- engagement: "9.5%",
5688
- engagementData: [3, 4, 4, 5, 4, 6, 5, 6, 5],
5689
- donations: "537",
5690
- donationsData: [3, 5, 4, 6, 5, 7, 5, 7, 6],
5691
- revenue: "$24,165",
5692
- revenueData: [4, 5, 6, 7, 6, 8, 7, 9, 8],
5693
- repeatRate: "28.8%",
5694
- repeatRateData: [3, 4, 4, 5, 5, 6, 5, 6, 6]
5695
- };
5696
- var BORDER = "1px solid #e0e0e0";
5697
- var headerCellSx = {
5698
- fontWeight: 900,
5699
- fontSize: "0.78rem",
5700
- color: "#111",
5701
- bgcolor: "#f3f3f3",
5702
- borderBottom: BORDER,
5703
- borderRight: BORDER,
5704
- py: "20px",
5705
- px: "5px",
5706
- lineHeight: 1.4,
5707
- textAlign: "center",
5708
- "&:last-child": {
5709
- borderRight: 0
5710
- }
5711
- };
5712
- var cellSx = {
5713
- fontSize: "0.85rem",
5714
- color: "#333",
5715
- borderBottom: BORDER,
5716
- borderRight: BORDER,
5717
- py: "10px",
5718
- px: "5px",
5719
- verticalAlign: "middle",
5720
- textAlign: "center",
5721
- "&:last-child": {
5722
- borderRight: 0
5723
- }
5724
- };
5725
- var aggCellSx = _objectSpread2(_objectSpread2({}, cellSx), {}, {
5726
- bgcolor: "#f3f3f3",
5727
- fontWeight: 900
5728
- });
5729
- var ImpactEmails = function ImpactEmails() {
5730
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5731
- sx: {
5732
- bgcolor: "#fff",
5733
- borderRadius: 4,
5734
- border: "1px solid #f0f0f0",
5735
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
5736
- overflow: "hidden",
5737
- width: "100%"
5738
- },
5739
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5740
- sx: {
5741
- display: "flex",
5742
- justifyContent: "space-between",
5743
- alignItems: "center",
5744
- px: 3,
5745
- py: 2
5746
- },
5747
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5748
- sx: {
5749
- display: "flex",
5750
- alignItems: "center",
5751
- gap: 1
5752
- },
5753
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5754
- variant: "subtitle2",
5755
- sx: {
5756
- fontWeight: 600,
5757
- color: "#111"
5758
- },
5759
- children: "Impact / Update Your Impact Emails"
5760
- }), /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.InfoOutlined, {
5761
- sx: {
5762
- fontSize: "1rem",
5763
- color: "#9e9e9e"
5764
- }
5765
- }), /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Settings, {
5766
- sx: {
5767
- fontSize: "1rem",
5768
- color: "#9e9e9e"
5769
- }
5770
- })]
5771
- }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
5772
- sx: {
5773
- border: "1px solid #E9E9EB",
5774
- borderRadius: "8px",
5775
- height: "36px",
5776
- width: "36px"
5777
- },
5778
- children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Settings, {
5779
- sx: {
5780
- fontSize: "1.1rem",
5781
- color: "#555"
5782
- }
5783
- })
5784
- })]
5785
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableContainer, {
5786
- sx: {
5787
- pb: 2,
5788
- overflowX: "auto",
5789
- width: "100%",
5790
- boxSizing: "border-box"
5791
- },
5792
- children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5793
- sx: {
5794
- px: "25px"
5795
- },
5796
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Table, {
5797
- sx: {
5798
- borderCollapse: "separate",
5799
- borderSpacing: 0,
5800
- border: BORDER,
5801
- borderRadius: "12px",
5802
- overflow: "hidden",
5803
- width: "100%",
5804
- minWidth: 800
5805
- },
5806
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
5807
- children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5808
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5809
- sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
5810
- textAlign: "left",
5811
- minWidth: 160
5812
- }),
5813
- children: "Email Title"
5814
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5815
- sx: headerCellSx,
5816
- children: "Emails Sent"
5817
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5818
- sx: headerCellSx,
5819
- children: "Open Rate (No.)"
5820
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5821
- sx: headerCellSx,
5822
- children: "Click Rate (No.)"
5823
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5824
- sx: headerCellSx,
5825
- children: "Engagement Rate"
5826
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5827
- sx: headerCellSx,
5828
- children: "Donations Generated"
5829
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5830
- sx: headerCellSx,
5831
- children: "Revenue Generated"
5832
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5833
- sx: headerCellSx,
5834
- children: "Repeat Donation Rate"
5835
- })]
5836
- })
5837
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
5838
- children: [rows.map(function (row, i) {
5839
- return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5840
- sx: {
5841
- "&:hover": {
5842
- bgcolor: "#fafafa"
5843
- }
5844
- },
5845
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5846
- sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
5847
- textAlign: "left",
5848
- fontWeight: 500
5849
- }),
5850
- children: row.title
5851
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5852
- sx: cellSx,
5853
- children: row.sent
5854
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5855
- sx: cellSx,
5856
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5857
- variant: "body2",
5858
- fontWeight: 500,
5859
- children: row.openRate
5860
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5861
- variant: "caption",
5862
- color: "text.secondary",
5863
- sx: {
5864
- fontWeight: 700
5865
- },
5866
- children: row.openCount
5867
- })]
5868
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5869
- sx: cellSx,
5870
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5871
- variant: "body2",
5872
- fontWeight: 500,
5873
- children: row.clickRate
5874
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5875
- variant: "caption",
5876
- color: "text.secondary",
5877
- sx: {
5878
- fontWeight: 700
5879
- },
5880
- children: row.clickCount
5881
- })]
5882
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5883
- sx: cellSx,
5884
- children: row.engagement
5885
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5886
- sx: cellSx,
5887
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5888
- variant: "body2",
5889
- fontWeight: 500,
5890
- children: row.donations
5891
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5892
- sx: {
5893
- display: "flex",
5894
- justifyContent: "center"
5895
- },
5896
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
5897
- data: row.donationsData
5898
- })
5899
- })]
5900
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5901
- sx: cellSx,
5902
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5903
- variant: "body2",
5904
- fontWeight: 500,
5905
- children: row.revenue
5906
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5907
- sx: {
5908
- display: "flex",
5909
- justifyContent: "center"
5910
- },
5911
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
5912
- data: row.revenueData
5913
- })
5914
- })]
5915
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5916
- sx: cellSx,
5917
- children: row.repeatRate
5918
- })]
5919
- }, i);
5920
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5921
- sx: {
5922
- "& td": {
5923
- borderBottom: 0
5924
- }
5925
- },
5926
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5927
- sx: _objectSpread2(_objectSpread2({}, aggCellSx), {}, {
5928
- textAlign: "left"
5929
- }),
5930
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5931
- variant: "body2",
5932
- fontWeight: 700,
5933
- children: "Mar Aggregates"
5934
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5935
- variant: "caption",
5936
- color: "text.secondary",
5937
- children: "(Mar 3 - Apr 3)"
5938
- })]
5939
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5940
- sx: aggCellSx,
5941
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
5942
- sx: {
5943
- minHeight: 42
5944
- },
5945
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5946
- variant: "body2",
5947
- fontWeight: 700,
5948
- children: aggregates.sent
5949
- })
5950
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5951
- sx: {
5952
- display: "flex",
5953
- justifyContent: "center"
5954
- },
5955
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
5956
- data: aggregates.sentData
5957
- })
5958
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5959
- variant: "caption",
5960
- color: "text.secondary",
5961
- children: "Mar 3 - Apr 3"
5962
- })]
5963
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5964
- sx: aggCellSx,
5965
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5966
- sx: {
5967
- minHeight: 42
5968
- },
5969
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5970
- variant: "body2",
5971
- fontWeight: 700,
5972
- children: aggregates.openRate
5973
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5974
- variant: "caption",
5975
- color: "text.secondary",
5976
- sx: {
5977
- fontWeight: 700
5978
- },
5979
- children: aggregates.openCount
5980
- })]
5981
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
5982
- sx: {
5983
- display: "flex",
5984
- justifyContent: "center"
5985
- },
5986
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
5987
- data: aggregates.openRateData
5988
- })
5989
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5990
- variant: "caption",
5991
- color: "text.secondary",
5992
- children: "Mar 3 - Apr 3"
5993
- })]
5994
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5995
- sx: aggCellSx,
5996
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5997
- sx: {
5998
- minHeight: 42
5999
- },
6000
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6001
- variant: "body2",
6002
- fontWeight: 700,
6003
- children: aggregates.clickRate
6004
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6005
- variant: "caption",
6006
- color: "text.secondary",
6007
- sx: {
6008
- fontWeight: 700
6009
- },
6010
- children: aggregates.clickCount
6011
- })]
6012
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6013
- sx: {
6014
- display: "flex",
6015
- justifyContent: "center"
6016
- },
6017
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
6018
- data: aggregates.clickRateData
6019
- })
6020
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6021
- variant: "caption",
6022
- color: "text.secondary",
6023
- children: "Mar 3 - Apr 3"
6024
- })]
6025
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
6026
- sx: aggCellSx,
6027
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6028
- sx: {
6029
- minHeight: 42
6030
- },
6031
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6032
- variant: "body2",
6033
- fontWeight: 700,
6034
- children: aggregates.engagement
6035
- })
6036
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6037
- sx: {
6038
- display: "flex",
6039
- justifyContent: "center"
6040
- },
6041
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
6042
- data: aggregates.engagementData
6043
- })
6044
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6045
- variant: "caption",
6046
- color: "text.secondary",
6047
- children: "Mar 3 - Apr 3"
6048
- })]
6049
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
6050
- sx: aggCellSx,
6051
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6052
- sx: {
6053
- minHeight: 42
6054
- },
6055
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6056
- variant: "body2",
6057
- fontWeight: 700,
6058
- children: aggregates.donations
6059
- })
6060
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6061
- sx: {
6062
- display: "flex",
6063
- justifyContent: "center"
6064
- },
6065
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
6066
- data: aggregates.donationsData
6067
- })
6068
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6069
- variant: "caption",
6070
- color: "text.secondary",
6071
- children: "Mar 3 - Apr 3"
6072
- })]
6073
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
6074
- sx: aggCellSx,
6075
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6076
- sx: {
6077
- minHeight: 42
6078
- },
6079
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6080
- variant: "body2",
6081
- fontWeight: 700,
6082
- children: aggregates.revenue
6083
- })
6084
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6085
- sx: {
6086
- display: "flex",
6087
- justifyContent: "center"
6088
- },
6089
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
6090
- data: aggregates.revenueData
6091
- })
6092
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6093
- variant: "caption",
6094
- color: "text.secondary",
6095
- children: "Mar 3 - Apr 3"
6096
- })]
6097
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
6098
- sx: aggCellSx,
6099
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6100
- sx: {
6101
- minHeight: 42
6102
- },
6103
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6104
- variant: "body2",
6105
- fontWeight: 700,
6106
- children: aggregates.repeatRate
6107
- })
6108
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6109
- sx: {
6110
- display: "flex",
6111
- justifyContent: "center"
6112
- },
6113
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
6114
- data: aggregates.repeatRateData
6115
- })
6116
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6117
- variant: "caption",
6118
- color: "text.secondary",
6119
- children: "Mar 3 - Apr 3"
6120
- })]
6121
- })]
6122
- })]
6123
- })]
6124
- })
6125
- })
6126
- })]
6127
- });
6128
- };
6129
-
6130
- var COUNTRY_COLORS = ["#5B8DEF", "#9B59B6", "#E8453C", "#27AE60", "#F39C12", "#1ABC9C", "#E74C3C", "#3498DB", "#FF6B6B", "#33213bff"];
6131
- var FLAG_ICONS = {
6132
- "United States of America": "https://flagcdn.com/w40/us.png",
6133
- "United Arab Emirates": "https://flagcdn.com/w40/ae.png",
6134
- "United Kingdom": "https://flagcdn.com/w40/gb.png",
6135
- "Kuwait": "https://flagcdn.com/w40/kw.png",
6136
- "Australia": "https://flagcdn.com/w40/au.png",
6137
- "France": "https://flagcdn.com/w40/fr.png",
6138
- "Qatar": "https://flagcdn.com/w40/qa.png",
6139
- "Malta": "https://flagcdn.com/w40/mt.png",
6140
- "Morocco": "https://flagcdn.com/w40/ma.png",
6141
- "Oman": "https://flagcdn.com/w40/om.png"
6142
- };
6143
- var rawData = [{
6144
- country: "United States of America",
6145
- donations: 113,
6146
- oneTimeMedian: 27.50,
6147
- recurringMedian: 19.10,
6148
- totalRaised: 892.93,
6149
- series: [12, 250, 23, 67, 89, 34, 221, 78, 90, 23]
6150
- }, {
6151
- country: "United Arab Emirates",
6152
- donations: 40,
6153
- oneTimeMedian: 16.88,
6154
- recurringMedian: 19.84,
6155
- totalRaised: 489.84,
6156
- series: [5, 10, 18, 25, 12, 8, 150, 22]
6157
- }, {
6158
- country: "United Kingdom",
6159
- donations: 25,
6160
- oneTimeMedian: 15.01,
6161
- recurringMedian: 14.70,
6162
- totalRaised: 314.70,
6163
- series: [8, 15, 18, 12, 20, 15, 10, 180, 25]
6164
- }, {
6165
- country: "Kuwait",
6166
- donations: 12,
6167
- oneTimeMedian: 22.05,
6168
- recurringMedian: 19.10,
6169
- totalRaised: 289.10,
6170
- series: [143, 338, 225, 112, 118, 228, 225, 310, 224, 110, 446]
6171
- }, {
6172
- country: "Australia",
6173
- donations: 8,
6174
- oneTimeMedian: 17.56,
6175
- recurringMedian: 10.46,
6176
- totalRaised: 231.49,
6177
- series: [2, 5, 8, 12, 5, 120, 450, 85, 50, 80, 90, 75, 78, 400]
6178
- }, {
6179
- country: "France",
6180
- donations: 6,
6181
- oneTimeMedian: 0.00,
6182
- recurringMedian: 25.65,
6183
- totalRaised: 154.36,
6184
- series: [5, 10, 8, 15, 100, 10, 15, 8, 12, 20, 10, 8, 15, 10]
6185
- }, {
6186
- country: "Qatar",
6187
- donations: 5,
6188
- oneTimeMedian: 48.41,
6189
- recurringMedian: 11.47,
6190
- totalRaised: 142.79,
6191
- series: [1, 113, 445, 338, 443, 226, 110, 445, 322, 228, 445]
6192
- }, {
6193
- country: "Malta",
6194
- donations: 6,
6195
- oneTimeMedian: 17.30,
6196
- recurringMedian: 19.33,
6197
- totalRaised: 142.29,
6198
- series: [200, 114, 226, 310, 224, 284, 118, 412, 336, 224, 110, 446]
6199
- }, {
6200
- country: "Morocco",
6201
- donations: 2,
6202
- oneTimeMedian: 106.45,
6203
- recurringMedian: 11.76,
6204
- totalRaised: 118.21,
6205
- series: [150, 240, 32, 59, 200, 400, 256, 353, 250, 245, 113]
6206
- }, {
6207
- country: "Oman",
6208
- donations: 6,
6209
- oneTimeMedian: 11.20,
6210
- recurringMedian: 13.40,
6211
- totalRaised: 112.70,
6212
- series: [100, 300, 89, 79, 300, 256, 154, 243, 357, 254]
6213
- }];
6214
- var SORT_OPTIONS = [{
6215
- label: "Sort ascending",
6216
- value: "asc"
6217
- }, {
6218
- label: "Sort descending",
6219
- value: "desc"
6220
- }, {
6221
- label: "Recurring average",
6222
- value: "recurringAvg"
6223
- }, {
6224
- label: "Recurring median",
6225
- value: "recurringMedian"
6226
- }];
6227
- var ROWS_PER_PAGE = 10;
6228
- var dateCategories = Array.from({
6229
- length: 31
6230
- }, function (_, i) {
6231
- var d = new Date(2024, 2, 16 + i);
6232
- return "".concat(d.toLocaleString("default", {
6233
- month: "short"
6234
- }), " ").concat(d.getDate());
6235
- });
6236
- var CountriesPerformance = function CountriesPerformance() {
6237
- var _useState = React.useState("desc"),
6238
- _useState2 = _slicedToArray(_useState, 2),
6239
- sortMode = _useState2[0],
6240
- setSortMode = _useState2[1];
6241
- var _useState3 = React.useState(null),
6242
- _useState4 = _slicedToArray(_useState3, 2),
6243
- anchorEl = _useState4[0],
6244
- setAnchorEl = _useState4[1];
6245
- var _useState5 = React.useState("totalRaised"),
6246
- _useState6 = _slicedToArray(_useState5, 2);
6247
- _useState6[0];
6248
- _useState6[1];
6249
- var _useState7 = React.useState(1),
6250
- _useState8 = _slicedToArray(_useState7, 2),
6251
- page = _useState8[0],
6252
- setPage = _useState8[1];
6253
- var sortedData = [].concat(rawData).sort(function (a, b) {
6254
- if (sortMode === "asc") return a.totalRaised - b.totalRaised;
6255
- if (sortMode === "desc") return b.totalRaised - a.totalRaised;
6256
- if (sortMode === "recurringAvg") return b.recurringMedian - a.recurringMedian;
6257
- if (sortMode === "recurringMedian") return b.recurringMedian - a.recurringMedian;
6258
- return 0;
6259
- });
6260
- var paginated = sortedData.slice((page - 1) * ROWS_PER_PAGE, page * ROWS_PER_PAGE);
6261
- var totalPages = Math.ceil(sortedData.length / ROWS_PER_PAGE);
6262
- var chartSeries = rawData.map(function (d, i) {
6263
- return {
6264
- name: d.country,
6265
- data: d.series,
6266
- color: COUNTRY_COLORS[i]
6267
- };
6268
- });
6269
- var chartOptions = {
6270
- chart: {
6271
- type: "line",
6272
- height: 320,
6273
- toolbar: {
6274
- show: false
6275
- },
6276
- zoom: {
6277
- enabled: false
6278
- },
6279
- animations: {
6280
- enabled: false
6281
- }
6282
- },
6283
- stroke: {
6284
- curve: "straight",
6285
- width: 1.5
6286
- },
6287
- colors: COUNTRY_COLORS,
6288
- xaxis: {
6289
- categories: dateCategories,
6290
- tickAmount: 2,
6291
- labels: {
6292
- style: {
6293
- fontSize: "11px",
6294
- colors: "#888"
6295
- }
6296
- },
6297
- axisBorder: {
6298
- show: false
6299
- },
6300
- axisTicks: {
6301
- show: false
6302
- }
6303
- },
6304
- yaxis: {
6305
- opposite: true,
6306
- min: 0,
6307
- max: 507,
6308
- tickAmount: 3,
6309
- labels: {
6310
- formatter: function formatter(v) {
6311
- var val = Math.round(v);
6312
- if (val === 507) return "$506";
6313
- return "$".concat(val);
6314
- },
6315
- style: {
6316
- fontSize: "11px",
6317
- colors: "#888"
6318
- }
6319
- }
6320
- },
6321
- grid: {
6322
- borderColor: "#f0f0f0",
6323
- strokeDashArray: 0,
6324
- padding: {
6325
- left: 20
6326
- }
6327
- },
6328
- legend: {
6329
- show: false
6330
- },
6331
- tooltip: {
6332
- shared: true,
6333
- custom: function custom(_ref) {
6334
- var dataPointIndex = _ref.dataPointIndex,
6335
- w = _ref.w;
6336
- var date = dateCategories[dataPointIndex];
6337
- var items = w.config.series.map(function (s, i) {
6338
- var val = s.data[dataPointIndex];
6339
- var flag = FLAG_ICONS[s.name] || "";
6340
- 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>");
6341
- }).join("");
6342
- 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>");
6343
- }
6344
- },
6345
- markers: {
6346
- size: 0
6347
- }
6348
- };
6349
- var BORDER = "1px solid #f0f0f0";
6350
- var headerCellSx = {
6351
- fontWeight: 600,
6352
- fontSize: "0.78rem",
6353
- color: "#555",
6354
- borderBottom: "1.5px solid #e8e8e8",
6355
- py: 1.5,
6356
- px: 2,
6357
- bgcolor: "#fff"
6358
- };
6359
- var cellSx = {
6360
- fontSize: "0.85rem",
6361
- color: "#333",
6362
- borderBottom: BORDER,
6363
- py: 1.5,
6364
- px: 2,
6365
- verticalAlign: "middle"
6366
- };
6367
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6368
- sx: {
6369
- minHeight: "100vh"
6370
- },
6371
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6372
- variant: "h4",
6373
- sx: {
6374
- fontWeight: "bold",
6375
- color: "primary.dark",
6376
- mb: 3,
6377
- textAlign: "left"
6378
- },
6379
- children: "Countries"
6380
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6381
- sx: {
6382
- bgcolor: "#ffffffff",
6383
- borderRadius: 4,
6384
- border: BORDER,
6385
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6386
- mb: 3,
6387
- p: 2,
6388
- overflow: "hidden"
6389
- },
6390
- children: [/*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
6391
- options: chartOptions,
6392
- series: chartSeries,
6393
- type: "line",
6394
- height: 320
6395
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableContainer, {
6396
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Table, {
6397
- sx: {
6398
- borderCollapse: "collapse"
6399
- },
6400
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
6401
- children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
6402
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
6403
- sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
6404
- minWidth: 220
6405
- }),
6406
- children: "Country"
6407
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
6408
- sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
6409
- textAlign: "right"
6410
- }),
6411
- children: "Donations"
6412
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
6413
- sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
6414
- textAlign: "right"
6415
- }),
6416
- children: "One-time median"
6417
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
6418
- sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
6419
- textAlign: "right"
6420
- }),
6421
- children: "Recurring median"
6422
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
6423
- sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
6424
- textAlign: "right"
6425
- }),
6426
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6427
- sx: {
6428
- display: "flex",
6429
- alignItems: "center",
6430
- justifyContent: "flex-end",
6431
- gap: 0.5
6432
- },
6433
- children: ["Total raised \u2193", /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
6434
- size: "small",
6435
- onClick: function onClick(e) {
6436
- return setAnchorEl(e.currentTarget);
6437
- },
6438
- sx: {
6439
- ml: 0.5,
6440
- p: 0.3
6441
- },
6442
- children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.MoreVert, {
6443
- fontSize: "small"
6444
- })
6445
- })]
6446
- })
6447
- })]
6448
- })
6449
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableBody, {
6450
- children: paginated.map(function (row, i) {
6451
- var colorIdx = rawData.findIndex(function (d) {
6452
- return d.country === row.country;
6453
- });
6454
- var color = COUNTRY_COLORS[colorIdx] || "#ccc";
6455
- return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
6456
- sx: {
6457
- "&:hover": {
6458
- bgcolor: "#fafafa"
6459
- }
6460
- },
6461
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
6462
- sx: _objectSpread2({}, cellSx),
6463
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6464
- sx: {
6465
- display: "flex",
6466
- alignItems: "center",
6467
- gap: 1.5
6468
- },
6469
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6470
- sx: {
6471
- width: 20,
6472
- height: 3,
6473
- bgcolor: color,
6474
- borderRadius: 2,
6475
- flexShrink: 0
6476
- }
6477
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6478
- component: "img",
6479
- src: FLAG_ICONS[row.country],
6480
- sx: {
6481
- width: 20,
6482
- height: "auto",
6483
- borderRadius: "2px"
6484
- }
6485
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6486
- variant: "body2",
6487
- fontWeight: 500,
6488
- children: row.country
6489
- })]
6490
- })
6491
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
6492
- sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
6493
- textAlign: "right"
6494
- }),
6495
- children: row.donations
6496
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
6497
- sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
6498
- textAlign: "right"
6499
- }),
6500
- children: ["$", row.oneTimeMedian.toFixed(2)]
6501
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
6502
- sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
6503
- textAlign: "right"
6504
- }),
6505
- children: ["$", row.recurringMedian.toFixed(2)]
6506
- }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
6507
- sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
6508
- textAlign: "right",
6509
- fontWeight: 600
6510
- }),
6511
- children: ["$", row.totalRaised.toFixed(2)]
6512
- })]
6513
- }, row.country);
6514
- })
6515
- })]
6516
- })
6517
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6518
- sx: {
6519
- display: "flex",
6520
- alignItems: "center",
6521
- justifyContent: "space-between",
6522
- px: 3,
6523
- py: 2,
6524
- borderTop: BORDER
6525
- },
6526
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6527
- sx: {
6528
- display: "flex",
6529
- gap: 0.5
6530
- },
6531
- children: [[1, 2, 3, 4].map(function (p) {
6532
- return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6533
- onClick: function onClick() {
6534
- return setPage(p);
6535
- },
6536
- sx: {
6537
- width: 32,
6538
- height: 32,
6539
- display: "flex",
6540
- alignItems: "center",
6541
- justifyContent: "center",
6542
- borderRadius: "6px",
6543
- cursor: "pointer",
6544
- fontSize: "13px",
6545
- fontWeight: page === p ? 700 : 400,
6546
- bgcolor: page === p ? "primary.main" : "transparent",
6547
- color: page === p ? "#fff" : "#333",
6548
- border: page === p ? "none" : "1px solid #e0e0e0",
6549
- "&:hover": {
6550
- bgcolor: page === p ? "primary.main" : "#f5f5f5"
6551
- }
6552
- },
6553
- children: p
6554
- }, p);
6555
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6556
- onClick: function onClick() {
6557
- return setPage(Math.min(page + 1, totalPages));
6558
- },
6559
- sx: {
6560
- px: 1.5,
6561
- height: 32,
6562
- display: "flex",
6563
- alignItems: "center",
6564
- gap: 0.5,
6565
- borderRadius: "6px",
6566
- cursor: "pointer",
6567
- fontSize: "13px",
6568
- color: "#333",
6569
- border: "1px solid #e0e0e0",
6570
- "&:hover": {
6571
- bgcolor: "#f5f5f5"
6572
- }
6573
- },
6574
- children: "Next \u203A"
6575
- })]
6576
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6577
- variant: "caption",
6578
- color: "text.secondary",
6579
- children: "35 records"
6580
- })]
6581
- })]
6582
- }), /*#__PURE__*/jsxRuntime.jsx(material.Menu, {
6583
- anchorEl: anchorEl,
6584
- open: Boolean(anchorEl),
6585
- onClose: function onClose() {
6586
- return setAnchorEl(null);
6587
- },
6588
- PaperProps: {
6589
- sx: {
6590
- borderRadius: 2,
6591
- boxShadow: "0 4px 16px rgba(0,0,0,0.1)",
6592
- border: "1px solid #f0f0f0",
6593
- minWidth: 200
6594
- }
6595
- },
6596
- children: SORT_OPTIONS.map(function (opt) {
6597
- return /*#__PURE__*/jsxRuntime.jsxs(material.MenuItem, {
6598
- onClick: function onClick() {
6599
- setSortMode(opt.value);
6600
- setAnchorEl(null);
6601
- },
6602
- sx: {
6603
- fontSize: "13px",
6604
- display: "flex",
6605
- justifyContent: "space-between",
6606
- gap: 2
6607
- },
6608
- children: [opt.label, sortMode === opt.value && /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Check, {
6609
- sx: {
6610
- fontSize: "16px",
6611
- color: "primary.main"
6612
- }
6613
- })]
6614
- }, opt.value);
6615
- })
6616
- })]
6617
- });
6618
- };
6619
-
6620
- var UpdateEmails = function UpdateEmails() {
6621
- var revenueData = [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
6622
- var visitorsData = [100, 200, 150, 250, 300, 275, 325, 350, 280];
6623
- var categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
6624
- var primaryCharts = [{
6625
- label: "Email Sent",
6626
- value: "100,000",
6627
- subValue: "Total sent for March campaign",
6628
- data: revenueData,
6629
- categories: categories
6630
- }, {
6631
- label: "Open rate",
6632
- value: "24.1%",
6633
- subValue: "Total opens: 24,100",
6634
- data: visitorsData,
6635
- categories: categories
6636
- }];
6637
- var secondaryCharts = [{
6638
- label: "Click Rate",
6639
- value: "2.9%",
6640
- subValue: "Total Clicks: 2,900",
6641
- data: visitorsData,
6642
- categories: categories
6643
- }, {
6644
- label: "Donations from Emails",
6645
- value: "210",
6646
- subValue: "Conversion rate: 0.21%(Donations / Sent)",
6647
- data: visitorsData,
6648
- categories: categories
6649
- }];
6650
- var tertiaryCharts = [{
6651
- label: "Revenue from Emails",
6652
- value: "$9,450",
6653
- data: revenueData,
6654
- categories: categories
6655
- }, {
6656
- label: "Avg. Donation from Email",
6657
- value: "$45.00",
6658
- data: visitorsData,
6659
- categories: categories
6660
- }];
6661
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6662
- sx: {
6663
- // p: 4,
6664
- // bgcolor: "primary.mainLight",
6665
- minHeight: "100vh",
6666
- display: "flex",
6667
- flexDirection: "column",
6668
- alignItems: "stretch"
6669
- },
6670
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6671
- sx: {
6672
- display: "flex"
6673
- },
6674
- children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6675
- variant: "h4",
6676
- gutterBottom: true,
6677
- sx: {
6678
- fontWeight: "bold",
6679
- color: "primary.dark",
6680
- mb: 2,
6681
- mt: 2
6682
- },
6683
- children: "Update Emails"
6684
- })
6685
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6686
- container: true,
6687
- spacing: 3,
6688
- sx: {
6689
- mb: 1
6690
- },
6691
- children: primaryCharts.map(function (item, index) {
6692
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
6693
- item: item,
6694
- index: index,
6695
- md: 6
6696
- });
6697
- })
6698
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6699
- container: true,
6700
- spacing: 3,
6701
- sx: {
6702
- mt: 1
6703
- },
6704
- children: secondaryCharts.map(function (item, index) {
6705
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
6706
- item: item,
6707
- index: index,
6708
- md: 6
6709
- });
6710
- })
6711
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6712
- container: true,
6713
- spacing: 3,
6714
- sx: {
6715
- mt: 1
6716
- },
6717
- children: tertiaryCharts.map(function (item, index) {
6718
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
6719
- item: item,
6720
- index: index,
6721
- md: 6
6722
- });
6723
- })
6724
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6725
- item: true,
6726
- md: 12,
6727
- sx: {
6728
- mt: 4
6729
- },
6730
- children: /*#__PURE__*/jsxRuntime.jsx(UpdateEmailsTable, {})
6731
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6732
- item: true,
6733
- md: 12,
6734
- sx: {
6735
- mt: 4
6736
- },
6737
- children: /*#__PURE__*/jsxRuntime.jsx(AbandonedDonationRecovery, {})
6738
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6739
- item: true,
6740
- md: 12,
6741
- sx: {
6742
- mt: 4
6743
- },
6744
- children: /*#__PURE__*/jsxRuntime.jsx(ReEngagementEmails, {})
6745
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6746
- item: true,
6747
- md: 12,
6748
- sx: {
6749
- mt: 4
6750
- },
6751
- children: /*#__PURE__*/jsxRuntime.jsx(ImpactEmails, {})
6752
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6753
- item: true,
6754
- md: 12,
6755
- sx: {
6756
- mt: 4
6757
- },
6758
- children: /*#__PURE__*/jsxRuntime.jsx(CountriesPerformance, {})
6759
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6760
- item: true,
6761
- md: 12,
6762
- sx: {
6763
- mt: 4
6764
- },
6765
- children: /*#__PURE__*/jsxRuntime.jsx(UTMPerformance, {})
6766
- })]
6767
- });
6768
- };
6769
-
6770
- var index = /*#__PURE__*/Object.freeze({
6771
- __proto__: null,
6772
- default: UpdateEmails
6773
- });
6774
-
6775
4073
  var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6776
4074
  var _ref$title = _ref.title,
6777
4075
  title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
@@ -7602,6 +4900,7 @@ var OverallSection = function OverallSection(_ref) {
7602
4900
  onClick: function onClick() {
7603
4901
  return setActiveMetric(title);
7604
4902
  },
4903
+ isActive: activeMetric === title,
7605
4904
  sx: {
7606
4905
  flex: 1,
7607
4906
  border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
@@ -7831,6 +5130,7 @@ var PaidSection = function PaidSection() {
7831
5130
  onClick: function onClick() {
7832
5131
  return setActiveMetric(title);
7833
5132
  },
5133
+ isActive: activeMetric === title,
7834
5134
  sx: {
7835
5135
  flex: 1,
7836
5136
  border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"