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