@ammarkhalidfarooq/dashboard-package 0.3.3 → 0.3.4

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 +135 -2841
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +136 -2842
  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
 
@@ -2321,7 +2188,8 @@ var PaidSection$2 = /*#__PURE__*/React.lazy(function () {
2321
2188
  });
2322
2189
  var NewOverview = function NewOverview(_ref) {
2323
2190
  var _ref$apiData = _ref.apiData,
2324
- apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
2191
+ apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
2192
+ activeSectionProp = _ref.activeSection;
2325
2193
  var initialMetric = "Revenue";
2326
2194
  var revenueData = (apiData === null || apiData === void 0 ? void 0 : apiData.revenueData) || [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000];
2327
2195
  var donationsData = (apiData === null || apiData === void 0 ? void 0 : apiData.donationsData) || [15, 22, 18, 30, 25, 35, 42, 45, 28];
@@ -2334,6 +2202,12 @@ var NewOverview = function NewOverview(_ref) {
2334
2202
  _useState4 = _slicedToArray(_useState3, 2),
2335
2203
  activeSection = _useState4[0],
2336
2204
  setActiveSection = _useState4[1];
2205
+ React.useEffect(function () {
2206
+ if (activeSectionProp) {
2207
+ var capitalized = activeSectionProp.charAt(0).toUpperCase() + activeSectionProp.slice(1).toLowerCase();
2208
+ setActiveSection(capitalized);
2209
+ }
2210
+ }, [activeSectionProp]);
2337
2211
  var currentData = metric === "Revenue" ? revenueData : donationsData;
2338
2212
  var oneTimeData = (apiData === null || apiData === void 0 ? void 0 : apiData.oneTimeDonations) || [];
2339
2213
  var oneTimeValues = oneTimeData.length > 0 ? oneTimeData.map(function (item) {
@@ -2493,71 +2367,14 @@ var NewOverview = function NewOverview(_ref) {
2493
2367
  data: [8, 9, 11, 10, 10, 12, 9, 11, 10],
2494
2368
  categories: categories
2495
2369
  }];
2496
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2370
+ return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
2497
2371
  sx: {
2498
2372
  minHeight: "100vh",
2499
2373
  display: "flex",
2500
2374
  flexDirection: "column",
2501
2375
  alignItems: "stretch"
2502
2376
  },
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, {
2377
+ children: /*#__PURE__*/jsxRuntime.jsxs(React.Suspense, {
2561
2378
  fallback: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
2562
2379
  sx: {
2563
2380
  display: "flex",
@@ -2586,11 +2403,11 @@ var NewOverview = function NewOverview(_ref) {
2586
2403
  sx: {},
2587
2404
  children: /*#__PURE__*/jsxRuntime.jsx(EmailSection, {})
2588
2405
  })]
2589
- })]
2406
+ })
2590
2407
  });
2591
2408
  };
2592
2409
 
2593
- var index$5 = /*#__PURE__*/Object.freeze({
2410
+ var index = /*#__PURE__*/Object.freeze({
2594
2411
  __proto__: null,
2595
2412
  default: NewOverview
2596
2413
  });
@@ -2769,11 +2586,6 @@ var PerformanceSection = function PerformanceSection(_ref) {
2769
2586
  });
2770
2587
  };
2771
2588
 
2772
- var index$4 = /*#__PURE__*/Object.freeze({
2773
- __proto__: null,
2774
- default: PerformanceSection
2775
- });
2776
-
2777
2589
  var data$1 = [{
2778
2590
  range: "$0 – $12",
2779
2591
  plans: 21,
@@ -3067,11 +2879,6 @@ var RecurringRevenueSection = function RecurringRevenueSection() {
3067
2879
  });
3068
2880
  };
3069
2881
 
3070
- var index$3 = /*#__PURE__*/Object.freeze({
3071
- __proto__: null,
3072
- default: RecurringRevenueSection
3073
- });
3074
-
3075
2882
  var UTM_COLORS = ["#1877F2",
3076
2883
  // Facebook blue
3077
2884
  "#4267B2",
@@ -3080,7 +2887,7 @@ var UTM_COLORS = ["#1877F2",
3080
2887
  // Instagram pink/purple
3081
2888
  "#000000" // Threads black
3082
2889
  ];
3083
- var rawData$1 = [{
2890
+ var rawData = [{
3084
2891
  source: "facebook",
3085
2892
  donations: 156,
3086
2893
  totalRaised: 4520.50,
@@ -3113,14 +2920,14 @@ var rawData$1 = [{
3113
2920
  Donations: [2, 5, 8, 12, 5, 112, 145, 85, 50, 80]
3114
2921
  }
3115
2922
  }];
3116
- var SORT_OPTIONS$1 = [{
2923
+ var SORT_OPTIONS = [{
3117
2924
  label: "Sort ascending",
3118
2925
  value: "asc"
3119
2926
  }, {
3120
2927
  label: "Sort descending",
3121
2928
  value: "desc"
3122
2929
  }];
3123
- var dateCategories$1 = Array.from({
2930
+ var dateCategories = Array.from({
3124
2931
  length: 10
3125
2932
  }, function (_, i) {
3126
2933
  var d = new Date(2024, 2, 16 + i);
@@ -3145,14 +2952,14 @@ var UTMPerformance = function UTMPerformance() {
3145
2952
  _useState8 = _slicedToArray(_useState7, 2),
3146
2953
  parameter = _useState8[0],
3147
2954
  setParameter = _useState8[1];
3148
- var sortedData = [].concat(rawData$1).sort(function (a, b) {
2955
+ var sortedData = [].concat(rawData).sort(function (a, b) {
3149
2956
  var valA = metric === "Revenue" ? a.totalRaised : a.donations;
3150
2957
  var valB = metric === "Revenue" ? b.totalRaised : b.donations;
3151
2958
  if (sortMode === "asc") return valA - valB;
3152
2959
  if (sortMode === "desc") return valB - valA;
3153
2960
  return 0;
3154
2961
  });
3155
- var chartSeries = rawData$1.map(function (d, i) {
2962
+ var chartSeries = rawData.map(function (d, i) {
3156
2963
  return {
3157
2964
  name: d.source,
3158
2965
  data: d.series[metric],
@@ -3179,7 +2986,7 @@ var UTMPerformance = function UTMPerformance() {
3179
2986
  },
3180
2987
  colors: UTM_COLORS,
3181
2988
  xaxis: {
3182
- categories: dateCategories$1,
2989
+ categories: dateCategories,
3183
2990
  tickAmount: 2,
3184
2991
  labels: {
3185
2992
  style: {
@@ -3223,7 +3030,7 @@ var UTMPerformance = function UTMPerformance() {
3223
3030
  custom: function custom(_ref) {
3224
3031
  var dataPointIndex = _ref.dataPointIndex,
3225
3032
  w = _ref.w;
3226
- var date = dateCategories$1[dataPointIndex];
3033
+ var date = dateCategories[dataPointIndex];
3227
3034
  var items = w.config.series.map(function (s, i) {
3228
3035
  var val = s.data[dataPointIndex];
3229
3036
  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 +3166,7 @@ var UTMPerformance = function UTMPerformance() {
3359
3166
  })
3360
3167
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableBody, {
3361
3168
  children: sortedData.map(function (row, i) {
3362
- var colorIdx = rawData$1.findIndex(function (d) {
3169
+ var colorIdx = rawData.findIndex(function (d) {
3363
3170
  return d.source === row.source;
3364
3171
  });
3365
3172
  var color = UTM_COLORS[colorIdx] || "#ccc";
@@ -3422,7 +3229,7 @@ var UTMPerformance = function UTMPerformance() {
3422
3229
  minWidth: 200
3423
3230
  }
3424
3231
  },
3425
- children: SORT_OPTIONS$1.map(function (opt) {
3232
+ children: SORT_OPTIONS.map(function (opt) {
3426
3233
  return /*#__PURE__*/jsxRuntime.jsxs(material.MenuItem, {
3427
3234
  onClick: function onClick() {
3428
3235
  setSortMode(opt.value);
@@ -3680,12 +3487,7 @@ var DonorBehavior = function DonorBehavior() {
3680
3487
  });
3681
3488
  };
3682
3489
 
3683
- var index$2 = /*#__PURE__*/Object.freeze({
3684
- __proto__: null,
3685
- default: DonorBehavior
3686
- });
3687
-
3688
- var miniChartOptions$3 = function miniChartOptions() {
3490
+ var miniChartOptions = function miniChartOptions() {
3689
3491
  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "#6363e6";
3690
3492
  return {
3691
3493
  chart: {
@@ -3715,11 +3517,11 @@ var miniChartOptions$3 = function miniChartOptions() {
3715
3517
  }
3716
3518
  };
3717
3519
  };
3718
- var MiniChart$3 = function MiniChart(_ref) {
3520
+ var MiniChart = function MiniChart(_ref) {
3719
3521
  var data = _ref.data,
3720
3522
  color = _ref.color;
3721
3523
  return /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
3722
- options: miniChartOptions$3(color),
3524
+ options: miniChartOptions(color),
3723
3525
  series: [{
3724
3526
  data: data
3725
3527
  }],
@@ -3728,7 +3530,7 @@ var MiniChart$3 = function MiniChart(_ref) {
3728
3530
  height: 40
3729
3531
  });
3730
3532
  };
3731
- var rows$3 = [{
3533
+ var rows = [{
3732
3534
  title: "Reminder 1 (1hr)",
3733
3535
  abandoned: "1,240",
3734
3536
  sent: "1,240",
@@ -3771,7 +3573,7 @@ var rows$3 = [{
3771
3573
  recovered: "25",
3772
3574
  recoveredData: [1, 1, 2, 1, 2, 2, 2, 2, 3]
3773
3575
  }];
3774
- var aggregates$3 = {
3576
+ var aggregates = {
3775
3577
  abandoned: "1,240",
3776
3578
  sent: "3,469",
3777
3579
  sentData: [2, 3, 4, 5, 4, 6, 5, 7, 8],
@@ -3788,14 +3590,14 @@ var aggregates$3 = {
3788
3590
  recovered: "174",
3789
3591
  recoveredData: [2, 3, 4, 5, 4, 6, 5, 7, 6]
3790
3592
  };
3791
- var BORDER$3 = "1px solid #e0e0e0";
3792
- var headerCellSx$3 = {
3593
+ var BORDER = "1px solid #e0e0e0";
3594
+ var headerCellSx = {
3793
3595
  fontWeight: 900,
3794
3596
  fontSize: "0.78rem",
3795
3597
  color: "#111",
3796
3598
  bgcolor: "#f3f3f3",
3797
- borderBottom: BORDER$3,
3798
- borderRight: BORDER$3,
3599
+ borderBottom: BORDER,
3600
+ borderRight: BORDER,
3799
3601
  py: "20px",
3800
3602
  px: "5px",
3801
3603
  lineHeight: 1.4,
@@ -3804,11 +3606,11 @@ var headerCellSx$3 = {
3804
3606
  borderRight: 0
3805
3607
  }
3806
3608
  };
3807
- var cellSx$3 = {
3609
+ var cellSx = {
3808
3610
  fontSize: "0.85rem",
3809
3611
  color: "#333",
3810
- borderBottom: BORDER$3,
3811
- borderRight: BORDER$3,
3612
+ borderBottom: BORDER,
3613
+ borderRight: BORDER,
3812
3614
  py: "10px",
3813
3615
  px: "5px",
3814
3616
  verticalAlign: "middle",
@@ -3817,7 +3619,7 @@ var cellSx$3 = {
3817
3619
  borderRight: 0
3818
3620
  }
3819
3621
  };
3820
- var aggCellSx$3 = _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
3622
+ var aggCellSx = _objectSpread2(_objectSpread2({}, cellSx), {}, {
3821
3623
  bgcolor: "#f3f3f3",
3822
3624
  fontWeight: 900
3823
3625
  });
@@ -3892,7 +3694,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3892
3694
  sx: {
3893
3695
  borderCollapse: "separate",
3894
3696
  borderSpacing: 0,
3895
- border: BORDER$3,
3697
+ border: BORDER,
3896
3698
  borderRadius: "12px",
3897
3699
  overflow: "hidden",
3898
3700
  width: "100%",
@@ -3901,36 +3703,36 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3901
3703
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
3902
3704
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
3903
3705
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3904
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$3), {}, {
3706
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
3905
3707
  textAlign: "left",
3906
3708
  minWidth: 160
3907
3709
  }),
3908
3710
  children: "Reminder Email"
3909
3711
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3910
- sx: headerCellSx$3,
3712
+ sx: headerCellSx,
3911
3713
  children: "Abandoned Count"
3912
3714
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3913
- sx: headerCellSx$3,
3715
+ sx: headerCellSx,
3914
3716
  children: "Emails Sent"
3915
3717
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3916
- sx: headerCellSx$3,
3718
+ sx: headerCellSx,
3917
3719
  children: "Open Rate (No.)"
3918
3720
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3919
- sx: headerCellSx$3,
3721
+ sx: headerCellSx,
3920
3722
  children: "Click Rate (No.)"
3921
3723
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3922
- sx: headerCellSx$3,
3724
+ sx: headerCellSx,
3923
3725
  children: "Recovery Rate"
3924
3726
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3925
- sx: headerCellSx$3,
3727
+ sx: headerCellSx,
3926
3728
  children: "Recovered Revenue"
3927
3729
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3928
- sx: headerCellSx$3,
3730
+ sx: headerCellSx,
3929
3731
  children: "Recovered Donations"
3930
3732
  })]
3931
3733
  })
3932
3734
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
3933
- children: [rows$3.map(function (row, i) {
3735
+ children: [rows.map(function (row, i) {
3934
3736
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
3935
3737
  sx: {
3936
3738
  "&:hover": {
@@ -3938,19 +3740,19 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3938
3740
  }
3939
3741
  },
3940
3742
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3941
- sx: _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
3743
+ sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
3942
3744
  textAlign: "left",
3943
3745
  fontWeight: 500
3944
3746
  }),
3945
3747
  children: row.title
3946
3748
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3947
- sx: cellSx$3,
3749
+ sx: cellSx,
3948
3750
  children: row.abandoned
3949
3751
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3950
- sx: cellSx$3,
3752
+ sx: cellSx,
3951
3753
  children: row.sent
3952
3754
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3953
- sx: cellSx$3,
3755
+ sx: cellSx,
3954
3756
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3955
3757
  variant: "body2",
3956
3758
  fontWeight: 500,
@@ -3964,7 +3766,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3964
3766
  children: row.openCount
3965
3767
  })]
3966
3768
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3967
- sx: cellSx$3,
3769
+ sx: cellSx,
3968
3770
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3969
3771
  variant: "body2",
3970
3772
  fontWeight: 500,
@@ -3978,7 +3780,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3978
3780
  children: row.clickCount
3979
3781
  })]
3980
3782
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3981
- sx: cellSx$3,
3783
+ sx: cellSx,
3982
3784
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3983
3785
  variant: "body2",
3984
3786
  fontWeight: 500,
@@ -3988,12 +3790,12 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3988
3790
  display: "flex",
3989
3791
  justifyContent: "center"
3990
3792
  },
3991
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
3793
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3992
3794
  data: row.recoveryData
3993
3795
  })
3994
3796
  })]
3995
3797
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3996
- sx: cellSx$3,
3798
+ sx: cellSx,
3997
3799
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3998
3800
  variant: "body2",
3999
3801
  fontWeight: 500,
@@ -4003,12 +3805,12 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4003
3805
  display: "flex",
4004
3806
  justifyContent: "center"
4005
3807
  },
4006
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
3808
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
4007
3809
  data: row.revenueData
4008
3810
  })
4009
3811
  })]
4010
3812
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4011
- sx: cellSx$3,
3813
+ sx: cellSx,
4012
3814
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4013
3815
  variant: "body2",
4014
3816
  fontWeight: 500,
@@ -4018,7 +3820,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4018
3820
  display: "flex",
4019
3821
  justifyContent: "center"
4020
3822
  },
4021
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
3823
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
4022
3824
  data: row.recoveredData
4023
3825
  })
4024
3826
  })]
@@ -4031,7 +3833,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4031
3833
  }
4032
3834
  },
4033
3835
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4034
- sx: _objectSpread2(_objectSpread2({}, aggCellSx$3), {}, {
3836
+ sx: _objectSpread2(_objectSpread2({}, aggCellSx), {}, {
4035
3837
  textAlign: "left"
4036
3838
  }),
4037
3839
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -4044,14 +3846,14 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4044
3846
  children: "(Mar 3 - Apr 3)"
4045
3847
  })]
4046
3848
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4047
- sx: aggCellSx$3,
3849
+ sx: aggCellSx,
4048
3850
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4049
3851
  variant: "body2",
4050
3852
  fontWeight: 700,
4051
- children: aggregates$3.abandoned
3853
+ children: aggregates.abandoned
4052
3854
  })
4053
3855
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4054
- sx: aggCellSx$3,
3856
+ sx: aggCellSx,
4055
3857
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4056
3858
  sx: {
4057
3859
  minHeight: 42
@@ -4059,15 +3861,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4059
3861
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4060
3862
  variant: "body2",
4061
3863
  fontWeight: 700,
4062
- children: aggregates$3.sent
3864
+ children: aggregates.sent
4063
3865
  })
4064
3866
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4065
3867
  sx: {
4066
3868
  display: "flex",
4067
3869
  justifyContent: "center"
4068
3870
  },
4069
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4070
- data: aggregates$3.sentData
3871
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3872
+ data: aggregates.sentData
4071
3873
  })
4072
3874
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4073
3875
  variant: "caption",
@@ -4075,7 +3877,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4075
3877
  children: "Mar 3 - Apr 3"
4076
3878
  })]
4077
3879
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4078
- sx: aggCellSx$3,
3880
+ sx: aggCellSx,
4079
3881
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4080
3882
  sx: {
4081
3883
  minHeight: 42
@@ -4083,22 +3885,22 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4083
3885
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4084
3886
  variant: "body2",
4085
3887
  fontWeight: 700,
4086
- children: aggregates$3.openRate
3888
+ children: aggregates.openRate
4087
3889
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4088
3890
  variant: "caption",
4089
3891
  color: "text.secondary",
4090
3892
  sx: {
4091
3893
  fontWeight: 700
4092
3894
  },
4093
- children: aggregates$3.openCount
3895
+ children: aggregates.openCount
4094
3896
  })]
4095
3897
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4096
3898
  sx: {
4097
3899
  display: "flex",
4098
3900
  justifyContent: "center"
4099
3901
  },
4100
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4101
- data: aggregates$3.openRateData
3902
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3903
+ data: aggregates.openRateData
4102
3904
  })
4103
3905
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4104
3906
  variant: "caption",
@@ -4106,7 +3908,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4106
3908
  children: "Mar 3 - Apr 3"
4107
3909
  })]
4108
3910
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4109
- sx: aggCellSx$3,
3911
+ sx: aggCellSx,
4110
3912
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4111
3913
  sx: {
4112
3914
  minHeight: 42
@@ -4114,22 +3916,22 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4114
3916
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4115
3917
  variant: "body2",
4116
3918
  fontWeight: 700,
4117
- children: aggregates$3.clickRate
3919
+ children: aggregates.clickRate
4118
3920
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4119
3921
  variant: "caption",
4120
3922
  color: "text.secondary",
4121
3923
  sx: {
4122
3924
  fontWeight: 700
4123
3925
  },
4124
- children: aggregates$3.clickCount
3926
+ children: aggregates.clickCount
4125
3927
  })]
4126
3928
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4127
3929
  sx: {
4128
3930
  display: "flex",
4129
3931
  justifyContent: "center"
4130
3932
  },
4131
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4132
- data: aggregates$3.clickRateData
3933
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3934
+ data: aggregates.clickRateData
4133
3935
  })
4134
3936
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4135
3937
  variant: "caption",
@@ -4137,7 +3939,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4137
3939
  children: "Mar 3 - Apr 3"
4138
3940
  })]
4139
3941
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4140
- sx: aggCellSx$3,
3942
+ sx: aggCellSx,
4141
3943
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4142
3944
  sx: {
4143
3945
  minHeight: 42
@@ -4145,15 +3947,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4145
3947
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4146
3948
  variant: "body2",
4147
3949
  fontWeight: 700,
4148
- children: aggregates$3.recoveryRate
3950
+ children: aggregates.recoveryRate
4149
3951
  })
4150
3952
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4151
3953
  sx: {
4152
3954
  display: "flex",
4153
3955
  justifyContent: "center"
4154
3956
  },
4155
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4156
- data: aggregates$3.recoveryData
3957
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3958
+ data: aggregates.recoveryData
4157
3959
  })
4158
3960
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4159
3961
  variant: "caption",
@@ -4161,7 +3963,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4161
3963
  children: "Mar 3 - Apr 3"
4162
3964
  })]
4163
3965
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4164
- sx: aggCellSx$3,
3966
+ sx: aggCellSx,
4165
3967
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4166
3968
  sx: {
4167
3969
  minHeight: 42
@@ -4169,15 +3971,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4169
3971
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4170
3972
  variant: "body2",
4171
3973
  fontWeight: 700,
4172
- children: aggregates$3.revenue
3974
+ children: aggregates.revenue
4173
3975
  })
4174
3976
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4175
3977
  sx: {
4176
3978
  display: "flex",
4177
3979
  justifyContent: "center"
4178
3980
  },
4179
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4180
- data: aggregates$3.revenueData
3981
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
3982
+ data: aggregates.revenueData
4181
3983
  })
4182
3984
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4183
3985
  variant: "caption",
@@ -4185,7 +3987,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4185
3987
  children: "Mar 3 - Apr 3"
4186
3988
  })]
4187
3989
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4188
- sx: aggCellSx$3,
3990
+ sx: aggCellSx,
4189
3991
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4190
3992
  sx: {
4191
3993
  minHeight: 42
@@ -4193,15 +3995,15 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
4193
3995
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4194
3996
  variant: "body2",
4195
3997
  fontWeight: 700,
4196
- children: aggregates$3.recovered
3998
+ children: aggregates.recovered
4197
3999
  })
4198
4000
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4199
4001
  sx: {
4200
4002
  display: "flex",
4201
4003
  justifyContent: "center"
4202
4004
  },
4203
- children: /*#__PURE__*/jsxRuntime.jsx(MiniChart$3, {
4204
- data: aggregates$3.recoveredData
4005
+ children: /*#__PURE__*/jsxRuntime.jsx(MiniChart, {
4006
+ data: aggregates.recoveredData
4205
4007
  })
4206
4008
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4207
4009
  variant: "caption",
@@ -4264,2514 +4066,6 @@ var themeTypography = {
4264
4066
  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
4067
  };
4266
4068
 
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
4069
  var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6776
4070
  var _ref$title = _ref.title,
6777
4071
  title = _ref$title === void 0 ? "Active campaigns" : _ref$title,