@ammarkhalidfarooq/dashboard-package 0.3.1 → 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 +1449 -1120
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +1450 -1121
  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,9 +774,11 @@ 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",
@@ -792,60 +806,60 @@ var DisplayCard = function DisplayCard(_ref) {
792
806
  },
793
807
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
794
808
  sx: {
795
- fontWeight: '400',
796
- color: 'rgba(0, 0, 0, 0.4)',
797
- fontSize: '12px',
798
- lineHeight: '16px',
799
- textAlign: 'left'
809
+ fontWeight: "400",
810
+ color: "rgba(0, 0, 0, 0.4)",
811
+ fontSize: "12px",
812
+ lineHeight: "16px",
813
+ textAlign: "left"
800
814
  },
801
815
  children: title
802
816
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
803
817
  sx: {
804
- lineHeight: '1.2',
805
- textAlign: 'left',
806
- color: '#000',
807
- fontSize: '20px',
808
- fontWeight: '700',
818
+ lineHeight: "1.2",
819
+ textAlign: "left",
820
+ color: "#000",
821
+ fontSize: "20px",
822
+ fontWeight: "700",
809
823
  mb: 0.5
810
824
  },
811
825
  children: statusValue(value)
812
826
  }), subValue && /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
813
827
  sx: {
814
- fontSize: '11px',
815
- 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)',
816
- fontWeight: '500',
817
- display: 'flex',
818
- 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",
819
833
  gap: 0.5
820
834
  },
821
- 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", {
822
836
  style: {
823
- fontSize: '14px'
837
+ fontSize: "14px"
824
838
  },
825
839
  children: "\u25B2"
826
840
  }), subValue]
827
841
  })]
828
842
  }), Icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
829
843
  sx: {
830
- width: '44px',
831
- height: '44px',
832
- borderRadius: '50%',
833
- backgroundColor: '#dfdbdb95',
834
- display: 'flex',
835
- alignItems: 'center',
836
- justifyContent: 'center',
837
- 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)"
838
852
  },
839
853
  children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
840
854
  sx: {
841
- fontSize: '20px'
855
+ fontSize: "20px"
842
856
  }
843
857
  })
844
858
  })]
845
859
  });
846
860
  };
847
861
  var statusValue = function statusValue(value) {
848
- 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;
849
863
  };
850
864
 
851
865
  var CardWrapper = function CardWrapper(_ref) {
@@ -897,230 +911,386 @@ var CardWrapper = function CardWrapper(_ref) {
897
911
  };
898
912
  var LandingPagesCard = function LandingPagesCard() {
899
913
  var data = [{
900
- page: "/zakat",
901
- users: "612 users",
902
- cvr: "1.3% CVR",
903
- color: "#2E7D32"
914
+ page: "/yemen-orphans-appeal",
915
+ visitors: "1,840",
916
+ donations: "32",
917
+ revenue: "$38,200",
918
+ cvr: "1.7%"
919
+ }, {
920
+ page: "/gaza-emergency-food",
921
+ visitors: "1,620",
922
+ donations: "28",
923
+ revenue: "$28,600",
924
+ cvr: "1.7%"
904
925
  }, {
905
- page: "/ramadan",
906
- users: "488 users",
907
- cvr: "1.1% CVR",
908
- color: "#2E7D32"
926
+ page: "/why-zakat-matters",
927
+ visitors: "1,210",
928
+ donations: "21",
929
+ revenue: "$24,800",
930
+ cvr: "1.7%"
909
931
  }, {
910
- page: "/donate",
911
- users: "421 users",
912
- cvr: "0.7% CVR",
913
- color: "#ED6C02"
932
+ page: "/somalia-masjid-build",
933
+ visitors: "890",
934
+ donations: "15",
935
+ revenue: "$16,400",
936
+ cvr: "1.7%"
914
937
  }, {
915
- page: "/campaigns",
916
- users: "380 users",
917
- cvr: "0.5% CVR",
918
- color: "#ED6C02"
938
+ page: "/ramadan-giving-guide",
939
+ visitors: "720",
940
+ donations: "11",
941
+ revenue: "$11,200",
942
+ cvr: "1.5%"
919
943
  }, {
920
- page: "/sadaqah",
921
- users: "290 users",
922
- cvr: "0.9% CVR",
923
- color: "#2E7D32"
944
+ page: "/water-wells-pakistan",
945
+ visitors: "510",
946
+ donations: "11",
947
+ revenue: "$22,980",
948
+ cvr: "2.2%"
924
949
  }];
925
- return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
926
- title: "Top Landing Pages",
927
- 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) {
928
1003
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
929
1004
  sx: {
930
- display: "flex",
931
- justifyContent: "space-between",
932
- 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"
933
1011
  },
934
1012
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
935
- variant: "body2",
936
1013
  sx: {
937
- fontWeight: 500,
938
- color: "#333"
1014
+ fontSize: "13px",
1015
+ fontWeight: 700,
1016
+ color: "#000",
1017
+ textAlign: "left"
939
1018
  },
940
1019
  children: item.page
941
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1020
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
942
1021
  sx: {
943
- display: "flex",
944
- gap: 2,
945
- alignItems: "center"
1022
+ fontSize: "13px",
1023
+ color: "rgba(0, 0, 0, 0.6)",
1024
+ fontWeight: 500,
1025
+ textAlign: "right"
946
1026
  },
947
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
948
- variant: "body2",
949
- sx: {
950
- color: "#606062",
951
- fontWeight: 500
952
- },
953
- children: item.users
954
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
955
- variant: "body2",
956
- sx: {
957
- color: item.color,
958
- fontWeight: 600,
959
- minWidth: "70px",
960
- textAlign: "right"
961
- },
962
- children: item.cvr
963
- })]
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
964
1052
  })]
965
1053
  }, index);
966
- })
1054
+ })]
967
1055
  });
968
1056
  };
969
1057
  var KeywordsCard = function KeywordsCard() {
970
1058
  var data = [{
971
1059
  keyword: "zakat calculator",
972
- volume: "320",
973
- rank: "#3",
974
- color: "#E8F5E9",
975
- textColor: "#2E7D32"
1060
+ clicks: "1,240",
1061
+ rank: "#2.1",
1062
+ trend: "Improving",
1063
+ trendType: "up"
976
1064
  }, {
977
- keyword: "donate to ramadan",
978
- volume: "214",
979
- rank: "#5",
980
- color: "#E8F5E9",
981
- textColor: "#2E7D32"
1065
+ keyword: "orphan sponsorship",
1066
+ clicks: "860",
1067
+ rank: "#3.4",
1068
+ trend: "Improving",
1069
+ trendType: "up"
982
1070
  }, {
983
- keyword: "islamic charity uk",
984
- volume: "198",
985
- rank: "#11",
986
- color: "#FFF3E0",
987
- textColor: "#ED6C02"
1071
+ keyword: "ramadan donation guide",
1072
+ clicks: "720",
1073
+ rank: "#1.8",
1074
+ trend: "Improving",
1075
+ trendType: "up"
988
1076
  }, {
989
- keyword: "madinah fundraising",
990
- volume: "176",
991
- rank: "#1",
992
- color: "#E8F5E9",
993
- textColor: "#2E7D32"
1077
+ keyword: "yemen humanitarian crisis",
1078
+ clicks: "580",
1079
+ rank: "#5.2",
1080
+ trend: "Declining",
1081
+ trendType: "down"
994
1082
  }, {
995
- keyword: "online sadaqah",
996
- volume: "142",
997
- rank: "#8",
998
- color: "#FFF3E0",
999
- textColor: "#ED6C02"
1083
+ keyword: "masjid building fund",
1084
+ clicks: "410",
1085
+ rank: "#4.1",
1086
+ trend: "Improving",
1087
+ trendType: "up"
1000
1088
  }];
1001
- return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
1002
- title: "Top Keywords",
1003
- 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) {
1004
1133
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1005
1134
  sx: {
1006
- display: "flex",
1007
- justifyContent: "space-between",
1008
- 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"
1009
1141
  },
1010
1142
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1011
- variant: "body2",
1012
1143
  sx: {
1013
- fontWeight: 500,
1014
- color: "#333"
1144
+ fontSize: "13px",
1145
+ fontWeight: 700,
1146
+ color: "#000",
1147
+ textAlign: "left"
1015
1148
  },
1016
1149
  children: item.keyword
1017
- }), /*#__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, {
1018
1159
  sx: {
1019
1160
  display: "flex",
1020
- gap: 2,
1021
- alignItems: "center"
1161
+ justifyContent: "center"
1022
1162
  },
1023
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1024
- variant: "body2",
1163
+ children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1025
1164
  sx: {
1026
- color: "#606062",
1027
- fontWeight: 500
1028
- },
1029
- children: item.volume
1030
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1031
- sx: {
1032
- bgcolor: item.color,
1033
- color: item.textColor,
1034
- px: 1,
1035
- py: 0.2,
1036
- borderRadius: 1,
1037
- fontSize: "12px",
1038
- fontWeight: 600,
1039
- minWidth: "30px",
1040
- 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"
1041
1174
  },
1042
1175
  children: item.rank
1043
- })]
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
+ })
1044
1215
  })]
1045
1216
  }, index);
1046
- })
1217
+ })]
1047
1218
  });
1048
1219
  };
1049
- 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;
1050
1223
  var data = [{
1051
- code: "GB",
1224
+ country: "United States",
1225
+ stats: "3,120 · 37%",
1226
+ percentage: 37
1227
+ }, {
1052
1228
  country: "United Kingdom",
1053
- percentage: 60
1229
+ stats: "1,840 · 22%",
1230
+ percentage: 22
1054
1231
  }, {
1055
- code: "US",
1056
- country: "United States",
1057
- percentage: 14
1232
+ country: "Canada",
1233
+ stats: "920 · 11%",
1234
+ percentage: 11
1058
1235
  }, {
1059
- code: "AU",
1060
1236
  country: "Australia",
1237
+ stats: "650 · 8%",
1061
1238
  percentage: 8
1062
1239
  }, {
1063
- code: "CA",
1064
- country: "Canada",
1065
- percentage: 6
1066
- }, {
1067
- code: "AE",
1068
1240
  country: "UAE",
1069
- percentage: 4
1241
+ stats: "580 · 7%",
1242
+ percentage: 7
1243
+ }, {
1244
+ country: "Other",
1245
+ stats: "1,310 · 16%",
1246
+ percentage: 16
1070
1247
  }];
1071
1248
  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
1072
- title: "Geography Insights",
1249
+ title: "Geography insights",
1250
+ subtitle: subtitle,
1073
1251
  children: data.map(function (item, index) {
1074
1252
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1075
1253
  sx: {
1076
1254
  display: "flex",
1077
1255
  alignItems: "center",
1078
- gap: 2
1256
+ gap: 2,
1257
+ py: 0.8
1079
1258
  },
1080
1259
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1081
- variant: "body2",
1082
- sx: {
1083
- fontWeight: 600,
1084
- color: "#606062",
1085
- minWidth: "25px"
1086
- },
1087
- children: item.code
1088
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1089
- variant: "body2",
1090
1260
  sx: {
1261
+ fontSize: "13px",
1091
1262
  fontWeight: 500,
1092
- color: "#333",
1263
+ color: "rgba(0, 0, 0, 0.4)",
1093
1264
  minWidth: "120px",
1094
1265
  textAlign: "left"
1095
1266
  },
1096
1267
  children: item.country
1097
1268
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1098
1269
  sx: {
1099
- flexGrow: 1,
1100
- mx: 2
1270
+ flexGrow: 1
1101
1271
  },
1102
1272
  children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
1103
1273
  variant: "determinate",
1104
1274
  value: item.percentage,
1105
1275
  sx: {
1106
- height: 12,
1107
- borderRadius: 3,
1108
- bgcolor: "#F0F0F0",
1276
+ height: 10,
1277
+ borderRadius: 5,
1278
+ bgcolor: "#f3f4f6ff",
1109
1279
  "& .MuiLinearProgress-bar": {
1110
- bgcolor: "#0275c2ff",
1111
- borderRadius: 3
1280
+ bgcolor: "#6366F1",
1281
+ borderRadius: 5
1112
1282
  }
1113
1283
  }
1114
1284
  })
1115
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
1116
- variant: "body2",
1285
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1117
1286
  sx: {
1118
- fontWeight: 600,
1119
- color: "#333",
1120
- minWidth: "35px",
1287
+ fontSize: "13px",
1288
+ fontWeight: 700,
1289
+ color: "#000",
1290
+ minWidth: "80px",
1121
1291
  textAlign: "right"
1122
1292
  },
1123
- children: [item.percentage, "%"]
1293
+ children: item.stats
1124
1294
  })]
1125
1295
  }, index);
1126
1296
  })
@@ -1613,7 +1783,7 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
1613
1783
  variant: "determinate",
1614
1784
  value: item.percentage,
1615
1785
  sx: {
1616
- height: 8,
1786
+ height: 15,
1617
1787
  borderRadius: 4,
1618
1788
  bgcolor: "#F3F4F6",
1619
1789
  "& .MuiLinearProgress-bar": {
@@ -1637,121 +1807,347 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
1637
1807
  });
1638
1808
  };
1639
1809
 
1640
- var OrganicSection = function OrganicSection(_ref) {
1641
- var _ref$apiData = _ref.apiData,
1642
- apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
1643
- var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
1644
- var dailyPerformance = {
1645
- label: "Search Visibility",
1646
- series: [{
1647
- name: "Raised",
1648
- data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
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)"
1649
1830
  }, {
1650
- name: "Spend",
1651
- data: [800, 950, 700, 1100, 900, 1200, 1300]
1652
- }],
1653
- categories: categories
1654
- };
1655
- var spendAllocation = {
1656
- label: "Source Breakdown",
1657
- data: [4500, 2500, 1500, 700],
1658
- categories: ["Organic", "Direct", "Refferal", "Social"]
1659
- };
1660
- var roasTrend = {
1661
- label: "Traffic Trend",
1662
- value: "8,420",
1663
- data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
1664
- categories: categories
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
+ }
1883
+ }
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"
1899
+ }
1900
+ }
1901
+ }
1665
1902
  };
1666
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
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),
1667
1915
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1668
1916
  sx: {
1669
- display: 'flex',
1670
- gap: 2,
1671
- mb: 5
1917
+ mb: 2
1672
1918
  },
1673
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1674
- title: "Organic Users",
1675
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
1676
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
1677
- icon: iconsMaterial.PeopleAltOutlined,
1678
- sx: {
1679
- flex: 1
1680
- }
1681
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1682
- title: "Search Clicks",
1683
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
1684
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
1685
- icon: iconsMaterial.SearchOutlined,
1686
- sx: {
1687
- flex: 1
1688
- }
1689
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1690
- title: "Donations",
1691
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
1692
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
1693
- icon: iconsMaterial.FavoriteOutlined,
1694
- sx: {
1695
- flex: 1
1696
- }
1697
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1698
- title: "Conversion Rate",
1699
- value: "$130.58",
1700
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
1701
- icon: iconsMaterial.Adjust,
1919
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1702
1920
  sx: {
1703
- flex: 1
1704
- }
1705
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1706
- title: "Revenue raised",
1707
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
1708
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
1709
- 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, {
1710
1928
  sx: {
1711
- flex: 1
1712
- }
1713
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1714
- title: "Avg donation",
1715
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
1716
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
1717
- icon: iconsMaterial.PaidOutlined,
1929
+ fontSize: "13px",
1930
+ color: "rgba(0, 0, 0, 0.4)",
1931
+ mt: 0.2,
1932
+ textAlign: "left"
1933
+ },
1934
+ children: subtitle
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, {
1718
1992
  sx: {
1719
- flex: 1
1720
- }
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
+ })]
1721
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
+ })
1722
2101
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
1723
2102
  container: true,
1724
2103
  spacing: 3,
1725
2104
  sx: {
1726
- mt: 4
2105
+ mt: 1
1727
2106
  },
1728
2107
  children: [/*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1729
- item: roasTrend,
1730
- index: 2,
1731
- md: 6,
2108
+ item: mainChart,
2109
+ index: 0,
2110
+ md: 12,
1732
2111
  type: "area",
1733
- metric: "ROAS",
1734
2112
  isPrimary: true,
1735
2113
  isPremium: true
1736
- }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1737
- item: dailyPerformance,
1738
- index: 0,
1739
- md: 6,
1740
- type: "bar",
1741
- metric: "Revenue",
1742
- isPremium: true
1743
- }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1744
- item: spendAllocation,
1745
- index: 1,
1746
- md: 6,
1747
- type: "donut",
1748
- metric: "Revenue",
1749
- isPremium: true
1750
2114
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1751
2115
  item: true,
1752
2116
  xs: 12,
1753
- md: 6,
2117
+ md: 8,
1754
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
+ })
1755
2151
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1756
2152
  item: true,
1757
2153
  xs: 12,
@@ -1770,151 +2166,127 @@ var OrganicSection = function OrganicSection(_ref) {
1770
2166
  };
1771
2167
 
1772
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];
1773
2173
  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
1774
- var dailyPerformance = {
1775
- label: "Clicks & Unique Clicks Trend",
1776
- series: [{
1777
- name: "Clicks",
2174
+ var metricInfo = {
2175
+ "Total raised": {
2176
+ value: "$48,920",
2177
+ subValue: "12% vs last month",
2178
+ icon: iconsMaterial.PaidOutlined,
1778
2179
  data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
1779
- }, {
1780
- name: "Unique Clicks",
1781
- data: [800, 950, 700, 1100, 900, 1200, 1300]
1782
- }],
1783
- 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
+ }
1784
2235
  };
1785
- var spendAllocation = {
1786
- label: "Bounce Rate Trend",
1787
- 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,
1788
2242
  categories: categories
1789
2243
  };
1790
- var roasTrend = {
1791
- label: "Open Rate Trend",
1792
- data: [20, 25, 30, 35, 40, 45, 50],
1793
- 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
+ });
1794
2258
  };
1795
2259
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1796
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2260
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1797
2261
  sx: {
1798
2262
  display: "flex",
1799
2263
  gap: 2,
1800
- mb: 2
2264
+ mb: 2,
2265
+ flexWrap: "wrap"
1801
2266
  },
1802
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1803
- title: "Total raised",
1804
- value: "$48,920",
1805
- subValue: "12% vs last month",
1806
- icon: iconsMaterial.PaidOutlined,
1807
- sx: {
1808
- flex: 1
1809
- }
1810
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1811
- title: "Donations",
1812
- value: "62",
1813
- subValue: "12% vs last month",
1814
- icon: iconsMaterial.FavoriteOutlined,
1815
- sx: {
1816
- flex: 1
1817
- }
1818
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1819
- title: "Conversion rate",
1820
- value: "3.2%",
1821
- subValue: "12% vs last month",
1822
- icon: iconsMaterial.Adjust,
1823
- sx: {
1824
- flex: 1
1825
- }
1826
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1827
- title: "CTR",
1828
- value: "8.1%",
1829
- subValue: "12% vs last month",
1830
- icon: iconsMaterial.NotInterested,
1831
- sx: {
1832
- flex: 1
1833
- }
1834
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1835
- title: "Revenue per email",
1836
- value: "$2.45",
1837
- subValue: "12% vs last month",
1838
- icon: iconsMaterial.IndeterminateCheckBoxOutlined,
1839
- sx: {
1840
- flex: 1
1841
- }
1842
- })]
1843
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
2267
+ children: ["Total raised", "Donations", "Conversion rate", "CTR", "Revenue per email"].map(renderCard)
2268
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1844
2269
  sx: {
1845
2270
  display: "flex",
1846
- gap: 2
2271
+ gap: 2,
2272
+ mb: 2,
2273
+ flexWrap: "wrap"
1847
2274
  },
1848
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1849
- title: "Open rate",
1850
- value: "42.3%",
1851
- subValue: "12% vs last month",
1852
- icon: iconsMaterial.Email,
1853
- sx: {
1854
- flex: 1
1855
- }
1856
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1857
- title: "Clicks",
1858
- value: "1,612",
1859
- subValue: "12% vs last month",
1860
- icon: iconsMaterial.NearMe,
1861
- sx: {
1862
- flex: 1
1863
- }
1864
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1865
- title: "Unique Clicks",
1866
- value: "1,148",
1867
- subValue: "12% vs last month",
1868
- icon: iconsMaterial.NearMe,
1869
- sx: {
1870
- flex: 1
1871
- }
1872
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1873
- title: "Bounce rate",
1874
- value: "1.8%",
1875
- subValue: "12% vs last month",
1876
- icon: iconsMaterial.HighlightOff,
1877
- sx: {
1878
- flex: 1
1879
- }
1880
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1881
- title: "Revenue per Click",
1882
- value: "$30.35",
1883
- subValue: "12% vs last month",
1884
- icon: iconsMaterial.HighlightOff,
1885
- sx: {
1886
- flex: 1
1887
- }
1888
- })]
1889
- }), /*#__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, {
1890
2277
  container: true,
1891
2278
  spacing: 3,
1892
2279
  sx: {
1893
- mt: 4
2280
+ mt: 1
1894
2281
  },
1895
- children: [/*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1896
- item: roasTrend,
1897
- index: 2,
1898
- md: 4,
1899
- type: "area",
1900
- metric: "ROAS",
1901
- isPrimary: true,
1902
- isPremium: true
1903
- }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1904
- item: dailyPerformance,
2282
+ children: /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
2283
+ item: mainChart,
1905
2284
  index: 0,
1906
- md: 4,
1907
- type: "area",
1908
- metric: "Revenue",
1909
- isPremium: true
1910
- }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1911
- item: spendAllocation,
1912
- index: 1,
1913
- md: 4,
2285
+ md: 12,
1914
2286
  type: "area",
1915
- metric: "Revenue",
2287
+ isPrimary: true,
1916
2288
  isPremium: true
1917
- })]
2289
+ })
1918
2290
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
1919
2291
  container: true,
1920
2292
  spacing: 3,
@@ -3356,7 +3728,7 @@ var MiniChart$3 = function MiniChart(_ref) {
3356
3728
  height: 40
3357
3729
  });
3358
3730
  };
3359
- var rows$4 = [{
3731
+ var rows$3 = [{
3360
3732
  title: "Reminder 1 (1hr)",
3361
3733
  abandoned: "1,240",
3362
3734
  sent: "1,240",
@@ -3416,14 +3788,14 @@ var aggregates$3 = {
3416
3788
  recovered: "174",
3417
3789
  recoveredData: [2, 3, 4, 5, 4, 6, 5, 7, 6]
3418
3790
  };
3419
- var BORDER$4 = "1px solid #e0e0e0";
3420
- var headerCellSx$4 = {
3791
+ var BORDER$3 = "1px solid #e0e0e0";
3792
+ var headerCellSx$3 = {
3421
3793
  fontWeight: 900,
3422
3794
  fontSize: "0.78rem",
3423
3795
  color: "#111",
3424
3796
  bgcolor: "#f3f3f3",
3425
- borderBottom: BORDER$4,
3426
- borderRight: BORDER$4,
3797
+ borderBottom: BORDER$3,
3798
+ borderRight: BORDER$3,
3427
3799
  py: "20px",
3428
3800
  px: "5px",
3429
3801
  lineHeight: 1.4,
@@ -3432,11 +3804,11 @@ var headerCellSx$4 = {
3432
3804
  borderRight: 0
3433
3805
  }
3434
3806
  };
3435
- var cellSx$4 = {
3807
+ var cellSx$3 = {
3436
3808
  fontSize: "0.85rem",
3437
3809
  color: "#333",
3438
- borderBottom: BORDER$4,
3439
- borderRight: BORDER$4,
3810
+ borderBottom: BORDER$3,
3811
+ borderRight: BORDER$3,
3440
3812
  py: "10px",
3441
3813
  px: "5px",
3442
3814
  verticalAlign: "middle",
@@ -3445,7 +3817,7 @@ var cellSx$4 = {
3445
3817
  borderRight: 0
3446
3818
  }
3447
3819
  };
3448
- var aggCellSx$3 = _objectSpread2(_objectSpread2({}, cellSx$4), {}, {
3820
+ var aggCellSx$3 = _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
3449
3821
  bgcolor: "#f3f3f3",
3450
3822
  fontWeight: 900
3451
3823
  });
@@ -3520,7 +3892,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3520
3892
  sx: {
3521
3893
  borderCollapse: "separate",
3522
3894
  borderSpacing: 0,
3523
- border: BORDER$4,
3895
+ border: BORDER$3,
3524
3896
  borderRadius: "12px",
3525
3897
  overflow: "hidden",
3526
3898
  width: "100%",
@@ -3529,36 +3901,36 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3529
3901
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
3530
3902
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
3531
3903
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3532
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$4), {}, {
3904
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx$3), {}, {
3533
3905
  textAlign: "left",
3534
3906
  minWidth: 160
3535
3907
  }),
3536
3908
  children: "Reminder Email"
3537
3909
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3538
- sx: headerCellSx$4,
3910
+ sx: headerCellSx$3,
3539
3911
  children: "Abandoned Count"
3540
3912
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3541
- sx: headerCellSx$4,
3913
+ sx: headerCellSx$3,
3542
3914
  children: "Emails Sent"
3543
3915
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3544
- sx: headerCellSx$4,
3916
+ sx: headerCellSx$3,
3545
3917
  children: "Open Rate (No.)"
3546
3918
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3547
- sx: headerCellSx$4,
3919
+ sx: headerCellSx$3,
3548
3920
  children: "Click Rate (No.)"
3549
3921
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3550
- sx: headerCellSx$4,
3922
+ sx: headerCellSx$3,
3551
3923
  children: "Recovery Rate"
3552
3924
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3553
- sx: headerCellSx$4,
3925
+ sx: headerCellSx$3,
3554
3926
  children: "Recovered Revenue"
3555
3927
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3556
- sx: headerCellSx$4,
3928
+ sx: headerCellSx$3,
3557
3929
  children: "Recovered Donations"
3558
3930
  })]
3559
3931
  })
3560
3932
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
3561
- children: [rows$4.map(function (row, i) {
3933
+ children: [rows$3.map(function (row, i) {
3562
3934
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
3563
3935
  sx: {
3564
3936
  "&:hover": {
@@ -3566,19 +3938,19 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3566
3938
  }
3567
3939
  },
3568
3940
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3569
- sx: _objectSpread2(_objectSpread2({}, cellSx$4), {}, {
3941
+ sx: _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
3570
3942
  textAlign: "left",
3571
3943
  fontWeight: 500
3572
3944
  }),
3573
3945
  children: row.title
3574
3946
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3575
- sx: cellSx$4,
3947
+ sx: cellSx$3,
3576
3948
  children: row.abandoned
3577
3949
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
3578
- sx: cellSx$4,
3950
+ sx: cellSx$3,
3579
3951
  children: row.sent
3580
3952
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3581
- sx: cellSx$4,
3953
+ sx: cellSx$3,
3582
3954
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3583
3955
  variant: "body2",
3584
3956
  fontWeight: 500,
@@ -3592,7 +3964,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3592
3964
  children: row.openCount
3593
3965
  })]
3594
3966
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3595
- sx: cellSx$4,
3967
+ sx: cellSx$3,
3596
3968
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3597
3969
  variant: "body2",
3598
3970
  fontWeight: 500,
@@ -3606,7 +3978,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3606
3978
  children: row.clickCount
3607
3979
  })]
3608
3980
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3609
- sx: cellSx$4,
3981
+ sx: cellSx$3,
3610
3982
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3611
3983
  variant: "body2",
3612
3984
  fontWeight: 500,
@@ -3621,7 +3993,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3621
3993
  })
3622
3994
  })]
3623
3995
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3624
- sx: cellSx$4,
3996
+ sx: cellSx$3,
3625
3997
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3626
3998
  variant: "body2",
3627
3999
  fontWeight: 500,
@@ -3636,7 +4008,7 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
3636
4008
  })
3637
4009
  })]
3638
4010
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
3639
- sx: cellSx$4,
4011
+ sx: cellSx$3,
3640
4012
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
3641
4013
  variant: "body2",
3642
4014
  fontWeight: 500,
@@ -4161,7 +4533,7 @@ var MiniChart$2 = function MiniChart(_ref) {
4161
4533
  height: 40
4162
4534
  });
4163
4535
  };
4164
- var rows$3 = [{
4536
+ var rows$2 = [{
4165
4537
  title: "March Impact Report",
4166
4538
  sent: "100,000",
4167
4539
  openRate: "24.1%",
@@ -4219,14 +4591,14 @@ var aggregates$2 = {
4219
4591
  openRateData: [8, 5, 4, 6, 5, 6, 5, 6, 5],
4220
4592
  clickRateData: [4, 5, 6, 5, 6, 5, 6, 5, 6]
4221
4593
  };
4222
- var BORDER$3 = "1px solid #e0e0e0";
4223
- var headerCellSx$3 = {
4594
+ var BORDER$2 = "1px solid #e0e0e0";
4595
+ var headerCellSx$2 = {
4224
4596
  fontWeight: 900,
4225
4597
  fontSize: "0.78rem",
4226
4598
  color: "#111",
4227
4599
  bgcolor: "#f3f3f3f3",
4228
- borderBottom: BORDER$3,
4229
- borderRight: BORDER$3,
4600
+ borderBottom: BORDER$2,
4601
+ borderRight: BORDER$2,
4230
4602
  py: "20px",
4231
4603
  px: "5px",
4232
4604
  lineHeight: 1.4,
@@ -4235,11 +4607,11 @@ var headerCellSx$3 = {
4235
4607
  borderRight: 0
4236
4608
  }
4237
4609
  };
4238
- var cellSx$3 = {
4610
+ var cellSx$2 = {
4239
4611
  fontSize: "0.85rem",
4240
4612
  color: "#333",
4241
- borderBottom: BORDER$3,
4242
- borderRight: BORDER$3,
4613
+ borderBottom: BORDER$2,
4614
+ borderRight: BORDER$2,
4243
4615
  py: "10px",
4244
4616
  px: "5px",
4245
4617
  verticalAlign: "middle",
@@ -4248,7 +4620,7 @@ var cellSx$3 = {
4248
4620
  borderRight: 0
4249
4621
  }
4250
4622
  };
4251
- var aggCellSx$2 = _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
4623
+ var aggCellSx$2 = _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
4252
4624
  bgcolor: "#f3f3f3f3",
4253
4625
  fontWeight: 900
4254
4626
  });
@@ -4323,7 +4695,7 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4323
4695
  sx: {
4324
4696
  borderCollapse: "separate",
4325
4697
  borderSpacing: 0,
4326
- border: BORDER$3,
4698
+ border: BORDER$2,
4327
4699
  borderRadius: "12px",
4328
4700
  overflow: "hidden",
4329
4701
  width: "100%",
@@ -4332,39 +4704,39 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4332
4704
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
4333
4705
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4334
4706
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4335
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$3), {}, {
4707
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx$2), {}, {
4336
4708
  textAlign: "left",
4337
4709
  minWidth: 160
4338
4710
  }),
4339
4711
  children: "Email Title"
4340
4712
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4341
- sx: headerCellSx$3,
4713
+ sx: headerCellSx$2,
4342
4714
  children: "Emails Sent"
4343
4715
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4344
- sx: headerCellSx$3,
4716
+ sx: headerCellSx$2,
4345
4717
  children: "Open Rate (Count)"
4346
4718
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4347
- sx: headerCellSx$3,
4719
+ sx: headerCellSx$2,
4348
4720
  children: "Click Rate (Count)"
4349
4721
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4350
- sx: headerCellSx$3,
4722
+ sx: headerCellSx$2,
4351
4723
  children: "Donations from Email"
4352
4724
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4353
- sx: headerCellSx$3,
4725
+ sx: headerCellSx$2,
4354
4726
  children: "Revenue Generated"
4355
4727
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4356
- sx: headerCellSx$3,
4728
+ sx: headerCellSx$2,
4357
4729
  children: "Conversion (Email \u2192 Donation)"
4358
4730
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4359
- sx: headerCellSx$3,
4731
+ sx: headerCellSx$2,
4360
4732
  children: "Avg. Donation from Email"
4361
4733
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4362
- sx: headerCellSx$3,
4734
+ sx: headerCellSx$2,
4363
4735
  children: "Actions Column"
4364
4736
  })]
4365
4737
  })
4366
4738
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
4367
- children: [rows$3.map(function (row, i) {
4739
+ children: [rows$2.map(function (row, i) {
4368
4740
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4369
4741
  sx: {
4370
4742
  "&:hover": {
@@ -4372,16 +4744,16 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4372
4744
  }
4373
4745
  },
4374
4746
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4375
- sx: _objectSpread2(_objectSpread2({}, cellSx$3), {}, {
4747
+ sx: _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
4376
4748
  textAlign: "left",
4377
4749
  fontWeight: 500
4378
4750
  }),
4379
4751
  children: row.title
4380
4752
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4381
- sx: cellSx$3,
4753
+ sx: cellSx$2,
4382
4754
  children: row.sent
4383
4755
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4384
- sx: cellSx$3,
4756
+ sx: cellSx$2,
4385
4757
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4386
4758
  variant: "body2",
4387
4759
  fontWeight: 500,
@@ -4395,7 +4767,7 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4395
4767
  children: row.openCount
4396
4768
  })]
4397
4769
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4398
- sx: cellSx$3,
4770
+ sx: cellSx$2,
4399
4771
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4400
4772
  variant: "body2",
4401
4773
  fontWeight: 500,
@@ -4409,7 +4781,7 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4409
4781
  children: row.clickCount
4410
4782
  })]
4411
4783
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4412
- sx: cellSx$3,
4784
+ sx: cellSx$2,
4413
4785
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4414
4786
  variant: "body2",
4415
4787
  fontWeight: 500,
@@ -4424,7 +4796,7 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4424
4796
  })
4425
4797
  })]
4426
4798
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4427
- sx: cellSx$3,
4799
+ sx: cellSx$2,
4428
4800
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4429
4801
  variant: "body2",
4430
4802
  fontWeight: 500,
@@ -4439,13 +4811,13 @@ var UpdateEmailsTable = function UpdateEmailsTable() {
4439
4811
  })
4440
4812
  })]
4441
4813
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4442
- sx: cellSx$3,
4814
+ sx: cellSx$2,
4443
4815
  children: row.conversion
4444
4816
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4445
- sx: cellSx$3,
4817
+ sx: cellSx$2,
4446
4818
  children: row.avgDonation
4447
4819
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4448
- sx: cellSx$3,
4820
+ sx: cellSx$2,
4449
4821
  children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
4450
4822
  size: "small",
4451
4823
  sx: {
@@ -4713,7 +5085,7 @@ var MiniChart$1 = function MiniChart(_ref) {
4713
5085
  height: 40
4714
5086
  });
4715
5087
  };
4716
- var rows$2 = [{
5088
+ var rows$1 = [{
4717
5089
  title: "Lapsed 90 Days",
4718
5090
  sent: "5,200",
4719
5091
  openRate: "18.4%",
@@ -4774,14 +5146,14 @@ var aggregates$1 = {
4774
5146
  conversion: "3.8%",
4775
5147
  conversionData: [2, 3, 3, 4, 3, 5, 4, 5, 4]
4776
5148
  };
4777
- var BORDER$2 = "1px solid #e0e0e0";
4778
- var headerCellSx$2 = {
5149
+ var BORDER$1 = "1px solid #e0e0e0";
5150
+ var headerCellSx$1 = {
4779
5151
  fontWeight: 900,
4780
5152
  fontSize: "0.78rem",
4781
5153
  color: "#111",
4782
5154
  bgcolor: "#f3f3f3",
4783
- borderBottom: BORDER$2,
4784
- borderRight: BORDER$2,
5155
+ borderBottom: BORDER$1,
5156
+ borderRight: BORDER$1,
4785
5157
  py: "20px",
4786
5158
  px: "5px",
4787
5159
  lineHeight: 1.4,
@@ -4790,11 +5162,11 @@ var headerCellSx$2 = {
4790
5162
  borderRight: 0
4791
5163
  }
4792
5164
  };
4793
- var cellSx$2 = {
5165
+ var cellSx$1 = {
4794
5166
  fontSize: "0.85rem",
4795
5167
  color: "#333",
4796
- borderBottom: BORDER$2,
4797
- borderRight: BORDER$2,
5168
+ borderBottom: BORDER$1,
5169
+ borderRight: BORDER$1,
4798
5170
  py: "10px",
4799
5171
  px: "5px",
4800
5172
  verticalAlign: "middle",
@@ -4803,7 +5175,7 @@ var cellSx$2 = {
4803
5175
  borderRight: 0
4804
5176
  }
4805
5177
  };
4806
- var aggCellSx$1 = _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
5178
+ var aggCellSx$1 = _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
4807
5179
  bgcolor: "#f3f3f3",
4808
5180
  fontWeight: 900
4809
5181
  });
@@ -4878,7 +5250,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4878
5250
  sx: {
4879
5251
  borderCollapse: "separate",
4880
5252
  borderSpacing: 0,
4881
- border: BORDER$2,
5253
+ border: BORDER$1,
4882
5254
  borderRadius: "12px",
4883
5255
  overflow: "hidden",
4884
5256
  width: "100%",
@@ -4887,36 +5259,36 @@ var ReEngagementEmails = function ReEngagementEmails() {
4887
5259
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
4888
5260
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4889
5261
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4890
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$2), {}, {
5262
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
4891
5263
  textAlign: "left",
4892
5264
  minWidth: 160
4893
5265
  }),
4894
5266
  children: "Campaign"
4895
5267
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4896
- sx: headerCellSx$2,
5268
+ sx: headerCellSx$1,
4897
5269
  children: "Emails Sent"
4898
5270
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4899
- sx: headerCellSx$2,
5271
+ sx: headerCellSx$1,
4900
5272
  children: "Open Rate (No.)"
4901
5273
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4902
- sx: headerCellSx$2,
5274
+ sx: headerCellSx$1,
4903
5275
  children: "Click Rate (No.)"
4904
5276
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4905
- sx: headerCellSx$2,
5277
+ sx: headerCellSx$1,
4906
5278
  children: "Re-activated Donors"
4907
5279
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4908
- sx: headerCellSx$2,
5280
+ sx: headerCellSx$1,
4909
5281
  children: "Donations"
4910
5282
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4911
- sx: headerCellSx$2,
5283
+ sx: headerCellSx$1,
4912
5284
  children: "Revenue"
4913
5285
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4914
- sx: headerCellSx$2,
5286
+ sx: headerCellSx$1,
4915
5287
  children: "Conversion Rate"
4916
5288
  })]
4917
5289
  })
4918
5290
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
4919
- children: [rows$2.map(function (row, i) {
5291
+ children: [rows$1.map(function (row, i) {
4920
5292
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
4921
5293
  sx: {
4922
5294
  "&:hover": {
@@ -4924,16 +5296,16 @@ var ReEngagementEmails = function ReEngagementEmails() {
4924
5296
  }
4925
5297
  },
4926
5298
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4927
- sx: _objectSpread2(_objectSpread2({}, cellSx$2), {}, {
5299
+ sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
4928
5300
  textAlign: "left",
4929
5301
  fontWeight: 500
4930
5302
  }),
4931
5303
  children: row.title
4932
5304
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
4933
- sx: cellSx$2,
5305
+ sx: cellSx$1,
4934
5306
  children: row.sent
4935
5307
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4936
- sx: cellSx$2,
5308
+ sx: cellSx$1,
4937
5309
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4938
5310
  variant: "body2",
4939
5311
  fontWeight: 500,
@@ -4947,7 +5319,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4947
5319
  children: row.openCount
4948
5320
  })]
4949
5321
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4950
- sx: cellSx$2,
5322
+ sx: cellSx$1,
4951
5323
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4952
5324
  variant: "body2",
4953
5325
  fontWeight: 500,
@@ -4961,7 +5333,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4961
5333
  children: row.clickCount
4962
5334
  })]
4963
5335
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4964
- sx: cellSx$2,
5336
+ sx: cellSx$1,
4965
5337
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4966
5338
  variant: "body2",
4967
5339
  fontWeight: 500,
@@ -4976,7 +5348,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4976
5348
  })
4977
5349
  })]
4978
5350
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4979
- sx: cellSx$2,
5351
+ sx: cellSx$1,
4980
5352
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4981
5353
  variant: "body2",
4982
5354
  fontWeight: 500,
@@ -4991,7 +5363,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
4991
5363
  })
4992
5364
  })]
4993
5365
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
4994
- sx: cellSx$2,
5366
+ sx: cellSx$1,
4995
5367
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4996
5368
  variant: "body2",
4997
5369
  fontWeight: 500,
@@ -5006,7 +5378,7 @@ var ReEngagementEmails = function ReEngagementEmails() {
5006
5378
  })
5007
5379
  })]
5008
5380
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5009
- sx: cellSx$2,
5381
+ sx: cellSx$1,
5010
5382
  children: row.conversion
5011
5383
  })]
5012
5384
  }, i);
@@ -5263,7 +5635,7 @@ var MiniChart = function MiniChart(_ref) {
5263
5635
  height: 40
5264
5636
  });
5265
5637
  };
5266
- var rows$1 = [{
5638
+ var rows = [{
5267
5639
  title: "March Impact Report",
5268
5640
  sent: "100,000",
5269
5641
  openRate: "24.1%",
@@ -5321,14 +5693,14 @@ var aggregates = {
5321
5693
  repeatRate: "28.8%",
5322
5694
  repeatRateData: [3, 4, 4, 5, 5, 6, 5, 6, 6]
5323
5695
  };
5324
- var BORDER$1 = "1px solid #e0e0e0";
5325
- var headerCellSx$1 = {
5696
+ var BORDER = "1px solid #e0e0e0";
5697
+ var headerCellSx = {
5326
5698
  fontWeight: 900,
5327
5699
  fontSize: "0.78rem",
5328
5700
  color: "#111",
5329
5701
  bgcolor: "#f3f3f3",
5330
- borderBottom: BORDER$1,
5331
- borderRight: BORDER$1,
5702
+ borderBottom: BORDER,
5703
+ borderRight: BORDER,
5332
5704
  py: "20px",
5333
5705
  px: "5px",
5334
5706
  lineHeight: 1.4,
@@ -5337,11 +5709,11 @@ var headerCellSx$1 = {
5337
5709
  borderRight: 0
5338
5710
  }
5339
5711
  };
5340
- var cellSx$1 = {
5712
+ var cellSx = {
5341
5713
  fontSize: "0.85rem",
5342
5714
  color: "#333",
5343
- borderBottom: BORDER$1,
5344
- borderRight: BORDER$1,
5715
+ borderBottom: BORDER,
5716
+ borderRight: BORDER,
5345
5717
  py: "10px",
5346
5718
  px: "5px",
5347
5719
  verticalAlign: "middle",
@@ -5350,7 +5722,7 @@ var cellSx$1 = {
5350
5722
  borderRight: 0
5351
5723
  }
5352
5724
  };
5353
- var aggCellSx = _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
5725
+ var aggCellSx = _objectSpread2(_objectSpread2({}, cellSx), {}, {
5354
5726
  bgcolor: "#f3f3f3",
5355
5727
  fontWeight: 900
5356
5728
  });
@@ -5425,7 +5797,7 @@ var ImpactEmails = function ImpactEmails() {
5425
5797
  sx: {
5426
5798
  borderCollapse: "separate",
5427
5799
  borderSpacing: 0,
5428
- border: BORDER$1,
5800
+ border: BORDER,
5429
5801
  borderRadius: "12px",
5430
5802
  overflow: "hidden",
5431
5803
  width: "100%",
@@ -5434,36 +5806,36 @@ var ImpactEmails = function ImpactEmails() {
5434
5806
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
5435
5807
  children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5436
5808
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5437
- sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
5809
+ sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
5438
5810
  textAlign: "left",
5439
5811
  minWidth: 160
5440
5812
  }),
5441
5813
  children: "Email Title"
5442
5814
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5443
- sx: headerCellSx$1,
5815
+ sx: headerCellSx,
5444
5816
  children: "Emails Sent"
5445
5817
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5446
- sx: headerCellSx$1,
5818
+ sx: headerCellSx,
5447
5819
  children: "Open Rate (No.)"
5448
5820
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5449
- sx: headerCellSx$1,
5821
+ sx: headerCellSx,
5450
5822
  children: "Click Rate (No.)"
5451
5823
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5452
- sx: headerCellSx$1,
5824
+ sx: headerCellSx,
5453
5825
  children: "Engagement Rate"
5454
5826
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5455
- sx: headerCellSx$1,
5827
+ sx: headerCellSx,
5456
5828
  children: "Donations Generated"
5457
5829
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5458
- sx: headerCellSx$1,
5830
+ sx: headerCellSx,
5459
5831
  children: "Revenue Generated"
5460
5832
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5461
- sx: headerCellSx$1,
5833
+ sx: headerCellSx,
5462
5834
  children: "Repeat Donation Rate"
5463
5835
  })]
5464
5836
  })
5465
5837
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
5466
- children: [rows$1.map(function (row, i) {
5838
+ children: [rows.map(function (row, i) {
5467
5839
  return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
5468
5840
  sx: {
5469
5841
  "&:hover": {
@@ -5471,16 +5843,16 @@ var ImpactEmails = function ImpactEmails() {
5471
5843
  }
5472
5844
  },
5473
5845
  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5474
- sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
5846
+ sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
5475
5847
  textAlign: "left",
5476
5848
  fontWeight: 500
5477
5849
  }),
5478
5850
  children: row.title
5479
5851
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5480
- sx: cellSx$1,
5852
+ sx: cellSx,
5481
5853
  children: row.sent
5482
5854
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5483
- sx: cellSx$1,
5855
+ sx: cellSx,
5484
5856
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5485
5857
  variant: "body2",
5486
5858
  fontWeight: 500,
@@ -5494,7 +5866,7 @@ var ImpactEmails = function ImpactEmails() {
5494
5866
  children: row.openCount
5495
5867
  })]
5496
5868
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5497
- sx: cellSx$1,
5869
+ sx: cellSx,
5498
5870
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5499
5871
  variant: "body2",
5500
5872
  fontWeight: 500,
@@ -5508,10 +5880,10 @@ var ImpactEmails = function ImpactEmails() {
5508
5880
  children: row.clickCount
5509
5881
  })]
5510
5882
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5511
- sx: cellSx$1,
5883
+ sx: cellSx,
5512
5884
  children: row.engagement
5513
5885
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5514
- sx: cellSx$1,
5886
+ sx: cellSx,
5515
5887
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5516
5888
  variant: "body2",
5517
5889
  fontWeight: 500,
@@ -5526,7 +5898,7 @@ var ImpactEmails = function ImpactEmails() {
5526
5898
  })
5527
5899
  })]
5528
5900
  }), /*#__PURE__*/jsxRuntime.jsxs(material.TableCell, {
5529
- sx: cellSx$1,
5901
+ sx: cellSx,
5530
5902
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5531
5903
  variant: "body2",
5532
5904
  fontWeight: 500,
@@ -5541,7 +5913,7 @@ var ImpactEmails = function ImpactEmails() {
5541
5913
  })
5542
5914
  })]
5543
5915
  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
5544
- sx: cellSx$1,
5916
+ sx: cellSx,
5545
5917
  children: row.repeatRate
5546
5918
  })]
5547
5919
  }, i);
@@ -6417,8 +6789,8 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6417
6789
  borderRadius: "24px",
6418
6790
  border: "1px solid #f0f0f0",
6419
6791
  boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6420
- p: 3,
6421
- height: "100%"
6792
+ p: 3
6793
+ // height: "100%",
6422
6794
  },
6423
6795
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6424
6796
  sx: {
@@ -6433,7 +6805,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6433
6805
  fontWeight: 700,
6434
6806
  fontSize: "18px",
6435
6807
  color: "#000",
6436
- textAlign: 'left'
6808
+ textAlign: "left"
6437
6809
  },
6438
6810
  children: title
6439
6811
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -6467,7 +6839,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6467
6839
  fontSize: "12px",
6468
6840
  color: "rgba(0, 0, 0, 0.4)",
6469
6841
  fontWeight: 500,
6470
- textAlign: 'left'
6842
+ textAlign: "left"
6471
6843
  },
6472
6844
  children: header
6473
6845
  }, header);
@@ -6482,7 +6854,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6482
6854
  display: "grid",
6483
6855
  gridTemplateColumns: gridTemplateColumns,
6484
6856
  gap: 2,
6485
- py: 1.8,
6857
+ py: 1.89,
6486
6858
  alignItems: "center",
6487
6859
  borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
6488
6860
  },
@@ -6505,12 +6877,12 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6505
6877
  }), row.icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6506
6878
  sx: {
6507
6879
  color: row.iconColor || "inherit",
6508
- display: 'flex',
6509
- alignItems: 'center'
6880
+ display: "flex",
6881
+ alignItems: "center"
6510
6882
  },
6511
6883
  children: /*#__PURE__*/jsxRuntime.jsx(row.icon, {
6512
6884
  sx: {
6513
- fontSize: '18px'
6885
+ fontSize: "18px"
6514
6886
  }
6515
6887
  })
6516
6888
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -6526,10 +6898,10 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6526
6898
  fontSize: "13px",
6527
6899
  fontWeight: 600,
6528
6900
  color: "#000",
6529
- textAlign: 'left'
6901
+ textAlign: "left"
6530
6902
  },
6531
6903
  children: row.val1
6532
- }), row.type === 'progress' ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6904
+ }), row.type === "progress" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6533
6905
  sx: {
6534
6906
  display: "flex",
6535
6907
  alignItems: "center",
@@ -6565,7 +6937,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6565
6937
  fontSize: "13px",
6566
6938
  fontWeight: 600,
6567
6939
  color: "#000",
6568
- textAlign: 'left'
6940
+ textAlign: "left"
6569
6941
  },
6570
6942
  children: row.val2
6571
6943
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -6573,7 +6945,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6573
6945
  fontSize: "13px",
6574
6946
  fontWeight: row.highlightVal3 ? 700 : 500,
6575
6947
  color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
6576
- textAlign: 'left'
6948
+ textAlign: "left"
6577
6949
  },
6578
6950
  children: row.val3
6579
6951
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -6581,26 +6953,26 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6581
6953
  fontSize: "13px",
6582
6954
  fontWeight: 500,
6583
6955
  color: "#000",
6584
- textAlign: 'left'
6956
+ textAlign: "left"
6585
6957
  },
6586
6958
  children: row.val4
6587
6959
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6588
- children: row.type === 'trend' ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6960
+ children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6589
6961
  sx: {
6590
6962
  display: "flex",
6591
6963
  alignItems: "center",
6592
6964
  gap: 0.5,
6593
- color: row.trendType === 'up' ? "#22C55E" : "#EF4444",
6965
+ color: row.trendType === "up" ? "#22C55E" : "#EF4444",
6594
6966
  fontSize: "12px",
6595
6967
  fontWeight: 600
6596
6968
  },
6597
- children: [row.trendType === 'up' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {
6969
+ children: [row.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {
6598
6970
  sx: {
6599
- fontSize: '14px'
6971
+ fontSize: "14px"
6600
6972
  }
6601
6973
  }) : /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingDown, {
6602
6974
  sx: {
6603
- fontSize: '14px'
6975
+ fontSize: "14px"
6604
6976
  }
6605
6977
  }), row.trendLabel]
6606
6978
  }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
@@ -6614,223 +6986,14 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6614
6986
  fontSize: "11px",
6615
6987
  fontWeight: 700,
6616
6988
  textAlign: "center"
6617
- },
6618
- children: row.status
6619
- })
6620
- })]
6621
- }, idx);
6622
- })
6623
- })]
6624
- })
6625
- })]
6626
- });
6627
- };
6628
-
6629
- var DonorMixCard = function DonorMixCard(_ref) {
6630
- var _ref$title = _ref.title,
6631
- title = _ref$title === void 0 ? "Donor mix" : _ref$title,
6632
- _ref$subtitle = _ref.subtitle,
6633
- subtitle = _ref$subtitle === void 0 ? "Acquisition vs retention" : _ref$subtitle,
6634
- _ref$series = _ref.series,
6635
- series = _ref$series === void 0 ? [68, 32] : _ref$series,
6636
- _ref$labels = _ref.labels,
6637
- labels = _ref$labels === void 0 ? ["New donors", "Returning"] : _ref$labels,
6638
- _ref$colors = _ref.colors,
6639
- colors = _ref$colors === void 0 ? ["rgb(99, 99, 230)", "#10B981"] : _ref$colors,
6640
- _ref$centerLabel = _ref.centerLabel,
6641
- centerLabel = _ref$centerLabel === void 0 ? "donors" : _ref$centerLabel,
6642
- _ref$centerValue = _ref.centerValue,
6643
- centerValue = _ref$centerValue === void 0 ? "215" : _ref$centerValue,
6644
- _ref$items = _ref.items,
6645
- items = _ref$items === void 0 ? [{
6646
- label: "New donors",
6647
- val: "146 · 68%",
6648
- color: "rgb(99, 99, 230)"
6649
- }, {
6650
- label: "Returning",
6651
- val: "69 · 32%",
6652
- color: "#10B981"
6653
- }] : _ref$items,
6654
- _ref$showBottomSummar = _ref.showBottomSummary,
6655
- showBottomSummary = _ref$showBottomSummar === void 0 ? true : _ref$showBottomSummar,
6656
- _ref$bottomSummaryVal = _ref.bottomSummaryValue,
6657
- bottomSummaryValue = _ref$bottomSummaryVal === void 0 ? "$130.58" : _ref$bottomSummaryVal,
6658
- _ref$bottomSummaryTre = _ref.bottomSummaryTrend,
6659
- bottomSummaryTrend = _ref$bottomSummaryTre === void 0 ? "8.4% vs last month" : _ref$bottomSummaryTre;
6660
- var chartOptions = {
6661
- chart: {
6662
- type: "donut"
6663
- },
6664
- labels: labels,
6665
- colors: colors,
6666
- plotOptions: {
6667
- pie: {
6668
- donut: {
6669
- size: "75%",
6670
- labels: {
6671
- show: true,
6672
- name: {
6673
- show: true,
6674
- fontSize: '13px',
6675
- fontWeight: 500,
6676
- color: 'rgba(0, 0, 0, 0.4)',
6677
- offsetY: 25
6678
- },
6679
- value: {
6680
- show: true,
6681
- fontSize: '24px',
6682
- fontWeight: 700,
6683
- color: '#000',
6684
- offsetY: -15,
6685
- formatter: function formatter(val) {
6686
- return val;
6687
- }
6688
- },
6689
- total: {
6690
- show: true,
6691
- label: centerLabel,
6692
- fontSize: '13px',
6693
- fontWeight: 500,
6694
- color: 'rgba(0, 0, 0, 0.4)',
6695
- formatter: function formatter() {
6696
- return centerValue;
6697
- }
6698
- }
6699
- }
6700
- }
6701
- }
6702
- },
6703
- dataLabels: {
6704
- enabled: false
6705
- },
6706
- legend: {
6707
- show: false
6708
- },
6709
- stroke: {
6710
- show: false
6711
- },
6712
- states: {
6713
- hover: {
6714
- filter: {
6715
- type: "none"
6716
- }
6717
- }
6718
- }
6719
- };
6720
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6721
- sx: {
6722
- bgcolor: "#fff",
6723
- borderRadius: "24px",
6724
- border: "1px solid #f0f0f0",
6725
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6726
- p: 3,
6727
- height: "100%",
6728
- display: "flex",
6729
- flexDirection: "column"
6730
- },
6731
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6732
- sx: {
6733
- mb: 2
6734
- },
6735
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6736
- sx: {
6737
- fontWeight: 700,
6738
- fontSize: "18px",
6739
- color: "#000"
6740
- },
6741
- children: title
6742
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6743
- sx: {
6744
- fontSize: "13px",
6745
- color: "rgba(0, 0, 0, 0.4)",
6746
- mt: 0.2
6747
- },
6748
- children: subtitle
6749
- })]
6750
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6751
- sx: {
6752
- position: "relative",
6753
- height: "180px",
6754
- mb: 2,
6755
- display: "flex",
6756
- justifyContent: "center"
6757
- },
6758
- children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
6759
- options: chartOptions,
6760
- series: series,
6761
- type: "donut",
6762
- width: "240"
6763
- })
6764
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6765
- sx: {
6766
- mt: "auto"
6767
- },
6768
- children: [items.map(function (item, idx) {
6769
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6770
- sx: {
6771
- display: "flex",
6772
- justifyContent: "space-between",
6773
- mb: idx === items.length - 1 ? showBottomSummary ? 3 : 0 : 1.5
6774
- },
6775
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6776
- sx: {
6777
- display: "flex",
6778
- alignItems: "center",
6779
- gap: 1
6780
- },
6781
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6782
- sx: {
6783
- width: 10,
6784
- height: 10,
6785
- bgcolor: item.color,
6786
- borderRadius: "2px"
6787
- }
6788
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6789
- sx: {
6790
- fontSize: "13px",
6791
- fontWeight: 500,
6792
- color: "rgba(0, 0, 0, 0.4)"
6793
- },
6794
- children: item.label
6795
- })]
6796
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6797
- sx: {
6798
- fontSize: "13px",
6799
- fontWeight: 700,
6800
- color: "#111"
6801
- },
6802
- children: item.val
6803
- })]
6804
- }, idx);
6805
- }), showBottomSummary && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6806
- sx: {
6807
- display: "flex",
6808
- justifyContent: "space-between",
6809
- alignItems: "center",
6810
- pt: 2,
6811
- borderTop: "1px solid #f0f0f0"
6812
- },
6813
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6814
- sx: {
6815
- fontSize: "20px",
6816
- fontWeight: 700,
6817
- color: "#000"
6818
- },
6819
- children: bottomSummaryValue
6820
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6821
- sx: {
6822
- display: "flex",
6823
- alignItems: "center",
6824
- gap: 0.5,
6825
- color: "#22C55E",
6826
- fontSize: "12px",
6827
- fontWeight: 600
6828
- },
6829
- children: [/*#__PURE__*/jsxRuntime.jsx("span", {
6830
- children: "\u25B2"
6831
- }), bottomSummaryTrend]
6989
+ },
6990
+ children: row.status
6991
+ })
6992
+ })]
6993
+ }, idx);
6994
+ })
6832
6995
  })]
6833
- })]
6996
+ })
6834
6997
  })]
6835
6998
  });
6836
6999
  };
@@ -6850,7 +7013,7 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6850
7013
  plotOptions: {
6851
7014
  bar: {
6852
7015
  horizontal: false,
6853
- columnWidth: "45%",
7016
+ columnWidth: "100%",
6854
7017
  borderRadius: 4,
6855
7018
  dataLabels: {
6856
7019
  position: "top"
@@ -6862,9 +7025,9 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6862
7025
  formatter: function formatter(val) {
6863
7026
  return "$".concat(val, "K");
6864
7027
  },
6865
- offsetY: -20,
7028
+ offsetY: -22,
6866
7029
  style: {
6867
- fontSize: "12px",
7030
+ fontSize: "10px",
6868
7031
  fontWeight: 700,
6869
7032
  colors: ["#000"]
6870
7033
  }
@@ -6875,7 +7038,7 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6875
7038
  colors: ["transparent"]
6876
7039
  },
6877
7040
  xaxis: {
6878
- 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"],
6879
7042
  axisBorder: {
6880
7043
  show: false
6881
7044
  },
@@ -6892,7 +7055,7 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6892
7055
  yaxis: {
6893
7056
  min: 0,
6894
7057
  max: 60,
6895
- tickAmount: 4,
7058
+ tickAmount: 3,
6896
7059
  labels: {
6897
7060
  formatter: function formatter(val) {
6898
7061
  return "$".concat(val, "K");
@@ -6917,7 +7080,7 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6917
7080
  }
6918
7081
  },
6919
7082
  legend: {
6920
- show: false // Custom legend used
7083
+ show: false
6921
7084
  },
6922
7085
  tooltip: {
6923
7086
  y: {
@@ -6942,44 +7105,48 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
6942
7105
  boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6943
7106
  p: 3
6944
7107
  // width: "100%",
7108
+ // height: "100%",
6945
7109
  },
6946
7110
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6947
7111
  sx: {
6948
7112
  display: "flex",
6949
- justifyContent: "space-between",
6950
- alignItems: "flex-start",
6951
- mb: 4
7113
+ flexDirection: "column",
7114
+ mb: 2
6952
7115
  },
6953
7116
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7117
+ sx: {
7118
+ textAlign: "left"
7119
+ },
6954
7120
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6955
7121
  sx: {
6956
7122
  fontWeight: 700,
6957
7123
  fontSize: "18px",
6958
7124
  color: "#000"
6959
7125
  },
6960
- children: "Recurring vs one-time donations"
7126
+ children: "Recurring vs one-time"
6961
7127
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6962
7128
  sx: {
6963
7129
  fontSize: "13px",
6964
7130
  color: "rgba(0, 0, 0, 0.4)",
6965
7131
  mt: 0.2
6966
7132
  },
6967
- children: "Donation type breakdown - weekly aggregation"
7133
+ children: "Donation type \xB7 weekly"
6968
7134
  })]
6969
7135
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6970
7136
  sx: {
6971
7137
  display: "flex",
6972
- gap: 6
7138
+ gap: 10,
7139
+ mt: 3,
7140
+ mb: 1
6973
7141
  },
6974
7142
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6975
7143
  sx: {
6976
- textAlign: "right"
7144
+ textAlign: "left"
6977
7145
  },
6978
7146
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6979
7147
  sx: {
6980
7148
  display: "flex",
6981
7149
  alignItems: "center",
6982
- justifyContent: "flex-end",
6983
7150
  gap: 1,
6984
7151
  mb: 0.5
6985
7152
  },
@@ -7008,50 +7175,331 @@ var DonationTypeBarChart = function DonationTypeBarChart() {
7008
7175
  })]
7009
7176
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7010
7177
  sx: {
7011
- 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
7012
7490
  },
7013
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7014
- sx: {
7015
- display: "flex",
7016
- alignItems: "center",
7017
- justifyContent: "flex-end",
7018
- gap: 1,
7019
- mb: 0.5
7020
- },
7021
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7022
- sx: {
7023
- width: 8,
7024
- height: 8,
7025
- bgcolor: "#10B981",
7026
- borderRadius: "50%"
7027
- }
7028
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7029
- sx: {
7030
- fontSize: "12px",
7031
- color: "rgba(0, 0, 0, 0.4)",
7032
- fontWeight: 500
7033
- },
7034
- children: "One-time"
7035
- })]
7036
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7037
- sx: {
7038
- fontSize: "18px",
7039
- fontWeight: 700,
7040
- color: "#000"
7041
- },
7042
- children: "$186,001"
7043
- })]
7491
+ children: "Chargebacks"
7044
7492
  })]
7045
7493
  })]
7046
7494
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
7047
7495
  sx: {
7048
- height: 350,
7496
+ height: 250,
7049
7497
  width: "100%"
7050
7498
  },
7051
7499
  children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
7052
7500
  options: chartOptions,
7053
7501
  series: series,
7054
- type: "bar",
7502
+ type: "area",
7055
7503
  height: "100%"
7056
7504
  })
7057
7505
  })]
@@ -7065,99 +7513,133 @@ var OverallSection = function OverallSection(_ref) {
7065
7513
  secondaryCharts = _ref.secondaryCharts,
7066
7514
  tertiaryCharts = _ref.tertiaryCharts,
7067
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
+ });
7068
7621
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
7069
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7622
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7070
7623
  sx: {
7071
- display: 'flex',
7624
+ display: "flex",
7072
7625
  gap: 2,
7073
- mb: 5
7626
+ mb: 5,
7627
+ flexWrap: "wrap"
7074
7628
  },
7075
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7076
- title: "Total Raised",
7077
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
7078
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
7079
- icon: iconsMaterial.PaidOutlined,
7080
- sx: {
7081
- flex: 1
7082
- }
7083
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7084
- title: "Net Raised",
7085
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
7086
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
7087
- icon: iconsMaterial.FavoriteOutlined,
7088
- sx: {
7089
- flex: 1
7090
- }
7091
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7092
- title: "Total Donors",
7093
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
7094
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonorsTrend) || "31 new",
7095
- icon: iconsMaterial.PeopleAltOutlined,
7096
- sx: {
7097
- flex: 1
7098
- }
7099
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7100
- title: "Avg donation",
7101
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "$130.58",
7102
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
7103
- icon: iconsMaterial.PaidOutlined,
7104
- sx: {
7105
- flex: 1
7106
- }
7107
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7108
- title: "ROAS",
7109
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
7110
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
7111
- icon: iconsMaterial.TrendingUp,
7112
- sx: {
7113
- flex: 1
7114
- }
7115
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7116
- title: "Conversion",
7117
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
7118
- subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionSub) || "215 / 12.4K",
7119
- icon: iconsMaterial.Adjust,
7120
- sx: {
7121
- flex: 1
7122
- }
7123
- })]
7124
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7629
+ children: Object.keys(metricInfo).map(renderCard)
7630
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7125
7631
  container: true,
7126
7632
  spacing: 3,
7127
7633
  sx: {
7128
7634
  mb: 1
7129
7635
  },
7130
- children: [primaryCharts.filter(function (item) {
7131
- return item.label !== "First installments";
7132
- }).map(function (item, index) {
7133
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7134
- item: item,
7135
- index: index,
7136
- md: item.label === "Total Revenue" ? 12 : 6,
7137
- isPremium: true
7138
- }, "primary-".concat(index));
7139
- }), secondaryCharts.map(function (item, index) {
7140
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7141
- item: item,
7142
- index: index,
7143
- md: 6,
7144
- isPremium: true
7145
- }, "secondary-".concat(index));
7146
- }), tertiaryCharts.map(function (item, index) {
7147
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7148
- item: item,
7149
- index: index,
7150
- md: 6,
7151
- isPremium: true
7152
- }, "tertiary-".concat(index));
7153
- }), quaternaryCharts.map(function (item, index) {
7154
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7155
- item: item,
7156
- index: index,
7157
- md: 6,
7158
- isPremium: true
7159
- }, "quaternary-".concat(index));
7160
- })]
7636
+ children: /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7637
+ item: mainChart,
7638
+ index: 0,
7639
+ md: 12,
7640
+ isPremium: true,
7641
+ isPrimary: true
7642
+ })
7161
7643
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7162
7644
  container: true,
7163
7645
  spacing: 3,
@@ -7235,6 +7717,9 @@ var OverallSection = function OverallSection(_ref) {
7235
7717
  item: true,
7236
7718
  xs: 12,
7237
7719
  md: 4,
7720
+ sx: {
7721
+ display: "flex"
7722
+ },
7238
7723
  children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
7239
7724
  title: "Donor mix",
7240
7725
  subtitle: "Acquisition vs retention",
@@ -7253,20 +7738,31 @@ var OverallSection = function OverallSection(_ref) {
7253
7738
  color: "#10B981"
7254
7739
  }],
7255
7740
  bottomSummaryValue: "$130.58",
7256
- bottomSummaryTrend: "8.4% vs last month"
7741
+ bottomSummaryTrend: "8.4% vs last month",
7742
+ sx: {
7743
+ width: "100%"
7744
+ }
7257
7745
  })
7258
7746
  })]
7259
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7747
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7260
7748
  container: true,
7261
7749
  spacing: 3,
7262
7750
  sx: {
7263
- mt: 5
7751
+ mt: 2
7264
7752
  },
7265
- children: /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7753
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7266
7754
  item: true,
7267
- md: 12,
7755
+ md: 4,
7268
7756
  children: /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {})
7269
- })
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
+ })]
7270
7766
  })]
7271
7767
  });
7272
7768
  };
@@ -7276,267 +7772,99 @@ var OverallSection$1 = /*#__PURE__*/Object.freeze({
7276
7772
  default: OverallSection
7277
7773
  });
7278
7774
 
7279
- var BORDER = "1px solid #e0e0e0";
7280
- var headerCellSx = {
7281
- fontWeight: 900,
7282
- fontSize: "0.78rem",
7283
- color: "#111",
7284
- bgcolor: "#f3f3f3",
7285
- borderBottom: BORDER,
7286
- borderRight: BORDER,
7287
- py: "20px",
7288
- px: "15px",
7289
- lineHeight: 1.4,
7290
- textAlign: "center",
7291
- "&:last-child": {
7292
- borderRight: 0
7293
- }
7294
- };
7295
- var cellSx = {
7296
- fontSize: "0.85rem",
7297
- color: "#333",
7298
- borderBottom: BORDER,
7299
- borderRight: BORDER,
7300
- py: "15px",
7301
- px: "15px",
7302
- verticalAlign: "middle",
7303
- textAlign: "center",
7304
- "&:last-child": {
7305
- borderRight: 0
7306
- }
7307
- };
7308
- var rows = [{
7309
- campaign: "Ramadan 2024 - Global Feed",
7310
- raised: "$45,200.00",
7311
- spent: "$5,100.00",
7312
- roas: "8.8x",
7313
- donors: "1,240",
7314
- cpr: "$4.11",
7315
- avg: "$36.45"
7316
- }, {
7317
- campaign: "Water for Life - East Africa",
7318
- raised: "$12,800.00",
7319
- spent: "$2,200.00",
7320
- roas: "5.8x",
7321
- donors: "485",
7322
- cpr: "$4.53",
7323
- avg: "$26.39"
7324
- }, {
7325
- campaign: "Orphan Care - Palestine",
7326
- raised: "$28,500.00",
7327
- spent: "$3,400.00",
7328
- roas: "8.4x",
7329
- donors: "820",
7330
- cpr: "$4.15",
7331
- avg: "$34.75"
7332
- }, {
7333
- campaign: "Emergency Relief - Yemen",
7334
- raised: "$15,400.00",
7335
- spent: "$2,800.00",
7336
- roas: "5.5x",
7337
- donors: "560",
7338
- cpr: "$5.00",
7339
- avg: "$27.50"
7340
- }];
7341
- var CampaignPerformanceTable = function CampaignPerformanceTable() {
7342
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7343
- sx: {
7344
- bgcolor: "#fff",
7345
- borderRadius: 4,
7346
- border: "1px solid #f0f0f0",
7347
- boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
7348
- overflow: "hidden",
7349
- width: "100%",
7350
- 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
7351
7788
  },
7352
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7353
- sx: {
7354
- display: "flex",
7355
- justifyContent: "space-between",
7356
- alignItems: "center",
7357
- px: 3,
7358
- 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);
7359
7833
  },
7360
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7361
- sx: {
7362
- display: "flex",
7363
- alignItems: "center",
7364
- gap: 1
7365
- },
7366
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7367
- variant: "subtitle1",
7368
- sx: {
7369
- fontWeight: 700,
7370
- color: "#111"
7371
- },
7372
- children: "Campaign Performance"
7373
- }), /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.InfoOutlined, {
7374
- sx: {
7375
- fontSize: "1rem",
7376
- color: "#9e9e9e"
7377
- }
7378
- })]
7379
- })
7380
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableContainer, {
7381
7834
  sx: {
7382
- px: 3,
7383
- pb: 3
7384
- },
7385
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Table, {
7386
- sx: {
7387
- borderCollapse: "separate",
7388
- borderSpacing: 0,
7389
- border: BORDER,
7390
- borderRadius: "12px",
7391
- overflow: "hidden",
7392
- width: "100%"
7393
- },
7394
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
7395
- children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
7396
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7397
- sx: _objectSpread2(_objectSpread2({}, headerCellSx), {}, {
7398
- textAlign: "left"
7399
- }),
7400
- children: "Campaign"
7401
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7402
- sx: headerCellSx,
7403
- children: "Raised"
7404
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7405
- sx: headerCellSx,
7406
- children: "Spent"
7407
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7408
- sx: headerCellSx,
7409
- children: "ROAS"
7410
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7411
- sx: headerCellSx,
7412
- children: "Donors"
7413
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7414
- sx: headerCellSx,
7415
- children: "CPR"
7416
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7417
- sx: headerCellSx,
7418
- children: "Avg Donation"
7419
- })]
7420
- })
7421
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableBody, {
7422
- children: rows.map(function (row, index) {
7423
- return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
7424
- sx: {
7425
- "&:hover": {
7426
- bgcolor: "#fafafa"
7427
- }
7428
- },
7429
- children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7430
- sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
7431
- textAlign: "left",
7432
- fontWeight: 600
7433
- }),
7434
- children: row.campaign
7435
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7436
- sx: cellSx,
7437
- children: row.raised
7438
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7439
- sx: cellSx,
7440
- children: row.spent
7441
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7442
- sx: _objectSpread2(_objectSpread2({}, cellSx), {}, {
7443
- color: "primary.main",
7444
- fontWeight: 700
7445
- }),
7446
- children: row.roas
7447
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7448
- sx: cellSx,
7449
- children: row.donors
7450
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7451
- sx: cellSx,
7452
- children: row.cpr
7453
- }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
7454
- sx: cellSx,
7455
- children: row.avg
7456
- })]
7457
- }, index);
7458
- })
7459
- })]
7460
- })
7461
- })]
7462
- });
7463
- };
7464
-
7465
- var PaidSection = function PaidSection() {
7466
- var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
7467
- var roasTrend = {
7468
- label: "ROAS Trend",
7469
- 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,
7470
7846
  categories: categories
7471
7847
  };
7472
7848
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
7473
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7849
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7474
7850
  sx: {
7475
- display: 'flex',
7851
+ display: "flex",
7476
7852
  gap: 2,
7477
- mb: 2
7853
+ mb: 1,
7854
+ flexWrap: "wrap"
7478
7855
  },
7479
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7480
- title: "Total Spent",
7481
- value: "$80,313",
7482
- subValue: "12% vs last month",
7483
- icon: iconsMaterial.IndeterminateCheckBoxOutlined,
7484
- sx: {
7485
- flex: 1
7486
- }
7487
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7488
- title: "Revinue Raised",
7489
- value: "$240,398",
7490
- subValue: "12% vs last month",
7491
- icon: iconsMaterial.PaidOutlined,
7492
- sx: {
7493
- flex: 1
7494
- }
7495
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7496
- title: "ROAS",
7497
- value: "3.0",
7498
- subValue: "12% vs last month",
7499
- icon: iconsMaterial.TrendingUp,
7500
- sx: {
7501
- flex: 1
7502
- }
7503
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7504
- title: "Cost per donor",
7505
- value: "$373",
7506
- subValue: "12% vs last month",
7507
- icon: iconsMaterial.PersonOutlined,
7508
- sx: {
7509
- flex: 1
7510
- }
7511
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7512
- title: "Conversion rate",
7513
- value: "3.1",
7514
- subValue: "12% vs last month",
7515
- icon: iconsMaterial.Adjust,
7516
- sx: {
7517
- flex: 1
7518
- }
7519
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7520
- title: "Avg donation",
7521
- value: "$130.58",
7522
- subValue: "12% vs last month",
7523
- icon: iconsMaterial.PaidOutlined,
7524
- sx: {
7525
- flex: 1
7526
- }
7527
- })]
7528
- }), /*#__PURE__*/jsxRuntime.jsx(CampaignPerformanceTable, {}), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7856
+ children: Object.keys(metricInfo).map(renderCard)
7857
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7529
7858
  container: true,
7530
7859
  spacing: 3,
7531
7860
  sx: {
7532
- mt: 4
7861
+ mt: 1
7533
7862
  },
7534
7863
  children: /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7535
- item: roasTrend,
7536
- index: 2,
7864
+ item: mainChart,
7865
+ index: 0,
7537
7866
  md: 12,
7538
7867
  type: "area",
7539
- metric: "ROAS",
7540
7868
  isPrimary: true,
7541
7869
  isPremium: true
7542
7870
  })
@@ -7544,7 +7872,7 @@ var PaidSection = function PaidSection() {
7544
7872
  container: true,
7545
7873
  spacing: 3,
7546
7874
  sx: {
7547
- mt: 1
7875
+ mt: 3
7548
7876
  },
7549
7877
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7550
7878
  item: true,
@@ -7631,7 +7959,7 @@ var PaidSection = function PaidSection() {
7631
7959
  subtitle: "Where $80.3K went this month",
7632
7960
  series: [40.8, 35.1, 14.2, 6.6, 3.3],
7633
7961
  labels: ["Meta Ads", "Google Ads", "TikTok", "YouTube", "Snapchat"],
7634
- colors: ["#4267B2", "#4285F4", "#000000", "#FF0000", "#FFFC00"],
7962
+ colors: ["#4267B2", "#4285F4", "#cd249dff", "#FF0000", "#FFFC00"],
7635
7963
  centerLabel: "total spend",
7636
7964
  centerValue: "$80.3K",
7637
7965
  items: [{
@@ -7645,7 +7973,7 @@ var PaidSection = function PaidSection() {
7645
7973
  }, {
7646
7974
  label: "TikTok",
7647
7975
  val: "14.2%",
7648
- color: "#000000"
7976
+ color: "#cd249dff"
7649
7977
  }, {
7650
7978
  label: "YouTube",
7651
7979
  val: "6.6%",
@@ -7656,13 +7984,14 @@ var PaidSection = function PaidSection() {
7656
7984
  color: "#FFFC00"
7657
7985
  }],
7658
7986
  showBottomSummary: false
7987
+ // sx={{ width: "100%" }}
7659
7988
  })
7660
7989
  })]
7661
7990
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7662
7991
  container: true,
7663
7992
  spacing: 3,
7664
7993
  sx: {
7665
- mt: 8
7994
+ mt: 3
7666
7995
  },
7667
7996
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7668
7997
  item: true,