@ammarkhalidfarooq/dashboard-package 0.2.8 → 0.3.0

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 +1692 -387
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +1694 -389
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -406,6 +406,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
406
406
  index = _ref.index,
407
407
  _ref$isPrimary = _ref.isPrimary,
408
408
  isPrimary = _ref$isPrimary === void 0 ? false : _ref$isPrimary,
409
+ _ref$isPremium = _ref.isPremium,
410
+ isPremium = _ref$isPremium === void 0 ? false : _ref$isPremium,
409
411
  metric = _ref.metric,
410
412
  setMetric = _ref.setMetric,
411
413
  _ref$md = _ref.md,
@@ -440,9 +442,61 @@ var RenderChartCard = function RenderChartCard(_ref) {
440
442
  display: "flex",
441
443
  justifyContent: "space-between",
442
444
  alignItems: "flex-start",
443
- mb: 2
445
+ mb: isPremium ? 3 : 2
444
446
  },
445
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
447
+ children: [isPremium ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
448
+ sx: {
449
+ textAlign: "left"
450
+ },
451
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
452
+ sx: {
453
+ color: "#000000",
454
+ fontWeight: 700,
455
+ fontSize: "18px",
456
+ mb: 0.2
457
+ },
458
+ children: item.label
459
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
460
+ variant: "caption",
461
+ sx: {
462
+ color: "rgba(0, 0, 0, 0.4)",
463
+ fontWeight: 400,
464
+ display: "block",
465
+ mb: 1.5
466
+ },
467
+ children: item.subtitle || "Last 30 days - daily aggregation"
468
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
469
+ sx: {
470
+ display: "flex",
471
+ alignItems: "center",
472
+ gap: 1.5
473
+ },
474
+ children: [item.value && /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
475
+ sx: {
476
+ fontWeight: 700,
477
+ color: "#000000",
478
+ fontSize: "28px"
479
+ },
480
+ children: _typeof(item.value) === 'object' && item.value !== null ? item.value.value !== undefined ? item.value.value : JSON.stringify(item.value) : item.value
481
+ }), (item.trend || "18%") && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
482
+ sx: {
483
+ display: "flex",
484
+ alignItems: "center",
485
+ gap: 0.5,
486
+ bgcolor: "#8df3be9a",
487
+ color: "#054835ff",
488
+ px: 1,
489
+ py: 0.5,
490
+ borderRadius: "100px",
491
+ fontSize: "12px",
492
+ fontWeight: 600
493
+ },
494
+ children: [/*#__PURE__*/jsxRuntime.jsx("span", {
495
+ children: "\u25B2"
496
+ }), item.trend || "18% vs last month"]
497
+ })]
498
+ })]
499
+ }) : /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
446
500
  sx: {
447
501
  textAlign: "left"
448
502
  },
@@ -706,49 +760,97 @@ var Dashboard = function Dashboard(_ref) {
706
760
  var DisplayCard = function DisplayCard(_ref) {
707
761
  var title = _ref.title,
708
762
  value = _ref.value,
763
+ subValue = _ref.subValue,
764
+ Icon = _ref.icon,
709
765
  _ref$sx = _ref.sx,
710
766
  sx = _ref$sx === void 0 ? {} : _ref$sx;
711
- return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
767
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
712
768
  sx: _objectSpread2({
713
- height: "80px",
769
+ height: "100px",
714
770
  borderRadius: "24px",
715
771
  display: "flex",
716
772
  justifyContent: "space-between",
717
773
  alignItems: "center",
718
- boxShadow: "rgba(0, 0, 0, 0.06) 0px 4px 15px 0px",
719
- padding: "16px 16px 16px 18px",
774
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
775
+ // padding: "16px 16px 16px 18px",
776
+ py: "10px",
777
+ px: "16px",
720
778
  cursor: "pointer",
721
- border: "1px solid rgb(99, 99, 230)"
779
+ bgcolor: "#fff",
780
+ border: "2px solid #f0f0f0",
781
+ transition: "all 0.3s ease",
782
+ ":hover": {
783
+ border: "2px solid rgb(99, 99, 230)"
784
+ // transform: "translateY(-2px)",
785
+ }
722
786
  }, sx),
723
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
787
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
724
788
  sx: {
725
789
  display: "flex",
726
- flexDirection: "column"
790
+ flexDirection: "column",
791
+ gap: 0.5
727
792
  },
728
793
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
729
794
  sx: {
730
795
  fontWeight: '400',
731
- color: 'rgb(193, 193, 245)',
732
- fontSize: '14px',
733
- lineHeight: '16px'
796
+ color: 'rgba(0, 0, 0, 0.4)',
797
+ fontSize: '12px',
798
+ lineHeight: '16px',
799
+ textAlign: 'left'
734
800
  },
735
801
  children: title
736
802
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
737
803
  sx: {
738
- lineHeight: '1.5',
804
+ lineHeight: '1.2',
739
805
  textAlign: 'left',
740
- color: 'rgb(99, 99, 230)',
741
- fontSize: '22px',
742
- fontWeight: '500'
806
+ color: '#000',
807
+ fontSize: '20px',
808
+ fontWeight: '700',
809
+ mb: 0.5
810
+ },
811
+ children: statusValue(value)
812
+ }), subValue && /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
813
+ sx: {
814
+ fontSize: '11px',
815
+ color: typeof subValue === 'string' && (subValue.includes('%') || subValue.includes('new') || subValue.includes('x')) && !subValue.includes('/') && !subValue.includes('pass-through') ? '#22C55E' : 'rgba(0, 0, 0, 0.4)',
816
+ fontWeight: '500',
817
+ display: 'flex',
818
+ alignItems: 'center',
819
+ gap: 0.5
743
820
  },
744
- children: _typeof(value) === 'object' && value !== null ? value.value !== undefined ? value.value : JSON.stringify(value) : value
821
+ children: [typeof subValue === 'string' && (subValue.includes('%') || subValue.includes('new') || subValue.includes('x')) && !subValue.includes('/') && !subValue.includes('pass-through') && /*#__PURE__*/jsxRuntime.jsx("span", {
822
+ style: {
823
+ fontSize: '14px'
824
+ },
825
+ children: "\u25B2"
826
+ }), subValue]
745
827
  })]
746
- })
828
+ }), Icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
829
+ sx: {
830
+ width: '44px',
831
+ height: '44px',
832
+ borderRadius: '50%',
833
+ backgroundColor: '#dfdbdb95',
834
+ display: 'flex',
835
+ alignItems: 'center',
836
+ justifyContent: 'center',
837
+ color: 'rgb(99, 99, 230)'
838
+ },
839
+ children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
840
+ sx: {
841
+ fontSize: '20px'
842
+ }
843
+ })
844
+ })]
747
845
  });
748
846
  };
847
+ var statusValue = function statusValue(value) {
848
+ return _typeof(value) === 'object' && value !== null ? value.value !== undefined ? value.value : JSON.stringify(value) : value;
849
+ };
749
850
 
750
851
  var CardWrapper = function CardWrapper(_ref) {
751
852
  var title = _ref.title,
853
+ subtitle = _ref.subtitle,
752
854
  children = _ref.children;
753
855
  return /*#__PURE__*/jsxRuntime.jsx(material.Card, {
754
856
  sx: {
@@ -767,14 +869,21 @@ var CardWrapper = function CardWrapper(_ref) {
767
869
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
768
870
  variant: "subtitle2",
769
871
  sx: {
770
- color: "#000000ff",
771
- fontWeight: 600,
772
- textTransform: "uppercase",
773
- letterSpacing: "0.5px",
774
- mb: 3,
872
+ color: "#000000",
873
+ fontWeight: 700,
874
+ fontSize: "16px",
875
+ mb: 0.5,
775
876
  textAlign: "left"
776
877
  },
777
878
  children: title
879
+ }), subtitle && /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
880
+ sx: {
881
+ color: "rgba(0, 0, 0, 0.4)",
882
+ fontSize: "13px",
883
+ mb: 3,
884
+ textAlign: "left"
885
+ },
886
+ children: subtitle
778
887
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
779
888
  sx: {
780
889
  display: "flex",
@@ -994,11 +1103,11 @@ var GeographyCard = function GeographyCard() {
994
1103
  variant: "determinate",
995
1104
  value: item.percentage,
996
1105
  sx: {
997
- height: 6,
1106
+ height: 12,
998
1107
  borderRadius: 3,
999
1108
  bgcolor: "#F0F0F0",
1000
1109
  "& .MuiLinearProgress-bar": {
1001
- bgcolor: "#3498DB",
1110
+ bgcolor: "#0275c2ff",
1002
1111
  borderRadius: 3
1003
1112
  }
1004
1113
  }
@@ -1019,301 +1128,593 @@ var GeographyCard = function GeographyCard() {
1019
1128
  };
1020
1129
  var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
1021
1130
  var data = [{
1022
- name: "Ramadan Week 3 Appeal",
1023
- raised: "$1,210 raised",
1024
- donors: "18 donors",
1025
- badge: "4.1% CVR",
1026
- color: "#E8F5E9",
1027
- textColor: "#2E7D32"
1131
+ id: "RK",
1132
+ name: "Ramadan kickoff",
1133
+ value: "$14,200"
1028
1134
  }, {
1029
- name: "Zakat Due Reminder",
1030
- raised: "$740 raised",
1031
- donors: "8 donors",
1032
- badge: "3.2% CVR",
1033
- color: "#E8F5E9",
1034
- textColor: "#2E7D32"
1135
+ id: "YO",
1136
+ name: "Yemen orphans drive",
1137
+ value: "$11,800"
1035
1138
  }, {
1036
- name: "Last 10 Nights Giving",
1037
- raised: "$265 raised",
1038
- donors: "3 donors",
1039
- badge: "1.8% CVR",
1040
- color: "#FFF3E0",
1041
- textColor: "#ED6C02"
1139
+ id: "GE",
1140
+ name: "Gaza emergency",
1141
+ value: "$9,400"
1142
+ }, {
1143
+ id: "ZR",
1144
+ name: "Zakat reminder",
1145
+ value: "$7,200"
1146
+ }, {
1147
+ id: "EA",
1148
+ name: "Eid appeal",
1149
+ value: "$6,320"
1042
1150
  }];
1043
- return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
1044
- title: "Top Campaigns - Total Raised",
1045
- children: data.map(function (item, index) {
1151
+ return /*#__PURE__*/jsxRuntime.jsxs(CardWrapper, {
1152
+ title: "Top campaigns by total raised",
1153
+ subtitle: "Email campaigns ranked by donations",
1154
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1155
+ sx: {
1156
+ display: "flex",
1157
+ justifyContent: "space-between",
1158
+ pb: 1,
1159
+ borderBottom: "1px solid #f0f0f0"
1160
+ },
1161
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1162
+ sx: {
1163
+ fontSize: "12px",
1164
+ color: "rgba(0, 0, 0, 0.4)",
1165
+ fontWeight: 500
1166
+ },
1167
+ children: "Campaign"
1168
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1169
+ sx: {
1170
+ fontSize: "12px",
1171
+ color: "rgba(0, 0, 0, 0.4)",
1172
+ fontWeight: 500
1173
+ },
1174
+ children: "Raised"
1175
+ })]
1176
+ }), data.map(function (item, index) {
1046
1177
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1047
1178
  sx: {
1048
1179
  display: "flex",
1049
- flexDirection: "column",
1050
- gap: 0.5
1180
+ justifyContent: "space-between",
1181
+ py: 1.5,
1182
+ alignItems: "center",
1183
+ borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1051
1184
  },
1052
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1053
- variant: "body2",
1054
- sx: {
1055
- fontWeight: 600,
1056
- color: "#333",
1057
- textAlign: "left"
1058
- },
1059
- children: item.name
1060
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1185
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1061
1186
  sx: {
1062
1187
  display: "flex",
1063
1188
  alignItems: "center",
1064
1189
  gap: 1.5
1065
1190
  },
1066
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1067
- variant: "caption",
1191
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1068
1192
  sx: {
1069
- color: "#606062",
1070
- fontWeight: 500
1193
+ width: 24,
1194
+ height: 24,
1195
+ borderRadius: "50%",
1196
+ bgcolor: "#ebf2ff",
1197
+ color: "#3431e4",
1198
+ display: "flex",
1199
+ alignItems: "center",
1200
+ justifyContent: "center",
1201
+ fontSize: "10px",
1202
+ fontWeight: 700
1071
1203
  },
1072
- children: item.raised
1204
+ children: item.id
1073
1205
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1074
- variant: "caption",
1075
- sx: {
1076
- color: "#606062",
1077
- fontWeight: 500
1078
- },
1079
- children: item.donors
1080
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1081
1206
  sx: {
1082
- bgcolor: item.color,
1083
- color: item.textColor,
1084
- px: 1,
1085
- py: 0.2,
1086
- borderRadius: 1,
1087
- fontSize: "11px",
1088
- fontWeight: 600
1207
+ fontSize: "13px",
1208
+ fontWeight: 700,
1209
+ color: "#000"
1089
1210
  },
1090
- children: item.badge
1211
+ children: item.name
1091
1212
  })]
1213
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1214
+ sx: {
1215
+ fontSize: "13px",
1216
+ color: "#000",
1217
+ fontWeight: 700
1218
+ },
1219
+ children: item.value
1092
1220
  })]
1093
1221
  }, index);
1094
- })
1222
+ })]
1095
1223
  });
1096
1224
  };
1097
1225
  var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
1098
1226
  var data = [{
1099
- name: "Ramadan Week 3 Appeal",
1100
- ctr: "11.2% CTR",
1101
- clicks: "480 clicks",
1102
- badge: "34.8% OR",
1103
- color: "#E8F5E9",
1104
- textColor: "#2E7D32"
1227
+ id: "RK",
1228
+ name: "Ramadan kickoff",
1229
+ value: "12.4%"
1105
1230
  }, {
1106
- name: "Last 10 Nights Giving",
1107
- ctr: "9.8% CTR",
1108
- clicks: "410 clicks",
1109
- badge: "38.1% OR",
1110
- color: "#E8F5E9",
1111
- textColor: "#2E7D32"
1231
+ id: "EA",
1232
+ name: "Eid appeal",
1233
+ value: "10.8%"
1112
1234
  }, {
1113
- name: "Zakat Due Reminder",
1114
- ctr: "6.4% CTR",
1115
- clicks: "314 clicks",
1116
- badge: "31.4% OR",
1117
- color: "#FFF3E0",
1118
- textColor: "#ED6C02"
1235
+ id: "YO",
1236
+ name: "Yemen orphans drive",
1237
+ value: "9.7%"
1238
+ }, {
1239
+ id: "PF",
1240
+ name: "Pakistan flood relief",
1241
+ value: "8.9%"
1242
+ }, {
1243
+ id: "ZR",
1244
+ name: "Zakat reminder",
1245
+ value: "7.6%"
1119
1246
  }];
1120
- return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
1121
- title: "Top Campaigns - CTR",
1122
- children: data.map(function (item, index) {
1247
+ return /*#__PURE__*/jsxRuntime.jsxs(CardWrapper, {
1248
+ title: "Top campaigns by CTR",
1249
+ subtitle: "Click-through rate leaders",
1250
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1251
+ sx: {
1252
+ display: "flex",
1253
+ justifyContent: "space-between",
1254
+ pb: 1,
1255
+ borderBottom: "1px solid #f0f0f0"
1256
+ },
1257
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1258
+ sx: {
1259
+ fontSize: "12px",
1260
+ color: "rgba(0, 0, 0, 0.4)",
1261
+ fontWeight: 500
1262
+ },
1263
+ children: "Campaign"
1264
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1265
+ sx: {
1266
+ fontSize: "12px",
1267
+ color: "rgba(0, 0, 0, 0.4)",
1268
+ fontWeight: 500
1269
+ },
1270
+ children: "CTR"
1271
+ })]
1272
+ }), data.map(function (item, index) {
1123
1273
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1124
1274
  sx: {
1125
1275
  display: "flex",
1126
- flexDirection: "column",
1127
- gap: 0.5
1276
+ justifyContent: "space-between",
1277
+ py: 1.5,
1278
+ alignItems: "center",
1279
+ borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1128
1280
  },
1129
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1130
- variant: "body2",
1131
- sx: {
1132
- fontWeight: 600,
1133
- color: "#333",
1134
- textAlign: "left"
1135
- },
1136
- children: item.name
1137
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1281
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1138
1282
  sx: {
1139
1283
  display: "flex",
1140
1284
  alignItems: "center",
1141
1285
  gap: 1.5
1142
1286
  },
1143
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1144
- variant: "caption",
1287
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1145
1288
  sx: {
1146
- color: "#606062",
1147
- fontWeight: 500
1289
+ width: 24,
1290
+ height: 24,
1291
+ borderRadius: "50%",
1292
+ bgcolor: "#ebf2ff",
1293
+ color: "#3431e4",
1294
+ display: "flex",
1295
+ alignItems: "center",
1296
+ justifyContent: "center",
1297
+ fontSize: "10px",
1298
+ fontWeight: 700
1148
1299
  },
1149
- children: item.ctr
1300
+ children: item.id
1150
1301
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1151
- variant: "caption",
1152
- sx: {
1153
- color: "#606062",
1154
- fontWeight: 500
1155
- },
1156
- children: item.clicks
1157
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1158
1302
  sx: {
1159
- bgcolor: item.color,
1160
- color: item.textColor,
1161
- px: 1,
1162
- py: 0.2,
1163
- borderRadius: 1,
1164
- fontSize: "11px",
1165
- fontWeight: 600
1303
+ fontSize: "13px",
1304
+ fontWeight: 700,
1305
+ color: "#000"
1166
1306
  },
1167
- children: item.badge
1307
+ children: item.name
1168
1308
  })]
1309
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1310
+ sx: {
1311
+ fontSize: "13px",
1312
+ color: "#22C55E",
1313
+ fontWeight: 700
1314
+ },
1315
+ children: item.value
1169
1316
  })]
1170
1317
  }, index);
1171
- })
1318
+ })]
1172
1319
  });
1173
1320
  };
1174
1321
  var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
1175
1322
  var data = [{
1176
- name: "Ramadan Week 3 Appeal",
1177
- cvr: "4.1% CVR",
1178
- raised: "$1,210 raised",
1179
- badge: "$2.52 RPC",
1180
- color: "#E8F5E9",
1181
- textColor: "#2E7D32"
1323
+ id: "YO",
1324
+ name: "Yemen orphans drive",
1325
+ value: "5.2%"
1182
1326
  }, {
1183
- name: "Zakat Due Reminder",
1184
- cvr: "3.2% CVR",
1185
- raised: "$740 raised",
1186
- badge: "$2.36 RPC",
1187
- color: "#E8F5E9",
1188
- textColor: "#2E7D32"
1327
+ id: "RK",
1328
+ name: "Ramadan kickoff",
1329
+ value: "4.8%"
1189
1330
  }, {
1190
- name: "Last 10 Nights Giving",
1191
- cvr: "1.8% CVR",
1192
- raised: "$265 raised",
1193
- badge: "$0.65 RPC",
1194
- color: "#FFF3E0",
1195
- textColor: "#ED6C02"
1331
+ id: "GE",
1332
+ name: "Gaza emergency",
1333
+ value: "4.1%"
1334
+ }, {
1335
+ id: "PF",
1336
+ name: "Pakistan flood relief",
1337
+ value: "3.9%"
1338
+ }, {
1339
+ id: "EA",
1340
+ name: "Eid appeal",
1341
+ value: "3.4%"
1196
1342
  }];
1197
- return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
1198
- title: "Top Campaigns - Conv. Rate",
1199
- children: data.map(function (item, index) {
1343
+ return /*#__PURE__*/jsxRuntime.jsxs(CardWrapper, {
1344
+ title: "Top campaigns by conversion",
1345
+ subtitle: "Click-to-donation conversion",
1346
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1347
+ sx: {
1348
+ display: "flex",
1349
+ justifyContent: "space-between",
1350
+ pb: 1,
1351
+ borderBottom: "1px solid #f0f0f0"
1352
+ },
1353
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1354
+ sx: {
1355
+ fontSize: "12px",
1356
+ color: "rgba(0, 0, 0, 0.4)",
1357
+ fontWeight: 500
1358
+ },
1359
+ children: "Campaign"
1360
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1361
+ sx: {
1362
+ fontSize: "12px",
1363
+ color: "rgba(0, 0, 0, 0.4)",
1364
+ fontWeight: 500
1365
+ },
1366
+ children: "Conv. rate"
1367
+ })]
1368
+ }), data.map(function (item, index) {
1200
1369
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1201
1370
  sx: {
1202
1371
  display: "flex",
1203
- flexDirection: "column",
1204
- gap: 0.5
1372
+ justifyContent: "space-between",
1373
+ py: 1.5,
1374
+ alignItems: "center",
1375
+ borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1205
1376
  },
1206
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1207
- variant: "body2",
1208
- sx: {
1209
- fontWeight: 600,
1210
- color: "#333",
1211
- textAlign: "left"
1212
- },
1213
- children: item.name
1214
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1377
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1215
1378
  sx: {
1216
1379
  display: "flex",
1217
1380
  alignItems: "center",
1218
1381
  gap: 1.5
1219
1382
  },
1220
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1221
- variant: "caption",
1383
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1222
1384
  sx: {
1223
- color: "#606062",
1224
- fontWeight: 500
1385
+ width: 24,
1386
+ height: 24,
1387
+ borderRadius: "50%",
1388
+ bgcolor: "#ebf2ff",
1389
+ color: "#3431e4",
1390
+ display: "flex",
1391
+ alignItems: "center",
1392
+ justifyContent: "center",
1393
+ fontSize: "10px",
1394
+ fontWeight: 700
1225
1395
  },
1226
- children: item.cvr
1396
+ children: item.id
1227
1397
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1228
- variant: "caption",
1229
- sx: {
1230
- color: "#606062",
1231
- fontWeight: 500
1232
- },
1233
- children: item.raised
1234
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1235
1398
  sx: {
1236
- bgcolor: item.color,
1237
- color: item.textColor,
1238
- px: 1,
1239
- py: 0.2,
1240
- borderRadius: 1,
1241
- fontSize: "11px",
1242
- fontWeight: 600
1399
+ fontSize: "13px",
1400
+ fontWeight: 700,
1401
+ color: "#000"
1243
1402
  },
1244
- children: item.badge
1403
+ children: item.name
1245
1404
  })]
1405
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1406
+ sx: {
1407
+ fontSize: "13px",
1408
+ color: "#3431e4",
1409
+ fontWeight: 700
1410
+ },
1411
+ children: item.value
1246
1412
  })]
1247
1413
  }, index);
1248
- })
1414
+ })]
1249
1415
  });
1250
1416
  };
1251
-
1252
- var OrganicSection = function OrganicSection(_ref) {
1253
- var _ref$apiData = _ref.apiData,
1254
- apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
1255
- var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
1256
- var dailyPerformance = {
1257
- label: "Search Visibility",
1258
- series: [{
1259
- name: "Raised",
1260
- data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
1261
- }, {
1262
- name: "Spend",
1263
- data: [800, 950, 700, 1100, 900, 1200, 1300]
1264
- }],
1265
- categories: categories
1266
- };
1267
- var spendAllocation = {
1268
- label: "Source Breakdown",
1269
- data: [4500, 2500, 1500, 700],
1270
- categories: ["Organic", "Direct", "Refferal", "Social"]
1271
- };
1417
+ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
1418
+ var data = [{
1419
+ id: "YO",
1420
+ avatarBg: "#c1cfdedb",
1421
+ name: "Yemen Orphans - Meta",
1422
+ spend: "$8,200",
1423
+ revenue: "$31,400",
1424
+ roas: "3.8x"
1425
+ }, {
1426
+ id: "GF",
1427
+ avatarBg: "#c1cfdedb",
1428
+ name: "Gaza Food - Google",
1429
+ spend: "$7,400",
1430
+ revenue: "$25,200",
1431
+ roas: "3.4x"
1432
+ }, {
1433
+ id: "PW",
1434
+ avatarBg: "#c1cfdedb",
1435
+ name: "Pakistan Wells - Meta",
1436
+ spend: "$5,800",
1437
+ revenue: "$18,600",
1438
+ roas: "3.2x"
1439
+ }, {
1440
+ id: "R",
1441
+ avatarBg: "#c1cfdedb",
1442
+ name: "Ramadan - TikTok",
1443
+ spend: "$3,200",
1444
+ revenue: "$8,900",
1445
+ roas: "2.8x"
1446
+ }];
1447
+ return /*#__PURE__*/jsxRuntime.jsxs(CardWrapper, {
1448
+ title: "Top performing campaigns",
1449
+ subtitle: "Paid campaigns ranked by ROAS",
1450
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1451
+ sx: {
1452
+ display: "grid",
1453
+ gridTemplateColumns: "2.5fr 1fr 1fr 0.8fr",
1454
+ gap: 1,
1455
+ pb: 1,
1456
+ borderBottom: "1px solid #f0f0f0"
1457
+ },
1458
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1459
+ sx: {
1460
+ fontSize: "12px",
1461
+ color: "rgba(0, 0, 0, 0.4)",
1462
+ fontWeight: 500,
1463
+ textAlign: "left"
1464
+ },
1465
+ children: "Campaign"
1466
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1467
+ sx: {
1468
+ fontSize: "12px",
1469
+ color: "rgba(0, 0, 0, 0.4)",
1470
+ fontWeight: 500,
1471
+ textAlign: "left"
1472
+ },
1473
+ children: "Spend"
1474
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1475
+ sx: {
1476
+ fontSize: "12px",
1477
+ color: "rgba(0, 0, 0, 0.4)",
1478
+ fontWeight: 500,
1479
+ textAlign: "left"
1480
+ },
1481
+ children: "Revenue"
1482
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1483
+ sx: {
1484
+ fontSize: "12px",
1485
+ color: "rgba(0, 0, 0, 0.4)",
1486
+ fontWeight: 500,
1487
+ textAlign: "left"
1488
+ },
1489
+ children: "ROAS"
1490
+ })]
1491
+ }), data.map(function (item, index) {
1492
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1493
+ sx: {
1494
+ display: "grid",
1495
+ gridTemplateColumns: "2.5fr 1fr 1fr 0.8fr",
1496
+ gap: 1,
1497
+ py: 1.5,
1498
+ alignItems: "center",
1499
+ borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1500
+ },
1501
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1502
+ sx: {
1503
+ display: "flex",
1504
+ alignItems: "center",
1505
+ gap: 1.5
1506
+ },
1507
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1508
+ sx: {
1509
+ width: 24,
1510
+ height: 24,
1511
+ borderRadius: "50%",
1512
+ bgcolor: item.avatarBg,
1513
+ color: "#3431e4ff",
1514
+ display: "flex",
1515
+ alignItems: "center",
1516
+ justifyContent: "center",
1517
+ fontSize: "10px",
1518
+ fontWeight: 700
1519
+ },
1520
+ children: item.id
1521
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1522
+ sx: {
1523
+ fontSize: "13px",
1524
+ fontWeight: 700,
1525
+ color: "#000"
1526
+ },
1527
+ children: item.name
1528
+ })]
1529
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1530
+ sx: {
1531
+ fontSize: "13px",
1532
+ color: "#000",
1533
+ fontWeight: 500,
1534
+ textAlign: "left"
1535
+ },
1536
+ children: item.spend
1537
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1538
+ sx: {
1539
+ fontSize: "13px",
1540
+ color: "#000",
1541
+ fontWeight: 500,
1542
+ textAlign: "left"
1543
+ },
1544
+ children: item.revenue
1545
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1546
+ sx: {
1547
+ bgcolor: "#DCFCE7",
1548
+ color: "#22C55E",
1549
+ px: 1,
1550
+ py: 0.5,
1551
+ borderRadius: "100px",
1552
+ fontSize: "11px",
1553
+ fontWeight: 700,
1554
+ textAlign: "center"
1555
+ },
1556
+ children: item.roas
1557
+ })]
1558
+ }, index);
1559
+ })]
1560
+ });
1561
+ };
1562
+ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
1563
+ var data = [{
1564
+ country: "United States",
1565
+ value: "78 · 36%",
1566
+ percentage: 36
1567
+ }, {
1568
+ country: "United Kingdom",
1569
+ value: "42 · 20%",
1570
+ percentage: 20
1571
+ }, {
1572
+ country: "Canada",
1573
+ value: "28 · 13%",
1574
+ percentage: 13
1575
+ }, {
1576
+ country: "UAE",
1577
+ value: "24 · 11%",
1578
+ percentage: 11
1579
+ }, {
1580
+ country: "Saudi Arabia",
1581
+ value: "19 · 9%",
1582
+ percentage: 9
1583
+ }, {
1584
+ country: "Other",
1585
+ value: "24 · 11%",
1586
+ percentage: 11
1587
+ }];
1588
+ return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
1589
+ title: "Paid donor geography",
1590
+ subtitle: "Where ad-acquired donors come from",
1591
+ children: data.map(function (item, index) {
1592
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1593
+ sx: {
1594
+ display: "flex",
1595
+ alignItems: "center",
1596
+ gap: 2,
1597
+ py: 0.5
1598
+ },
1599
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1600
+ sx: {
1601
+ fontSize: "13px",
1602
+ fontWeight: 500,
1603
+ color: "rgba(0, 0, 0, 0.4)",
1604
+ minWidth: "100px",
1605
+ textAlign: "left"
1606
+ },
1607
+ children: item.country
1608
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1609
+ sx: {
1610
+ flexGrow: 1
1611
+ },
1612
+ children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
1613
+ variant: "determinate",
1614
+ value: item.percentage,
1615
+ sx: {
1616
+ height: 8,
1617
+ borderRadius: 4,
1618
+ bgcolor: "#F3F4F6",
1619
+ "& .MuiLinearProgress-bar": {
1620
+ borderRadius: 4,
1621
+ bgcolor: "#6366F1"
1622
+ }
1623
+ }
1624
+ })
1625
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1626
+ sx: {
1627
+ fontSize: "13px",
1628
+ fontWeight: 700,
1629
+ color: "#111",
1630
+ minWidth: "60px",
1631
+ textAlign: "right"
1632
+ },
1633
+ children: item.value
1634
+ })]
1635
+ }, index);
1636
+ })
1637
+ });
1638
+ };
1639
+
1640
+ var OrganicSection = function OrganicSection(_ref) {
1641
+ var _ref$apiData = _ref.apiData,
1642
+ apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
1643
+ var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
1644
+ var dailyPerformance = {
1645
+ label: "Search Visibility",
1646
+ series: [{
1647
+ name: "Raised",
1648
+ data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
1649
+ }, {
1650
+ name: "Spend",
1651
+ data: [800, 950, 700, 1100, 900, 1200, 1300]
1652
+ }],
1653
+ categories: categories
1654
+ };
1655
+ var spendAllocation = {
1656
+ label: "Source Breakdown",
1657
+ data: [4500, 2500, 1500, 700],
1658
+ categories: ["Organic", "Direct", "Refferal", "Social"]
1659
+ };
1272
1660
  var roasTrend = {
1273
1661
  label: "Traffic Trend",
1662
+ value: "8,420",
1274
1663
  data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
1275
1664
  categories: categories
1276
1665
  };
1277
1666
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1278
- children: [" ", /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1667
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1279
1668
  sx: {
1280
- display: "flex",
1669
+ display: 'flex',
1281
1670
  gap: 2,
1282
1671
  mb: 5
1283
1672
  },
1284
1673
  children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1285
1674
  title: "Organic Users",
1286
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.organicUsers) || "$9,200",
1675
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
1676
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
1677
+ icon: iconsMaterial.PeopleAltOutlined,
1287
1678
  sx: {
1288
1679
  flex: 1
1289
1680
  }
1290
1681
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1291
1682
  title: "Search Clicks",
1292
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.searchClicks) || "$9,200",
1683
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
1684
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
1685
+ icon: iconsMaterial.SearchOutlined,
1293
1686
  sx: {
1294
1687
  flex: 1
1295
1688
  }
1296
1689
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1297
1690
  title: "Donations",
1298
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.donations) || "$9,200",
1691
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
1692
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
1693
+ icon: iconsMaterial.FavoriteOutlined,
1299
1694
  sx: {
1300
1695
  flex: 1
1301
1696
  }
1302
1697
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1303
- title: "Converstion Rate",
1304
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionRate) || "$9,200",
1698
+ title: "Conversion Rate",
1699
+ value: "$130.58",
1700
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
1701
+ icon: iconsMaterial.Adjust,
1305
1702
  sx: {
1306
1703
  flex: 1
1307
1704
  }
1308
1705
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1309
- title: "Revenue Raised",
1310
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.revenueRaised) || "3.0",
1706
+ title: "Revenue raised",
1707
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
1708
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
1709
+ icon: iconsMaterial.PaidOutlined,
1311
1710
  sx: {
1312
1711
  flex: 1
1313
1712
  }
1314
1713
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1315
- title: "Avg Donation",
1316
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "215",
1714
+ title: "Avg donation",
1715
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
1716
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
1717
+ icon: iconsMaterial.PaidOutlined,
1317
1718
  sx: {
1318
1719
  flex: 1
1319
1720
  }
@@ -1327,44 +1728,42 @@ var OrganicSection = function OrganicSection(_ref) {
1327
1728
  children: [/*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1328
1729
  item: roasTrend,
1329
1730
  index: 2,
1330
- md: 4,
1731
+ md: 6,
1331
1732
  type: "area",
1332
1733
  metric: "ROAS",
1333
- isPrimary: true
1734
+ isPrimary: true,
1735
+ isPremium: true
1334
1736
  }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1335
1737
  item: dailyPerformance,
1336
1738
  index: 0,
1337
- md: 4,
1739
+ md: 6,
1338
1740
  type: "bar",
1339
- metric: "Revenue"
1741
+ metric: "Revenue",
1742
+ isPremium: true
1340
1743
  }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1341
1744
  item: spendAllocation,
1342
1745
  index: 1,
1343
- md: 4,
1746
+ md: 6,
1344
1747
  type: "donut",
1345
- metric: "Revenue"
1346
- })]
1347
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
1348
- container: true,
1349
- spacing: 3,
1350
- sx: {
1351
- mt: 4
1352
- },
1353
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1748
+ metric: "Revenue",
1749
+ isPremium: true
1750
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1354
1751
  item: true,
1355
1752
  xs: 12,
1356
- md: 4,
1753
+ md: 6,
1357
1754
  children: /*#__PURE__*/jsxRuntime.jsx(LandingPagesCard, {})
1358
1755
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1359
1756
  item: true,
1360
1757
  xs: 12,
1361
- md: 4,
1758
+ md: 6,
1362
1759
  children: /*#__PURE__*/jsxRuntime.jsx(KeywordsCard, {})
1363
1760
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
1364
1761
  item: true,
1365
1762
  xs: 12,
1366
- md: 4,
1367
- children: /*#__PURE__*/jsxRuntime.jsx(GeographyCard, {})
1763
+ md: 6,
1764
+ children: /*#__PURE__*/jsxRuntime.jsx(GeographyCard, {
1765
+ subtitle: "Organic traffic source locations"
1766
+ })
1368
1767
  })]
1369
1768
  })]
1370
1769
  });
@@ -1401,32 +1800,42 @@ var EmailSection = function EmailSection() {
1401
1800
  mb: 2
1402
1801
  },
1403
1802
  children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1404
- title: "Open Rate",
1405
- value: "32%",
1803
+ title: "Total raised",
1804
+ value: "$48,920",
1805
+ subValue: "12% vs last month",
1806
+ icon: iconsMaterial.PaidOutlined,
1406
1807
  sx: {
1407
1808
  flex: 1
1408
1809
  }
1409
1810
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1410
- title: "Bounce Rate",
1411
- value: "1.8%",
1811
+ title: "Donations",
1812
+ value: "62",
1813
+ subValue: "12% vs last month",
1814
+ icon: iconsMaterial.FavoriteOutlined,
1412
1815
  sx: {
1413
1816
  flex: 1
1414
1817
  }
1415
1818
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1416
- title: "Clicks",
1417
- value: "1,204",
1819
+ title: "Conversion rate",
1820
+ value: "3.2%",
1821
+ subValue: "12% vs last month",
1822
+ icon: iconsMaterial.Adjust,
1418
1823
  sx: {
1419
1824
  flex: 1
1420
1825
  }
1421
1826
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1422
- title: "Unique Clicks",
1423
- value: "987",
1827
+ title: "CTR",
1828
+ value: "8.1%",
1829
+ subValue: "12% vs last month",
1830
+ icon: iconsMaterial.NotInterested,
1424
1831
  sx: {
1425
1832
  flex: 1
1426
1833
  }
1427
1834
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1428
- title: "CTR",
1429
- value: "4.8%",
1835
+ title: "Revenue per email",
1836
+ value: "$2.45",
1837
+ subValue: "12% vs last month",
1838
+ icon: iconsMaterial.IndeterminateCheckBoxOutlined,
1430
1839
  sx: {
1431
1840
  flex: 1
1432
1841
  }
@@ -1437,32 +1846,42 @@ var EmailSection = function EmailSection() {
1437
1846
  gap: 2
1438
1847
  },
1439
1848
  children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1440
- title: "Donations",
1441
- value: "29",
1849
+ title: "Open rate",
1850
+ value: "42.3%",
1851
+ subValue: "12% vs last month",
1852
+ icon: iconsMaterial.Email,
1442
1853
  sx: {
1443
1854
  flex: 1
1444
1855
  }
1445
1856
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1446
- title: "CONV.Rate",
1447
- value: "2.9%",
1857
+ title: "Clicks",
1858
+ value: "1,612",
1859
+ subValue: "12% vs last month",
1860
+ icon: iconsMaterial.NearMe,
1448
1861
  sx: {
1449
1862
  flex: 1
1450
1863
  }
1451
1864
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1452
- title: "RPC",
1453
- value: "$1.84",
1865
+ title: "Unique Clicks",
1866
+ value: "1,148",
1867
+ subValue: "12% vs last month",
1868
+ icon: iconsMaterial.NearMe,
1454
1869
  sx: {
1455
1870
  flex: 1
1456
1871
  }
1457
1872
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1458
- title: "TOTAL RAISED (EMAIL)",
1459
- value: "$2,215",
1873
+ title: "Bounce rate",
1874
+ value: "1.8%",
1875
+ subValue: "12% vs last month",
1876
+ icon: iconsMaterial.HighlightOff,
1460
1877
  sx: {
1461
1878
  flex: 1
1462
1879
  }
1463
1880
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
1464
- title: "AVG DONATION",
1465
- value: "$76.4",
1881
+ title: "Revenue per Click",
1882
+ value: "$30.35",
1883
+ subValue: "12% vs last month",
1884
+ icon: iconsMaterial.HighlightOff,
1466
1885
  sx: {
1467
1886
  flex: 1
1468
1887
  }
@@ -1479,19 +1898,22 @@ var EmailSection = function EmailSection() {
1479
1898
  md: 4,
1480
1899
  type: "area",
1481
1900
  metric: "ROAS",
1482
- isPrimary: true
1901
+ isPrimary: true,
1902
+ isPremium: true
1483
1903
  }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1484
1904
  item: dailyPerformance,
1485
1905
  index: 0,
1486
1906
  md: 4,
1487
- type: "bar",
1488
- metric: "Revenue"
1907
+ type: "area",
1908
+ metric: "Revenue",
1909
+ isPremium: true
1489
1910
  }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
1490
1911
  item: spendAllocation,
1491
1912
  index: 1,
1492
1913
  md: 4,
1493
1914
  type: "area",
1494
- metric: "Revenue"
1915
+ metric: "Revenue",
1916
+ isPremium: true
1495
1917
  })]
1496
1918
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
1497
1919
  container: true,
@@ -1784,16 +2206,12 @@ var NewOverview = function NewOverview(_ref) {
1784
2206
  }), activeSection === "Paid" && /*#__PURE__*/jsxRuntime.jsx(PaidSection$2, {
1785
2207
  apiData: apiData
1786
2208
  }), activeSection === "Organic" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1787
- sx: {
1788
- p: 2
1789
- },
2209
+ sx: {},
1790
2210
  children: /*#__PURE__*/jsxRuntime.jsx(OrganicSection, {
1791
2211
  apiData: apiData
1792
2212
  })
1793
2213
  }), activeSection === "Email" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1794
- sx: {
1795
- p: 2
1796
- },
2214
+ sx: {},
1797
2215
  children: /*#__PURE__*/jsxRuntime.jsx(EmailSection, {})
1798
2216
  })]
1799
2217
  })]
@@ -5982,98 +6400,872 @@ var index = /*#__PURE__*/Object.freeze({
5982
6400
  default: UpdateEmails
5983
6401
  });
5984
6402
 
5985
- var OverallSection = function OverallSection(_ref) {
5986
- var _ref$apiData = _ref.apiData,
5987
- apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
5988
- primaryCharts = _ref.primaryCharts,
5989
- secondaryCharts = _ref.secondaryCharts,
5990
- tertiaryCharts = _ref.tertiaryCharts,
5991
- quaternaryCharts = _ref.quaternaryCharts;
5992
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
5993
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5994
- sx: {
5995
- display: 'flex',
5996
- gap: 2,
5997
- mb: 5
5998
- },
5999
- children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6000
- title: "Total Raised",
6001
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$9,200",
6002
- sx: {
6003
- flex: 1
6004
- }
6005
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6006
- title: "Net Raised",
6007
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$9,200",
6008
- sx: {
6009
- flex: 1
6010
- }
6011
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6012
- title: "Total Spent",
6013
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalSpent) || "$9,200",
6014
- sx: {
6015
- flex: 1
6016
- }
6017
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6018
- title: "Total ROAS",
6019
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRoas) || "3.0",
6020
- sx: {
6021
- flex: 1
6022
- }
6023
- }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6024
- title: "Total Donors",
6025
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
6026
- sx: {
6027
- flex: 1
6028
- }
6029
- })]
6030
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6031
- container: true,
6032
- spacing: 3,
6403
+ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
6404
+ var _ref$title = _ref.title,
6405
+ title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
6406
+ _ref$subtitle = _ref.subtitle,
6407
+ subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
6408
+ _ref$columns = _ref.columns,
6409
+ columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift", "Status"] : _ref$columns,
6410
+ _ref$rows = _ref.rows,
6411
+ rows = _ref$rows === void 0 ? [] : _ref$rows,
6412
+ _ref$gridTemplateColu = _ref.gridTemplateColumns,
6413
+ gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "2.5fr 1fr 1.5fr 0.8fr 1fr 0.8fr" : _ref$gridTemplateColu;
6414
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6415
+ sx: {
6416
+ bgcolor: "#fff",
6417
+ borderRadius: "24px",
6418
+ border: "1px solid #f0f0f0",
6419
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6420
+ p: 3,
6421
+ height: "100%"
6422
+ },
6423
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6033
6424
  sx: {
6034
- mb: 1
6425
+ display: "flex",
6426
+ justifyContent: "space-between",
6427
+ alignItems: "flex-start",
6428
+ mb: 3
6035
6429
  },
6036
- children: primaryCharts.map(function (item, index) {
6037
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
6038
- item: item,
6039
- index: index
6040
- }, "primary-".concat(index));
6430
+ children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6431
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6432
+ sx: {
6433
+ fontWeight: 700,
6434
+ fontSize: "18px",
6435
+ color: "#000",
6436
+ textAlign: 'left'
6437
+ },
6438
+ children: title
6439
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6440
+ sx: {
6441
+ fontSize: "13px",
6442
+ color: "rgba(0, 0, 0, 0.4)",
6443
+ mt: 0.2
6444
+ },
6445
+ children: subtitle
6446
+ })]
6041
6447
  })
6042
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6043
- container: true,
6044
- spacing: 3,
6448
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6045
6449
  sx: {
6046
- mt: 1
6450
+ overflowX: "auto"
6047
6451
  },
6048
- children: secondaryCharts.map(function (item, index) {
6049
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
6050
- item: item,
6051
- index: index
6052
- }, "secondary-".concat(index));
6452
+ children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6453
+ sx: {
6454
+ minWidth: "600px"
6455
+ },
6456
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6457
+ sx: {
6458
+ display: "grid",
6459
+ gridTemplateColumns: gridTemplateColumns,
6460
+ gap: 2,
6461
+ pb: 1.5,
6462
+ borderBottom: "1px solid #f0f0f0"
6463
+ },
6464
+ children: columns.map(function (header) {
6465
+ return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6466
+ sx: {
6467
+ fontSize: "12px",
6468
+ color: "rgba(0, 0, 0, 0.4)",
6469
+ fontWeight: 500,
6470
+ textAlign: 'left'
6471
+ },
6472
+ children: header
6473
+ }, header);
6474
+ })
6475
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6476
+ sx: {
6477
+ mt: 1
6478
+ },
6479
+ children: rows.map(function (row, idx) {
6480
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6481
+ sx: {
6482
+ display: "grid",
6483
+ gridTemplateColumns: gridTemplateColumns,
6484
+ gap: 2,
6485
+ py: 1.8,
6486
+ alignItems: "center",
6487
+ borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
6488
+ },
6489
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6490
+ sx: {
6491
+ display: "flex",
6492
+ alignItems: "center",
6493
+ gap: 1.5
6494
+ },
6495
+ children: [row.id && /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
6496
+ sx: {
6497
+ width: 28,
6498
+ height: 28,
6499
+ fontSize: "10px",
6500
+ fontWeight: 700,
6501
+ bgcolor: row.avatarBg || "#F3F4F6",
6502
+ color: "rgb(99, 99, 230)"
6503
+ },
6504
+ children: row.id
6505
+ }), row.icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6506
+ sx: {
6507
+ color: row.iconColor || "inherit",
6508
+ display: 'flex',
6509
+ alignItems: 'center'
6510
+ },
6511
+ children: /*#__PURE__*/jsxRuntime.jsx(row.icon, {
6512
+ sx: {
6513
+ fontSize: '18px'
6514
+ }
6515
+ })
6516
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6517
+ sx: {
6518
+ fontSize: "13px",
6519
+ fontWeight: 700,
6520
+ color: "#000"
6521
+ },
6522
+ children: row.name
6523
+ })]
6524
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6525
+ sx: {
6526
+ fontSize: "13px",
6527
+ fontWeight: 600,
6528
+ color: "#000",
6529
+ textAlign: 'left'
6530
+ },
6531
+ children: row.val1
6532
+ }), row.type === 'progress' ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6533
+ sx: {
6534
+ display: "flex",
6535
+ alignItems: "center",
6536
+ gap: 1.5
6537
+ },
6538
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6539
+ sx: {
6540
+ flexGrow: 1
6541
+ },
6542
+ children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
6543
+ variant: "determinate",
6544
+ value: row.progress,
6545
+ sx: {
6546
+ height: 8,
6547
+ borderRadius: 4,
6548
+ bgcolor: "#F3F4F6",
6549
+ "& .MuiLinearProgress-bar": {
6550
+ borderRadius: 4,
6551
+ bgcolor: row.progressColor || "rgb(99, 99, 230)"
6552
+ }
6553
+ }
6554
+ })
6555
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
6556
+ sx: {
6557
+ fontSize: "11px",
6558
+ color: "rgba(0, 0, 0, 0.4)",
6559
+ minWidth: "30px"
6560
+ },
6561
+ children: [row.progress, "%"]
6562
+ })]
6563
+ }) : /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6564
+ sx: {
6565
+ fontSize: "13px",
6566
+ fontWeight: 600,
6567
+ color: "#000",
6568
+ textAlign: 'left'
6569
+ },
6570
+ children: row.val2
6571
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6572
+ sx: {
6573
+ fontSize: "13px",
6574
+ fontWeight: row.highlightVal3 ? 700 : 500,
6575
+ color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
6576
+ textAlign: 'left'
6577
+ },
6578
+ children: row.val3
6579
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6580
+ sx: {
6581
+ fontSize: "13px",
6582
+ fontWeight: 500,
6583
+ color: "#000",
6584
+ textAlign: 'left'
6585
+ },
6586
+ children: row.val4
6587
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6588
+ children: row.type === 'trend' ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6589
+ sx: {
6590
+ display: "flex",
6591
+ alignItems: "center",
6592
+ gap: 0.5,
6593
+ color: row.trendType === 'up' ? "#22C55E" : "#EF4444",
6594
+ fontSize: "12px",
6595
+ fontWeight: 600
6596
+ },
6597
+ children: [row.trendType === 'up' ? /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {
6598
+ sx: {
6599
+ fontSize: '14px'
6600
+ }
6601
+ }) : /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingDown, {
6602
+ sx: {
6603
+ fontSize: '14px'
6604
+ }
6605
+ }), row.trendLabel]
6606
+ }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6607
+ sx: {
6608
+ display: "inline-block",
6609
+ px: 1.5,
6610
+ py: 0.5,
6611
+ borderRadius: "100px",
6612
+ bgcolor: row.statusBg,
6613
+ color: row.statusColor,
6614
+ fontSize: "11px",
6615
+ fontWeight: 700,
6616
+ textAlign: "center"
6617
+ },
6618
+ children: row.status
6619
+ })
6620
+ })]
6621
+ }, idx);
6622
+ })
6623
+ })]
6053
6624
  })
6054
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6625
+ })]
6626
+ });
6627
+ };
6628
+
6629
+ var DonorMixCard = function DonorMixCard(_ref) {
6630
+ var _ref$title = _ref.title,
6631
+ title = _ref$title === void 0 ? "Donor mix" : _ref$title,
6632
+ _ref$subtitle = _ref.subtitle,
6633
+ subtitle = _ref$subtitle === void 0 ? "Acquisition vs retention" : _ref$subtitle,
6634
+ _ref$series = _ref.series,
6635
+ series = _ref$series === void 0 ? [68, 32] : _ref$series,
6636
+ _ref$labels = _ref.labels,
6637
+ labels = _ref$labels === void 0 ? ["New donors", "Returning"] : _ref$labels,
6638
+ _ref$colors = _ref.colors,
6639
+ colors = _ref$colors === void 0 ? ["rgb(99, 99, 230)", "#10B981"] : _ref$colors,
6640
+ _ref$centerLabel = _ref.centerLabel,
6641
+ centerLabel = _ref$centerLabel === void 0 ? "donors" : _ref$centerLabel,
6642
+ _ref$centerValue = _ref.centerValue,
6643
+ centerValue = _ref$centerValue === void 0 ? "215" : _ref$centerValue,
6644
+ _ref$items = _ref.items,
6645
+ items = _ref$items === void 0 ? [{
6646
+ label: "New donors",
6647
+ val: "146 · 68%",
6648
+ color: "rgb(99, 99, 230)"
6649
+ }, {
6650
+ label: "Returning",
6651
+ val: "69 · 32%",
6652
+ color: "#10B981"
6653
+ }] : _ref$items,
6654
+ _ref$showBottomSummar = _ref.showBottomSummary,
6655
+ showBottomSummary = _ref$showBottomSummar === void 0 ? true : _ref$showBottomSummar,
6656
+ _ref$bottomSummaryVal = _ref.bottomSummaryValue,
6657
+ bottomSummaryValue = _ref$bottomSummaryVal === void 0 ? "$130.58" : _ref$bottomSummaryVal,
6658
+ _ref$bottomSummaryTre = _ref.bottomSummaryTrend,
6659
+ bottomSummaryTrend = _ref$bottomSummaryTre === void 0 ? "8.4% vs last month" : _ref$bottomSummaryTre;
6660
+ var chartOptions = {
6661
+ chart: {
6662
+ type: "donut"
6663
+ },
6664
+ labels: labels,
6665
+ colors: colors,
6666
+ plotOptions: {
6667
+ pie: {
6668
+ donut: {
6669
+ size: "75%",
6670
+ labels: {
6671
+ show: true,
6672
+ name: {
6673
+ show: true,
6674
+ fontSize: '13px',
6675
+ fontWeight: 500,
6676
+ color: 'rgba(0, 0, 0, 0.4)',
6677
+ offsetY: 25
6678
+ },
6679
+ value: {
6680
+ show: true,
6681
+ fontSize: '24px',
6682
+ fontWeight: 700,
6683
+ color: '#000',
6684
+ offsetY: -15,
6685
+ formatter: function formatter(val) {
6686
+ return val;
6687
+ }
6688
+ },
6689
+ total: {
6690
+ show: true,
6691
+ label: centerLabel,
6692
+ fontSize: '13px',
6693
+ fontWeight: 500,
6694
+ color: 'rgba(0, 0, 0, 0.4)',
6695
+ formatter: function formatter() {
6696
+ return centerValue;
6697
+ }
6698
+ }
6699
+ }
6700
+ }
6701
+ }
6702
+ },
6703
+ dataLabels: {
6704
+ enabled: false
6705
+ },
6706
+ legend: {
6707
+ show: false
6708
+ },
6709
+ stroke: {
6710
+ show: false
6711
+ },
6712
+ states: {
6713
+ hover: {
6714
+ filter: {
6715
+ type: "none"
6716
+ }
6717
+ }
6718
+ }
6719
+ };
6720
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6721
+ sx: {
6722
+ bgcolor: "#fff",
6723
+ borderRadius: "24px",
6724
+ border: "1px solid #f0f0f0",
6725
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6726
+ p: 3,
6727
+ height: "100%",
6728
+ display: "flex",
6729
+ flexDirection: "column"
6730
+ },
6731
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6732
+ sx: {
6733
+ mb: 2
6734
+ },
6735
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6736
+ sx: {
6737
+ fontWeight: 700,
6738
+ fontSize: "18px",
6739
+ color: "#000"
6740
+ },
6741
+ children: title
6742
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6743
+ sx: {
6744
+ fontSize: "13px",
6745
+ color: "rgba(0, 0, 0, 0.4)",
6746
+ mt: 0.2
6747
+ },
6748
+ children: subtitle
6749
+ })]
6750
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
6751
+ sx: {
6752
+ position: "relative",
6753
+ height: "180px",
6754
+ mb: 2,
6755
+ display: "flex",
6756
+ justifyContent: "center"
6757
+ },
6758
+ children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
6759
+ options: chartOptions,
6760
+ series: series,
6761
+ type: "donut",
6762
+ width: "240"
6763
+ })
6764
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6765
+ sx: {
6766
+ mt: "auto"
6767
+ },
6768
+ children: [items.map(function (item, idx) {
6769
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6770
+ sx: {
6771
+ display: "flex",
6772
+ justifyContent: "space-between",
6773
+ mb: idx === items.length - 1 ? showBottomSummary ? 3 : 0 : 1.5
6774
+ },
6775
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6776
+ sx: {
6777
+ display: "flex",
6778
+ alignItems: "center",
6779
+ gap: 1
6780
+ },
6781
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6782
+ sx: {
6783
+ width: 10,
6784
+ height: 10,
6785
+ bgcolor: item.color,
6786
+ borderRadius: "2px"
6787
+ }
6788
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6789
+ sx: {
6790
+ fontSize: "13px",
6791
+ fontWeight: 500,
6792
+ color: "rgba(0, 0, 0, 0.4)"
6793
+ },
6794
+ children: item.label
6795
+ })]
6796
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6797
+ sx: {
6798
+ fontSize: "13px",
6799
+ fontWeight: 700,
6800
+ color: "#111"
6801
+ },
6802
+ children: item.val
6803
+ })]
6804
+ }, idx);
6805
+ }), showBottomSummary && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6806
+ sx: {
6807
+ display: "flex",
6808
+ justifyContent: "space-between",
6809
+ alignItems: "center",
6810
+ pt: 2,
6811
+ borderTop: "1px solid #f0f0f0"
6812
+ },
6813
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6814
+ sx: {
6815
+ fontSize: "20px",
6816
+ fontWeight: 700,
6817
+ color: "#000"
6818
+ },
6819
+ children: bottomSummaryValue
6820
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6821
+ sx: {
6822
+ display: "flex",
6823
+ alignItems: "center",
6824
+ gap: 0.5,
6825
+ color: "#22C55E",
6826
+ fontSize: "12px",
6827
+ fontWeight: 600
6828
+ },
6829
+ children: [/*#__PURE__*/jsxRuntime.jsx("span", {
6830
+ children: "\u25B2"
6831
+ }), bottomSummaryTrend]
6832
+ })]
6833
+ })]
6834
+ })]
6835
+ });
6836
+ };
6837
+
6838
+ var DonationTypeBarChart = function DonationTypeBarChart() {
6839
+ var chartOptions = {
6840
+ chart: {
6841
+ type: "bar",
6842
+ toolbar: {
6843
+ show: false
6844
+ },
6845
+ zoom: {
6846
+ enabled: false
6847
+ },
6848
+ fontFamily: "Inter, sans-serif"
6849
+ },
6850
+ plotOptions: {
6851
+ bar: {
6852
+ horizontal: false,
6853
+ columnWidth: "45%",
6854
+ borderRadius: 4,
6855
+ dataLabels: {
6856
+ position: "top"
6857
+ }
6858
+ }
6859
+ },
6860
+ dataLabels: {
6861
+ enabled: true,
6862
+ formatter: function formatter(val) {
6863
+ return "$".concat(val, "K");
6864
+ },
6865
+ offsetY: -20,
6866
+ style: {
6867
+ fontSize: "12px",
6868
+ fontWeight: 700,
6869
+ colors: ["#000"]
6870
+ }
6871
+ },
6872
+ stroke: {
6873
+ show: true,
6874
+ width: 2,
6875
+ colors: ["transparent"]
6876
+ },
6877
+ xaxis: {
6878
+ categories: [["Week 1", "Apr 5-11"], ["Week 2", "Apr 12-18"], ["Week 3", "Apr 19-25"], ["Week 4", "Apr 26-May 2"], ["Week 5", "May 3-4"]],
6879
+ axisBorder: {
6880
+ show: false
6881
+ },
6882
+ axisTicks: {
6883
+ show: false
6884
+ },
6885
+ labels: {
6886
+ style: {
6887
+ colors: "rgba(0, 0, 0, 0.4)",
6888
+ fontSize: "12px"
6889
+ }
6890
+ }
6891
+ },
6892
+ yaxis: {
6893
+ min: 0,
6894
+ max: 60,
6895
+ tickAmount: 4,
6896
+ labels: {
6897
+ formatter: function formatter(val) {
6898
+ return "$".concat(val, "K");
6899
+ },
6900
+ style: {
6901
+ colors: "rgba(0, 0, 0, 0.4)",
6902
+ fontSize: "12px"
6903
+ }
6904
+ }
6905
+ },
6906
+ fill: {
6907
+ opacity: 1
6908
+ },
6909
+ colors: ["rgb(99, 99, 230)", "#10B981"],
6910
+ grid: {
6911
+ borderColor: "#f1f1f1",
6912
+ strokeDashArray: 4,
6913
+ yaxis: {
6914
+ lines: {
6915
+ show: true
6916
+ }
6917
+ }
6918
+ },
6919
+ legend: {
6920
+ show: false // Custom legend used
6921
+ },
6922
+ tooltip: {
6923
+ y: {
6924
+ formatter: function formatter(val) {
6925
+ return "$".concat(val, "K");
6926
+ }
6927
+ }
6928
+ }
6929
+ };
6930
+ var series = [{
6931
+ name: "Recurring",
6932
+ data: [9.2, 11.8, 13.4, 15.6, 4.9]
6933
+ }, {
6934
+ name: "One-time",
6935
+ data: [32.4, 41.2, 46.8, 51.3, 14.3]
6936
+ }];
6937
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
6938
+ sx: {
6939
+ bgcolor: "#fff",
6940
+ borderRadius: "24px",
6941
+ border: "1px solid #f0f0f0",
6942
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
6943
+ p: 3
6944
+ // width: "100%",
6945
+ },
6946
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6947
+ sx: {
6948
+ display: "flex",
6949
+ justifyContent: "space-between",
6950
+ alignItems: "flex-start",
6951
+ mb: 4
6952
+ },
6953
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6954
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6955
+ sx: {
6956
+ fontWeight: 700,
6957
+ fontSize: "18px",
6958
+ color: "#000"
6959
+ },
6960
+ children: "Recurring vs one-time donations"
6961
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6962
+ sx: {
6963
+ fontSize: "13px",
6964
+ color: "rgba(0, 0, 0, 0.4)",
6965
+ mt: 0.2
6966
+ },
6967
+ children: "Donation type breakdown - weekly aggregation"
6968
+ })]
6969
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6970
+ sx: {
6971
+ display: "flex",
6972
+ gap: 6
6973
+ },
6974
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6975
+ sx: {
6976
+ textAlign: "right"
6977
+ },
6978
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
6979
+ sx: {
6980
+ display: "flex",
6981
+ alignItems: "center",
6982
+ justifyContent: "flex-end",
6983
+ gap: 1,
6984
+ mb: 0.5
6985
+ },
6986
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
6987
+ sx: {
6988
+ width: 8,
6989
+ height: 8,
6990
+ bgcolor: "rgb(99, 99, 230)",
6991
+ borderRadius: "50%"
6992
+ }
6993
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
6994
+ sx: {
6995
+ fontSize: "12px",
6996
+ color: "rgba(0, 0, 0, 0.4)",
6997
+ fontWeight: 500
6998
+ },
6999
+ children: "Recurring"
7000
+ })]
7001
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7002
+ sx: {
7003
+ fontSize: "18px",
7004
+ fontWeight: 700,
7005
+ color: "#000"
7006
+ },
7007
+ children: "$54,937"
7008
+ })]
7009
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7010
+ sx: {
7011
+ textAlign: "right"
7012
+ },
7013
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7014
+ sx: {
7015
+ display: "flex",
7016
+ alignItems: "center",
7017
+ justifyContent: "flex-end",
7018
+ gap: 1,
7019
+ mb: 0.5
7020
+ },
7021
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
7022
+ sx: {
7023
+ width: 8,
7024
+ height: 8,
7025
+ bgcolor: "#10B981",
7026
+ borderRadius: "50%"
7027
+ }
7028
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7029
+ sx: {
7030
+ fontSize: "12px",
7031
+ color: "rgba(0, 0, 0, 0.4)",
7032
+ fontWeight: 500
7033
+ },
7034
+ children: "One-time"
7035
+ })]
7036
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
7037
+ sx: {
7038
+ fontSize: "18px",
7039
+ fontWeight: 700,
7040
+ color: "#000"
7041
+ },
7042
+ children: "$186,001"
7043
+ })]
7044
+ })]
7045
+ })]
7046
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
7047
+ sx: {
7048
+ height: 350,
7049
+ width: "100%"
7050
+ },
7051
+ children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
7052
+ options: chartOptions,
7053
+ series: series,
7054
+ type: "bar",
7055
+ height: "100%"
7056
+ })
7057
+ })]
7058
+ });
7059
+ };
7060
+
7061
+ var OverallSection = function OverallSection(_ref) {
7062
+ var _ref$apiData = _ref.apiData,
7063
+ apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
7064
+ primaryCharts = _ref.primaryCharts,
7065
+ secondaryCharts = _ref.secondaryCharts,
7066
+ tertiaryCharts = _ref.tertiaryCharts,
7067
+ quaternaryCharts = _ref.quaternaryCharts;
7068
+ return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
7069
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
7070
+ sx: {
7071
+ display: 'flex',
7072
+ gap: 2,
7073
+ mb: 5
7074
+ },
7075
+ children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7076
+ title: "Total Raised",
7077
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
7078
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
7079
+ icon: iconsMaterial.PaidOutlined,
7080
+ sx: {
7081
+ flex: 1
7082
+ }
7083
+ }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7084
+ title: "Net Raised",
7085
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
7086
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
7087
+ icon: iconsMaterial.FavoriteOutlined,
7088
+ sx: {
7089
+ flex: 1
7090
+ }
7091
+ }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7092
+ title: "Total Donors",
7093
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
7094
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonorsTrend) || "31 new",
7095
+ icon: iconsMaterial.PeopleAltOutlined,
7096
+ sx: {
7097
+ flex: 1
7098
+ }
7099
+ }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7100
+ title: "Avg donation",
7101
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "$130.58",
7102
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
7103
+ icon: iconsMaterial.PaidOutlined,
7104
+ sx: {
7105
+ flex: 1
7106
+ }
7107
+ }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7108
+ title: "ROAS",
7109
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
7110
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
7111
+ icon: iconsMaterial.TrendingUp,
7112
+ sx: {
7113
+ flex: 1
7114
+ }
7115
+ }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
7116
+ title: "Conversion",
7117
+ value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
7118
+ subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionSub) || "215 / 12.4K",
7119
+ icon: iconsMaterial.Adjust,
7120
+ sx: {
7121
+ flex: 1
7122
+ }
7123
+ })]
7124
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
6055
7125
  container: true,
6056
7126
  spacing: 3,
6057
7127
  sx: {
6058
- mt: 1
7128
+ mb: 1
6059
7129
  },
6060
- children: tertiaryCharts.map(function (item, index) {
7130
+ children: [primaryCharts.filter(function (item) {
7131
+ return item.label !== "First installments";
7132
+ }).map(function (item, index) {
7133
+ return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7134
+ item: item,
7135
+ index: index,
7136
+ md: item.label === "Total Revenue" ? 12 : 6,
7137
+ isPremium: true
7138
+ }, "primary-".concat(index));
7139
+ }), secondaryCharts.map(function (item, index) {
7140
+ return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7141
+ item: item,
7142
+ index: index,
7143
+ md: 6,
7144
+ isPremium: true
7145
+ }, "secondary-".concat(index));
7146
+ }), tertiaryCharts.map(function (item, index) {
6061
7147
  return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
6062
7148
  item: item,
6063
- index: index
7149
+ index: index,
7150
+ md: 6,
7151
+ isPremium: true
6064
7152
  }, "tertiary-".concat(index));
6065
- })
6066
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7153
+ }), quaternaryCharts.map(function (item, index) {
7154
+ return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
7155
+ item: item,
7156
+ index: index,
7157
+ md: 6,
7158
+ isPremium: true
7159
+ }, "quaternary-".concat(index));
7160
+ })]
7161
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
6067
7162
  container: true,
6068
7163
  spacing: 3,
6069
7164
  sx: {
6070
7165
  mt: 1
6071
7166
  },
6072
- children: quaternaryCharts.map(function (item, index) {
6073
- return /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
6074
- item: item,
6075
- index: index
6076
- }, "quaternary-".concat(index));
7167
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7168
+ item: true,
7169
+ xs: 12,
7170
+ md: 8,
7171
+ children: /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
7172
+ title: "Active campaigns",
7173
+ subtitle: "Live fundraisers ranked by velocity",
7174
+ columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift", "Status"],
7175
+ rows: [{
7176
+ id: "OS",
7177
+ name: "Orphan sponsorship — Yemen",
7178
+ val1: "$78,400",
7179
+ type: "progress",
7180
+ progress: 78,
7181
+ val3: "82",
7182
+ val4: "$956",
7183
+ status: "Active",
7184
+ statusColor: "#22C55E",
7185
+ statusBg: "#DCFCE7"
7186
+ }, {
7187
+ id: "EF",
7188
+ name: "Emergency food — Gaza",
7189
+ val1: "$62,100",
7190
+ type: "progress",
7191
+ progress: 83,
7192
+ val3: "61",
7193
+ val4: "$1,018",
7194
+ status: "Active",
7195
+ statusColor: "#22C55E",
7196
+ statusBg: "#DCFCE7"
7197
+ }, {
7198
+ id: "MB",
7199
+ name: "Masjid build — Somalia",
7200
+ val1: "$38,200",
7201
+ type: "progress",
7202
+ progress: 48,
7203
+ val3: "34",
7204
+ val4: "$1,124",
7205
+ status: "Slow",
7206
+ statusColor: "#B45309",
7207
+ statusBg: "#FEF3C7",
7208
+ progressColor: "#F59E0B"
7209
+ }, {
7210
+ id: "WW",
7211
+ name: "Water wells — Pakistan",
7212
+ val1: "$29,800",
7213
+ type: "progress",
7214
+ progress: 99,
7215
+ val3: "28",
7216
+ val4: "$1,064",
7217
+ status: "Closing",
7218
+ statusColor: "#6366F1",
7219
+ statusBg: "#EEF2FF",
7220
+ progressColor: "#10B981"
7221
+ }, {
7222
+ id: "RP",
7223
+ name: "Ramadan packs — Egypt",
7224
+ val1: "$19,400",
7225
+ type: "progress",
7226
+ progress: 78,
7227
+ val3: "10",
7228
+ val4: "$1,940",
7229
+ status: "Active",
7230
+ statusColor: "#22C55E",
7231
+ statusBg: "#DCFCE7"
7232
+ }]
7233
+ })
7234
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7235
+ item: true,
7236
+ xs: 12,
7237
+ md: 4,
7238
+ children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
7239
+ title: "Donor mix",
7240
+ subtitle: "Acquisition vs retention",
7241
+ series: [68, 32],
7242
+ labels: ["New donors", "Returning"],
7243
+ colors: ["rgb(99, 99, 230)", "#10B981"],
7244
+ centerLabel: "donors",
7245
+ centerValue: "215",
7246
+ items: [{
7247
+ label: "New donors",
7248
+ val: "146 · 68%",
7249
+ color: "rgb(99, 99, 230)"
7250
+ }, {
7251
+ label: "Returning",
7252
+ val: "69 · 32%",
7253
+ color: "#10B981"
7254
+ }],
7255
+ bottomSummaryValue: "$130.58",
7256
+ bottomSummaryTrend: "8.4% vs last month"
7257
+ })
7258
+ })]
7259
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7260
+ container: true,
7261
+ spacing: 3,
7262
+ sx: {
7263
+ mt: 5
7264
+ },
7265
+ children: /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7266
+ item: true,
7267
+ md: 12,
7268
+ children: /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {})
6077
7269
  })
6078
7270
  })]
6079
7271
  });
@@ -6272,22 +7464,6 @@ var CampaignPerformanceTable = function CampaignPerformanceTable() {
6272
7464
 
6273
7465
  var PaidSection = function PaidSection() {
6274
7466
  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
6275
- var dailyPerformance = {
6276
- label: "Daily Raised vs Spend",
6277
- series: [{
6278
- name: "Raised",
6279
- data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
6280
- }, {
6281
- name: "Spend",
6282
- data: [800, 950, 700, 1100, 900, 1200, 1300]
6283
- }],
6284
- categories: categories
6285
- };
6286
- var spendAllocation = {
6287
- label: "Spend Allocation",
6288
- data: [4500, 2500, 1500, 700],
6289
- categories: ["Ramadan", "Zakat", "Emergency", "General"]
6290
- };
6291
7467
  var roasTrend = {
6292
7468
  label: "ROAS Trend",
6293
7469
  data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
@@ -6298,65 +7474,58 @@ var PaidSection = function PaidSection() {
6298
7474
  sx: {
6299
7475
  display: 'flex',
6300
7476
  gap: 2,
6301
- mb: 5
7477
+ mb: 2
6302
7478
  },
6303
7479
  children: [/*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6304
- title: "Total Raised",
6305
- value: "$9,200",
7480
+ title: "Total Spent",
7481
+ value: "$80,313",
7482
+ subValue: "12% vs last month",
7483
+ icon: iconsMaterial.IndeterminateCheckBoxOutlined,
6306
7484
  sx: {
6307
7485
  flex: 1
6308
7486
  }
6309
7487
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6310
- title: "Ad Spend",
6311
- value: "$9,200",
7488
+ title: "Revinue Raised",
7489
+ value: "$240,398",
7490
+ subValue: "12% vs last month",
7491
+ icon: iconsMaterial.PaidOutlined,
6312
7492
  sx: {
6313
7493
  flex: 1
6314
7494
  }
6315
7495
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6316
7496
  title: "ROAS",
6317
- value: "$9,200",
7497
+ value: "3.0",
7498
+ subValue: "12% vs last month",
7499
+ icon: iconsMaterial.TrendingUp,
6318
7500
  sx: {
6319
7501
  flex: 1
6320
7502
  }
6321
7503
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6322
- title: "Net Raised",
6323
- value: "$9,200",
7504
+ title: "Cost per donor",
7505
+ value: "$373",
7506
+ subValue: "12% vs last month",
7507
+ icon: iconsMaterial.PersonOutlined,
6324
7508
  sx: {
6325
7509
  flex: 1
6326
7510
  }
6327
7511
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6328
- title: "Cost/Result",
6329
- value: "3.0",
7512
+ title: "Conversion rate",
7513
+ value: "3.1",
7514
+ subValue: "12% vs last month",
7515
+ icon: iconsMaterial.Adjust,
6330
7516
  sx: {
6331
7517
  flex: 1
6332
7518
  }
6333
7519
  }), /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6334
- title: "Avg Donation",
6335
- value: "215",
7520
+ title: "Avg donation",
7521
+ value: "$130.58",
7522
+ subValue: "12% vs last month",
7523
+ icon: iconsMaterial.PaidOutlined,
6336
7524
  sx: {
6337
7525
  flex: 1
6338
7526
  }
6339
7527
  })]
6340
- }), /*#__PURE__*/jsxRuntime.jsx(CampaignPerformanceTable, {}), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
6341
- container: true,
6342
- spacing: 3,
6343
- sx: {
6344
- mt: 4
6345
- },
6346
- children: [/*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
6347
- item: dailyPerformance,
6348
- index: 0,
6349
- md: 8,
6350
- type: "bar",
6351
- metric: "Revenue"
6352
- }), /*#__PURE__*/jsxRuntime.jsx(RenderChartCard, {
6353
- item: spendAllocation,
6354
- index: 1,
6355
- md: 4,
6356
- type: "donut",
6357
- metric: "Revenue"
6358
- })]
6359
- }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7528
+ }), /*#__PURE__*/jsxRuntime.jsx(CampaignPerformanceTable, {}), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
6360
7529
  container: true,
6361
7530
  spacing: 3,
6362
7531
  sx: {
@@ -6368,8 +7537,144 @@ var PaidSection = function PaidSection() {
6368
7537
  md: 12,
6369
7538
  type: "area",
6370
7539
  metric: "ROAS",
6371
- isPrimary: true
7540
+ isPrimary: true,
7541
+ isPremium: true
6372
7542
  })
7543
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7544
+ container: true,
7545
+ spacing: 3,
7546
+ sx: {
7547
+ mt: 1
7548
+ },
7549
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7550
+ item: true,
7551
+ xs: 12,
7552
+ md: 8,
7553
+ children: /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
7554
+ title: "Channel performance",
7555
+ subtitle: "Ad platforms ranked by ROAS",
7556
+ columns: ["channel", "spend", "revenue", "ROAS", "CPA", "trend"],
7557
+ gridTemplateColumns: "2.2fr 1fr 1fr 0.8fr 0.8fr 1.2fr",
7558
+ rows: [{
7559
+ id: "M",
7560
+ avatarBg: "#4267B2",
7561
+ name: "Meta Ads",
7562
+ val1: "$32,800",
7563
+ val2: "$112,400",
7564
+ val3: "3.4x",
7565
+ val4: "$340",
7566
+ type: "trend",
7567
+ trendType: "up",
7568
+ trendLabel: "Improving",
7569
+ highlightVal3: true,
7570
+ val3Color: "#22C55E"
7571
+ }, {
7572
+ id: "G",
7573
+ avatarBg: "#4285F4",
7574
+ name: "Google Ads",
7575
+ val1: "$28,200",
7576
+ val2: "$78,300",
7577
+ val3: "2.8x",
7578
+ val4: "$385",
7579
+ type: "trend",
7580
+ trendType: "up",
7581
+ trendLabel: "Improving",
7582
+ highlightVal3: true,
7583
+ val3Color: "#22C55E"
7584
+ }, {
7585
+ id: "T",
7586
+ avatarBg: "#000000",
7587
+ name: "TikTok Ads",
7588
+ val1: "$11,400",
7589
+ val2: "$31,200",
7590
+ val3: "2.7x",
7591
+ val4: "$402",
7592
+ type: "trend",
7593
+ trendType: "up",
7594
+ trendLabel: "Improving",
7595
+ highlightVal3: true,
7596
+ val3Color: "#22C55E"
7597
+ }, {
7598
+ id: "Y",
7599
+ avatarBg: "#FF0000",
7600
+ name: "YouTube",
7601
+ val1: "$5,313",
7602
+ val2: "$12,600",
7603
+ val3: "2.4x",
7604
+ val4: "$443",
7605
+ type: "trend",
7606
+ trendType: "down",
7607
+ trendLabel: "Declining",
7608
+ highlightVal3: true,
7609
+ val3Color: "#EF4444"
7610
+ }, {
7611
+ id: "S",
7612
+ avatarBg: "#FFFC00",
7613
+ name: "Snapchat",
7614
+ val1: "$2,600",
7615
+ val2: "$6,438",
7616
+ val3: "2.5x",
7617
+ val4: "$418",
7618
+ type: "trend",
7619
+ trendType: "up",
7620
+ trendLabel: "Improving",
7621
+ highlightVal3: true,
7622
+ val3Color: "#22C55E"
7623
+ }]
7624
+ })
7625
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7626
+ item: true,
7627
+ xs: 12,
7628
+ md: 4,
7629
+ children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
7630
+ title: "Spend allocation",
7631
+ subtitle: "Where $80.3K went this month",
7632
+ series: [40.8, 35.1, 14.2, 6.6, 3.3],
7633
+ labels: ["Meta Ads", "Google Ads", "TikTok", "YouTube", "Snapchat"],
7634
+ colors: ["#4267B2", "#4285F4", "#000000", "#FF0000", "#FFFC00"],
7635
+ centerLabel: "total spend",
7636
+ centerValue: "$80.3K",
7637
+ items: [{
7638
+ label: "Meta Ads",
7639
+ val: "40.8%",
7640
+ color: "#4267B2"
7641
+ }, {
7642
+ label: "Google Ads",
7643
+ val: "35.1%",
7644
+ color: "#4285F4"
7645
+ }, {
7646
+ label: "TikTok",
7647
+ val: "14.2%",
7648
+ color: "#000000"
7649
+ }, {
7650
+ label: "YouTube",
7651
+ val: "6.6%",
7652
+ color: "#FF0000"
7653
+ }, {
7654
+ label: "Snapchat",
7655
+ val: "3.3%",
7656
+ color: "#FFFC00"
7657
+ }],
7658
+ showBottomSummary: false
7659
+ })
7660
+ })]
7661
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
7662
+ container: true,
7663
+ spacing: 3,
7664
+ sx: {
7665
+ mt: 8
7666
+ },
7667
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7668
+ item: true,
7669
+ xs: 12,
7670
+ md: 7,
7671
+ children: /*#__PURE__*/jsxRuntime.jsx(TopPerformingCampaignsCard, {})
7672
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
7673
+ item: true,
7674
+ xs: 12,
7675
+ md: 5,
7676
+ children: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {})
7677
+ })]
6373
7678
  })]
6374
7679
  });
6375
7680
  };