@ammarkhalidfarooq/dashboard-package 0.3.3 → 0.3.5

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