@ammarkhalidfarooq/dashboard-package 0.3.2 → 0.3.3

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