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