@ammarkhalidfarooq/dashboard-package 0.3.2 → 0.3.3

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 +1455 -1127
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +1456 -1128
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -18,6 +18,9 @@ function _arrayLikeToArray(r, a) {
18
18
  function _arrayWithHoles(r) {
19
19
  if (Array.isArray(r)) return r;
20
20
  }
21
+ function _arrayWithoutHoles(r) {
22
+ if (Array.isArray(r)) return _arrayLikeToArray(r);
23
+ }
21
24
  function _defineProperty(e, r, t) {
22
25
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
23
26
  value: t,
@@ -26,6 +29,9 @@ function _defineProperty(e, r, t) {
26
29
  writable: true
27
30
  }) : e[r] = t, e;
28
31
  }
32
+ function _iterableToArray(r) {
33
+ if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
34
+ }
29
35
  function _iterableToArrayLimit(r, l) {
30
36
  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
31
37
  if (null != t) {
@@ -53,6 +59,9 @@ function _iterableToArrayLimit(r, l) {
53
59
  function _nonIterableRest() {
54
60
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
55
61
  }
62
+ function _nonIterableSpread() {
63
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
64
+ }
56
65
  function ownKeys(e, r) {
57
66
  var t = Object.keys(e);
58
67
  if (Object.getOwnPropertySymbols) {
@@ -77,6 +86,9 @@ function _objectSpread2(e) {
77
86
  function _slicedToArray(r, e) {
78
87
  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
79
88
  }
89
+ function _toConsumableArray(r) {
90
+ return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
91
+ }
80
92
  function _toPrimitive(t, r) {
81
93
  if ("object" != typeof t || !t) return t;
82
94
  var e = t[Symbol.toPrimitive];
@@ -762,23 +774,24 @@ var DisplayCard = function DisplayCard(_ref) {
762
774
  value = _ref.value,
763
775
  subValue = _ref.subValue,
764
776
  Icon = _ref.icon,
777
+ onClick = _ref.onClick,
765
778
  _ref$sx = _ref.sx,
766
779
  sx = _ref$sx === void 0 ? {} : _ref$sx;
767
780
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
781
+ onClick: onClick,
768
782
  sx: _objectSpread2({
769
783
  height: "100px",
770
784
  borderRadius: "24px",
771
785
  display: "flex",
772
786
  justifyContent: "space-between",
773
787
  alignItems: "center",
774
- boxShadow: "rgba(0, 0, 0, 0.06) 0px 4px 15px 0px",
775
- // boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
788
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
776
789
  // padding: "16px 16px 16px 18px",
777
790
  py: "10px",
778
791
  px: "16px",
779
792
  cursor: "pointer",
780
793
  bgcolor: "#fff",
781
- border: "1px solid transparent",
794
+ border: "2px solid #f0f0f0",
782
795
  transition: "all 0.3s ease",
783
796
  ":hover": {
784
797
  border: "2px solid rgb(99, 99, 230)"
@@ -793,60 +806,60 @@ var DisplayCard = function DisplayCard(_ref) {
793
806
  },
794
807
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
795
808
  sx: {
796
- fontWeight: '400',
797
- color: 'rgba(0, 0, 0, 0.4)',
798
- fontSize: '12px',
799
- lineHeight: '16px',
800
- textAlign: 'left'
809
+ fontWeight: "400",
810
+ color: "rgba(0, 0, 0, 0.4)",
811
+ fontSize: "12px",
812
+ lineHeight: "16px",
813
+ textAlign: "left"
801
814
  },
802
815
  children: title
803
816
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
804
817
  sx: {
805
- lineHeight: '1.2',
806
- textAlign: 'left',
807
- color: '#000',
808
- fontSize: '20px',
809
- fontWeight: '700',
818
+ lineHeight: "1.2",
819
+ textAlign: "left",
820
+ color: "#000",
821
+ fontSize: "20px",
822
+ fontWeight: "700",
810
823
  mb: 0.5
811
824
  },
812
825
  children: statusValue(value)
813
826
  }), subValue && /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
814
827
  sx: {
815
- fontSize: '11px',
816
- color: typeof subValue === 'string' && (subValue.includes('%') || subValue.includes('new') || subValue.includes('x')) && !subValue.includes('/') && !subValue.includes('pass-through') ? '#22C55E' : 'rgba(0, 0, 0, 0.4)',
817
- fontWeight: '500',
818
- display: 'flex',
819
- alignItems: 'center',
828
+ fontSize: "11px",
829
+ color: typeof subValue === "string" && (subValue.includes("%") || subValue.includes("new") || subValue.includes("x")) && !subValue.includes("/") && !subValue.includes("pass-through") ? "#22C55E" : "rgba(0, 0, 0, 0.4)",
830
+ fontWeight: "500",
831
+ display: "flex",
832
+ alignItems: "center",
820
833
  gap: 0.5
821
834
  },
822
- children: [typeof subValue === 'string' && (subValue.includes('%') || subValue.includes('new') || subValue.includes('x')) && !subValue.includes('/') && !subValue.includes('pass-through') && /*#__PURE__*/jsxRuntime.jsx("span", {
835
+ children: [typeof subValue === "string" && (subValue.includes("%") || subValue.includes("new") || subValue.includes("x")) && !subValue.includes("/") && !subValue.includes("pass-through") && /*#__PURE__*/jsxRuntime.jsx("span", {
823
836
  style: {
824
- fontSize: '14px'
837
+ fontSize: "14px"
825
838
  },
826
839
  children: "\u25B2"
827
840
  }), subValue]
828
841
  })]
829
842
  }), Icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
830
843
  sx: {
831
- width: '44px',
832
- height: '44px',
833
- borderRadius: '50%',
834
- backgroundColor: '#dfdbdb95',
835
- display: 'flex',
836
- alignItems: 'center',
837
- justifyContent: 'center',
838
- color: 'rgb(99, 99, 230)'
844
+ width: "44px",
845
+ height: "44px",
846
+ borderRadius: "50%",
847
+ backgroundColor: "#dfdbdb95",
848
+ display: "flex",
849
+ alignItems: "center",
850
+ justifyContent: "center",
851
+ color: "rgb(99, 99, 230)"
839
852
  },
840
853
  children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
841
854
  sx: {
842
- fontSize: '20px'
855
+ fontSize: "20px"
843
856
  }
844
857
  })
845
858
  })]
846
859
  });
847
860
  };
848
861
  var statusValue = function statusValue(value) {
849
- return _typeof(value) === 'object' && value !== null ? value.value !== undefined ? value.value : JSON.stringify(value) : value;
862
+ return _typeof(value) === "object" && value !== null ? value.value !== undefined ? value.value : JSON.stringify(value) : value;
850
863
  };
851
864
 
852
865
  var CardWrapper = function CardWrapper(_ref) {
@@ -898,230 +911,386 @@ var CardWrapper = function CardWrapper(_ref) {
898
911
  };
899
912
  var LandingPagesCard = function LandingPagesCard() {
900
913
  var data = [{
901
- page: "/zakat",
902
- users: "612 users",
903
- cvr: "1.3% CVR",
904
- color: "#2E7D32"
914
+ page: "/yemen-orphans-appeal",
915
+ visitors: "1,840",
916
+ donations: "32",
917
+ revenue: "$38,200",
918
+ cvr: "1.7%"
905
919
  }, {
906
- page: "/ramadan",
907
- users: "488 users",
908
- cvr: "1.1% CVR",
909
- color: "#2E7D32"
920
+ page: "/gaza-emergency-food",
921
+ visitors: "1,620",
922
+ donations: "28",
923
+ revenue: "$28,600",
924
+ cvr: "1.7%"
910
925
  }, {
911
- page: "/donate",
912
- users: "421 users",
913
- cvr: "0.7% CVR",
914
- color: "#ED6C02"
926
+ page: "/why-zakat-matters",
927
+ visitors: "1,210",
928
+ donations: "21",
929
+ revenue: "$24,800",
930
+ cvr: "1.7%"
915
931
  }, {
916
- page: "/campaigns",
917
- users: "380 users",
918
- cvr: "0.5% CVR",
919
- color: "#ED6C02"
932
+ page: "/somalia-masjid-build",
933
+ visitors: "890",
934
+ donations: "15",
935
+ revenue: "$16,400",
936
+ cvr: "1.7%"
920
937
  }, {
921
- page: "/sadaqah",
922
- users: "290 users",
923
- cvr: "0.9% CVR",
924
- color: "#2E7D32"
938
+ page: "/ramadan-giving-guide",
939
+ visitors: "720",
940
+ donations: "11",
941
+ revenue: "$11,200",
942
+ cvr: "1.5%"
943
+ }, {
944
+ page: "/water-wells-pakistan",
945
+ visitors: "510",
946
+ donations: "11",
947
+ revenue: "$22,980",
948
+ cvr: "2.2%"
925
949
  }];
926
- return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
927
- title: "Top Landing Pages",
928
- children: data.map(function (item, index) {
950
+ return /*#__PURE__*/jsxRuntime.jsxs(CardWrapper, {
951
+ title: "Top landing pages",
952
+ subtitle: "Pages ranked by donations attributed",
953
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
954
+ sx: {
955
+ display: "grid",
956
+ gridTemplateColumns: "3fr 1.2fr 1.2fr 1.2fr 0.8fr",
957
+ gap: 2,
958
+ pb: 1,
959
+ borderBottom: "1px solid #f0f0f0",
960
+ textAlign: "left"
961
+ },
962
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
963
+ sx: {
964
+ fontSize: "12px",
965
+ color: "rgba(0, 0, 0, 0.4)",
966
+ fontWeight: 500
967
+ },
968
+ children: "Page"
969
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
970
+ sx: {
971
+ fontSize: "12px",
972
+ color: "rgba(0, 0, 0, 0.4)",
973
+ fontWeight: 500,
974
+ textAlign: "right"
975
+ },
976
+ children: "Visitors"
977
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
978
+ sx: {
979
+ fontSize: "12px",
980
+ color: "rgba(0, 0, 0, 0.4)",
981
+ fontWeight: 500,
982
+ textAlign: "right"
983
+ },
984
+ children: "Donations"
985
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
986
+ sx: {
987
+ fontSize: "12px",
988
+ color: "rgba(0, 0, 0, 0.4)",
989
+ fontWeight: 500,
990
+ textAlign: "right"
991
+ },
992
+ children: "Revenue"
993
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
994
+ sx: {
995
+ fontSize: "12px",
996
+ color: "rgba(0, 0, 0, 0.4)",
997
+ fontWeight: 500,
998
+ textAlign: "right"
999
+ },
1000
+ children: "Conv. rate"
1001
+ })]
1002
+ }), data.map(function (item, index) {
929
1003
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
930
1004
  sx: {
931
- display: "flex",
932
- justifyContent: "space-between",
933
- alignItems: "center"
1005
+ display: "grid",
1006
+ gridTemplateColumns: "3fr 1.2fr 1.2fr 1.2fr 0.8fr",
1007
+ gap: 2,
1008
+ py: 0.5,
1009
+ alignItems: "center",
1010
+ borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
934
1011
  },
935
1012
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
936
- variant: "body2",
937
1013
  sx: {
938
- fontWeight: 500,
939
- color: "#333"
1014
+ fontSize: "13px",
1015
+ fontWeight: 700,
1016
+ color: "#000",
1017
+ textAlign: "left"
940
1018
  },
941
1019
  children: item.page
942
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1020
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
943
1021
  sx: {
944
- display: "flex",
945
- gap: 2,
946
- alignItems: "center"
1022
+ fontSize: "13px",
1023
+ color: "rgba(0, 0, 0, 0.6)",
1024
+ fontWeight: 500,
1025
+ textAlign: "right"
947
1026
  },
948
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
949
- variant: "body2",
950
- sx: {
951
- color: "#606062",
952
- fontWeight: 500
953
- },
954
- children: item.users
955
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
956
- variant: "body2",
957
- sx: {
958
- color: item.color,
959
- fontWeight: 600,
960
- minWidth: "70px",
961
- textAlign: "right"
962
- },
963
- children: item.cvr
964
- })]
1027
+ children: item.visitors
1028
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1029
+ sx: {
1030
+ fontSize: "13px",
1031
+ color: "rgba(0, 0, 0, 0.6)",
1032
+ fontWeight: 500,
1033
+ textAlign: "right"
1034
+ },
1035
+ children: item.donations
1036
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1037
+ sx: {
1038
+ fontSize: "13px",
1039
+ color: "rgba(0, 0, 0, 0.6)",
1040
+ fontWeight: 500,
1041
+ textAlign: "right"
1042
+ },
1043
+ children: item.revenue
1044
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1045
+ sx: {
1046
+ fontSize: "13px",
1047
+ color: "#22C55E",
1048
+ fontWeight: 700,
1049
+ textAlign: "right"
1050
+ },
1051
+ children: item.cvr
965
1052
  })]
966
1053
  }, index);
967
- })
1054
+ })]
968
1055
  });
969
1056
  };
970
1057
  var KeywordsCard = function KeywordsCard() {
971
1058
  var data = [{
972
1059
  keyword: "zakat calculator",
973
- volume: "320",
974
- rank: "#3",
975
- color: "#E8F5E9",
976
- textColor: "#2E7D32"
1060
+ clicks: "1,240",
1061
+ rank: "#2.1",
1062
+ trend: "Improving",
1063
+ trendType: "up"
977
1064
  }, {
978
- keyword: "donate to ramadan",
979
- volume: "214",
980
- rank: "#5",
981
- color: "#E8F5E9",
982
- textColor: "#2E7D32"
1065
+ keyword: "orphan sponsorship",
1066
+ clicks: "860",
1067
+ rank: "#3.4",
1068
+ trend: "Improving",
1069
+ trendType: "up"
983
1070
  }, {
984
- keyword: "islamic charity uk",
985
- volume: "198",
986
- rank: "#11",
987
- color: "#FFF3E0",
988
- textColor: "#ED6C02"
1071
+ keyword: "ramadan donation guide",
1072
+ clicks: "720",
1073
+ rank: "#1.8",
1074
+ trend: "Improving",
1075
+ trendType: "up"
989
1076
  }, {
990
- keyword: "madinah fundraising",
991
- volume: "176",
992
- rank: "#1",
993
- color: "#E8F5E9",
994
- textColor: "#2E7D32"
1077
+ keyword: "yemen humanitarian crisis",
1078
+ clicks: "580",
1079
+ rank: "#5.2",
1080
+ trend: "Declining",
1081
+ trendType: "down"
995
1082
  }, {
996
- keyword: "online sadaqah",
997
- volume: "142",
998
- rank: "#8",
999
- color: "#FFF3E0",
1000
- textColor: "#ED6C02"
1083
+ keyword: "masjid building fund",
1084
+ clicks: "410",
1085
+ rank: "#4.1",
1086
+ trend: "Improving",
1087
+ trendType: "up"
1001
1088
  }];
1002
- return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
1003
- title: "Top Keywords",
1004
- children: data.map(function (item, index) {
1089
+ return /*#__PURE__*/jsxRuntime.jsxs(CardWrapper, {
1090
+ title: "Top organic keywords",
1091
+ subtitle: "Search terms ranked by clicks \xB7 last 30 days",
1092
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1093
+ sx: {
1094
+ display: "grid",
1095
+ gridTemplateColumns: "2.5fr 1fr 1fr 1fr",
1096
+ gap: 2,
1097
+ pb: 1,
1098
+ borderBottom: "1px solid #f0f0f0"
1099
+ },
1100
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1101
+ sx: {
1102
+ fontSize: "12px",
1103
+ color: "rgba(0, 0, 0, 0.4)",
1104
+ fontWeight: 500
1105
+ },
1106
+ children: "Keyword"
1107
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1108
+ sx: {
1109
+ fontSize: "12px",
1110
+ color: "rgba(0, 0, 0, 0.4)",
1111
+ fontWeight: 500,
1112
+ textAlign: "right"
1113
+ },
1114
+ children: "Clicks"
1115
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1116
+ sx: {
1117
+ fontSize: "12px",
1118
+ color: "rgba(0, 0, 0, 0.4)",
1119
+ fontWeight: 500,
1120
+ textAlign: "center"
1121
+ },
1122
+ children: "Position"
1123
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1124
+ sx: {
1125
+ fontSize: "12px",
1126
+ color: "rgba(0, 0, 0, 0.4)",
1127
+ fontWeight: 500,
1128
+ textAlign: "right"
1129
+ },
1130
+ children: "Trend"
1131
+ })]
1132
+ }), data.map(function (item, index) {
1005
1133
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1006
1134
  sx: {
1007
- display: "flex",
1008
- justifyContent: "space-between",
1009
- alignItems: "center"
1135
+ display: "grid",
1136
+ gridTemplateColumns: "2.5fr 1fr 1fr 1fr",
1137
+ gap: 2,
1138
+ py: 1.5,
1139
+ alignItems: "center",
1140
+ borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1010
1141
  },
1011
1142
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1012
- variant: "body2",
1013
1143
  sx: {
1014
- fontWeight: 500,
1015
- color: "#333"
1144
+ fontSize: "13px",
1145
+ fontWeight: 700,
1146
+ color: "#000",
1147
+ textAlign: "left"
1016
1148
  },
1017
1149
  children: item.keyword
1018
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1150
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1151
+ sx: {
1152
+ fontSize: "13px",
1153
+ color: "rgba(0, 0, 0, 0.6)",
1154
+ fontWeight: 500,
1155
+ textAlign: "right"
1156
+ },
1157
+ children: item.clicks
1158
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1019
1159
  sx: {
1020
1160
  display: "flex",
1021
- gap: 2,
1022
- alignItems: "center"
1161
+ justifyContent: "center"
1023
1162
  },
1024
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1025
- variant: "body2",
1026
- sx: {
1027
- color: "#606062",
1028
- fontWeight: 500
1029
- },
1030
- children: item.volume
1031
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1163
+ children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1032
1164
  sx: {
1033
- bgcolor: item.color,
1034
- color: item.textColor,
1035
- px: 1,
1036
- py: 0.2,
1037
- borderRadius: 1,
1038
- fontSize: "12px",
1039
- fontWeight: 600,
1040
- minWidth: "30px",
1041
- textAlign: "center"
1165
+ bgcolor: "#ebf2ff",
1166
+ color: "#3431e4",
1167
+ px: 1.5,
1168
+ py: 0.5,
1169
+ borderRadius: "100px",
1170
+ fontSize: "11px",
1171
+ fontWeight: 700,
1172
+ textAlign: "center",
1173
+ minWidth: "45px"
1042
1174
  },
1043
1175
  children: item.rank
1044
- })]
1176
+ })
1177
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1178
+ sx: {
1179
+ display: "flex",
1180
+ alignItems: "center",
1181
+ justifyContent: "flex-end",
1182
+ gap: 0.5
1183
+ },
1184
+ children: item.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1185
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1186
+ sx: {
1187
+ fontSize: "10px",
1188
+ color: "#22C55E"
1189
+ },
1190
+ children: "\u25B2"
1191
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1192
+ sx: {
1193
+ fontSize: "12px",
1194
+ color: "#22C55E",
1195
+ fontWeight: 700
1196
+ },
1197
+ children: "Improving"
1198
+ })]
1199
+ }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1200
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1201
+ sx: {
1202
+ fontSize: "10px",
1203
+ color: "#EF4444"
1204
+ },
1205
+ children: "\u25BC"
1206
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1207
+ sx: {
1208
+ fontSize: "12px",
1209
+ color: "#EF4444",
1210
+ fontWeight: 700
1211
+ },
1212
+ children: "Declining"
1213
+ })]
1214
+ })
1045
1215
  })]
1046
1216
  }, index);
1047
- })
1217
+ })]
1048
1218
  });
1049
1219
  };
1050
- var GeographyCard = function GeographyCard() {
1220
+ var GeographyCard = function GeographyCard(_ref2) {
1221
+ var _ref2$subtitle = _ref2.subtitle,
1222
+ subtitle = _ref2$subtitle === void 0 ? "Top countries by organic traffic" : _ref2$subtitle;
1051
1223
  var data = [{
1052
- code: "GB",
1224
+ country: "United States",
1225
+ stats: "3,120 · 37%",
1226
+ percentage: 37
1227
+ }, {
1053
1228
  country: "United Kingdom",
1054
- percentage: 60
1229
+ stats: "1,840 · 22%",
1230
+ percentage: 22
1055
1231
  }, {
1056
- code: "US",
1057
- country: "United States",
1058
- percentage: 14
1232
+ country: "Canada",
1233
+ stats: "920 · 11%",
1234
+ percentage: 11
1059
1235
  }, {
1060
- code: "AU",
1061
1236
  country: "Australia",
1237
+ stats: "650 · 8%",
1062
1238
  percentage: 8
1063
1239
  }, {
1064
- code: "CA",
1065
- country: "Canada",
1066
- percentage: 6
1067
- }, {
1068
- code: "AE",
1069
1240
  country: "UAE",
1070
- percentage: 4
1241
+ stats: "580 · 7%",
1242
+ percentage: 7
1243
+ }, {
1244
+ country: "Other",
1245
+ stats: "1,310 · 16%",
1246
+ percentage: 16
1071
1247
  }];
1072
1248
  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
1073
- title: "Geography Insights",
1249
+ title: "Geography insights",
1250
+ subtitle: subtitle,
1074
1251
  children: data.map(function (item, index) {
1075
1252
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1076
1253
  sx: {
1077
1254
  display: "flex",
1078
1255
  alignItems: "center",
1079
- gap: 2
1256
+ gap: 2,
1257
+ py: 0.8
1080
1258
  },
1081
1259
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1082
- variant: "body2",
1083
- sx: {
1084
- fontWeight: 600,
1085
- color: "#606062",
1086
- minWidth: "25px"
1087
- },
1088
- children: item.code
1089
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1090
- variant: "body2",
1091
1260
  sx: {
1261
+ fontSize: "13px",
1092
1262
  fontWeight: 500,
1093
- color: "#333",
1263
+ color: "rgba(0, 0, 0, 0.4)",
1094
1264
  minWidth: "120px",
1095
1265
  textAlign: "left"
1096
1266
  },
1097
1267
  children: item.country
1098
1268
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1099
1269
  sx: {
1100
- flexGrow: 1,
1101
- mx: 2
1270
+ flexGrow: 1
1102
1271
  },
1103
1272
  children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
1104
1273
  variant: "determinate",
1105
1274
  value: item.percentage,
1106
1275
  sx: {
1107
- height: 12,
1108
- borderRadius: 3,
1109
- bgcolor: "#F0F0F0",
1276
+ height: 10,
1277
+ borderRadius: 5,
1278
+ bgcolor: "#f3f4f6ff",
1110
1279
  "& .MuiLinearProgress-bar": {
1111
- bgcolor: "#0275c2ff",
1112
- borderRadius: 3
1280
+ bgcolor: "#6366F1",
1281
+ borderRadius: 5
1113
1282
  }
1114
1283
  }
1115
1284
  })
1116
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
1117
- variant: "body2",
1285
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1118
1286
  sx: {
1119
- fontWeight: 600,
1120
- color: "#333",
1121
- minWidth: "35px",
1287
+ fontSize: "13px",
1288
+ fontWeight: 700,
1289
+ color: "#000",
1290
+ minWidth: "80px",
1122
1291
  textAlign: "right"
1123
1292
  },
1124
- children: [item.percentage, "%"]
1293
+ children: item.stats
1125
1294
  })]
1126
1295
  }, index);
1127
1296
  })
@@ -1614,7 +1783,7 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
1614
1783
  variant: "determinate",
1615
1784
  value: item.percentage,
1616
1785
  sx: {
1617
- height: 8,
1786
+ height: 15,
1618
1787
  borderRadius: 4,
1619
1788
  bgcolor: "#F3F4F6",
1620
1789
  "& .MuiLinearProgress-bar": {
@@ -1638,121 +1807,347 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
1638
1807
  });
1639
1808
  };
1640
1809
 
1641
- var OrganicSection = function OrganicSection(_ref) {
1642
- var _ref$apiData = _ref.apiData,
1643
- apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
1644
- var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
1645
- var dailyPerformance = {
1646
- label: "Search Visibility",
1647
- series: [{
1648
- name: "Raised",
1649
- data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
1650
- }, {
1651
- name: "Spend",
1652
- data: [800, 950, 700, 1100, 900, 1200, 1300]
1653
- }],
1654
- categories: categories
1655
- };
1656
- var spendAllocation = {
1657
- label: "Source Breakdown",
1658
- data: [4500, 2500, 1500, 700],
1659
- categories: ["Organic", "Direct", "Refferal", "Social"]
1660
- };
1661
- var roasTrend = {
1662
- label: "Traffic Trend",
1663
- value: "8,420",
1664
- data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
1665
- categories: categories
1666
- };
1667
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1668
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1669
- sx: {
1670
- display: 'flex',
1671
- gap: 2,
1672
- mb: 5
1673
- },
1674
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1675
- title: "Organic Users",
1676
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
1677
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
1678
- icon: iconsMaterial.PeopleAltOutlined,
1679
- sx: {
1680
- flex: 1
1681
- }
1682
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1683
- title: "Search Clicks",
1684
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
1685
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
1686
- icon: iconsMaterial.SearchOutlined,
1687
- sx: {
1688
- flex: 1
1689
- }
1690
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1691
- title: "Donations",
1692
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
1693
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
1694
- icon: iconsMaterial.FavoriteOutlined,
1695
- sx: {
1696
- flex: 1
1810
+ var DonorMixCard = function DonorMixCard(_ref) {
1811
+ var _ref$title = _ref.title,
1812
+ title = _ref$title === void 0 ? "Donor mix" : _ref$title,
1813
+ _ref$subtitle = _ref.subtitle,
1814
+ subtitle = _ref$subtitle === void 0 ? "Acquisition vs retention" : _ref$subtitle,
1815
+ _ref$series = _ref.series,
1816
+ series = _ref$series === void 0 ? [68, 32] : _ref$series,
1817
+ _ref$labels = _ref.labels,
1818
+ labels = _ref$labels === void 0 ? ["New donors", "Returning"] : _ref$labels,
1819
+ _ref$colors = _ref.colors,
1820
+ colors = _ref$colors === void 0 ? ["rgb(99, 99, 230)", "#10B981"] : _ref$colors,
1821
+ _ref$centerLabel = _ref.centerLabel,
1822
+ centerLabel = _ref$centerLabel === void 0 ? "donors" : _ref$centerLabel,
1823
+ _ref$centerValue = _ref.centerValue,
1824
+ centerValue = _ref$centerValue === void 0 ? "215" : _ref$centerValue,
1825
+ _ref$items = _ref.items,
1826
+ items = _ref$items === void 0 ? [{
1827
+ label: "New donors",
1828
+ val: "146 · 68%",
1829
+ color: "rgb(99, 99, 230)"
1830
+ }, {
1831
+ label: "Returning",
1832
+ val: "69 · 32%",
1833
+ color: "#10B981"
1834
+ }] : _ref$items,
1835
+ _ref$showBottomSummar = _ref.showBottomSummary,
1836
+ showBottomSummary = _ref$showBottomSummar === void 0 ? true : _ref$showBottomSummar,
1837
+ _ref$bottomSummaryVal = _ref.bottomSummaryValue,
1838
+ bottomSummaryValue = _ref$bottomSummaryVal === void 0 ? "$130.58" : _ref$bottomSummaryVal,
1839
+ _ref$bottomSummaryTre = _ref.bottomSummaryTrend,
1840
+ bottomSummaryTrend = _ref$bottomSummaryTre === void 0 ? "8.4% vs last month" : _ref$bottomSummaryTre,
1841
+ _ref$sx = _ref.sx,
1842
+ sx = _ref$sx === void 0 ? {} : _ref$sx;
1843
+ var chartOptions = {
1844
+ chart: {
1845
+ type: "donut"
1846
+ },
1847
+ labels: labels,
1848
+ colors: colors,
1849
+ plotOptions: {
1850
+ pie: {
1851
+ donut: {
1852
+ size: "75%",
1853
+ labels: {
1854
+ show: true,
1855
+ name: {
1856
+ show: true,
1857
+ fontSize: "13px",
1858
+ fontWeight: 500,
1859
+ color: "rgba(0, 0, 0, 0.4)",
1860
+ offsetY: 25
1861
+ },
1862
+ value: {
1863
+ show: true,
1864
+ fontSize: "24px",
1865
+ fontWeight: 700,
1866
+ color: "#000",
1867
+ offsetY: -15,
1868
+ formatter: function formatter(val) {
1869
+ return val;
1870
+ }
1871
+ },
1872
+ total: {
1873
+ show: true,
1874
+ label: centerLabel,
1875
+ fontSize: "13px",
1876
+ fontWeight: 500,
1877
+ color: "rgba(0, 0, 0, 0.4)",
1878
+ formatter: function formatter() {
1879
+ return centerValue;
1880
+ }
1881
+ }
1882
+ }
1697
1883
  }
1698
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1699
- title: "Conversion Rate",
1700
- value: "$130.58",
1701
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
1702
- icon: iconsMaterial.Adjust,
1703
- sx: {
1704
- flex: 1
1884
+ }
1885
+ },
1886
+ dataLabels: {
1887
+ enabled: false
1888
+ },
1889
+ legend: {
1890
+ show: false
1891
+ },
1892
+ stroke: {
1893
+ show: false
1894
+ },
1895
+ states: {
1896
+ hover: {
1897
+ filter: {
1898
+ type: "none"
1705
1899
  }
1706
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1707
- title: "Revenue raised",
1708
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
1709
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
1710
- icon: iconsMaterial.PaidOutlined,
1900
+ }
1901
+ }
1902
+ };
1903
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1904
+ sx: _objectSpread2({
1905
+ bgcolor: "#fff",
1906
+ borderRadius: "24px",
1907
+ border: "1px solid #f0f0f0",
1908
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
1909
+ p: 3,
1910
+ // height: "100%",
1911
+ // width: "100%",
1912
+ display: "flex",
1913
+ flexDirection: "column"
1914
+ }, sx),
1915
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1916
+ sx: {
1917
+ mb: 2
1918
+ },
1919
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1711
1920
  sx: {
1712
- flex: 1
1713
- }
1714
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1715
- title: "Avg donation",
1716
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
1717
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
1718
- icon: iconsMaterial.PaidOutlined,
1921
+ fontWeight: 700,
1922
+ fontSize: "18px",
1923
+ color: "#000",
1924
+ textAlign: "left"
1925
+ },
1926
+ children: title
1927
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1719
1928
  sx: {
1720
- flex: 1
1721
- }
1929
+ fontSize: "13px",
1930
+ color: "rgba(0, 0, 0, 0.4)",
1931
+ mt: 0.2,
1932
+ textAlign: "left"
1933
+ },
1934
+ children: subtitle
1722
1935
  })]
1936
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1937
+ sx: {
1938
+ position: "relative",
1939
+ height: "180px",
1940
+ mb: 2,
1941
+ display: "flex",
1942
+ justifyContent: "center"
1943
+ },
1944
+ children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
1945
+ options: chartOptions,
1946
+ series: series,
1947
+ type: "donut",
1948
+ width: "240"
1949
+ })
1950
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1951
+ sx: {
1952
+ mt: "auto"
1953
+ },
1954
+ children: [items.map(function (item, idx) {
1955
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1956
+ sx: {
1957
+ display: "flex",
1958
+ justifyContent: "space-between",
1959
+ mb: idx === items.length - 1 ? showBottomSummary ? 3 : 0 : 1.5
1960
+ },
1961
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1962
+ sx: {
1963
+ display: "flex",
1964
+ alignItems: "center",
1965
+ gap: 1
1966
+ },
1967
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1968
+ sx: {
1969
+ width: 10,
1970
+ height: 10,
1971
+ bgcolor: item.color,
1972
+ borderRadius: "2px"
1973
+ }
1974
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1975
+ sx: {
1976
+ fontSize: "13px",
1977
+ fontWeight: 500,
1978
+ color: "rgba(0, 0, 0, 0.4)"
1979
+ },
1980
+ children: item.label
1981
+ })]
1982
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1983
+ sx: {
1984
+ fontSize: "13px",
1985
+ fontWeight: 700,
1986
+ color: "#111"
1987
+ },
1988
+ children: item.val
1989
+ })]
1990
+ }, idx);
1991
+ }), showBottomSummary && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1992
+ sx: {
1993
+ display: "flex",
1994
+ justifyContent: "space-between",
1995
+ alignItems: "center",
1996
+ pt: 2,
1997
+ borderTop: "1px solid #f0f0f0"
1998
+ },
1999
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
2000
+ sx: {
2001
+ fontSize: "20px",
2002
+ fontWeight: 700,
2003
+ color: "#000"
2004
+ },
2005
+ children: bottomSummaryValue
2006
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2007
+ sx: {
2008
+ display: "flex",
2009
+ alignItems: "center",
2010
+ gap: 0.5,
2011
+ color: "#22C55E",
2012
+ fontSize: "12px",
2013
+ fontWeight: 600
2014
+ },
2015
+ children: [/*#__PURE__*/jsxRuntime.jsx("span", {
2016
+ children: "\u25B2"
2017
+ }), bottomSummaryTrend]
2018
+ })]
2019
+ })]
2020
+ })]
2021
+ });
2022
+ };
2023
+
2024
+ var OrganicSection = function OrganicSection(_ref) {
2025
+ var _ref$apiData = _ref.apiData,
2026
+ apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
2027
+ var _useState = React.useState("Organic Users"),
2028
+ _useState2 = _slicedToArray(_useState, 2),
2029
+ activeMetric = _useState2[0],
2030
+ setActiveMetric = _useState2[1];
2031
+ var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
2032
+ var metricInfo = {
2033
+ "Organic Users": {
2034
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
2035
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
2036
+ data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
2037
+ icon: iconsMaterial.PeopleAltOutlined
2038
+ },
2039
+ "Search Clicks": {
2040
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
2041
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
2042
+ data: [1500, 1800, 1600, 2200, 2000, 2400, 2800],
2043
+ icon: iconsMaterial.SearchOutlined
2044
+ },
2045
+ Donations: {
2046
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
2047
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
2048
+ data: [15, 22, 18, 30, 25, 35, 42],
2049
+ icon: iconsMaterial.FavoriteOutlined
2050
+ },
2051
+ "Conversion Rate": {
2052
+ value: "3.1%",
2053
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
2054
+ data: [2.5, 2.7, 2.6, 3.1, 3.0, 2.9, 3.1],
2055
+ icon: iconsMaterial.Adjust
2056
+ },
2057
+ "Revenue raised": {
2058
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
2059
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
2060
+ data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
2061
+ icon: iconsMaterial.PaidOutlined
2062
+ },
2063
+ "Avg donation": {
2064
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
2065
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
2066
+ data: [110, 125, 120, 135, 130, 128, 130.58],
2067
+ icon: iconsMaterial.PaidOutlined
2068
+ }
2069
+ };
2070
+ var selectedInfo = metricInfo[activeMetric];
2071
+ var mainChart = {
2072
+ label: activeMetric,
2073
+ value: selectedInfo.value,
2074
+ trend: selectedInfo.subValue,
2075
+ data: selectedInfo.data,
2076
+ categories: categories
2077
+ };
2078
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
2079
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
2080
+ sx: {
2081
+ display: "flex",
2082
+ gap: 2,
2083
+ mb: 2,
2084
+ flexWrap: "wrap"
2085
+ },
2086
+ children: Object.keys(metricInfo).map(function (title) {
2087
+ return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
2088
+ title: title,
2089
+ value: metricInfo[title].value,
2090
+ subValue: metricInfo[title].subValue,
2091
+ icon: metricInfo[title].icon,
2092
+ onClick: function onClick() {
2093
+ return setActiveMetric(title);
2094
+ },
2095
+ sx: {
2096
+ flex: 1,
2097
+ border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
2098
+ }
2099
+ }, title);
2100
+ })
1723
2101
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
1724
2102
  container: true,
1725
2103
  spacing: 3,
1726
2104
  sx: {
1727
- mt: 4
2105
+ mt: 1
1728
2106
  },
1729
2107
  children: [/*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1730
- item: roasTrend,
1731
- index: 2,
1732
- md: 6,
2108
+ item: mainChart,
2109
+ index: 0,
2110
+ md: 12,
1733
2111
  type: "area",
1734
- metric: "ROAS",
1735
2112
  isPrimary: true,
1736
2113
  isPremium: true
1737
- }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1738
- item: dailyPerformance,
1739
- index: 0,
1740
- md: 6,
1741
- type: "bar",
1742
- metric: "Revenue",
1743
- isPremium: true
1744
- }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1745
- item: spendAllocation,
1746
- index: 1,
1747
- md: 6,
1748
- type: "donut",
1749
- metric: "Revenue",
1750
- isPremium: true
1751
2114
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1752
2115
  item: true,
1753
2116
  xs: 12,
1754
- md: 6,
2117
+ md: 8,
1755
2118
  children: /*#__PURE__*/jsxRuntime.jsx(LandingPagesCard, {})
2119
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2120
+ item: true,
2121
+ xs: 12,
2122
+ md: 4,
2123
+ children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
2124
+ title: "Spend allocation",
2125
+ subtitle: "Where $80.3K went this month",
2126
+ series: [40.8, 35.1, 14.2, 3.3],
2127
+ labels: ["Meta Ads", "Google Ads", "TikTok", "Snapchat"],
2128
+ colors: ["#4267B2", "#4285F4", "#06510bff", "#FFFC00"],
2129
+ centerLabel: "total spend",
2130
+ centerValue: "$8.3K",
2131
+ items: [{
2132
+ label: "Meta Ads",
2133
+ val: "40.8%",
2134
+ color: "#4267B2"
2135
+ }, {
2136
+ label: "Google Ads",
2137
+ val: "35.1%",
2138
+ color: "#4285F4"
2139
+ }, {
2140
+ label: "TikTok",
2141
+ val: "14.2%",
2142
+ color: "#06510bff"
2143
+ }, {
2144
+ label: "Snapchat",
2145
+ val: "3.3%",
2146
+ color: "#FFFC00"
2147
+ }],
2148
+ showBottomSummary: false
2149
+ // sx={{ width: "100%" }}
2150
+ })
1756
2151
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1757
2152
  item: true,
1758
2153
  xs: 12,
@@ -1771,151 +2166,127 @@ var OrganicSection = function OrganicSection(_ref) {
1771
2166
  };
1772
2167
 
1773
2168
  var EmailSection = function EmailSection() {
2169
+ var _useState = React.useState("Total raised"),
2170
+ _useState2 = _slicedToArray(_useState, 2),
2171
+ activeMetric = _useState2[0],
2172
+ setActiveMetric = _useState2[1];
1774
2173
  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
1775
- var dailyPerformance = {
1776
- label: "Clicks & Unique Clicks Trend",
1777
- series: [{
1778
- name: "Clicks",
2174
+ var metricInfo = {
2175
+ "Total raised": {
2176
+ value: "$48,920",
2177
+ subValue: "12% vs last month",
2178
+ icon: iconsMaterial.PaidOutlined,
1779
2179
  data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
1780
- }, {
1781
- name: "Unique Clicks",
1782
- data: [800, 950, 700, 1100, 900, 1200, 1300]
1783
- }],
1784
- categories: categories
2180
+ },
2181
+ Donations: {
2182
+ value: "62",
2183
+ subValue: "12% vs last month",
2184
+ icon: iconsMaterial.FavoriteOutlined,
2185
+ data: [4, 8, 5, 12, 10, 11, 12]
2186
+ },
2187
+ "Conversion rate": {
2188
+ value: "3.2%",
2189
+ subValue: "12% vs last month",
2190
+ icon: iconsMaterial.Adjust,
2191
+ data: [2.8, 3.1, 2.9, 3.4, 3.2, 3.1, 3.2]
2192
+ },
2193
+ CTR: {
2194
+ value: "8.1%",
2195
+ subValue: "12% vs last month",
2196
+ icon: iconsMaterial.NotInterested,
2197
+ data: [7.2, 8.4, 7.8, 8.9, 8.1, 8.0, 8.1]
2198
+ },
2199
+ "Revenue per email": {
2200
+ value: "$2.45",
2201
+ subValue: "12% vs last month",
2202
+ icon: iconsMaterial.IndeterminateCheckBoxOutlined,
2203
+ data: [2.1, 2.5, 2.3, 2.8, 2.4, 2.4, 2.45]
2204
+ },
2205
+ "Open rate": {
2206
+ value: "42.3%",
2207
+ subValue: "12% vs last month",
2208
+ icon: iconsMaterial.Email,
2209
+ data: [38, 44, 40, 46, 42, 41, 42.3]
2210
+ },
2211
+ Clicks: {
2212
+ value: "1,612",
2213
+ subValue: "12% vs last month",
2214
+ icon: iconsMaterial.NearMe,
2215
+ data: [210, 240, 220, 280, 250, 245, 245]
2216
+ },
2217
+ "Unique Clicks": {
2218
+ value: "1,148",
2219
+ subValue: "12% vs last month",
2220
+ icon: iconsMaterial.NearMe,
2221
+ data: [150, 180, 160, 210, 190, 185, 185]
2222
+ },
2223
+ "Bounce rate": {
2224
+ value: "1.8%",
2225
+ subValue: "12% vs last month",
2226
+ icon: iconsMaterial.HighlightOff,
2227
+ data: [2.1, 1.9, 1.8, 1.7, 1.8, 1.8, 1.8]
2228
+ },
2229
+ "Revenue per Click": {
2230
+ value: "$30.35",
2231
+ subValue: "12% vs last month",
2232
+ icon: iconsMaterial.HighlightOff,
2233
+ data: [28, 32, 29, 34, 30, 30, 30.35]
2234
+ }
1785
2235
  };
1786
- var spendAllocation = {
1787
- label: "Bounce Rate Trend",
1788
- data: [20, 25, 30, 35, 40, 45, 50],
2236
+ var selectedInfo = metricInfo[activeMetric];
2237
+ var mainChart = {
2238
+ label: activeMetric,
2239
+ value: selectedInfo.value,
2240
+ trend: selectedInfo.subValue,
2241
+ data: selectedInfo.data,
1789
2242
  categories: categories
1790
2243
  };
1791
- var roasTrend = {
1792
- label: "Open Rate Trend",
1793
- data: [20, 25, 30, 35, 40, 45, 50],
1794
- categories: categories
2244
+ var renderCard = function renderCard(title) {
2245
+ return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
2246
+ title: title,
2247
+ value: metricInfo[title].value,
2248
+ subValue: metricInfo[title].subValue,
2249
+ icon: metricInfo[title].icon,
2250
+ onClick: function onClick() {
2251
+ return setActiveMetric(title);
2252
+ },
2253
+ sx: {
2254
+ flex: 1,
2255
+ border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
2256
+ }
2257
+ });
1795
2258
  };
1796
2259
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1797
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2260
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1798
2261
  sx: {
1799
2262
  display: "flex",
1800
2263
  gap: 2,
1801
- mb: 2
2264
+ mb: 2,
2265
+ flexWrap: "wrap"
1802
2266
  },
1803
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1804
- title: "Total raised",
1805
- value: "$48,920",
1806
- subValue: "12% vs last month",
1807
- icon: iconsMaterial.PaidOutlined,
1808
- sx: {
1809
- flex: 1
1810
- }
1811
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1812
- title: "Donations",
1813
- value: "62",
1814
- subValue: "12% vs last month",
1815
- icon: iconsMaterial.FavoriteOutlined,
1816
- sx: {
1817
- flex: 1
1818
- }
1819
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1820
- title: "Conversion rate",
1821
- value: "3.2%",
1822
- subValue: "12% vs last month",
1823
- icon: iconsMaterial.Adjust,
1824
- sx: {
1825
- flex: 1
1826
- }
1827
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1828
- title: "CTR",
1829
- value: "8.1%",
1830
- subValue: "12% vs last month",
1831
- icon: iconsMaterial.NotInterested,
1832
- sx: {
1833
- flex: 1
1834
- }
1835
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1836
- title: "Revenue per email",
1837
- value: "$2.45",
1838
- subValue: "12% vs last month",
1839
- icon: iconsMaterial.IndeterminateCheckBoxOutlined,
1840
- sx: {
1841
- flex: 1
1842
- }
1843
- })]
1844
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2267
+ children: ["Total raised", "Donations", "Conversion rate", "CTR", "Revenue per email"].map(renderCard)
2268
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1845
2269
  sx: {
1846
2270
  display: "flex",
1847
- gap: 2
2271
+ gap: 2,
2272
+ mb: 2,
2273
+ flexWrap: "wrap"
1848
2274
  },
1849
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1850
- title: "Open rate",
1851
- value: "42.3%",
1852
- subValue: "12% vs last month",
1853
- icon: iconsMaterial.Email,
1854
- sx: {
1855
- flex: 1
1856
- }
1857
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1858
- title: "Clicks",
1859
- value: "1,612",
1860
- subValue: "12% vs last month",
1861
- icon: iconsMaterial.NearMe,
1862
- sx: {
1863
- flex: 1
1864
- }
1865
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1866
- title: "Unique Clicks",
1867
- value: "1,148",
1868
- subValue: "12% vs last month",
1869
- icon: iconsMaterial.NearMe,
1870
- sx: {
1871
- flex: 1
1872
- }
1873
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1874
- title: "Bounce rate",
1875
- value: "1.8%",
1876
- subValue: "12% vs last month",
1877
- icon: iconsMaterial.HighlightOff,
1878
- sx: {
1879
- flex: 1
1880
- }
1881
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1882
- title: "Revenue per Click",
1883
- value: "$30.35",
1884
- subValue: "12% vs last month",
1885
- icon: iconsMaterial.HighlightOff,
1886
- sx: {
1887
- flex: 1
1888
- }
1889
- })]
1890
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
2275
+ children: ["Open rate", "Clicks", "Unique Clicks", "Bounce rate", "Revenue per Click"].map(renderCard)
2276
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1891
2277
  container: true,
1892
2278
  spacing: 3,
1893
2279
  sx: {
1894
- mt: 4
2280
+ mt: 1
1895
2281
  },
1896
- children: [/*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1897
- item: roasTrend,
1898
- index: 2,
1899
- md: 4,
1900
- type: "area",
1901
- metric: "ROAS",
1902
- isPrimary: true,
1903
- isPremium: true
1904
- }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1905
- item: dailyPerformance,
2282
+ children: /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
2283
+ item: mainChart,
1906
2284
  index: 0,
1907
- md: 4,
1908
- type: "area",
1909
- metric: "Revenue",
1910
- isPremium: true
1911
- }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1912
- item: spendAllocation,
1913
- index: 1,
1914
- md: 4,
2285
+ md: 12,
1915
2286
  type: "area",
1916
- metric: "Revenue",
2287
+ isPrimary: true,
1917
2288
  isPremium: true
1918
- })]
2289
+ })
1919
2290
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
1920
2291
  container: true,
1921
2292
  spacing: 3,
@@ -3357,7 +3728,7 @@ var MiniChart$3 = function MiniChart(_ref) {
3357
3728
  height: 40
3358
3729
  });
3359
3730
  };
3360
- var rows$4 = [{
3731
+ var rows$3 = [{
3361
3732
  title: "Reminder 1 (1hr)",
3362
3733
  abandoned: "1,240",
3363
3734
  sent: "1,240",
@@ -3417,14 +3788,14 @@ var aggregates$3 = {
3417
3788
  recovered: "174",
3418
3789
  recoveredData: [2, 3, 4, 5, 4, 6, 5, 7, 6]
3419
3790
  };
3420
- var BORDER$4 = "1px solid #e0e0e0";
3421
- var headerCellSx$4 = {
3791
+ var BORDER$3 = "1px solid #e0e0e0";
3792
+ var headerCellSx$3 = {
3422
3793
  fontWeight: 900,
3423
3794
  fontSize: "0.78rem",
3424
3795
  color: "#111",
3425
3796
  bgcolor: "#f3f3f3",
3426
- borderBottom: BORDER$4,
3427
- borderRight: BORDER$4,
3797
+ borderBottom: BORDER$3,
3798
+ borderRight: BORDER$3,
3428
3799
  py: "20px",
3429
3800
  px: "5px",
3430
3801
  lineHeight: 1.4,
@@ -3433,11 +3804,11 @@ var headerCellSx$4 = {
3433
3804
  borderRight: 0
3434
3805
  }
3435
3806
  };
3436
- var cellSx$4 = {
3807
+ var cellSx$3 = {
3437
3808
  fontSize: "0.85rem",
3438
3809
  color: "#333",
3439
- borderBottom: BORDER$4,
3440
- borderRight: BORDER$4,
3810
+ borderBottom: BORDER$3,
3811
+ borderRight: BORDER$3,
3441
3812
  py: "10px",
3442
3813
  px: "5px",
3443
3814
  verticalAlign: "middle",
@@ -3446,7 +3817,7 @@ var cellSx$4 = {
3446
3817
  borderRight: 0
3447
3818
  }
3448
3819
  };
3449
- var aggCellSx$3 = _objectSpread2(_objectSpread2({}, cellSx$4), {}, {
3820
+ var aggCellSx$3 = _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
3450
3821
  bgcolor: "#f3f3f3",
3451
3822
  fontWeight: 900
3452
3823
  });
@@ -3521,7 +3892,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3521
3892
  sx: {
3522
3893
  borderCollapse: "separate",
3523
3894
  borderSpacing: 0,
3524
- border: BORDER$4,
3895
+ border: BORDER$3,
3525
3896
  borderRadius: "12px",
3526
3897
  overflow: "hidden",
3527
3898
  width: "100%",
@@ -3530,36 +3901,36 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3530
3901
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
3531
3902
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
3532
3903
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3533
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$4), {}, {
3904
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx$3), {}, {
3534
3905
  textAlign: "left",
3535
3906
  minWidth: 160
3536
3907
  }),
3537
3908
  children: "Reminder Email"
3538
3909
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3539
- sx: headerCellSx$4,
3910
+ sx: headerCellSx$3,
3540
3911
  children: "Abandoned Count"
3541
3912
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3542
- sx: headerCellSx$4,
3913
+ sx: headerCellSx$3,
3543
3914
  children: "Emails Sent"
3544
3915
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3545
- sx: headerCellSx$4,
3916
+ sx: headerCellSx$3,
3546
3917
  children: "Open Rate (No.)"
3547
3918
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3548
- sx: headerCellSx$4,
3919
+ sx: headerCellSx$3,
3549
3920
  children: "Click Rate (No.)"
3550
3921
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3551
- sx: headerCellSx$4,
3922
+ sx: headerCellSx$3,
3552
3923
  children: "Recovery Rate"
3553
3924
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3554
- sx: headerCellSx$4,
3925
+ sx: headerCellSx$3,
3555
3926
  children: "Recovered Revenue"
3556
3927
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3557
- sx: headerCellSx$4,
3928
+ sx: headerCellSx$3,
3558
3929
  children: "Recovered Donations"
3559
3930
  })]
3560
3931
  })
3561
3932
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
3562
- children: [rows$4.map(function (row, i) {
3933
+ children: [rows$3.map(function (row, i) {
3563
3934
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
3564
3935
  sx: {
3565
3936
  "&:hover": {
@@ -3567,19 +3938,19 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3567
3938
  }
3568
3939
  },
3569
3940
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3570
- sx: _objectSpread2(_objectSpread2({}, cellSx$4), {}, {
3941
+ sx: _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
3571
3942
  textAlign: "left",
3572
3943
  fontWeight: 500
3573
3944
  }),
3574
3945
  children: row.title
3575
3946
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3576
- sx: cellSx$4,
3947
+ sx: cellSx$3,
3577
3948
  children: row.abandoned
3578
3949
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3579
- sx: cellSx$4,
3950
+ sx: cellSx$3,
3580
3951
  children: row.sent
3581
3952
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3582
- sx: cellSx$4,
3953
+ sx: cellSx$3,
3583
3954
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3584
3955
  variant: "body2",
3585
3956
  fontWeight: 500,
@@ -3593,7 +3964,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3593
3964
  children: row.openCount
3594
3965
  })]
3595
3966
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3596
- sx: cellSx$4,
3967
+ sx: cellSx$3,
3597
3968
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3598
3969
  variant: "body2",
3599
3970
  fontWeight: 500,
@@ -3607,7 +3978,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3607
3978
  children: row.clickCount
3608
3979
  })]
3609
3980
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3610
- sx: cellSx$4,
3981
+ sx: cellSx$3,
3611
3982
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3612
3983
  variant: "body2",
3613
3984
  fontWeight: 500,
@@ -3622,7 +3993,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3622
3993
  })
3623
3994
  })]
3624
3995
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3625
- sx: cellSx$4,
3996
+ sx: cellSx$3,
3626
3997
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3627
3998
  variant: "body2",
3628
3999
  fontWeight: 500,
@@ -3637,7 +4008,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3637
4008
  })
3638
4009
  })]
3639
4010
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3640
- sx: cellSx$4,
4011
+ sx: cellSx$3,
3641
4012
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3642
4013
  variant: "body2",
3643
4014
  fontWeight: 500,
@@ -4162,7 +4533,7 @@ var MiniChart$2 = function MiniChart(_ref) {
4162
4533
  height: 40
4163
4534
  });
4164
4535
  };
4165
- var rows$3 = [{
4536
+ var rows$2 = [{
4166
4537
  title: "March Impact Report",
4167
4538
  sent: "100,000",
4168
4539
  openRate: "24.1%",
@@ -4220,14 +4591,14 @@ var aggregates$2 = {
4220
4591
  openRateData: [8, 5, 4, 6, 5, 6, 5, 6, 5],
4221
4592
  clickRateData: [4, 5, 6, 5, 6, 5, 6, 5, 6]
4222
4593
  };
4223
- var BORDER$3 = "1px solid #e0e0e0";
4224
- var headerCellSx$3 = {
4594
+ var BORDER$2 = "1px solid #e0e0e0";
4595
+ var headerCellSx$2 = {
4225
4596
  fontWeight: 900,
4226
4597
  fontSize: "0.78rem",
4227
4598
  color: "#111",
4228
4599
  bgcolor: "#f3f3f3f3",
4229
- borderBottom: BORDER$3,
4230
- borderRight: BORDER$3,
4600
+ borderBottom: BORDER$2,
4601
+ borderRight: BORDER$2,
4231
4602
  py: "20px",
4232
4603
  px: "5px",
4233
4604
  lineHeight: 1.4,
@@ -4236,11 +4607,11 @@ var headerCellSx$3 = {
4236
4607
  borderRight: 0
4237
4608
  }
4238
4609
  };
4239
- var cellSx$3 = {
4610
+ var cellSx$2 = {
4240
4611
  fontSize: "0.85rem",
4241
4612
  color: "#333",
4242
- borderBottom: BORDER$3,
4243
- borderRight: BORDER$3,
4613
+ borderBottom: BORDER$2,
4614
+ borderRight: BORDER$2,
4244
4615
  py: "10px",
4245
4616
  px: "5px",
4246
4617
  verticalAlign: "middle",
@@ -4249,7 +4620,7 @@ var cellSx$3 = {
4249
4620
  borderRight: 0
4250
4621
  }
4251
4622
  };
4252
- var aggCellSx$2 = _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
4623
+ var aggCellSx$2 = _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
4253
4624
  bgcolor: "#f3f3f3f3",
4254
4625
  fontWeight: 900
4255
4626
  });
@@ -4324,7 +4695,7 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4324
4695
  sx: {
4325
4696
  borderCollapse: "separate",
4326
4697
  borderSpacing: 0,
4327
- border: BORDER$3,
4698
+ border: BORDER$2,
4328
4699
  borderRadius: "12px",
4329
4700
  overflow: "hidden",
4330
4701
  width: "100%",
@@ -4333,39 +4704,39 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4333
4704
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
4334
4705
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4335
4706
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4336
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$3), {}, {
4707
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx$2), {}, {
4337
4708
  textAlign: "left",
4338
4709
  minWidth: 160
4339
4710
  }),
4340
4711
  children: "Email Title"
4341
4712
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4342
- sx: headerCellSx$3,
4713
+ sx: headerCellSx$2,
4343
4714
  children: "Emails Sent"
4344
4715
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4345
- sx: headerCellSx$3,
4716
+ sx: headerCellSx$2,
4346
4717
  children: "Open Rate (Count)"
4347
4718
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4348
- sx: headerCellSx$3,
4719
+ sx: headerCellSx$2,
4349
4720
  children: "Click Rate (Count)"
4350
4721
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4351
- sx: headerCellSx$3,
4722
+ sx: headerCellSx$2,
4352
4723
  children: "Donations from Email"
4353
4724
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4354
- sx: headerCellSx$3,
4725
+ sx: headerCellSx$2,
4355
4726
  children: "Revenue Generated"
4356
4727
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4357
- sx: headerCellSx$3,
4728
+ sx: headerCellSx$2,
4358
4729
  children: "Conversion (Email \u2192 Donation)"
4359
4730
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4360
- sx: headerCellSx$3,
4731
+ sx: headerCellSx$2,
4361
4732
  children: "Avg. Donation from Email"
4362
4733
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4363
- sx: headerCellSx$3,
4734
+ sx: headerCellSx$2,
4364
4735
  children: "Actions Column"
4365
4736
  })]
4366
4737
  })
4367
4738
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
4368
- children: [rows$3.map(function (row, i) {
4739
+ children: [rows$2.map(function (row, i) {
4369
4740
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4370
4741
  sx: {
4371
4742
  "&:hover": {
@@ -4373,16 +4744,16 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4373
4744
  }
4374
4745
  },
4375
4746
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4376
- sx: _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
4747
+ sx: _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
4377
4748
  textAlign: "left",
4378
4749
  fontWeight: 500
4379
4750
  }),
4380
4751
  children: row.title
4381
4752
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4382
- sx: cellSx$3,
4753
+ sx: cellSx$2,
4383
4754
  children: row.sent
4384
4755
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4385
- sx: cellSx$3,
4756
+ sx: cellSx$2,
4386
4757
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4387
4758
  variant: "body2",
4388
4759
  fontWeight: 500,
@@ -4396,7 +4767,7 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4396
4767
  children: row.openCount
4397
4768
  })]
4398
4769
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4399
- sx: cellSx$3,
4770
+ sx: cellSx$2,
4400
4771
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4401
4772
  variant: "body2",
4402
4773
  fontWeight: 500,
@@ -4410,7 +4781,7 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4410
4781
  children: row.clickCount
4411
4782
  })]
4412
4783
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4413
- sx: cellSx$3,
4784
+ sx: cellSx$2,
4414
4785
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4415
4786
  variant: "body2",
4416
4787
  fontWeight: 500,
@@ -4425,7 +4796,7 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4425
4796
  })
4426
4797
  })]
4427
4798
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4428
- sx: cellSx$3,
4799
+ sx: cellSx$2,
4429
4800
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4430
4801
  variant: "body2",
4431
4802
  fontWeight: 500,
@@ -4440,13 +4811,13 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4440
4811
  })
4441
4812
  })]
4442
4813
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4443
- sx: cellSx$3,
4814
+ sx: cellSx$2,
4444
4815
  children: row.conversion
4445
4816
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4446
- sx: cellSx$3,
4817
+ sx: cellSx$2,
4447
4818
  children: row.avgDonation
4448
4819
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4449
- sx: cellSx$3,
4820
+ sx: cellSx$2,
4450
4821
  children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
4451
4822
  size: "small",
4452
4823
  sx: {
@@ -4714,7 +5085,7 @@ var MiniChart$1 = function MiniChart(_ref) {
4714
5085
  height: 40
4715
5086
  });
4716
5087
  };
4717
- var rows$2 = [{
5088
+ var rows$1 = [{
4718
5089
  title: "Lapsed 90 Days",
4719
5090
  sent: "5,200",
4720
5091
  openRate: "18.4%",
@@ -4775,14 +5146,14 @@ var aggregates$1 = {
4775
5146
  conversion: "3.8%",
4776
5147
  conversionData: [2, 3, 3, 4, 3, 5, 4, 5, 4]
4777
5148
  };
4778
- var BORDER$2 = "1px solid #e0e0e0";
4779
- var headerCellSx$2 = {
5149
+ var BORDER$1 = "1px solid #e0e0e0";
5150
+ var headerCellSx$1 = {
4780
5151
  fontWeight: 900,
4781
5152
  fontSize: "0.78rem",
4782
5153
  color: "#111",
4783
5154
  bgcolor: "#f3f3f3",
4784
- borderBottom: BORDER$2,
4785
- borderRight: BORDER$2,
5155
+ borderBottom: BORDER$1,
5156
+ borderRight: BORDER$1,
4786
5157
  py: "20px",
4787
5158
  px: "5px",
4788
5159
  lineHeight: 1.4,
@@ -4791,11 +5162,11 @@ var headerCellSx$2 = {
4791
5162
  borderRight: 0
4792
5163
  }
4793
5164
  };
4794
- var cellSx$2 = {
5165
+ var cellSx$1 = {
4795
5166
  fontSize: "0.85rem",
4796
5167
  color: "#333",
4797
- borderBottom: BORDER$2,
4798
- borderRight: BORDER$2,
5168
+ borderBottom: BORDER$1,
5169
+ borderRight: BORDER$1,
4799
5170
  py: "10px",
4800
5171
  px: "5px",
4801
5172
  verticalAlign: "middle",
@@ -4804,7 +5175,7 @@ var cellSx$2 = {
4804
5175
  borderRight: 0
4805
5176
  }
4806
5177
  };
4807
- var aggCellSx$1 = _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
5178
+ var aggCellSx$1 = _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
4808
5179
  bgcolor: "#f3f3f3",
4809
5180
  fontWeight: 900
4810
5181
  });
@@ -4879,7 +5250,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4879
5250
  sx: {
4880
5251
  borderCollapse: "separate",
4881
5252
  borderSpacing: 0,
4882
- border: BORDER$2,
5253
+ border: BORDER$1,
4883
5254
  borderRadius: "12px",
4884
5255
  overflow: "hidden",
4885
5256
  width: "100%",
@@ -4888,36 +5259,36 @@ var ReEngagementEmails = function ReEngagementEmails() {
4888
5259
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
4889
5260
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4890
5261
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4891
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$2), {}, {
5262
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
4892
5263
  textAlign: "left",
4893
5264
  minWidth: 160
4894
5265
  }),
4895
5266
  children: "Campaign"
4896
5267
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4897
- sx: headerCellSx$2,
5268
+ sx: headerCellSx$1,
4898
5269
  children: "Emails Sent"
4899
5270
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4900
- sx: headerCellSx$2,
5271
+ sx: headerCellSx$1,
4901
5272
  children: "Open Rate (No.)"
4902
5273
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4903
- sx: headerCellSx$2,
5274
+ sx: headerCellSx$1,
4904
5275
  children: "Click Rate (No.)"
4905
5276
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4906
- sx: headerCellSx$2,
5277
+ sx: headerCellSx$1,
4907
5278
  children: "Re-activated Donors"
4908
5279
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4909
- sx: headerCellSx$2,
5280
+ sx: headerCellSx$1,
4910
5281
  children: "Donations"
4911
5282
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4912
- sx: headerCellSx$2,
5283
+ sx: headerCellSx$1,
4913
5284
  children: "Revenue"
4914
5285
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4915
- sx: headerCellSx$2,
5286
+ sx: headerCellSx$1,
4916
5287
  children: "Conversion Rate"
4917
5288
  })]
4918
5289
  })
4919
5290
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
4920
- children: [rows$2.map(function (row, i) {
5291
+ children: [rows$1.map(function (row, i) {
4921
5292
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4922
5293
  sx: {
4923
5294
  "&:hover": {
@@ -4925,16 +5296,16 @@ var ReEngagementEmails = function ReEngagementEmails() {
4925
5296
  }
4926
5297
  },
4927
5298
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4928
- sx: _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
5299
+ sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
4929
5300
  textAlign: "left",
4930
5301
  fontWeight: 500
4931
5302
  }),
4932
5303
  children: row.title
4933
5304
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4934
- sx: cellSx$2,
5305
+ sx: cellSx$1,
4935
5306
  children: row.sent
4936
5307
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4937
- sx: cellSx$2,
5308
+ sx: cellSx$1,
4938
5309
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4939
5310
  variant: "body2",
4940
5311
  fontWeight: 500,
@@ -4948,7 +5319,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4948
5319
  children: row.openCount
4949
5320
  })]
4950
5321
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4951
- sx: cellSx$2,
5322
+ sx: cellSx$1,
4952
5323
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4953
5324
  variant: "body2",
4954
5325
  fontWeight: 500,
@@ -4962,7 +5333,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4962
5333
  children: row.clickCount
4963
5334
  })]
4964
5335
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4965
- sx: cellSx$2,
5336
+ sx: cellSx$1,
4966
5337
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4967
5338
  variant: "body2",
4968
5339
  fontWeight: 500,
@@ -4977,7 +5348,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4977
5348
  })
4978
5349
  })]
4979
5350
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4980
- sx: cellSx$2,
5351
+ sx: cellSx$1,
4981
5352
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4982
5353
  variant: "body2",
4983
5354
  fontWeight: 500,
@@ -4992,7 +5363,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4992
5363
  })
4993
5364
  })]
4994
5365
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4995
- sx: cellSx$2,
5366
+ sx: cellSx$1,
4996
5367
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4997
5368
  variant: "body2",
4998
5369
  fontWeight: 500,
@@ -5007,7 +5378,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
5007
5378
  })
5008
5379
  })]
5009
5380
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5010
- sx: cellSx$2,
5381
+ sx: cellSx$1,
5011
5382
  children: row.conversion
5012
5383
  })]
5013
5384
  }, i);
@@ -5264,7 +5635,7 @@ var MiniChart = function MiniChart(_ref) {
5264
5635
  height: 40
5265
5636
  });
5266
5637
  };
5267
- var rows$1 = [{
5638
+ var rows = [{
5268
5639
  title: "March Impact Report",
5269
5640
  sent: "100,000",
5270
5641
  openRate: "24.1%",
@@ -5322,14 +5693,14 @@ var aggregates = {
5322
5693
  repeatRate: "28.8%",
5323
5694
  repeatRateData: [3, 4, 4, 5, 5, 6, 5, 6, 6]
5324
5695
  };
5325
- var BORDER$1 = "1px solid #e0e0e0";
5326
- var headerCellSx$1 = {
5696
+ var BORDER = "1px solid #e0e0e0";
5697
+ var headerCellSx = {
5327
5698
  fontWeight: 900,
5328
5699
  fontSize: "0.78rem",
5329
5700
  color: "#111",
5330
5701
  bgcolor: "#f3f3f3",
5331
- borderBottom: BORDER$1,
5332
- borderRight: BORDER$1,
5702
+ borderBottom: BORDER,
5703
+ borderRight: BORDER,
5333
5704
  py: "20px",
5334
5705
  px: "5px",
5335
5706
  lineHeight: 1.4,
@@ -5338,11 +5709,11 @@ var headerCellSx$1 = {
5338
5709
  borderRight: 0
5339
5710
  }
5340
5711
  };
5341
- var cellSx$1 = {
5712
+ var cellSx = {
5342
5713
  fontSize: "0.85rem",
5343
5714
  color: "#333",
5344
- borderBottom: BORDER$1,
5345
- borderRight: BORDER$1,
5715
+ borderBottom: BORDER,
5716
+ borderRight: BORDER,
5346
5717
  py: "10px",
5347
5718
  px: "5px",
5348
5719
  verticalAlign: "middle",
@@ -5351,7 +5722,7 @@ var cellSx$1 = {
5351
5722
  borderRight: 0
5352
5723
  }
5353
5724
  };
5354
- var aggCellSx = _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
5725
+ var aggCellSx = _objectSpread2(_objectSpread2({}, cellSx), {}, {
5355
5726
  bgcolor: "#f3f3f3",
5356
5727
  fontWeight: 900
5357
5728
  });
@@ -5426,7 +5797,7 @@ var ImpactEmails = function ImpactEmails() {
5426
5797
  sx: {
5427
5798
  borderCollapse: "separate",
5428
5799
  borderSpacing: 0,
5429
- border: BORDER$1,
5800
+ border: BORDER,
5430
5801
  borderRadius: "12px",
5431
5802
  overflow: "hidden",
5432
5803
  width: "100%",
@@ -5435,36 +5806,36 @@ var ImpactEmails = function ImpactEmails() {
5435
5806
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
5436
5807
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5437
5808
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5438
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
5809
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
5439
5810
  textAlign: "left",
5440
5811
  minWidth: 160
5441
5812
  }),
5442
5813
  children: "Email Title"
5443
5814
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5444
- sx: headerCellSx$1,
5815
+ sx: headerCellSx,
5445
5816
  children: "Emails Sent"
5446
5817
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5447
- sx: headerCellSx$1,
5818
+ sx: headerCellSx,
5448
5819
  children: "Open Rate (No.)"
5449
5820
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5450
- sx: headerCellSx$1,
5821
+ sx: headerCellSx,
5451
5822
  children: "Click Rate (No.)"
5452
5823
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5453
- sx: headerCellSx$1,
5824
+ sx: headerCellSx,
5454
5825
  children: "Engagement Rate"
5455
5826
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5456
- sx: headerCellSx$1,
5827
+ sx: headerCellSx,
5457
5828
  children: "Donations Generated"
5458
5829
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5459
- sx: headerCellSx$1,
5830
+ sx: headerCellSx,
5460
5831
  children: "Revenue Generated"
5461
5832
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5462
- sx: headerCellSx$1,
5833
+ sx: headerCellSx,
5463
5834
  children: "Repeat Donation Rate"
5464
5835
  })]
5465
5836
  })
5466
5837
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
5467
- children: [rows$1.map(function (row, i) {
5838
+ children: [rows.map(function (row, i) {
5468
5839
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5469
5840
  sx: {
5470
5841
  "&:hover": {
@@ -5472,16 +5843,16 @@ var ImpactEmails = function ImpactEmails() {
5472
5843
  }
5473
5844
  },
5474
5845
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5475
- sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
5846
+ sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
5476
5847
  textAlign: "left",
5477
5848
  fontWeight: 500
5478
5849
  }),
5479
5850
  children: row.title
5480
5851
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5481
- sx: cellSx$1,
5852
+ sx: cellSx,
5482
5853
  children: row.sent
5483
5854
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5484
- sx: cellSx$1,
5855
+ sx: cellSx,
5485
5856
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5486
5857
  variant: "body2",
5487
5858
  fontWeight: 500,
@@ -5495,7 +5866,7 @@ var ImpactEmails = function ImpactEmails() {
5495
5866
  children: row.openCount
5496
5867
  })]
5497
5868
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5498
- sx: cellSx$1,
5869
+ sx: cellSx,
5499
5870
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5500
5871
  variant: "body2",
5501
5872
  fontWeight: 500,
@@ -5509,10 +5880,10 @@ var ImpactEmails = function ImpactEmails() {
5509
5880
  children: row.clickCount
5510
5881
  })]
5511
5882
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5512
- sx: cellSx$1,
5883
+ sx: cellSx,
5513
5884
  children: row.engagement
5514
5885
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5515
- sx: cellSx$1,
5886
+ sx: cellSx,
5516
5887
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5517
5888
  variant: "body2",
5518
5889
  fontWeight: 500,
@@ -5527,7 +5898,7 @@ var ImpactEmails = function ImpactEmails() {
5527
5898
  })
5528
5899
  })]
5529
5900
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5530
- sx: cellSx$1,
5901
+ sx: cellSx,
5531
5902
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5532
5903
  variant: "body2",
5533
5904
  fontWeight: 500,
@@ -5542,7 +5913,7 @@ var ImpactEmails = function ImpactEmails() {
5542
5913
  })
5543
5914
  })]
5544
5915
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5545
- sx: cellSx$1,
5916
+ sx: cellSx,
5546
5917
  children: row.repeatRate
5547
5918
  })]
5548
5919
  }, i);
@@ -6418,8 +6789,8 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6418
6789
  borderRadius: "24px",
6419
6790
  border: "1px solid #f0f0f0",
6420
6791
  boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6421
- p: 3,
6422
- height: "100%"
6792
+ p: 3
6793
+ // height: "100%",
6423
6794
  },
6424
6795
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6425
6796
  sx: {
@@ -6434,7 +6805,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6434
6805
  fontWeight: 700,
6435
6806
  fontSize: "18px",
6436
6807
  color: "#000",
6437
- textAlign: 'left'
6808
+ textAlign: "left"
6438
6809
  },
6439
6810
  children: title
6440
6811
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -6468,7 +6839,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6468
6839
  fontSize: "12px",
6469
6840
  color: "rgba(0, 0, 0, 0.4)",
6470
6841
  fontWeight: 500,
6471
- textAlign: 'left'
6842
+ textAlign: "left"
6472
6843
  },
6473
6844
  children: header
6474
6845
  }, header);
@@ -6483,7 +6854,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6483
6854
  display: "grid",
6484
6855
  gridTemplateColumns: gridTemplateColumns,
6485
6856
  gap: 2,
6486
- py: 1.8,
6857
+ py: 1.89,
6487
6858
  alignItems: "center",
6488
6859
  borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
6489
6860
  },
@@ -6506,12 +6877,12 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6506
6877
  }), row.icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6507
6878
  sx: {
6508
6879
  color: row.iconColor || "inherit",
6509
- display: 'flex',
6510
- alignItems: 'center'
6880
+ display: "flex",
6881
+ alignItems: "center"
6511
6882
  },
6512
6883
  children: /*#__PURE__*/jsxRuntime.jsx(row.icon, {
6513
6884
  sx: {
6514
- fontSize: '18px'
6885
+ fontSize: "18px"
6515
6886
  }
6516
6887
  })
6517
6888
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -6527,10 +6898,10 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6527
6898
  fontSize: "13px",
6528
6899
  fontWeight: 600,
6529
6900
  color: "#000",
6530
- textAlign: 'left'
6901
+ textAlign: "left"
6531
6902
  },
6532
6903
  children: row.val1
6533
- }), row.type === 'progress' ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6904
+ }), row.type === "progress" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6534
6905
  sx: {
6535
6906
  display: "flex",
6536
6907
  alignItems: "center",
@@ -6566,7 +6937,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6566
6937
  fontSize: "13px",
6567
6938
  fontWeight: 600,
6568
6939
  color: "#000",
6569
- textAlign: 'left'
6940
+ textAlign: "left"
6570
6941
  },
6571
6942
  children: row.val2
6572
6943
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -6574,7 +6945,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6574
6945
  fontSize: "13px",
6575
6946
  fontWeight: row.highlightVal3 ? 700 : 500,
6576
6947
  color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
6577
- textAlign: 'left'
6948
+ textAlign: "left"
6578
6949
  },
6579
6950
  children: row.val3
6580
6951
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -6582,26 +6953,26 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6582
6953
  fontSize: "13px",
6583
6954
  fontWeight: 500,
6584
6955
  color: "#000",
6585
- textAlign: 'left'
6956
+ textAlign: "left"
6586
6957
  },
6587
6958
  children: row.val4
6588
6959
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6589
- children: row.type === 'trend' ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6960
+ children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6590
6961
  sx: {
6591
6962
  display: "flex",
6592
6963
  alignItems: "center",
6593
6964
  gap: 0.5,
6594
- color: row.trendType === 'up' ? "#22C55E" : "#EF4444",
6965
+ color: row.trendType === "up" ? "#22C55E" : "#EF4444",
6595
6966
  fontSize: "12px",
6596
6967
  fontWeight: 600
6597
6968
  },
6598
- children: [row.trendType === 'up' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {
6969
+ children: [row.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {
6599
6970
  sx: {
6600
- fontSize: '14px'
6971
+ fontSize: "14px"
6601
6972
  }
6602
6973
  }) : /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingDown, {
6603
6974
  sx: {
6604
- fontSize: '14px'
6975
+ fontSize: "14px"
6605
6976
  }
6606
6977
  }), row.trendLabel]
6607
6978
  }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
@@ -6615,223 +6986,14 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6615
6986
  fontSize: "11px",
6616
6987
  fontWeight: 700,
6617
6988
  textAlign: "center"
6618
- },
6619
- children: row.status
6620
- })
6621
- })]
6622
- }, idx);
6623
- })
6624
- })]
6625
- })
6626
- })]
6627
- });
6628
- };
6629
-
6630
- var DonorMixCard = function DonorMixCard(_ref) {
6631
- var _ref$title = _ref.title,
6632
- title = _ref$title === void 0 ? "Donor mix" : _ref$title,
6633
- _ref$subtitle = _ref.subtitle,
6634
- subtitle = _ref$subtitle === void 0 ? "Acquisition vs retention" : _ref$subtitle,
6635
- _ref$series = _ref.series,
6636
- series = _ref$series === void 0 ? [68, 32] : _ref$series,
6637
- _ref$labels = _ref.labels,
6638
- labels = _ref$labels === void 0 ? ["New donors", "Returning"] : _ref$labels,
6639
- _ref$colors = _ref.colors,
6640
- colors = _ref$colors === void 0 ? ["rgb(99, 99, 230)", "#10B981"] : _ref$colors,
6641
- _ref$centerLabel = _ref.centerLabel,
6642
- centerLabel = _ref$centerLabel === void 0 ? "donors" : _ref$centerLabel,
6643
- _ref$centerValue = _ref.centerValue,
6644
- centerValue = _ref$centerValue === void 0 ? "215" : _ref$centerValue,
6645
- _ref$items = _ref.items,
6646
- items = _ref$items === void 0 ? [{
6647
- label: "New donors",
6648
- val: "146 · 68%",
6649
- color: "rgb(99, 99, 230)"
6650
- }, {
6651
- label: "Returning",
6652
- val: "69 · 32%",
6653
- color: "#10B981"
6654
- }] : _ref$items,
6655
- _ref$showBottomSummar = _ref.showBottomSummary,
6656
- showBottomSummary = _ref$showBottomSummar === void 0 ? true : _ref$showBottomSummar,
6657
- _ref$bottomSummaryVal = _ref.bottomSummaryValue,
6658
- bottomSummaryValue = _ref$bottomSummaryVal === void 0 ? "$130.58" : _ref$bottomSummaryVal,
6659
- _ref$bottomSummaryTre = _ref.bottomSummaryTrend,
6660
- bottomSummaryTrend = _ref$bottomSummaryTre === void 0 ? "8.4% vs last month" : _ref$bottomSummaryTre;
6661
- var chartOptions = {
6662
- chart: {
6663
- type: "donut"
6664
- },
6665
- labels: labels,
6666
- colors: colors,
6667
- plotOptions: {
6668
- pie: {
6669
- donut: {
6670
- size: "75%",
6671
- labels: {
6672
- show: true,
6673
- name: {
6674
- show: true,
6675
- fontSize: '13px',
6676
- fontWeight: 500,
6677
- color: 'rgba(0, 0, 0, 0.4)',
6678
- offsetY: 25
6679
- },
6680
- value: {
6681
- show: true,
6682
- fontSize: '24px',
6683
- fontWeight: 700,
6684
- color: '#000',
6685
- offsetY: -15,
6686
- formatter: function formatter(val) {
6687
- return val;
6688
- }
6689
- },
6690
- total: {
6691
- show: true,
6692
- label: centerLabel,
6693
- fontSize: '13px',
6694
- fontWeight: 500,
6695
- color: 'rgba(0, 0, 0, 0.4)',
6696
- formatter: function formatter() {
6697
- return centerValue;
6698
- }
6699
- }
6700
- }
6701
- }
6702
- }
6703
- },
6704
- dataLabels: {
6705
- enabled: false
6706
- },
6707
- legend: {
6708
- show: false
6709
- },
6710
- stroke: {
6711
- show: false
6712
- },
6713
- states: {
6714
- hover: {
6715
- filter: {
6716
- type: "none"
6717
- }
6718
- }
6719
- }
6720
- };
6721
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6722
- sx: {
6723
- bgcolor: "#fff",
6724
- borderRadius: "24px",
6725
- border: "1px solid #f0f0f0",
6726
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6727
- p: 3,
6728
- height: "100%",
6729
- display: "flex",
6730
- flexDirection: "column"
6731
- },
6732
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6733
- sx: {
6734
- mb: 2
6735
- },
6736
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6737
- sx: {
6738
- fontWeight: 700,
6739
- fontSize: "18px",
6740
- color: "#000"
6741
- },
6742
- children: title
6743
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6744
- sx: {
6745
- fontSize: "13px",
6746
- color: "rgba(0, 0, 0, 0.4)",
6747
- mt: 0.2
6748
- },
6749
- children: subtitle
6750
- })]
6751
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6752
- sx: {
6753
- position: "relative",
6754
- height: "180px",
6755
- mb: 2,
6756
- display: "flex",
6757
- justifyContent: "center"
6758
- },
6759
- children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
6760
- options: chartOptions,
6761
- series: series,
6762
- type: "donut",
6763
- width: "240"
6764
- })
6765
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6766
- sx: {
6767
- mt: "auto"
6768
- },
6769
- children: [items.map(function (item, idx) {
6770
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6771
- sx: {
6772
- display: "flex",
6773
- justifyContent: "space-between",
6774
- mb: idx === items.length - 1 ? showBottomSummary ? 3 : 0 : 1.5
6775
- },
6776
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6777
- sx: {
6778
- display: "flex",
6779
- alignItems: "center",
6780
- gap: 1
6781
- },
6782
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6783
- sx: {
6784
- width: 10,
6785
- height: 10,
6786
- bgcolor: item.color,
6787
- borderRadius: "2px"
6788
- }
6789
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6790
- sx: {
6791
- fontSize: "13px",
6792
- fontWeight: 500,
6793
- color: "rgba(0, 0, 0, 0.4)"
6794
- },
6795
- children: item.label
6796
- })]
6797
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6798
- sx: {
6799
- fontSize: "13px",
6800
- fontWeight: 700,
6801
- color: "#111"
6802
- },
6803
- children: item.val
6804
- })]
6805
- }, idx);
6806
- }), showBottomSummary && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6807
- sx: {
6808
- display: "flex",
6809
- justifyContent: "space-between",
6810
- alignItems: "center",
6811
- pt: 2,
6812
- borderTop: "1px solid #f0f0f0"
6813
- },
6814
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6815
- sx: {
6816
- fontSize: "20px",
6817
- fontWeight: 700,
6818
- color: "#000"
6819
- },
6820
- children: bottomSummaryValue
6821
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6822
- sx: {
6823
- display: "flex",
6824
- alignItems: "center",
6825
- gap: 0.5,
6826
- color: "#22C55E",
6827
- fontSize: "12px",
6828
- fontWeight: 600
6829
- },
6830
- children: [/*#__PURE__*/jsxRuntime.jsx("span", {
6831
- children: "\u25B2"
6832
- }), bottomSummaryTrend]
6989
+ },
6990
+ children: row.status
6991
+ })
6992
+ })]
6993
+ }, idx);
6994
+ })
6833
6995
  })]
6834
- })]
6996
+ })
6835
6997
  })]
6836
6998
  });
6837
6999
  };
@@ -6851,7 +7013,7 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6851
7013
  plotOptions: {
6852
7014
  bar: {
6853
7015
  horizontal: false,
6854
- columnWidth: "45%",
7016
+ columnWidth: "100%",
6855
7017
  borderRadius: 4,
6856
7018
  dataLabels: {
6857
7019
  position: "top"
@@ -6863,9 +7025,9 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6863
7025
  formatter: function formatter(val) {
6864
7026
  return "$".concat(val, "K");
6865
7027
  },
6866
- offsetY: -20,
7028
+ offsetY: -22,
6867
7029
  style: {
6868
- fontSize: "12px",
7030
+ fontSize: "10px",
6869
7031
  fontWeight: 700,
6870
7032
  colors: ["#000"]
6871
7033
  }
@@ -6876,7 +7038,7 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6876
7038
  colors: ["transparent"]
6877
7039
  },
6878
7040
  xaxis: {
6879
- categories: [["Week 1", "Apr 5-11"], ["Week 2", "Apr 12-18"], ["Week 3", "Apr 19-25"], ["Week 4", "Apr 26-May 2"], ["Week 5", "May 3-4"]],
7041
+ categories: ["Wk 1", "Wk 2", "Wk 3", "Wk 4", "May 3-4"],
6880
7042
  axisBorder: {
6881
7043
  show: false
6882
7044
  },
@@ -6893,7 +7055,7 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6893
7055
  yaxis: {
6894
7056
  min: 0,
6895
7057
  max: 60,
6896
- tickAmount: 4,
7058
+ tickAmount: 3,
6897
7059
  labels: {
6898
7060
  formatter: function formatter(val) {
6899
7061
  return "$".concat(val, "K");
@@ -6918,7 +7080,7 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6918
7080
  }
6919
7081
  },
6920
7082
  legend: {
6921
- show: false // Custom legend used
7083
+ show: false
6922
7084
  },
6923
7085
  tooltip: {
6924
7086
  y: {
@@ -6943,44 +7105,48 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6943
7105
  boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6944
7106
  p: 3
6945
7107
  // width: "100%",
7108
+ // height: "100%",
6946
7109
  },
6947
7110
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6948
7111
  sx: {
6949
7112
  display: "flex",
6950
- justifyContent: "space-between",
6951
- alignItems: "flex-start",
6952
- mb: 4
7113
+ flexDirection: "column",
7114
+ mb: 2
6953
7115
  },
6954
7116
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7117
+ sx: {
7118
+ textAlign: "left"
7119
+ },
6955
7120
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6956
7121
  sx: {
6957
7122
  fontWeight: 700,
6958
7123
  fontSize: "18px",
6959
7124
  color: "#000"
6960
7125
  },
6961
- children: "Recurring vs one-time donations"
7126
+ children: "Recurring vs one-time"
6962
7127
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6963
7128
  sx: {
6964
7129
  fontSize: "13px",
6965
7130
  color: "rgba(0, 0, 0, 0.4)",
6966
7131
  mt: 0.2
6967
7132
  },
6968
- children: "Donation type breakdown - weekly aggregation"
7133
+ children: "Donation type \xB7 weekly"
6969
7134
  })]
6970
7135
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6971
7136
  sx: {
6972
7137
  display: "flex",
6973
- gap: 6
7138
+ gap: 10,
7139
+ mt: 3,
7140
+ mb: 1
6974
7141
  },
6975
7142
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6976
7143
  sx: {
6977
- textAlign: "right"
7144
+ textAlign: "left"
6978
7145
  },
6979
7146
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6980
7147
  sx: {
6981
7148
  display: "flex",
6982
7149
  alignItems: "center",
6983
- justifyContent: "flex-end",
6984
7150
  gap: 1,
6985
7151
  mb: 0.5
6986
7152
  },
@@ -7009,50 +7175,331 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
7009
7175
  })]
7010
7176
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7011
7177
  sx: {
7012
- textAlign: "right"
7178
+ textAlign: "left"
7179
+ },
7180
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7181
+ sx: {
7182
+ display: "flex",
7183
+ alignItems: "center",
7184
+ gap: 1,
7185
+ mb: 0.5
7186
+ },
7187
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7188
+ sx: {
7189
+ width: 8,
7190
+ height: 8,
7191
+ bgcolor: "#10B981",
7192
+ borderRadius: "50%"
7193
+ }
7194
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7195
+ sx: {
7196
+ fontSize: "12px",
7197
+ color: "rgba(0, 0, 0, 0.4)",
7198
+ fontWeight: 500
7199
+ },
7200
+ children: "One-time"
7201
+ })]
7202
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7203
+ sx: {
7204
+ fontSize: "18px",
7205
+ fontWeight: 700,
7206
+ color: "#000"
7207
+ },
7208
+ children: "$186,001"
7209
+ })]
7210
+ })]
7211
+ })]
7212
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
7213
+ sx: {
7214
+ height: 350,
7215
+ width: "100%"
7216
+ },
7217
+ children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
7218
+ options: chartOptions,
7219
+ series: series,
7220
+ type: "bar",
7221
+ height: "100%"
7222
+ })
7223
+ })]
7224
+ });
7225
+ };
7226
+
7227
+ var RefundsChargebacksCard = function RefundsChargebacksCard() {
7228
+ var chartOptions = {
7229
+ chart: {
7230
+ type: "area",
7231
+ toolbar: {
7232
+ show: false
7233
+ },
7234
+ zoom: {
7235
+ enabled: false
7236
+ },
7237
+ fontFamily: "Inter, sans-serif",
7238
+ sparkline: {
7239
+ enabled: false
7240
+ }
7241
+ },
7242
+ dataLabels: {
7243
+ enabled: false
7244
+ },
7245
+ stroke: {
7246
+ curve: "smooth",
7247
+ width: 2
7248
+ },
7249
+ fill: {
7250
+ type: "gradient",
7251
+ gradient: {
7252
+ shadeIntensity: 1,
7253
+ opacityFrom: 0.45,
7254
+ opacityTo: 0.05,
7255
+ stops: [20, 100]
7256
+ }
7257
+ },
7258
+ xaxis: {
7259
+ categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
7260
+ axisBorder: {
7261
+ show: false
7262
+ },
7263
+ axisTicks: {
7264
+ show: false
7265
+ },
7266
+ labels: {
7267
+ style: {
7268
+ colors: "rgba(0, 0, 0, 0.4)",
7269
+ fontSize: "12px"
7270
+ }
7271
+ }
7272
+ },
7273
+ yaxis: {
7274
+ min: 0,
7275
+ max: 2,
7276
+ tickAmount: 4,
7277
+ labels: {
7278
+ formatter: function formatter(val) {
7279
+ return "".concat(val, "%");
7280
+ },
7281
+ style: {
7282
+ colors: "rgba(0, 0, 0, 0.4)",
7283
+ fontSize: "12px"
7284
+ }
7285
+ }
7286
+ },
7287
+ grid: {
7288
+ borderColor: "#f1f1f1",
7289
+ strokeDashArray: 4,
7290
+ yaxis: {
7291
+ lines: {
7292
+ show: true
7293
+ }
7294
+ }
7295
+ },
7296
+ colors: ["#F59E0B", "#EF4444"],
7297
+ legend: {
7298
+ show: false
7299
+ },
7300
+ annotations: {
7301
+ yaxis: [{
7302
+ y: 1,
7303
+ borderColor: "#EF4444",
7304
+ strokeDashArray: 3,
7305
+ label: {
7306
+ borderColor: "transparent",
7307
+ style: {
7308
+ color: "#EF4444",
7309
+ background: "transparent",
7310
+ fontSize: "10px",
7311
+ fontWeight: 700
7312
+ },
7313
+ // text: "1% chargeback threshold",
7314
+ position: "left",
7315
+ offsetY: -10,
7316
+ offsetX: 10
7317
+ }
7318
+ }]
7319
+ },
7320
+ tooltip: {
7321
+ y: {
7322
+ formatter: function formatter(val) {
7323
+ return "".concat(val, "%");
7324
+ }
7325
+ }
7326
+ }
7327
+ };
7328
+ var series = [{
7329
+ name: "Refunds",
7330
+ data: [1.2, 0.9, 1.3, 0.8, 1.5, 0.9, 0.7, 0.9, 0.8]
7331
+ }, {
7332
+ name: "Chargebacks",
7333
+ data: [0.1, 0.2, 0.1, 0.15, 0.1, 0.2, 0.1, 0.15, 0.1]
7334
+ }];
7335
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
7336
+ sx: {
7337
+ bgcolor: "#fff",
7338
+ borderRadius: "24px",
7339
+ border: "1px solid #f0f0f0",
7340
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
7341
+ p: 3,
7342
+ // height: "100%",
7343
+ display: "flex",
7344
+ flexDirection: "column"
7345
+ },
7346
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7347
+ sx: {
7348
+ mb: 3
7349
+ },
7350
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7351
+ sx: {
7352
+ fontWeight: 700,
7353
+ fontSize: "18px",
7354
+ color: "#000",
7355
+ textAlign: "left"
7356
+ },
7357
+ children: "Refunds & chargebacks"
7358
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7359
+ sx: {
7360
+ fontSize: "13px",
7361
+ color: "rgba(0, 0, 0, 0.4)",
7362
+ mt: 0.2,
7363
+ textAlign: "left"
7364
+ },
7365
+ children: "Trust health \xB7 30-day window"
7366
+ })]
7367
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7368
+ sx: {
7369
+ display: "flex",
7370
+ gap: 10,
7371
+ mb: 2
7372
+ },
7373
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7374
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7375
+ sx: {
7376
+ fontSize: "10px",
7377
+ fontWeight: 700,
7378
+ color: "#F59E0B",
7379
+ textTransform: "uppercase"
7380
+ },
7381
+ children: "Refunds"
7382
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7383
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7384
+ sx: {
7385
+ fontSize: "24px",
7386
+ fontWeight: 700,
7387
+ color: "#000"
7388
+ },
7389
+ children: "0.8%"
7390
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
7391
+ sx: {
7392
+ display: "flex",
7393
+ alignItems: "center",
7394
+ color: "#22C55E"
7395
+ },
7396
+ children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7397
+ sx: {
7398
+ fontSize: "12px",
7399
+ fontWeight: 700
7400
+ },
7401
+ children: "\u25BC 0.3pp"
7402
+ })
7403
+ })]
7404
+ })]
7405
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7406
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7407
+ sx: {
7408
+ fontSize: "10px",
7409
+ fontWeight: 700,
7410
+ color: "#EF4444",
7411
+ textTransform: "uppercase"
7412
+ },
7413
+ children: "Chargebacks"
7414
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7415
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7416
+ sx: {
7417
+ fontSize: "24px",
7418
+ fontWeight: 700,
7419
+ color: "#000"
7420
+ },
7421
+ children: "0.1%"
7422
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7423
+ sx: {
7424
+ fontSize: "12px",
7425
+ color: "rgba(0, 0, 0, 0.4)",
7426
+ fontWeight: 500
7427
+ },
7428
+ children: "\xB7 stable"
7429
+ })]
7430
+ })]
7431
+ })]
7432
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
7433
+ sx: {
7434
+ mb: 2
7435
+ },
7436
+ children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7437
+ sx: {
7438
+ fontSize: "12px",
7439
+ color: "rgba(0, 0, 0, 0.3)",
7440
+ fontWeight: 500,
7441
+ textAlign: "left"
7442
+ },
7443
+ children: "$1,927 refunded \xB7 $215 disputed \xB7 10 cases total"
7444
+ })
7445
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7446
+ sx: {
7447
+ display: "flex",
7448
+ gap: 2,
7449
+ mb: 4
7450
+ },
7451
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7452
+ sx: {
7453
+ display: "flex",
7454
+ alignItems: "center",
7455
+ gap: 1
7456
+ },
7457
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7458
+ sx: {
7459
+ width: 8,
7460
+ height: 8,
7461
+ bgcolor: "#F59E0B",
7462
+ borderRadius: "50%"
7463
+ }
7464
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7465
+ sx: {
7466
+ fontSize: "12px",
7467
+ color: "rgba(0, 0, 0, 0.6)",
7468
+ fontWeight: 500
7469
+ },
7470
+ children: "Refunds"
7471
+ })]
7472
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7473
+ sx: {
7474
+ display: "flex",
7475
+ alignItems: "center",
7476
+ gap: 1
7477
+ },
7478
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7479
+ sx: {
7480
+ width: 8,
7481
+ height: 8,
7482
+ bgcolor: "#EF4444",
7483
+ borderRadius: "50%"
7484
+ }
7485
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7486
+ sx: {
7487
+ fontSize: "12px",
7488
+ color: "rgba(0, 0, 0, 0.6)",
7489
+ fontWeight: 500
7013
7490
  },
7014
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7015
- sx: {
7016
- display: "flex",
7017
- alignItems: "center",
7018
- justifyContent: "flex-end",
7019
- gap: 1,
7020
- mb: 0.5
7021
- },
7022
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7023
- sx: {
7024
- width: 8,
7025
- height: 8,
7026
- bgcolor: "#10B981",
7027
- borderRadius: "50%"
7028
- }
7029
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7030
- sx: {
7031
- fontSize: "12px",
7032
- color: "rgba(0, 0, 0, 0.4)",
7033
- fontWeight: 500
7034
- },
7035
- children: "One-time"
7036
- })]
7037
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7038
- sx: {
7039
- fontSize: "18px",
7040
- fontWeight: 700,
7041
- color: "#000"
7042
- },
7043
- children: "$186,001"
7044
- })]
7491
+ children: "Chargebacks"
7045
7492
  })]
7046
7493
  })]
7047
7494
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
7048
7495
  sx: {
7049
- height: 350,
7496
+ height: 250,
7050
7497
  width: "100%"
7051
7498
  },
7052
7499
  children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
7053
7500
  options: chartOptions,
7054
7501
  series: series,
7055
- type: "bar",
7502
+ type: "area",
7056
7503
  height: "100%"
7057
7504
  })
7058
7505
  })]
@@ -7066,99 +7513,133 @@ var OverallSection = function OverallSection(_ref) {
7066
7513
  secondaryCharts = _ref.secondaryCharts,
7067
7514
  tertiaryCharts = _ref.tertiaryCharts,
7068
7515
  quaternaryCharts = _ref.quaternaryCharts;
7516
+ var _useState = React.useState("Total Raised"),
7517
+ _useState2 = _slicedToArray(_useState, 2),
7518
+ activeMetric = _useState2[0],
7519
+ setActiveMetric = _useState2[1];
7520
+ var allCharts = [].concat(_toConsumableArray(primaryCharts), _toConsumableArray(secondaryCharts), _toConsumableArray(tertiaryCharts), _toConsumableArray(quaternaryCharts));
7521
+ var getExtendedCharts = function getExtendedCharts() {
7522
+ var charts = _toConsumableArray(allCharts);
7523
+ var categories = (apiData === null || apiData === void 0 ? void 0 : apiData.categories) || ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];
7524
+ if (!charts.find(function (c) {
7525
+ return c.label === "Net Raised";
7526
+ })) {
7527
+ charts.push({
7528
+ label: "Net Raised",
7529
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
7530
+ data: ((apiData === null || apiData === void 0 ? void 0 : apiData.revenueData) || [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000]).map(function (v) {
7531
+ return v * 0.92;
7532
+ }),
7533
+ categories: categories
7534
+ });
7535
+ }
7536
+ if (!charts.find(function (c) {
7537
+ return c.label === "Total Donors";
7538
+ })) {
7539
+ charts.push({
7540
+ label: "Total Donors",
7541
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
7542
+ data: (apiData === null || apiData === void 0 ? void 0 : apiData.donationsData) || [15, 22, 18, 30, 25, 35, 42, 45, 28],
7543
+ categories: categories
7544
+ });
7545
+ }
7546
+ if (!charts.find(function (c) {
7547
+ return c.label === "ROAS";
7548
+ })) {
7549
+ charts.push({
7550
+ label: "ROAS",
7551
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
7552
+ data: [2.1, 2.4, 2.2, 2.8, 2.6, 3.1, 3.1, 3.0, 2.9],
7553
+ categories: categories
7554
+ });
7555
+ }
7556
+ return charts;
7557
+ };
7558
+ var metricInfo = {
7559
+ "Total Raised": {
7560
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
7561
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
7562
+ label: "Total Revenue",
7563
+ icon: iconsMaterial.PaidOutlined
7564
+ },
7565
+ "Net Raised": {
7566
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
7567
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
7568
+ label: "Net Raised",
7569
+ icon: iconsMaterial.FavoriteOutlined
7570
+ },
7571
+ "Total Donors": {
7572
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
7573
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonorsTrend) || "31 new",
7574
+ label: "Total Donors",
7575
+ icon: iconsMaterial.PeopleAltOutlined
7576
+ },
7577
+ "Avg donation": {
7578
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "$130.58",
7579
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
7580
+ label: "Average Donation Amount",
7581
+ icon: iconsMaterial.PaidOutlined
7582
+ },
7583
+ ROAS: {
7584
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
7585
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
7586
+ label: "ROAS",
7587
+ icon: iconsMaterial.TrendingUp
7588
+ },
7589
+ Conversion: {
7590
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
7591
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionSub) || "215 / 12.4K",
7592
+ label: "Conversion Rate",
7593
+ icon: iconsMaterial.Adjust
7594
+ }
7595
+ };
7596
+ var renderCard = function renderCard(title) {
7597
+ return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7598
+ title: title,
7599
+ value: metricInfo[title].value,
7600
+ subValue: metricInfo[title].subValue,
7601
+ icon: metricInfo[title].icon,
7602
+ onClick: function onClick() {
7603
+ return setActiveMetric(title);
7604
+ },
7605
+ sx: {
7606
+ flex: 1,
7607
+ border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
7608
+ }
7609
+ }, title);
7610
+ };
7611
+ var extendedCharts = getExtendedCharts();
7612
+ var selectedInfo = metricInfo[activeMetric];
7613
+ var mainChart = extendedCharts.find(function (c) {
7614
+ return c.label === selectedInfo.label;
7615
+ }) || primaryCharts[0];
7616
+ mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
7617
+ label: activeMetric,
7618
+ value: selectedInfo.value,
7619
+ trend: selectedInfo.subValue
7620
+ });
7069
7621
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
7070
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7622
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7071
7623
  sx: {
7072
- display: 'flex',
7624
+ display: "flex",
7073
7625
  gap: 2,
7074
- mb: 5
7626
+ mb: 5,
7627
+ flexWrap: "wrap"
7075
7628
  },
7076
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7077
- title: "Total Raised",
7078
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
7079
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
7080
- icon: iconsMaterial.PaidOutlined,
7081
- sx: {
7082
- flex: 1
7083
- }
7084
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7085
- title: "Net Raised",
7086
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
7087
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
7088
- icon: iconsMaterial.FavoriteOutlined,
7089
- sx: {
7090
- flex: 1
7091
- }
7092
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7093
- title: "Total Donors",
7094
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
7095
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonorsTrend) || "31 new",
7096
- icon: iconsMaterial.PeopleAltOutlined,
7097
- sx: {
7098
- flex: 1
7099
- }
7100
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7101
- title: "Avg donation",
7102
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "$130.58",
7103
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
7104
- icon: iconsMaterial.PaidOutlined,
7105
- sx: {
7106
- flex: 1
7107
- }
7108
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7109
- title: "ROAS",
7110
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
7111
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
7112
- icon: iconsMaterial.TrendingUp,
7113
- sx: {
7114
- flex: 1
7115
- }
7116
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7117
- title: "Conversion",
7118
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
7119
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionSub) || "215 / 12.4K",
7120
- icon: iconsMaterial.Adjust,
7121
- sx: {
7122
- flex: 1
7123
- }
7124
- })]
7125
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7629
+ children: Object.keys(metricInfo).map(renderCard)
7630
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7126
7631
  container: true,
7127
7632
  spacing: 3,
7128
7633
  sx: {
7129
7634
  mb: 1
7130
7635
  },
7131
- children: [primaryCharts.filter(function (item) {
7132
- return item.label !== "First installments";
7133
- }).map(function (item, index) {
7134
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7135
- item: item,
7136
- index: index,
7137
- md: item.label === "Total Revenue" ? 12 : 6,
7138
- isPremium: true
7139
- }, "primary-".concat(index));
7140
- }), secondaryCharts.map(function (item, index) {
7141
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7142
- item: item,
7143
- index: index,
7144
- md: 6,
7145
- isPremium: true
7146
- }, "secondary-".concat(index));
7147
- }), tertiaryCharts.map(function (item, index) {
7148
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7149
- item: item,
7150
- index: index,
7151
- md: 6,
7152
- isPremium: true
7153
- }, "tertiary-".concat(index));
7154
- }), quaternaryCharts.map(function (item, index) {
7155
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7156
- item: item,
7157
- index: index,
7158
- md: 6,
7159
- isPremium: true
7160
- }, "quaternary-".concat(index));
7161
- })]
7636
+ children: /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7637
+ item: mainChart,
7638
+ index: 0,
7639
+ md: 12,
7640
+ isPremium: true,
7641
+ isPrimary: true
7642
+ })
7162
7643
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7163
7644
  container: true,
7164
7645
  spacing: 3,
@@ -7236,6 +7717,9 @@ var OverallSection = function OverallSection(_ref) {
7236
7717
  item: true,
7237
7718
  xs: 12,
7238
7719
  md: 4,
7720
+ sx: {
7721
+ display: "flex"
7722
+ },
7239
7723
  children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
7240
7724
  title: "Donor mix",
7241
7725
  subtitle: "Acquisition vs retention",
@@ -7254,20 +7738,31 @@ var OverallSection = function OverallSection(_ref) {
7254
7738
  color: "#10B981"
7255
7739
  }],
7256
7740
  bottomSummaryValue: "$130.58",
7257
- bottomSummaryTrend: "8.4% vs last month"
7741
+ bottomSummaryTrend: "8.4% vs last month",
7742
+ sx: {
7743
+ width: "100%"
7744
+ }
7258
7745
  })
7259
7746
  })]
7260
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7747
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7261
7748
  container: true,
7262
7749
  spacing: 3,
7263
7750
  sx: {
7264
- mt: 5
7751
+ mt: 2
7265
7752
  },
7266
- children: /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7753
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7267
7754
  item: true,
7268
- md: 12,
7755
+ md: 4,
7269
7756
  children: /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {})
7270
- })
7757
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7758
+ item: true,
7759
+ md: 4,
7760
+ children: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {})
7761
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7762
+ item: true,
7763
+ md: 4,
7764
+ children: /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {})
7765
+ })]
7271
7766
  })]
7272
7767
  });
7273
7768
  };
@@ -7277,267 +7772,99 @@ var OverallSection$1 = /*#__PURE__*/Object.freeze({
7277
7772
  default: OverallSection
7278
7773
  });
7279
7774
 
7280
- var BORDER = "1px solid #e0e0e0";
7281
- var headerCellSx = {
7282
- fontWeight: 900,
7283
- fontSize: "0.78rem",
7284
- color: "#111",
7285
- bgcolor: "#f3f3f3",
7286
- borderBottom: BORDER,
7287
- borderRight: BORDER,
7288
- py: "20px",
7289
- px: "15px",
7290
- lineHeight: 1.4,
7291
- textAlign: "center",
7292
- "&:last-child": {
7293
- borderRight: 0
7294
- }
7295
- };
7296
- var cellSx = {
7297
- fontSize: "0.85rem",
7298
- color: "#333",
7299
- borderBottom: BORDER,
7300
- borderRight: BORDER,
7301
- py: "15px",
7302
- px: "15px",
7303
- verticalAlign: "middle",
7304
- textAlign: "center",
7305
- "&:last-child": {
7306
- borderRight: 0
7307
- }
7308
- };
7309
- var rows = [{
7310
- campaign: "Ramadan 2024 - Global Feed",
7311
- raised: "$45,200.00",
7312
- spent: "$5,100.00",
7313
- roas: "8.8x",
7314
- donors: "1,240",
7315
- cpr: "$4.11",
7316
- avg: "$36.45"
7317
- }, {
7318
- campaign: "Water for Life - East Africa",
7319
- raised: "$12,800.00",
7320
- spent: "$2,200.00",
7321
- roas: "5.8x",
7322
- donors: "485",
7323
- cpr: "$4.53",
7324
- avg: "$26.39"
7325
- }, {
7326
- campaign: "Orphan Care - Palestine",
7327
- raised: "$28,500.00",
7328
- spent: "$3,400.00",
7329
- roas: "8.4x",
7330
- donors: "820",
7331
- cpr: "$4.15",
7332
- avg: "$34.75"
7333
- }, {
7334
- campaign: "Emergency Relief - Yemen",
7335
- raised: "$15,400.00",
7336
- spent: "$2,800.00",
7337
- roas: "5.5x",
7338
- donors: "560",
7339
- cpr: "$5.00",
7340
- avg: "$27.50"
7341
- }];
7342
- var CampaignPerformanceTable = function CampaignPerformanceTable() {
7343
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7344
- sx: {
7345
- bgcolor: "#fff",
7346
- borderRadius: 4,
7347
- border: "1px solid #f0f0f0",
7348
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
7349
- overflow: "hidden",
7350
- width: "100%",
7351
- mt: 3
7775
+ var PaidSection = function PaidSection() {
7776
+ var _useState = React.useState("Total Spent"),
7777
+ _useState2 = _slicedToArray(_useState, 2),
7778
+ activeMetric = _useState2[0],
7779
+ setActiveMetric = _useState2[1];
7780
+ var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
7781
+ var metricInfo = {
7782
+ "Total Spent": {
7783
+ value: "$80,313",
7784
+ subValue: "12% vs last month",
7785
+ chartLabel: "Daily Spend",
7786
+ data: [800, 950, 700, 1100, 900, 1200, 1300],
7787
+ icon: iconsMaterial.IndeterminateCheckBoxOutlined
7352
7788
  },
7353
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7354
- sx: {
7355
- display: "flex",
7356
- justifyContent: "space-between",
7357
- alignItems: "center",
7358
- px: 3,
7359
- py: 2.5
7789
+ "Revinue Raised": {
7790
+ value: "$240,398",
7791
+ subValue: "12% vs last month",
7792
+ chartLabel: "Daily Revenue",
7793
+ data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
7794
+ icon: iconsMaterial.PaidOutlined
7795
+ },
7796
+ ROAS: {
7797
+ value: "3.0",
7798
+ subValue: "12% vs last month",
7799
+ chartLabel: "ROAS Trend",
7800
+ data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
7801
+ icon: iconsMaterial.TrendingUp
7802
+ },
7803
+ "Cost per donor": {
7804
+ value: "$373",
7805
+ subValue: "12% vs last month",
7806
+ chartLabel: "CPA Trend",
7807
+ data: [350, 380, 360, 410, 390, 370, 373],
7808
+ icon: iconsMaterial.PersonOutlined
7809
+ },
7810
+ "Conversion rate": {
7811
+ value: "3.1%",
7812
+ subValue: "12% vs last month",
7813
+ chartLabel: "Conversion Rate",
7814
+ data: [2.8, 3.0, 2.9, 3.4, 3.2, 3.1, 3.1],
7815
+ icon: iconsMaterial.Adjust
7816
+ },
7817
+ "Avg donation": {
7818
+ value: "$130.58",
7819
+ subValue: "12% vs last month",
7820
+ chartLabel: "Average Donation",
7821
+ data: [120, 135, 125, 140, 130, 128, 130.58],
7822
+ icon: iconsMaterial.PaidOutlined
7823
+ }
7824
+ };
7825
+ var renderCard = function renderCard(title) {
7826
+ return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7827
+ title: title,
7828
+ value: metricInfo[title].value,
7829
+ subValue: metricInfo[title].subValue,
7830
+ icon: metricInfo[title].icon,
7831
+ onClick: function onClick() {
7832
+ return setActiveMetric(title);
7360
7833
  },
7361
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7362
- sx: {
7363
- display: "flex",
7364
- alignItems: "center",
7365
- gap: 1
7366
- },
7367
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7368
- variant: "subtitle1",
7369
- sx: {
7370
- fontWeight: 700,
7371
- color: "#111"
7372
- },
7373
- children: "Campaign Performance"
7374
- }), /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.InfoOutlined, {
7375
- sx: {
7376
- fontSize: "1rem",
7377
- color: "#9e9e9e"
7378
- }
7379
- })]
7380
- })
7381
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableContainer, {
7382
7834
  sx: {
7383
- px: 3,
7384
- pb: 3
7385
- },
7386
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Table, {
7387
- sx: {
7388
- borderCollapse: "separate",
7389
- borderSpacing: 0,
7390
- border: BORDER,
7391
- borderRadius: "12px",
7392
- overflow: "hidden",
7393
- width: "100%"
7394
- },
7395
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
7396
- children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
7397
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7398
- sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
7399
- textAlign: "left"
7400
- }),
7401
- children: "Campaign"
7402
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7403
- sx: headerCellSx,
7404
- children: "Raised"
7405
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7406
- sx: headerCellSx,
7407
- children: "Spent"
7408
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7409
- sx: headerCellSx,
7410
- children: "ROAS"
7411
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7412
- sx: headerCellSx,
7413
- children: "Donors"
7414
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7415
- sx: headerCellSx,
7416
- children: "CPR"
7417
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7418
- sx: headerCellSx,
7419
- children: "Avg Donation"
7420
- })]
7421
- })
7422
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableBody, {
7423
- children: rows.map(function (row, index) {
7424
- return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
7425
- sx: {
7426
- "&:hover": {
7427
- bgcolor: "#fafafa"
7428
- }
7429
- },
7430
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7431
- sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
7432
- textAlign: "left",
7433
- fontWeight: 600
7434
- }),
7435
- children: row.campaign
7436
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7437
- sx: cellSx,
7438
- children: row.raised
7439
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7440
- sx: cellSx,
7441
- children: row.spent
7442
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7443
- sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
7444
- color: "primary.main",
7445
- fontWeight: 700
7446
- }),
7447
- children: row.roas
7448
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7449
- sx: cellSx,
7450
- children: row.donors
7451
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7452
- sx: cellSx,
7453
- children: row.cpr
7454
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7455
- sx: cellSx,
7456
- children: row.avg
7457
- })]
7458
- }, index);
7459
- })
7460
- })]
7461
- })
7462
- })]
7463
- });
7464
- };
7465
-
7466
- var PaidSection = function PaidSection() {
7467
- var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
7468
- var roasTrend = {
7469
- label: "ROAS Trend",
7470
- data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
7835
+ flex: 1,
7836
+ border: activeMetric === title ? "2px solid rgb(99, 99, 230)" : "2px solid #f0f0f0"
7837
+ }
7838
+ }, title);
7839
+ };
7840
+ var selectedInfo = metricInfo[activeMetric];
7841
+ var mainChart = {
7842
+ label: activeMetric,
7843
+ value: selectedInfo.value,
7844
+ trend: selectedInfo.subValue,
7845
+ data: selectedInfo.data,
7471
7846
  categories: categories
7472
7847
  };
7473
7848
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
7474
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7849
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7475
7850
  sx: {
7476
- display: 'flex',
7851
+ display: "flex",
7477
7852
  gap: 2,
7478
- mb: 2
7853
+ mb: 1,
7854
+ flexWrap: "wrap"
7479
7855
  },
7480
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7481
- title: "Total Spent",
7482
- value: "$80,313",
7483
- subValue: "12% vs last month",
7484
- icon: iconsMaterial.IndeterminateCheckBoxOutlined,
7485
- sx: {
7486
- flex: 1
7487
- }
7488
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7489
- title: "Revinue Raised",
7490
- value: "$240,398",
7491
- subValue: "12% vs last month",
7492
- icon: iconsMaterial.PaidOutlined,
7493
- sx: {
7494
- flex: 1
7495
- }
7496
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7497
- title: "ROAS",
7498
- value: "3.0",
7499
- subValue: "12% vs last month",
7500
- icon: iconsMaterial.TrendingUp,
7501
- sx: {
7502
- flex: 1
7503
- }
7504
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7505
- title: "Cost per donor",
7506
- value: "$373",
7507
- subValue: "12% vs last month",
7508
- icon: iconsMaterial.PersonOutlined,
7509
- sx: {
7510
- flex: 1
7511
- }
7512
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7513
- title: "Conversion rate",
7514
- value: "3.1",
7515
- subValue: "12% vs last month",
7516
- icon: iconsMaterial.Adjust,
7517
- sx: {
7518
- flex: 1
7519
- }
7520
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7521
- title: "Avg donation",
7522
- value: "$130.58",
7523
- subValue: "12% vs last month",
7524
- icon: iconsMaterial.PaidOutlined,
7525
- sx: {
7526
- flex: 1
7527
- }
7528
- })]
7529
- }), /*#__PURE__*/jsxRuntime.jsx(CampaignPerformanceTable, {}), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7856
+ children: Object.keys(metricInfo).map(renderCard)
7857
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7530
7858
  container: true,
7531
7859
  spacing: 3,
7532
7860
  sx: {
7533
- mt: 4
7861
+ mt: 1
7534
7862
  },
7535
7863
  children: /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7536
- item: roasTrend,
7537
- index: 2,
7864
+ item: mainChart,
7865
+ index: 0,
7538
7866
  md: 12,
7539
7867
  type: "area",
7540
- metric: "ROAS",
7541
7868
  isPrimary: true,
7542
7869
  isPremium: true
7543
7870
  })
@@ -7545,7 +7872,7 @@ var PaidSection = function PaidSection() {
7545
7872
  container: true,
7546
7873
  spacing: 3,
7547
7874
  sx: {
7548
- mt: 1
7875
+ mt: 3
7549
7876
  },
7550
7877
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7551
7878
  item: true,
@@ -7632,7 +7959,7 @@ var PaidSection = function PaidSection() {
7632
7959
  subtitle: "Where $80.3K went this month",
7633
7960
  series: [40.8, 35.1, 14.2, 6.6, 3.3],
7634
7961
  labels: ["Meta Ads", "Google Ads", "TikTok", "YouTube", "Snapchat"],
7635
- colors: ["#4267B2", "#4285F4", "#000000", "#FF0000", "#FFFC00"],
7962
+ colors: ["#4267B2", "#4285F4", "#cd249dff", "#FF0000", "#FFFC00"],
7636
7963
  centerLabel: "total spend",
7637
7964
  centerValue: "$80.3K",
7638
7965
  items: [{
@@ -7646,7 +7973,7 @@ var PaidSection = function PaidSection() {
7646
7973
  }, {
7647
7974
  label: "TikTok",
7648
7975
  val: "14.2%",
7649
- color: "#000000"
7976
+ color: "#cd249dff"
7650
7977
  }, {
7651
7978
  label: "YouTube",
7652
7979
  val: "6.6%",
@@ -7657,13 +7984,14 @@ var PaidSection = function PaidSection() {
7657
7984
  color: "#FFFC00"
7658
7985
  }],
7659
7986
  showBottomSummary: false
7987
+ // sx={{ width: "100%" }}
7660
7988
  })
7661
7989
  })]
7662
7990
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7663
7991
  container: true,
7664
7992
  spacing: 3,
7665
7993
  sx: {
7666
- mt: 8
7994
+ mt: 3
7667
7995
  },
7668
7996
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7669
7997
  item: true,