@ammarkhalidfarooq/dashboard-package 0.5.37 → 0.5.39

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 +735 -734
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +735 -734
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -109,7 +109,10 @@ function _iterableToArrayLimit(r, l) {
109
109
  f = true,
110
110
  o = false;
111
111
  try {
112
- if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
112
+ if (i = (t = t.call(r)).next, 0 === l) {
113
+ if (Object(t) !== t) return;
114
+ f = !1;
115
+ } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
113
116
  } catch (r) {
114
117
  o = true, n = r;
115
118
  } finally {
@@ -593,7 +596,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
593
596
  },
594
597
  children: /*#__PURE__*/jsxs(CardContent, {
595
598
  sx: {
596
- p: 3,
599
+ p: item.exportMode ? 2 : 3,
597
600
  flexGrow: 1,
598
601
  display: "flex",
599
602
  flexDirection: "column"
@@ -603,7 +606,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
603
606
  display: "flex",
604
607
  justifyContent: "space-between",
605
608
  alignItems: "flex-start",
606
- mb: isPremium ? 3 : 2
609
+ mb: item.exportMode ? 2 : isPremium ? 3 : 2
607
610
  },
608
611
  children: [isPremium ? /*#__PURE__*/jsxs(Box, {
609
612
  sx: {
@@ -695,7 +698,7 @@ var RenderChartCard = function RenderChartCard(_ref) {
695
698
  },
696
699
  children: item.hideControls ? item.series && /*#__PURE__*/jsx(Box, {
697
700
  sx: {
698
- display: {
701
+ display: item.exportMode ? "flex" : {
699
702
  xs: "none",
700
703
  sm: "flex"
701
704
  },
@@ -900,8 +903,6 @@ function formatNumber(num) {
900
903
  }
901
904
 
902
905
  var PURPLE = "#6363E6";
903
- var GREEN = "#10B981";
904
- var BLUE = "#06B6D4";
905
906
  var REPORT_COLORS = {
906
907
  purple: PURPLE};
907
908
  var formatTrend = function formatTrend(value) {
@@ -1027,7 +1028,7 @@ var buildReportData = function buildReportData() {
1027
1028
  trend: "".concat(formatTrend((_growth$totalRevenue2 = growth === null || growth === void 0 ? void 0 : growth.totalRevenue) !== null && _growth$totalRevenue2 !== void 0 ? _growth$totalRevenue2 : 18), " vs ").concat(dateName || "last month"),
1028
1029
  hideControls: true,
1029
1030
  stacked: true,
1030
- colors: [PURPLE, GREEN, BLUE],
1031
+ colors: ["#6366F1", "#10B981", "#06B6D4"],
1031
1032
  stroke: {
1032
1033
  curve: "smooth",
1033
1034
  width: 3
@@ -1079,37 +1080,6 @@ var buildReportData = function buildReportData() {
1079
1080
  categories: _categories
1080
1081
  });
1081
1082
  }
1082
- var campaignStatus = function campaignStatus(campaign) {
1083
- if (campaign.status) return campaign.status;
1084
- var progress = Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100);
1085
- if (progress >= 95) return "Closing";
1086
- if (progress < 50) return "Slow";
1087
- return "Active";
1088
- };
1089
- var statusStyle = function statusStyle(status) {
1090
- switch (status) {
1091
- case "Slow":
1092
- return {
1093
- statusBg: "#FEF3C7",
1094
- statusColor: "#B45309"
1095
- };
1096
- case "Closing":
1097
- return {
1098
- statusBg: "#DBEAFE",
1099
- statusColor: "#1D4ED8"
1100
- };
1101
- default:
1102
- return {
1103
- statusBg: "#D1FAE5",
1104
- statusColor: "#047857"
1105
- };
1106
- }
1107
- };
1108
- var progressColor = function progressColor(progress) {
1109
- if (progress >= 95) return GREEN;
1110
- if (progress < 50) return "#F59E0B";
1111
- return PURPLE;
1112
- };
1113
1083
  var sampleCampaigns = [{
1114
1084
  title: "Orphan sponsorship — Yemen",
1115
1085
  collectedAmount: 78400,
@@ -1143,20 +1113,17 @@ var buildReportData = function buildReportData() {
1143
1113
  }];
1144
1114
  var campaignSource = ((apiData === null || apiData === void 0 ? void 0 : apiData.activeCampaigns) || []).length ? apiData.activeCampaigns : sampleCampaigns;
1145
1115
  var activeCampaigns = campaignSource.map(function (campaign) {
1146
- var progress = Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100);
1147
- var status = campaignStatus(campaign);
1148
- return _objectSpread2({
1116
+ return {
1149
1117
  id: campaign.campaignName ? campaign.campaignName.split(" ").filter(Boolean).map(function (w) {
1150
1118
  return w[0];
1151
1119
  }).join("").toUpperCase().slice(0, 2) : "??",
1152
1120
  name: campaign.title || "Untitled Campaign",
1153
1121
  val1: "$".concat(formatNumber(campaign.collectedAmount || 0)),
1154
1122
  type: "progress",
1155
- progress: progress,
1156
- progressColor: progressColor(progress),
1123
+ progress: Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100),
1157
1124
  val3: formatNumber(campaign.uniqueDonationsCount || 0),
1158
- status: status
1159
- }, statusStyle(status));
1125
+ val4: "$".concat(formatNumber(campaign.avgGift || 0))
1126
+ };
1160
1127
  });
1161
1128
  return {
1162
1129
  hero: hero,
@@ -3302,8 +3269,9 @@ var GeographyCard = function GeographyCard(_ref4) {
3302
3269
  })
3303
3270
  });
3304
3271
  };
3305
- var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
3306
- var data = [{
3272
+ var TopCampaignsRaisedCard = function TopCampaignsRaisedCard(_ref5) {
3273
+ var dataProp = _ref5.data;
3274
+ var data = dataProp !== null && dataProp !== void 0 ? dataProp : [{
3307
3275
  id: "RK",
3308
3276
  name: "Ramadan kickoff",
3309
3277
  value: "$14,200"
@@ -3349,7 +3317,15 @@ var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
3349
3317
  },
3350
3318
  children: "Raised"
3351
3319
  })]
3352
- }), data.map(function (item, index) {
3320
+ }), data.length === 0 ? /*#__PURE__*/jsx(Typography, {
3321
+ sx: {
3322
+ fontSize: "13px",
3323
+ color: "rgba(0, 0, 0, 0.45)",
3324
+ py: 2,
3325
+ textAlign: "left"
3326
+ },
3327
+ children: "No campaign data for this period."
3328
+ }) : data.map(function (item, index) {
3353
3329
  return /*#__PURE__*/jsxs(Box, {
3354
3330
  sx: {
3355
3331
  display: "flex",
@@ -3399,8 +3375,9 @@ var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
3399
3375
  })]
3400
3376
  });
3401
3377
  };
3402
- var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
3403
- var data = [{
3378
+ var TopCampaignsCTRCard = function TopCampaignsCTRCard(_ref6) {
3379
+ var dataProp = _ref6.data;
3380
+ var data = dataProp !== null && dataProp !== void 0 ? dataProp : [{
3404
3381
  id: "RK",
3405
3382
  name: "Ramadan kickoff",
3406
3383
  value: "12.4%"
@@ -3446,7 +3423,15 @@ var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
3446
3423
  },
3447
3424
  children: "CTR"
3448
3425
  })]
3449
- }), data.map(function (item, index) {
3426
+ }), data.length === 0 ? /*#__PURE__*/jsx(Typography, {
3427
+ sx: {
3428
+ fontSize: "13px",
3429
+ color: "rgba(0, 0, 0, 0.45)",
3430
+ py: 2,
3431
+ textAlign: "left"
3432
+ },
3433
+ children: "No campaign data for this period."
3434
+ }) : data.map(function (item, index) {
3450
3435
  return /*#__PURE__*/jsxs(Box, {
3451
3436
  sx: {
3452
3437
  display: "flex",
@@ -3496,8 +3481,9 @@ var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
3496
3481
  })]
3497
3482
  });
3498
3483
  };
3499
- var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
3500
- var data = [{
3484
+ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard(_ref7) {
3485
+ var dataProp = _ref7.data;
3486
+ var data = dataProp !== null && dataProp !== void 0 ? dataProp : [{
3501
3487
  id: "YO",
3502
3488
  name: "Yemen orphans drive",
3503
3489
  value: "5.2%"
@@ -3543,7 +3529,15 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
3543
3529
  },
3544
3530
  children: "Conv. rate"
3545
3531
  })]
3546
- }), data.map(function (item, index) {
3532
+ }), data.length === 0 ? /*#__PURE__*/jsx(Typography, {
3533
+ sx: {
3534
+ fontSize: "13px",
3535
+ color: "rgba(0, 0, 0, 0.45)",
3536
+ py: 2,
3537
+ textAlign: "left"
3538
+ },
3539
+ children: "No campaign data for this period."
3540
+ }) : data.map(function (item, index) {
3547
3541
  return /*#__PURE__*/jsxs(Box, {
3548
3542
  sx: {
3549
3543
  display: "flex",
@@ -3740,9 +3734,9 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
3740
3734
  })]
3741
3735
  });
3742
3736
  };
3743
- var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref5) {
3744
- var sx = _ref5.sx,
3745
- donorGeographyData = _ref5.donorGeographyData;
3737
+ var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref8) {
3738
+ var sx = _ref8.sx,
3739
+ donorGeographyData = _ref8.donorGeographyData;
3746
3740
  var rawCountries = Array.isArray(donorGeographyData) ? donorGeographyData : (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.countries) || [];
3747
3741
  var data = rawCountries.map(function (item) {
3748
3742
  return {
@@ -4140,115 +4134,173 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
4140
4134
  });
4141
4135
  };
4142
4136
 
4143
- var cardHeight = function cardHeight(exportMode) {
4144
- return exportMode ? 158 : 300;
4137
+ var CARD_SX = {
4138
+ maxHeight: 280
4145
4139
  };
4146
- var ReportDetailsSection = function ReportDetailsSection(_ref) {
4147
- var _orderBumpData$chart, _orderBumpData$peakDa, _referralData$chartDa;
4148
- var reportData = _ref.reportData,
4149
- dateName = _ref.dateName,
4150
- _ref$exportMode = _ref.exportMode,
4151
- exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode,
4152
- _ref$section = _ref.section,
4153
- section = _ref$section === void 0 ? "all" : _ref$section;
4154
- var activeCampaigns = reportData.activeCampaigns,
4155
- donorMix = reportData.donorMix,
4156
- donationTypeData = reportData.donationTypeData,
4157
- donorGeographyData = reportData.donorGeographyData,
4158
- trafficSourceData = reportData.trafficSourceData,
4159
- orderBumpData = reportData.orderBumpData,
4160
- upsellData = reportData.upsellData,
4161
- downsellData = reportData.downsellData,
4162
- referralData = reportData.referralData,
4163
- refundsChargebacksData = reportData.refundsChargebacksData;
4164
- var gridSx = {
4140
+ var GRID_GAP = "6px";
4141
+ var fourColGridSx = function fourColGridSx(exportMode) {
4142
+ return {
4165
4143
  display: "grid",
4166
4144
  gridTemplateColumns: exportMode ? "repeat(4, 1fr)" : {
4167
4145
  xs: "1fr",
4168
- sm: "1fr 1fr",
4169
- lg: "repeat(4, 1fr)"
4146
+ sm: "repeat(2, 1fr)",
4147
+ md: "repeat(4, 1fr)"
4170
4148
  },
4171
- gap: exportMode ? 0.75 : 2
4149
+ gap: GRID_GAP,
4150
+ mt: GRID_GAP,
4151
+ alignItems: "stretch"
4172
4152
  };
4173
- var cardSx = {
4174
- maxHeight: cardHeight(exportMode),
4175
- minHeight: exportMode ? cardHeight(exportMode) : undefined
4176
- };
4177
- var campaignsRow = /*#__PURE__*/jsxs(Box, {
4153
+ };
4154
+ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
4155
+ var _orderBumpData$chart, _orderBumpData$peakDa, _orderBumpData$peakDa2, _referralData$chartDa;
4156
+ var _ref$exportMode = _ref.exportMode,
4157
+ exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode,
4158
+ _ref$section = _ref.section,
4159
+ section = _ref$section === void 0 ? "all" : _ref$section,
4160
+ _ref$activeCampaignsR = _ref.activeCampaignsRows,
4161
+ activeCampaignsRows = _ref$activeCampaignsR === void 0 ? [] : _ref$activeCampaignsR,
4162
+ _ref$donorMix = _ref.donorMix,
4163
+ donorMix = _ref$donorMix === void 0 ? {} : _ref$donorMix,
4164
+ _ref$donationTypeData = _ref.donationTypeData,
4165
+ donationTypeData = _ref$donationTypeData === void 0 ? [] : _ref$donationTypeData,
4166
+ _ref$donorGeographyDa = _ref.donorGeographyData,
4167
+ donorGeographyData = _ref$donorGeographyDa === void 0 ? [] : _ref$donorGeographyDa,
4168
+ _ref$trafficSourceDat = _ref.trafficSourceData,
4169
+ trafficSourceData = _ref$trafficSourceDat === void 0 ? {} : _ref$trafficSourceDat,
4170
+ _ref$orderBumpData = _ref.orderBumpData,
4171
+ orderBumpData = _ref$orderBumpData === void 0 ? {} : _ref$orderBumpData,
4172
+ _ref$upsellData = _ref.upsellData,
4173
+ upsellData = _ref$upsellData === void 0 ? {} : _ref$upsellData,
4174
+ _ref$downsellData = _ref.downsellData,
4175
+ downsellData = _ref$downsellData === void 0 ? {} : _ref$downsellData,
4176
+ _ref$referralData = _ref.referralData,
4177
+ referralData = _ref$referralData === void 0 ? {} : _ref$referralData,
4178
+ _ref$refundsChargebac = _ref.refundsChargebacksData,
4179
+ refundsChargebacksData = _ref$refundsChargebac === void 0 ? [] : _ref$refundsChargebac,
4180
+ _ref$dateName = _ref.dateName,
4181
+ dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName;
4182
+ var _donorMix$newDonors = donorMix.newDonors,
4183
+ newDonors = _donorMix$newDonors === void 0 ? 0 : _donorMix$newDonors,
4184
+ _donorMix$returningDo = donorMix.returningDonors,
4185
+ returningDonors = _donorMix$returningDo === void 0 ? 0 : _donorMix$returningDo,
4186
+ _donorMix$totalMix = donorMix.totalMix,
4187
+ totalMix = _donorMix$totalMix === void 0 ? 0 : _donorMix$totalMix,
4188
+ _donorMix$newPct = donorMix.newPct,
4189
+ newPct = _donorMix$newPct === void 0 ? 0 : _donorMix$newPct,
4190
+ _donorMix$retPct = donorMix.retPct,
4191
+ retPct = _donorMix$retPct === void 0 ? 0 : _donorMix$retPct,
4192
+ _donorMix$avgGift = donorMix.avgGift,
4193
+ avgGift = _donorMix$avgGift === void 0 ? 0 : _donorMix$avgGift,
4194
+ _donorMix$donorMixPre = donorMix.donorMixPrev,
4195
+ donorMixPrev = _donorMix$donorMixPre === void 0 ? 0 : _donorMix$donorMixPre;
4196
+ var campaignsRow = exportMode ? /*#__PURE__*/jsxs(Box, {
4178
4197
  sx: {
4179
4198
  display: "grid",
4180
- gridTemplateColumns: exportMode ? "1fr 200px" : {
4181
- xs: "1fr",
4182
- lg: "2.25fr 1fr"
4183
- },
4184
- gap: exportMode ? 0.75 : 2,
4185
- mb: exportMode ? 0.75 : 2,
4199
+ gridTemplateColumns: "2.25fr 1fr",
4200
+ gap: GRID_GAP,
4186
4201
  alignItems: "stretch"
4187
4202
  },
4188
4203
  children: [/*#__PURE__*/jsx(ActiveCampaignsCard, {
4189
4204
  title: "Active campaigns",
4190
4205
  subtitle: "Live fundraisers ranked by velocity",
4191
- actionLabel: exportMode ? undefined : "View all",
4192
- columns: ["Campaign", "Raised", "Progress", "Donors", "Status"],
4193
- gridTemplateColumns: "2.2fr 0.9fr 1.3fr 0.6fr 0.8fr",
4194
- rows: activeCampaigns,
4195
- compact: exportMode
4206
+ columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
4207
+ rows: activeCampaignsRows
4196
4208
  }), /*#__PURE__*/jsx(DonorMixCard, {
4197
4209
  title: "Donor mix",
4198
4210
  subtitle: "Acquisition vs retention",
4199
- series: [donorMix.newDonors, donorMix.returningDonors],
4211
+ series: [newDonors, returningDonors],
4200
4212
  labels: ["New donors", "Returning"],
4201
- colors: ["#10B981", "rgb(99, 99, 230)"],
4213
+ colors: ["rgb(99, 99, 230)", "#10B981"],
4202
4214
  centerLabel: "donors",
4203
- centerValue: String(donorMix.totalMix),
4215
+ centerValue: String(totalMix),
4204
4216
  items: [{
4205
4217
  label: "New donors",
4206
- val: "".concat(donorMix.newDonors, " \xB7 ").concat(donorMix.newPct, "%"),
4207
- color: "#10B981"
4218
+ val: "".concat(newDonors, " \xB7 ").concat(newPct, "%"),
4219
+ color: "rgb(99, 99, 230)"
4208
4220
  }, {
4209
4221
  label: "Returning",
4210
- val: "".concat(donorMix.returningDonors, " \xB7 ").concat(donorMix.retPct, "%"),
4211
- color: "rgb(99, 99, 230)"
4222
+ val: "".concat(returningDonors, " \xB7 ").concat(retPct, "%"),
4223
+ color: "#10B981"
4212
4224
  }],
4213
- bottomSummaryValue: "$".concat(formatNumber(donorMix.avgGift)),
4214
- bottomSummaryTrend: "".concat(donorMix.donorMixPrev, "% vs ").concat(dateName || "last month"),
4215
- compact: exportMode,
4225
+ bottomSummaryValue: "$".concat(avgGift),
4226
+ bottomSummaryTrend: "".concat(donorMixPrev, "% vs ").concat(dateName || "last month"),
4216
4227
  sx: {
4217
- height: "100%"
4228
+ width: "100%"
4218
4229
  }
4219
4230
  })]
4231
+ }) : /*#__PURE__*/jsxs(Grid, {
4232
+ container: true,
4233
+ spacing: GRID_GAP,
4234
+ sx: {
4235
+ mt: GRID_GAP
4236
+ },
4237
+ children: [/*#__PURE__*/jsx(Grid, {
4238
+ item: true,
4239
+ xs: 12,
4240
+ md: 9,
4241
+ sx: {
4242
+ paddingTop: "0px !important"
4243
+ },
4244
+ children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
4245
+ title: "Active campaigns",
4246
+ subtitle: "Live fundraisers ranked by velocity",
4247
+ columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
4248
+ rows: activeCampaignsRows
4249
+ })
4250
+ }), /*#__PURE__*/jsx(Grid, {
4251
+ item: true,
4252
+ xs: 12,
4253
+ md: 3,
4254
+ sx: {
4255
+ display: "flex",
4256
+ paddingTop: "0px !important",
4257
+ marginTop: {
4258
+ xs: GRID_GAP,
4259
+ md: 0
4260
+ }
4261
+ },
4262
+ children: /*#__PURE__*/jsx(DonorMixCard, {
4263
+ title: "Donor mix",
4264
+ subtitle: "Acquisition vs retention",
4265
+ series: [newDonors, returningDonors],
4266
+ labels: ["New donors", "Returning"],
4267
+ colors: ["rgb(99, 99, 230)", "#10B981"],
4268
+ centerLabel: "donors",
4269
+ centerValue: String(totalMix),
4270
+ items: [{
4271
+ label: "New donors",
4272
+ val: "".concat(newDonors, " \xB7 ").concat(newPct, "%"),
4273
+ color: "rgb(99, 99, 230)"
4274
+ }, {
4275
+ label: "Returning",
4276
+ val: "".concat(returningDonors, " \xB7 ").concat(retPct, "%"),
4277
+ color: "#10B981"
4278
+ }],
4279
+ bottomSummaryValue: "$".concat(avgGift),
4280
+ bottomSummaryTrend: "".concat(donorMixPrev, "% vs ").concat(dateName || "last month"),
4281
+ sx: {
4282
+ width: "100%"
4283
+ }
4284
+ })
4285
+ })]
4220
4286
  });
4221
- var middleCards = /*#__PURE__*/jsxs(Box, {
4222
- sx: gridSx,
4287
+ var middleCards = /*#__PURE__*/jsxs(Fragment, {
4223
4288
  children: [/*#__PURE__*/jsx(DonationTypeBarChart, {
4224
- sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
4225
- p: 1.25,
4226
- borderRadius: 3
4227
- }),
4289
+ sx: CARD_SX,
4228
4290
  donationTypeData: donationTypeData
4229
4291
  }), /*#__PURE__*/jsx(PaidDonorGeographyCard, {
4230
- sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
4231
- p: 1.25,
4232
- borderRadius: 3
4233
- }),
4292
+ sx: CARD_SX,
4234
4293
  donorGeographyData: donorGeographyData
4235
4294
  }), /*#__PURE__*/jsx(RefundsChargebacksCard, {
4236
- sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
4237
- p: 1.25,
4238
- borderRadius: 3
4239
- }),
4295
+ sx: CARD_SX,
4240
4296
  refundsChargebacksData: refundsChargebacksData
4241
4297
  }), /*#__PURE__*/jsx(TrafficSourceCard, {
4242
- sx: _objectSpread2(_objectSpread2({}, cardSx), exportMode && {
4243
- p: 1.25,
4244
- borderRadius: 3
4245
- }),
4298
+ sx: CARD_SX,
4246
4299
  trafficSourceData: (trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.data) || [],
4247
4300
  total: "$".concat(formatNumber((trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.totalRevenue) || 0))
4248
4301
  })]
4249
4302
  });
4250
- var bottomCards = /*#__PURE__*/jsxs(Box, {
4251
- sx: gridSx,
4303
+ var bottomCards = /*#__PURE__*/jsxs(Fragment, {
4252
4304
  children: [/*#__PURE__*/jsx(MetricSparklineCard, {
4253
4305
  title: "Order Bump",
4254
4306
  subtitle: "Revenue trend \xB7 last 30 days",
@@ -4261,18 +4313,18 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
4261
4313
  };
4262
4314
  })) || [],
4263
4315
  footerMetrics: [{
4264
- label: "Avg/day",
4316
+ label: "Avg / Day",
4265
4317
  value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.averagePerDay) || 0))
4266
- }, {
4267
- label: "Peak day",
4268
- value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa = orderBumpData.peakDay) === null || _orderBumpData$peakDa === void 0 ? void 0 : _orderBumpData$peakDa.amount) || 0))
4269
4318
  }, {
4270
4319
  label: "Orders",
4271
4320
  value: formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalOrders) || 0)
4321
+ }, {
4322
+ label: "Peak Day",
4323
+ value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa = orderBumpData.peakDay) === null || _orderBumpData$peakDa === void 0 ? void 0 : _orderBumpData$peakDa.amount) || 0)),
4324
+ subValue: orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa2 = orderBumpData.peakDay) === null || _orderBumpData$peakDa2 === void 0 ? void 0 : _orderBumpData$peakDa2.date
4272
4325
  }],
4273
- sx: cardSx,
4274
- bottomSection: true,
4275
- compact: exportMode
4326
+ sx: CARD_SX,
4327
+ bottomSection: true
4276
4328
  }), /*#__PURE__*/jsx(MetricDonutCard, {
4277
4329
  title: "Upsell",
4278
4330
  subtitle: "Acceptance & raised",
@@ -4281,8 +4333,7 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
4281
4333
  acceptanceTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) || 0).toFixed(1), "%"),
4282
4334
  raisedVal: "$".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raised) || 0)),
4283
4335
  raisedTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) || 0).toFixed(1), "%"),
4284
- sx: cardSx,
4285
- compact: exportMode
4336
+ sx: CARD_SX
4286
4337
  }), /*#__PURE__*/jsx(MetricDonutCard, {
4287
4338
  title: "Downsell",
4288
4339
  subtitle: "Acceptance & raised",
@@ -4291,8 +4342,7 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
4291
4342
  acceptanceTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) || 0), "%"),
4292
4343
  raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raised) || 0)),
4293
4344
  raisedTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) || 0), "%"),
4294
- sx: cardSx,
4295
- compact: exportMode
4345
+ sx: CARD_SX
4296
4346
  }), /*#__PURE__*/jsx(MetricSparklineCard, {
4297
4347
  title: "Referrals",
4298
4348
  subtitle: "Revenue trend \xB7 last 30 days",
@@ -4314,254 +4364,66 @@ var ReportDetailsSection = function ReportDetailsSection(_ref) {
4314
4364
  label: "Conv. rate",
4315
4365
  value: "".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.conversionRate) || 0), "%")
4316
4366
  }],
4317
- sx: cardSx,
4318
- bottomSection: true,
4319
- compact: exportMode
4320
- })]
4321
- });
4322
- if (section === "top") {
4323
- return /*#__PURE__*/jsxs(Box, {
4324
- children: [campaignsRow, middleCards]
4325
- });
4326
- }
4327
- if (section === "bottom") {
4328
- return /*#__PURE__*/jsx(Box, {
4329
- children: bottomCards
4330
- });
4331
- }
4332
- return /*#__PURE__*/jsxs(Box, {
4333
- sx: {
4334
- mt: exportMode ? 0 : 2
4335
- },
4336
- children: [campaignsRow, middleCards, /*#__PURE__*/jsx(Box, {
4337
- sx: {
4338
- mt: exportMode ? 0.75 : 2
4339
- },
4340
- children: bottomCards
4367
+ sx: CARD_SX,
4368
+ bottomSection: true
4341
4369
  })]
4342
4370
  });
4343
- };
4344
-
4345
- var COLORS$1 = ["#6363E6", "#10B981", "#06B6D4"];
4346
- var formatYLabel = function formatYLabel(v) {
4347
- if (v >= 10000) return "$".concat((v / 1000).toFixed(0), "K");
4348
- if (v >= 1000) return "$".concat((v / 1000).toFixed(1), "K");
4349
- return "$".concat(v.toFixed(0));
4350
- };
4351
- var ReportLineChart = function ReportLineChart(_ref) {
4352
- var _ref$series = _ref.series,
4353
- series = _ref$series === void 0 ? [] : _ref$series,
4354
- _ref$categories = _ref.categories,
4355
- categories = _ref$categories === void 0 ? [] : _ref$categories,
4356
- _ref$width = _ref.width,
4357
- width = _ref$width === void 0 ? 730 : _ref$width,
4358
- _ref$height = _ref.height,
4359
- height = _ref$height === void 0 ? 200 : _ref$height;
4360
- var allVals = series.flatMap(function (s) {
4361
- return s.data || [];
4371
+ if (section === "campaigns") return /*#__PURE__*/jsx(Box, {
4372
+ children: campaignsRow
4362
4373
  });
4363
- if (!allVals.length) {
4364
- return /*#__PURE__*/jsx("div", {
4365
- style: {
4366
- height: height,
4367
- background: "#F8FAFF",
4368
- borderRadius: 8
4369
- }
4370
- });
4371
- }
4372
- var PL = 44;
4373
- var PR = 12;
4374
- var PT = 10;
4375
- var PB = 24;
4376
- var IW = width - PL - PR;
4377
- var IH = height - PT - PB;
4378
- var max = Math.max.apply(Math, _toConsumableArray(allVals).concat([0]));
4379
- var range = max || 1;
4380
- var xp = function xp(i, n) {
4381
- return PL + i / Math.max(n - 1, 1) * IW;
4382
- };
4383
- var yp = function yp(v) {
4384
- return PT + IH - v / range * IH;
4385
- };
4386
- var yTicks = [0, 0.25, 0.5, 0.75, 1].map(function (t) {
4387
- return t * range;
4374
+ if (section === "middle") return /*#__PURE__*/jsx(Box, {
4375
+ sx: fourColGridSx(exportMode),
4376
+ children: middleCards
4388
4377
  });
4389
- var step = Math.max(1, Math.floor(categories.length / 6));
4390
- var shownCats = categories.filter(function (_, i) {
4391
- return i % step === 0 || i === categories.length - 1;
4378
+ if (section === "bottom") return /*#__PURE__*/jsx(Box, {
4379
+ sx: fourColGridSx(exportMode),
4380
+ children: bottomCards
4392
4381
  });
4393
- return /*#__PURE__*/jsxs("svg", {
4394
- width: width,
4395
- height: height,
4396
- style: {
4397
- display: "block"
4398
- },
4399
- children: [yTicks.map(function (v, i) {
4400
- var y = yp(v);
4401
- return /*#__PURE__*/jsxs("g", {
4402
- children: [/*#__PURE__*/jsx("line", {
4403
- x1: PL,
4404
- y1: y,
4405
- x2: width - PR,
4406
- y2: y,
4407
- stroke: "#E5E7EB",
4408
- strokeWidth: 1
4409
- }), /*#__PURE__*/jsx("text", {
4410
- x: PL - 6,
4411
- y: y + 4,
4412
- textAnchor: "end",
4413
- fontSize: 10,
4414
- fill: "#9CA3AF",
4415
- children: formatYLabel(v)
4416
- })]
4417
- }, i);
4418
- }), series.map(function (s, si) {
4419
- var data = s.data || [];
4420
- if (!data.length) return null;
4421
- var pathD = data.map(function (v, i) {
4422
- return "".concat(i === 0 ? "M" : "L").concat(xp(i, data.length).toFixed(1), ",").concat(yp(v).toFixed(1));
4423
- }).join(" ");
4424
- return /*#__PURE__*/jsx("path", {
4425
- d: pathD,
4426
- fill: "none",
4427
- stroke: COLORS$1[si % COLORS$1.length],
4428
- strokeWidth: 2.5,
4429
- strokeLinecap: "round",
4430
- strokeLinejoin: "round"
4431
- }, s.name || si);
4432
- }), shownCats.map(function (label, i) {
4433
- var origIdx = categories.indexOf(label);
4434
- var x = xp(origIdx < 0 ? i * step : origIdx, categories.length);
4435
- return /*#__PURE__*/jsx("text", {
4436
- x: x,
4437
- y: height - 6,
4438
- textAnchor: "middle",
4439
- fontSize: 10,
4440
- fill: "#9CA3AF",
4441
- children: label
4442
- }, i);
4382
+ return /*#__PURE__*/jsxs(Box, {
4383
+ children: [campaignsRow, /*#__PURE__*/jsx(Box, {
4384
+ sx: fourColGridSx(exportMode),
4385
+ children: middleCards
4386
+ }), /*#__PURE__*/jsx(Box, {
4387
+ sx: fourColGridSx(exportMode),
4388
+ children: bottomCards
4443
4389
  })]
4444
4390
  });
4445
4391
  };
4446
4392
 
4447
- var LEGEND = [{
4448
- label: "Paid Ads",
4449
- color: "#6363E6"
4450
- }, {
4451
- label: "Organic",
4452
- color: "#10B981"
4453
- }, {
4454
- label: "Email",
4455
- color: "#06B6D4"
4456
- }];
4457
- var ReportExportChartCard = function ReportExportChartCard(_ref) {
4458
- var item = _ref.item,
4459
- _ref$chartWidth = _ref.chartWidth,
4460
- chartWidth = _ref$chartWidth === void 0 ? 730 : _ref$chartWidth;
4461
- return /*#__PURE__*/jsx(Card, {
4462
- sx: {
4463
- width: "100%",
4464
- boxShadow: "0 2px 12px rgba(0,0,0,0.05)",
4465
- borderRadius: 3,
4466
- border: "1px solid #f0f0f0"
4467
- },
4468
- children: /*#__PURE__*/jsxs(CardContent, {
4469
- sx: {
4470
- p: 2,
4471
- "&:last-child": {
4472
- pb: 2
4473
- }
4474
- },
4475
- children: [/*#__PURE__*/jsxs(Box, {
4476
- sx: {
4477
- display: "flex",
4478
- justifyContent: "space-between",
4479
- alignItems: "flex-start",
4480
- mb: 1
4481
- },
4482
- children: [/*#__PURE__*/jsxs(Box, {
4483
- children: [/*#__PURE__*/jsx(Typography, {
4484
- sx: {
4485
- fontWeight: 700,
4486
- fontSize: 15,
4487
- color: "#000",
4488
- mb: 0.25
4489
- },
4490
- children: item.label
4491
- }), /*#__PURE__*/jsx(Typography, {
4492
- sx: {
4493
- fontSize: 11,
4494
- color: "rgba(0,0,0,0.4)",
4495
- mb: 1
4496
- },
4497
- children: item.subtitle || "Last 30 days · daily aggregation"
4498
- }), /*#__PURE__*/jsxs(Box, {
4499
- sx: {
4500
- display: "flex",
4501
- alignItems: "center",
4502
- gap: 1
4503
- },
4504
- children: [/*#__PURE__*/jsx(Typography, {
4505
- sx: {
4506
- fontWeight: 700,
4507
- fontSize: 22,
4508
- color: "#000"
4509
- },
4510
- children: item.value
4511
- }), item.trend && /*#__PURE__*/jsxs(Box, {
4512
- sx: {
4513
- bgcolor: "#D1FAE5",
4514
- color: "#047857",
4515
- px: 1,
4516
- py: 0.25,
4517
- borderRadius: "100px",
4518
- fontSize: 11,
4519
- fontWeight: 600
4520
- },
4521
- children: ["\u25B2 ", item.trend]
4522
- })]
4523
- })]
4524
- }), /*#__PURE__*/jsx(Box, {
4525
- sx: {
4526
- display: "flex",
4527
- gap: 1.5,
4528
- flexShrink: 0
4529
- },
4530
- children: LEGEND.map(function (leg) {
4531
- return /*#__PURE__*/jsxs(Box, {
4532
- sx: {
4533
- display: "flex",
4534
- alignItems: "center",
4535
- gap: 0.5
4536
- },
4537
- children: [/*#__PURE__*/jsx(Box, {
4538
- sx: {
4539
- width: 8,
4540
- height: 8,
4541
- borderRadius: "50%",
4542
- bgcolor: leg.color
4543
- }
4544
- }), /*#__PURE__*/jsx(Typography, {
4545
- sx: {
4546
- fontSize: 10,
4547
- color: "rgba(0,0,0,0.55)"
4548
- },
4549
- children: leg.label
4550
- })]
4551
- }, leg.label);
4552
- })
4553
- })]
4554
- }), /*#__PURE__*/jsx(ReportLineChart, {
4555
- series: item.series || [],
4556
- categories: item.categories || [],
4557
- width: chartWidth,
4558
- height: 185
4559
- })]
4560
- })
4393
+ var ReportDetailsSection = function ReportDetailsSection(_ref) {
4394
+ var reportData = _ref.reportData,
4395
+ dateName = _ref.dateName,
4396
+ _ref$exportMode = _ref.exportMode,
4397
+ exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode,
4398
+ _ref$section = _ref.section,
4399
+ section = _ref$section === void 0 ? "all" : _ref$section;
4400
+ var activeCampaigns = reportData.activeCampaigns,
4401
+ donorMix = reportData.donorMix,
4402
+ donationTypeData = reportData.donationTypeData,
4403
+ donorGeographyData = reportData.donorGeographyData,
4404
+ trafficSourceData = reportData.trafficSourceData,
4405
+ orderBumpData = reportData.orderBumpData,
4406
+ upsellData = reportData.upsellData,
4407
+ downsellData = reportData.downsellData,
4408
+ referralData = reportData.referralData,
4409
+ refundsChargebacksData = reportData.refundsChargebacksData;
4410
+ return /*#__PURE__*/jsx(OverallDetailsGrid, {
4411
+ exportMode: exportMode,
4412
+ section: section,
4413
+ activeCampaignsRows: activeCampaigns,
4414
+ donorMix: donorMix,
4415
+ donationTypeData: donationTypeData,
4416
+ donorGeographyData: donorGeographyData,
4417
+ trafficSourceData: trafficSourceData,
4418
+ orderBumpData: orderBumpData,
4419
+ upsellData: upsellData,
4420
+ downsellData: downsellData,
4421
+ referralData: referralData,
4422
+ refundsChargebacksData: refundsChargebacksData,
4423
+ dateName: dateName
4561
4424
  });
4562
4425
  };
4563
4426
 
4564
- var EXPORT_CHART_W = 730;
4565
4427
  var ReportBody = function ReportBody(_ref) {
4566
4428
  var _ref$apiData = _ref.apiData,
4567
4429
  apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
@@ -4577,31 +4439,29 @@ var ReportBody = function ReportBody(_ref) {
4577
4439
  var activeFilterChips = useMemo(function () {
4578
4440
  return getActiveFilterChips(apiData);
4579
4441
  }, [apiData]);
4580
- var chartBlock = exportMode ? /*#__PURE__*/jsx(ReportExportChartCard, {
4581
- item: reportData.mainChart,
4582
- chartWidth: EXPORT_CHART_W
4583
- }) : /*#__PURE__*/jsx(Grid, {
4442
+ var chartBlock = /*#__PURE__*/jsx(Grid, {
4584
4443
  container: true,
4585
- spacing: 2,
4444
+ spacing: exportMode ? "6px" : 2,
4586
4445
  sx: {
4587
- mb: 0
4446
+ mb: 0,
4447
+ mt: exportMode ? "6px" : 0
4588
4448
  },
4589
4449
  children: /*#__PURE__*/jsx(RenderChartCard, {
4590
4450
  item: _objectSpread2(_objectSpread2({}, reportData.mainChart), {}, {
4591
- height: 320
4451
+ height: exportMode ? 250 : 320,
4452
+ exportMode: exportMode
4592
4453
  }),
4593
4454
  index: 0,
4594
4455
  md: 12,
4595
4456
  isPremium: true,
4596
4457
  isPrimary: true,
4597
- metric: "Revenue",
4598
- type: "line"
4458
+ metric: "Revenue"
4599
4459
  })
4600
4460
  });
4601
4461
  if (variant === "page1") {
4602
4462
  return /*#__PURE__*/jsxs(Box, {
4603
4463
  sx: {
4604
- px: exportMode ? 2 : 0,
4464
+ px: exportMode ? 2.5 : 0,
4605
4465
  py: exportMode ? 1.5 : 0
4606
4466
  },
4607
4467
  children: [/*#__PURE__*/jsx(ReportHeader, {
@@ -4618,21 +4478,35 @@ var ReportBody = function ReportBody(_ref) {
4618
4478
  if (variant === "page2") {
4619
4479
  return /*#__PURE__*/jsx(Box, {
4620
4480
  sx: {
4621
- px: exportMode ? 2 : 0,
4481
+ px: exportMode ? 2.5 : 0,
4622
4482
  py: exportMode ? 1.5 : 0
4623
4483
  },
4624
4484
  children: /*#__PURE__*/jsx(ReportDetailsSection, {
4625
4485
  reportData: reportData,
4626
4486
  dateName: dateName,
4627
4487
  exportMode: exportMode,
4628
- section: "top"
4488
+ section: "campaigns"
4629
4489
  })
4630
4490
  });
4631
4491
  }
4632
4492
  if (variant === "page3") {
4633
4493
  return /*#__PURE__*/jsx(Box, {
4634
4494
  sx: {
4635
- px: exportMode ? 2 : 0,
4495
+ px: exportMode ? 2.5 : 0,
4496
+ py: exportMode ? 1.5 : 0
4497
+ },
4498
+ children: /*#__PURE__*/jsx(ReportDetailsSection, {
4499
+ reportData: reportData,
4500
+ dateName: dateName,
4501
+ exportMode: exportMode,
4502
+ section: "middle"
4503
+ })
4504
+ });
4505
+ }
4506
+ if (variant === "page4") {
4507
+ return /*#__PURE__*/jsx(Box, {
4508
+ sx: {
4509
+ px: exportMode ? 2.5 : 0,
4636
4510
  py: exportMode ? 1.5 : 0
4637
4511
  },
4638
4512
  children: /*#__PURE__*/jsx(ReportDetailsSection, {
@@ -4659,12 +4533,9 @@ var ReportBody = function ReportBody(_ref) {
4659
4533
  };
4660
4534
 
4661
4535
  var PAGE_W = 794;
4662
- var PAGE_H = 1123;
4663
4536
  var pageStyle = {
4664
4537
  width: PAGE_W,
4665
- height: PAGE_H,
4666
4538
  background: "#F3F4F6",
4667
- overflow: "hidden",
4668
4539
  boxSizing: "border-box",
4669
4540
  fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif"
4670
4541
  };
@@ -4687,7 +4558,8 @@ var ReportExportLayout = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
4687
4558
  ref: ref,
4688
4559
  style: {
4689
4560
  display: "inline-flex",
4690
- flexDirection: "column"
4561
+ flexDirection: "column",
4562
+ width: PAGE_W
4691
4563
  },
4692
4564
  children: [/*#__PURE__*/jsx("div", {
4693
4565
  "data-export-page": "1",
@@ -4707,6 +4579,12 @@ var ReportExportLayout = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
4707
4579
  children: /*#__PURE__*/jsx(ReportBody, _objectSpread2(_objectSpread2({}, bodyProps), {}, {
4708
4580
  variant: "page3"
4709
4581
  }))
4582
+ }), /*#__PURE__*/jsx("div", {
4583
+ "data-export-page": "4",
4584
+ style: pageStyle,
4585
+ children: /*#__PURE__*/jsx(ReportBody, _objectSpread2(_objectSpread2({}, bodyProps), {}, {
4586
+ variant: "page4"
4587
+ }))
4710
4588
  })]
4711
4589
  })
4712
4590
  });
@@ -4715,13 +4593,14 @@ ReportExportLayout.displayName = "ReportExportLayout";
4715
4593
 
4716
4594
  /**
4717
4595
  * Captures [data-export-page] elements and saves a multi-page A4 PDF.
4596
+ * Each page is scaled to fit without cropping.
4718
4597
  */
4719
4598
  function exportReportPdf(_x, _x2) {
4720
4599
  return _exportReportPdf.apply(this, arguments);
4721
4600
  }
4722
4601
  function _exportReportPdf() {
4723
4602
  _exportReportPdf = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(container, filename) {
4724
- var pageEls, _yield$Promise$all, _yield$Promise$all2, jsPDF, html2canvasModule, html2canvas, doc, pdfW, pdfH, i, el, canvas, safeDate;
4603
+ var pageEls, _yield$Promise$all, _yield$Promise$all2, jsPDF, html2canvasModule, html2canvas, doc, pdfW, pdfH, i, el, captureHeight, canvas, imgData, imgW, imgH, scale, drawW, drawH, offsetX, offsetY, safeDate;
4725
4604
  return _regenerator().w(function (_context) {
4726
4605
  while (1) switch (_context.n) {
4727
4606
  case 0:
@@ -4759,22 +4638,31 @@ function _exportReportPdf() {
4759
4638
  break;
4760
4639
  }
4761
4640
  el = pageEls[i];
4641
+ captureHeight = el.scrollHeight || el.offsetHeight;
4762
4642
  _context.n = 5;
4763
4643
  return html2canvas(el, {
4764
4644
  scale: 2,
4765
4645
  useCORS: true,
4766
4646
  backgroundColor: "#F3F4F6",
4767
4647
  width: el.offsetWidth,
4768
- height: el.offsetHeight,
4648
+ height: captureHeight,
4769
4649
  windowWidth: el.offsetWidth,
4770
- windowHeight: el.offsetHeight,
4650
+ windowHeight: captureHeight,
4771
4651
  logging: false,
4772
4652
  foreignObjectRendering: false
4773
4653
  });
4774
4654
  case 5:
4775
4655
  canvas = _context.v;
4656
+ imgData = canvas.toDataURL("image/png");
4657
+ imgW = canvas.width;
4658
+ imgH = canvas.height;
4659
+ scale = Math.min(pdfW / imgW, pdfH / imgH);
4660
+ drawW = imgW * scale;
4661
+ drawH = imgH * scale;
4662
+ offsetX = (pdfW - drawW) / 2;
4663
+ offsetY = 0;
4776
4664
  if (i > 0) doc.addPage();
4777
- doc.addImage(canvas.toDataURL("image/png"), "PNG", 0, 0, pdfW, pdfH, undefined, "FAST");
4665
+ doc.addImage(imgData, "PNG", offsetX, offsetY, drawW, drawH, undefined, "FAST");
4778
4666
  case 6:
4779
4667
  i++;
4780
4668
  _context.n = 4;
@@ -4858,7 +4746,7 @@ var NewOverview = function NewOverview(_ref) {
4858
4746
  case 1:
4859
4747
  _context.n = 2;
4860
4748
  return new Promise(function (r) {
4861
- return setTimeout(r, 600);
4749
+ return setTimeout(r, 1500);
4862
4750
  });
4863
4751
  case 2:
4864
4752
  container = exportLayoutRef.current;
@@ -5088,7 +4976,10 @@ var NewOverview = function NewOverview(_ref) {
5088
4976
  })
5089
4977
  }), activeSection === "Email" && /*#__PURE__*/jsx(Box, {
5090
4978
  sx: {},
5091
- children: /*#__PURE__*/jsx(EmailSection$2, {})
4979
+ children: /*#__PURE__*/jsx(EmailSection$2, {
4980
+ apiData: apiData,
4981
+ dateName: dateName
4982
+ })
5092
4983
  })]
5093
4984
  }), showExportLayout && /*#__PURE__*/jsx("div", {
5094
4985
  "aria-hidden": "true",
@@ -14608,7 +14499,7 @@ var MetricCard = function MetricCard(_ref) {
14608
14499
  };
14609
14500
 
14610
14501
  var OverallSection = function OverallSection(_ref) {
14611
- var _apiData$overviewStat, _apiData$overviewStat2, _apiData$overviewStat3, _apiData$overviewStat4, _apiData$overviewStat5, _apiData$overviewStat6, _apiData$overviewStat7, _apiData$overviewStat8, _apiData$overviewStat9, _apiData$overviewStat0, _apiData$overviewStat1, _apiData$overviewStat10, _apiData$roasCard, _apiData$roasCardPrev, _apiData$overviewStat11, _apiData$overviewStat12, _apiData$overviewStat13, _orderBumpData$chart, _orderBumpData$peakDa, _orderBumpData$peakDa2, _referralData$chartDa;
14502
+ var _apiData$overviewStat, _apiData$overviewStat2, _apiData$overviewStat3, _apiData$overviewStat4, _apiData$overviewStat5, _apiData$overviewStat6, _apiData$overviewStat7, _apiData$overviewStat8, _apiData$overviewStat9, _apiData$overviewStat0, _apiData$overviewStat1, _apiData$overviewStat10, _apiData$roasCard, _apiData$roasCardPrev, _apiData$overviewStat11, _apiData$overviewStat12, _apiData$overviewStat13;
14612
14503
  var _ref$apiData = _ref.apiData,
14613
14504
  apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
14614
14505
  primaryCharts = _ref.primaryCharts,
@@ -15109,188 +15000,38 @@ var OverallSection = function OverallSection(_ref) {
15109
15000
  isPrimary: true,
15110
15001
  metric: activeMetric.includes("Raised") || activeMetric.includes("donation") ? "Revenue" : "Donors"
15111
15002
  })
15112
- }), /*#__PURE__*/jsxs(Grid, {
15113
- container: true,
15114
- spacing: "6px",
15115
- sx: {
15116
- mt: "6px"
15003
+ }), /*#__PURE__*/jsx(OverallDetailsGrid, {
15004
+ activeCampaignsRows: activeCampaignsData.map(function (campaign) {
15005
+ return {
15006
+ id: campaign.campaignName ? campaign.campaignName.split(" ").filter(Boolean).map(function (word) {
15007
+ return word[0];
15008
+ }).join("").toUpperCase().slice(0, 2) : "??",
15009
+ name: campaign.title || "Untitled Campaign",
15010
+ val1: "$".concat(formatNumber(campaign.collectedAmount || 0)),
15011
+ type: "progress",
15012
+ progress: Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100),
15013
+ val3: formatNumber(campaign.uniqueDonationsCount || 0),
15014
+ val4: "$".concat(formatNumber(campaign.avgGift || 0))
15015
+ };
15016
+ }),
15017
+ donorMix: {
15018
+ newDonors: newDonorsCount,
15019
+ returningDonors: returningDonorsCount,
15020
+ totalMix: totalDonorsMix,
15021
+ newPct: newDonorsPerc,
15022
+ retPct: returningDonorsPerc,
15023
+ avgGift: avgGift,
15024
+ donorMixPrev: donorMixPrev
15117
15025
  },
15118
- children: [/*#__PURE__*/jsx(Grid, {
15119
- item: true,
15120
- xs: 12,
15121
- md: 9,
15122
- sx: {
15123
- paddingTop: "0px !important"
15124
- },
15125
- children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
15126
- title: "Active campaigns",
15127
- subtitle: "Live fundraisers ranked by velocity",
15128
- columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"
15129
- // "Status",
15130
- ],
15131
- rows: activeCampaignsData.map(function (campaign) {
15132
- return {
15133
- id: campaign.campaignName ? campaign.campaignName.split(" ").filter(Boolean).map(function (word) {
15134
- return word[0];
15135
- }).join("").toUpperCase().slice(0, 2) : "??",
15136
- name: campaign.title || "Untitled Campaign",
15137
- val1: "$".concat(formatNumber(campaign.collectedAmount || 0)),
15138
- type: "progress",
15139
- progress: Math.round((campaign.collectedAmount || 0) / (campaign.usdTargetAmount || 1) * 100),
15140
- val3: formatNumber(campaign.uniqueDonationsCount || 0),
15141
- val4: "$".concat(formatNumber(campaign.avgGift || 0))
15142
- };
15143
- })
15144
- })
15145
- }), /*#__PURE__*/jsx(Grid, {
15146
- item: true,
15147
- xs: 12,
15148
- md: 3,
15149
- sx: {
15150
- display: "flex",
15151
- paddingTop: "0px !important",
15152
- marginTop: {
15153
- xs: "6px",
15154
- md: "0px"
15155
- }
15156
- },
15157
- children: /*#__PURE__*/jsx(DonorMixCard, {
15158
- title: "Donor mix",
15159
- subtitle: "Acquisition vs retention",
15160
- series: [newDonorsCount, returningDonorsCount],
15161
- labels: ["New donors", "Returning"],
15162
- colors: ["rgb(99, 99, 230)", "#10B981"],
15163
- centerLabel: "donors",
15164
- centerValue: totalDonorsMix.toString(),
15165
- items: [{
15166
- label: "New donors",
15167
- val: "".concat(newDonorsCount, " \xB7 ").concat(newDonorsPerc, "%"),
15168
- color: "rgb(99, 99, 230)"
15169
- }, {
15170
- label: "Returning",
15171
- val: "".concat(returningDonorsCount, " \xB7 ").concat(returningDonorsPerc, "%"),
15172
- color: "#10B981"
15173
- }],
15174
- bottomSummaryValue: "$".concat(avgGift),
15175
- bottomSummaryTrend: "".concat(donorMixPrev, "% vs ").concat(dateName || "last month"),
15176
- sx: {
15177
- width: "100%"
15178
- }
15179
- })
15180
- })]
15181
- }), /*#__PURE__*/jsxs(Box, {
15182
- sx: {
15183
- display: "grid",
15184
- gridTemplateColumns: {
15185
- xs: "1fr",
15186
- // 1 card
15187
- sm: "repeat(2, 1fr)",
15188
- // 2 cards
15189
- md: "repeat(4, 1fr)" // 4 cards
15190
- },
15191
- gap: "6px",
15192
- mt: "6px",
15193
- alignItems: "stretch"
15194
- },
15195
- children: [/*#__PURE__*/jsx(DonationTypeBarChart, {
15196
- sx: {
15197
- maxHeight: 280
15198
- },
15199
- donationTypeData: donationTypeData
15200
- }), /*#__PURE__*/jsx(PaidDonorGeographyCard, {
15201
- sx: {
15202
- maxHeight: 280
15203
- },
15204
- donorGeographyData: donorGeographyData
15205
- }), /*#__PURE__*/jsx(RefundsChargebacksCard, {
15206
- sx: {
15207
- maxHeight: 280
15208
- },
15209
- refundsChargebacksData: refundsChargebacksData
15210
- }), /*#__PURE__*/jsx(TrafficSourceCard, {
15211
- sx: {
15212
- maxHeight: 280
15213
- },
15214
- trafficSourceData: (trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.data) || [],
15215
- total: "$".concat(formatNumber((trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.totalRevenue) || 0))
15216
- }), /*#__PURE__*/jsx(MetricSparklineCard, {
15217
- title: "Order Bump",
15218
- subtitle: "Revenue trend \xB7 last 30 days",
15219
- value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalRevenue) || 0)),
15220
- trend: "".concat((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.growthPercentage) >= 0 ? "▲" : "▼", " ").concat(Math.abs((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.growthPercentage) || 0).toFixed(1), "% vs last month"),
15221
- chartData: (orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$chart = orderBumpData.chart) === null || _orderBumpData$chart === void 0 ? void 0 : _orderBumpData$chart.map(function (item) {
15222
- return {
15223
- label: item.label,
15224
- value: item.revenue
15225
- };
15226
- })) || [],
15227
- footerMetrics: [{
15228
- label: "Avg / Day",
15229
- value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.averagePerDay) || 0))
15230
- }, {
15231
- label: "Orders",
15232
- value: formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalOrders) || 0)
15233
- }, {
15234
- label: "Peak Day",
15235
- value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa = orderBumpData.peakDay) === null || _orderBumpData$peakDa === void 0 ? void 0 : _orderBumpData$peakDa.amount) || 0)),
15236
- subValue: orderBumpData === null || orderBumpData === void 0 || (_orderBumpData$peakDa2 = orderBumpData.peakDay) === null || _orderBumpData$peakDa2 === void 0 ? void 0 : _orderBumpData$peakDa2.date
15237
- }],
15238
- sx: {
15239
- maxHeight: 280
15240
- },
15241
- bottomSection: true
15242
- }), /*#__PURE__*/jsx(MetricDonutCard, {
15243
- title: "Upsell",
15244
- subtitle: "Acceptance & raised",
15245
- acceptanceRate: (upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0,
15246
- acceptanceVal: "".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.totalUpsellsAttached) || 0)),
15247
- acceptanceTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceGrowth) || 0).toFixed(1), "%"),
15248
- raisedVal: "$".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raised) || 0)),
15249
- raisedTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) || 0).toFixed(1), "%"),
15250
- sx: {
15251
- maxHeight: 280
15252
- }
15253
- }), /*#__PURE__*/jsx(MetricDonutCard, {
15254
- title: "Downsell",
15255
- subtitle: "Acceptance & raised",
15256
- acceptanceRate: (downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0,
15257
- acceptanceVal: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0), "%"),
15258
- acceptanceTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) || 0), "%"),
15259
- raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raised) || 0)),
15260
- raisedTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) || 0), "%"),
15261
- sx: {
15262
- maxHeight: 280
15263
- }
15264
- }), /*#__PURE__*/jsx(MetricSparklineCard, {
15265
- title: "Referrals",
15266
- subtitle: "Revenue trend \xB7 last 30 days",
15267
- value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalRevenue) || 0)),
15268
- trend: "\u25B2 ".concat((referralData === null || referralData === void 0 ? void 0 : referralData.growthPercentage) || 0, "% vs last month"),
15269
- chartData: (referralData === null || referralData === void 0 || (_referralData$chartDa = referralData.chartData) === null || _referralData$chartDa === void 0 ? void 0 : _referralData$chartDa.map(function (item) {
15270
- return {
15271
- label: item.date,
15272
- value: item.revenue
15273
- };
15274
- })) || []
15275
- // chartData={
15276
- // referralData?.chartData?.map(item => item.revenue) || []
15277
- // }
15278
- ,
15279
- footerMetrics: [{
15280
- label: "Referrers",
15281
- value: formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalReferrers) || 0)
15282
- }, {
15283
- label: "Avg gift",
15284
- value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.averageGift) || 0))
15285
- }, {
15286
- label: "Conv. rate",
15287
- value: "".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.conversionRate) || 0), "%")
15288
- }],
15289
- sx: {
15290
- maxHeight: 280
15291
- },
15292
- bottomSection: true
15293
- })]
15026
+ donationTypeData: donationTypeData,
15027
+ donorGeographyData: donorGeographyData,
15028
+ trafficSourceData: trafficSourceData,
15029
+ orderBumpData: orderBumpData,
15030
+ upsellData: upsellData,
15031
+ downsellData: downsellData,
15032
+ referralData: referralData,
15033
+ refundsChargebacksData: refundsChargebacksData,
15034
+ dateName: dateName
15294
15035
  })]
15295
15036
  });
15296
15037
  };
@@ -15610,10 +15351,10 @@ var PaidSection$1 = /*#__PURE__*/Object.freeze({
15610
15351
  default: PaidSection
15611
15352
  });
15612
15353
 
15613
- var formatGrowth = function formatGrowth(value, dateName) {
15354
+ var formatGrowth$1 = function formatGrowth(value, dateName) {
15614
15355
  return "".concat(Number(value !== null && value !== void 0 ? value : 0).toFixed(2), "% vs ").concat(dateName || "previous period");
15615
15356
  };
15616
- var mapTimeSeries = function mapTimeSeries(series) {
15357
+ var mapTimeSeries$1 = function mapTimeSeries(series) {
15617
15358
  if (!Array.isArray(series) || series.length === 0) {
15618
15359
  return {
15619
15360
  categories: [],
@@ -15643,14 +15384,14 @@ var OrganicSection = function OrganicSection(_ref) {
15643
15384
  var overview = (apiData === null || apiData === void 0 ? void 0 : apiData.overview) || {};
15644
15385
  var growth = (overview === null || overview === void 0 ? void 0 : overview.growthPercentage) || {};
15645
15386
  var hasOrganicOverview = Boolean(apiData === null || apiData === void 0 ? void 0 : apiData.overview);
15646
- var organicUsersSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.organicUsers);
15647
- var donationsSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations);
15648
- var conversionSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.conversionRate);
15649
- var revenueSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue);
15650
- var avgDonationSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.avgDonations);
15387
+ var organicUsersSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.organicUsers);
15388
+ var donationsSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations);
15389
+ var conversionSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.conversionRate);
15390
+ var revenueSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue);
15391
+ var avgDonationSeries = mapTimeSeries$1(apiData === null || apiData === void 0 ? void 0 : apiData.avgDonations);
15651
15392
  var fallbackCategories = organicUsersSeries.categories.length ? organicUsersSeries.categories : ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
15652
15393
  var growthCaption = function growthCaption(key) {
15653
- return formatGrowth(growth[key], dateName);
15394
+ return formatGrowth$1(growth[key], dateName);
15654
15395
  };
15655
15396
  var metricInfo = useMemo(function () {
15656
15397
  var _overview$totalRevenu2, _overview$overallAVGD2, _overview$organicUser, _apiData$topOrganicKe, _overview$totalDonati, _overview$conversionR, _overview$totalRevenu3, _overview$overallAVGD3;
@@ -16005,13 +15746,42 @@ var OrganicSection$1 = /*#__PURE__*/Object.freeze({
16005
15746
  default: OrganicSection
16006
15747
  });
16007
15748
 
15749
+ var formatCategoryLabel = function formatCategoryLabel(val) {
15750
+ if (!val || typeof val !== "string") return val;
15751
+ var ddMmYyyy = val.match(/^(\d{2})-(\d{2})-(\d{4})$/);
15752
+ if (ddMmYyyy) {
15753
+ var _ddMmYyyy = _slicedToArray(ddMmYyyy, 4),
15754
+ day = _ddMmYyyy[1],
15755
+ month = _ddMmYyyy[2],
15756
+ year = _ddMmYyyy[3];
15757
+ var _date = new Date(Number(year), Number(month) - 1, Number(day));
15758
+ if (!Number.isNaN(_date.getTime())) {
15759
+ return _date.toLocaleDateString("en-US", {
15760
+ month: "short",
15761
+ day: "numeric"
15762
+ });
15763
+ }
15764
+ }
15765
+ var date = new Date(val);
15766
+ if (!Number.isNaN(date.getTime())) {
15767
+ return date.toLocaleDateString("en-US", {
15768
+ month: "short",
15769
+ day: "numeric"
15770
+ });
15771
+ }
15772
+ return val;
15773
+ };
16008
15774
  var EmailTrendCard = function EmailTrendCard(_ref) {
16009
15775
  var title = _ref.title,
16010
15776
  subtitle = _ref.subtitle,
16011
15777
  value = _ref.value,
16012
15778
  trend = _ref.trend,
16013
- series = _ref.series,
15779
+ _ref$series = _ref.series,
15780
+ series = _ref$series === void 0 ? [] : _ref$series,
15781
+ trendData = _ref.trendData,
15782
+ trendSeries = _ref.trendSeries,
16014
15783
  colors = _ref.colors,
15784
+ categoriesProp = _ref.categories,
16015
15785
  _ref$yAxisMax = _ref.yAxisMax,
16016
15786
  yAxisMax = _ref$yAxisMax === void 0 ? 60 : _ref$yAxisMax,
16017
15787
  _ref$yAxisTickAmount = _ref.yAxisTickAmount,
@@ -16020,6 +15790,47 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16020
15790
  yAxisFormatter = _ref$yAxisFormatter === void 0 ? function (val) {
16021
15791
  return "".concat(val, "%");
16022
15792
  } : _ref$yAxisFormatter;
15793
+ var categories = useMemo(function () {
15794
+ var _trendSeries$;
15795
+ if (Array.isArray(trendSeries) && ((_trendSeries$ = trendSeries[0]) === null || _trendSeries$ === void 0 || (_trendSeries$ = _trendSeries$.data) === null || _trendSeries$ === void 0 ? void 0 : _trendSeries$.length) > 0) {
15796
+ return trendSeries[0].data.map(function (item) {
15797
+ return item.date;
15798
+ });
15799
+ }
15800
+ if (Array.isArray(trendData) && trendData.length > 0) {
15801
+ return trendData.map(function (item) {
15802
+ return item.date;
15803
+ });
15804
+ }
15805
+ return categoriesProp !== null && categoriesProp !== void 0 ? categoriesProp : [];
15806
+ }, [trendData, trendSeries, categoriesProp]);
15807
+ var chartSeries = useMemo(function () {
15808
+ if (Array.isArray(trendSeries) && trendSeries.length > 0) {
15809
+ return trendSeries.map(function (item) {
15810
+ var _item$data;
15811
+ return {
15812
+ name: item.name,
15813
+ data: ((_item$data = item.data) !== null && _item$data !== void 0 ? _item$data : []).map(function (point) {
15814
+ var _point$value;
15815
+ return (_point$value = point.value) !== null && _point$value !== void 0 ? _point$value : 0;
15816
+ }),
15817
+ dashed: item.dashed
15818
+ };
15819
+ });
15820
+ }
15821
+ if (Array.isArray(trendData) && trendData.length > 0) {
15822
+ var _series$0$name, _series$, _series$2;
15823
+ return [{
15824
+ name: (_series$0$name = (_series$ = series[0]) === null || _series$ === void 0 ? void 0 : _series$.name) !== null && _series$0$name !== void 0 ? _series$0$name : "Value",
15825
+ data: trendData.map(function (item) {
15826
+ var _item$value;
15827
+ return (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 0;
15828
+ }),
15829
+ dashed: (_series$2 = series[0]) === null || _series$2 === void 0 ? void 0 : _series$2.dashed
15830
+ }];
15831
+ }
15832
+ return series;
15833
+ }, [trendData, trendSeries, series]);
16023
15834
  var chartOptions = {
16024
15835
  chart: {
16025
15836
  type: "area",
@@ -16034,7 +15845,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16034
15845
  stroke: {
16035
15846
  curve: "smooth",
16036
15847
  width: 2,
16037
- dashArray: series.map(function (s) {
15848
+ dashArray: chartSeries.map(function (s) {
16038
15849
  return s.dashed ? 5 : 0;
16039
15850
  })
16040
15851
  },
@@ -16049,14 +15860,18 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16049
15860
  },
16050
15861
  colors: colors,
16051
15862
  xaxis: {
16052
- categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
15863
+ categories: categories,
15864
+ tickAmount: 5,
16053
15865
  labels: {
16054
15866
  show: true,
15867
+ rotate: 0,
15868
+ hideOverlappingLabels: true,
16055
15869
  style: {
16056
- colors: 'rgba(0, 0, 0, 0.3)',
16057
- fontSize: '10px'
15870
+ colors: "rgba(0, 0, 0, 0.3)",
15871
+ fontSize: "10px"
16058
15872
  },
16059
- offsetY: -5
15873
+ offsetY: -5,
15874
+ formatter: formatCategoryLabel
16060
15875
  },
16061
15876
  axisBorder: {
16062
15877
  show: false
@@ -16064,7 +15879,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16064
15879
  axisTicks: {
16065
15880
  show: false
16066
15881
  },
16067
- position: 'bottom'
15882
+ position: "bottom"
16068
15883
  },
16069
15884
  yaxis: {
16070
15885
  max: yAxisMax,
@@ -16072,8 +15887,8 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16072
15887
  labels: {
16073
15888
  show: true,
16074
15889
  style: {
16075
- colors: 'rgba(0, 0, 0, 0.3)',
16076
- fontSize: '10px'
15890
+ colors: "rgba(0, 0, 0, 0.3)",
15891
+ fontSize: "10px"
16077
15892
  },
16078
15893
  formatter: yAxisFormatter
16079
15894
  }
@@ -16102,11 +15917,11 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16102
15917
  enabled: false
16103
15918
  },
16104
15919
  legend: {
16105
- show: series.length > 1,
16106
- position: 'bottom',
16107
- horizontalAlign: 'left',
16108
- fontSize: '11px',
16109
- fontFamily: 'Inter, sans-serif',
15920
+ show: chartSeries.length > 1,
15921
+ position: "bottom",
15922
+ horizontalAlign: "left",
15923
+ fontSize: "11px",
15924
+ fontFamily: "Inter, sans-serif",
16110
15925
  offsetY: -5,
16111
15926
  markers: {
16112
15927
  width: 8,
@@ -16119,7 +15934,13 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16119
15934
  }
16120
15935
  },
16121
15936
  tooltip: {
16122
- theme: 'light'
15937
+ theme: "light",
15938
+ x: {
15939
+ formatter: function formatter(_, _ref2) {
15940
+ var dataPointIndex = _ref2.dataPointIndex;
15941
+ return formatCategoryLabel(categories[dataPointIndex]);
15942
+ }
15943
+ }
16123
15944
  }
16124
15945
  };
16125
15946
  return /*#__PURE__*/jsxs(Card, {
@@ -16136,7 +15957,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16136
15957
  children: [/*#__PURE__*/jsxs(Box, {
16137
15958
  sx: {
16138
15959
  mb: 1,
16139
- textAlign: 'left'
15960
+ textAlign: "left"
16140
15961
  },
16141
15962
  children: [/*#__PURE__*/jsx(Typography, {
16142
15963
  sx: {
@@ -16182,7 +16003,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16182
16003
  },
16183
16004
  children: [/*#__PURE__*/jsx("span", {
16184
16005
  style: {
16185
- fontSize: '10px'
16006
+ fontSize: "10px"
16186
16007
  },
16187
16008
  children: "\u25B2"
16188
16009
  }), " ", trend]
@@ -16196,7 +16017,7 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16196
16017
  },
16197
16018
  children: /*#__PURE__*/jsx(ReactApexChart, {
16198
16019
  options: chartOptions,
16199
- series: series,
16020
+ series: chartSeries,
16200
16021
  type: "area",
16201
16022
  height: "100%"
16202
16023
  })
@@ -16204,109 +16025,282 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
16204
16025
  });
16205
16026
  };
16206
16027
 
16207
- var EmailSection = function EmailSection() {
16028
+ var formatGrowth = function formatGrowth(value, dateName) {
16029
+ return "".concat(Number(value !== null && value !== void 0 ? value : 0).toFixed(2), "% vs ").concat(dateName || "previous period");
16030
+ };
16031
+ var mapTimeSeries = function mapTimeSeries(series) {
16032
+ if (!Array.isArray(series) || series.length === 0) {
16033
+ return {
16034
+ categories: [],
16035
+ data: []
16036
+ };
16037
+ }
16038
+ return {
16039
+ categories: series.map(function (item) {
16040
+ return item.date;
16041
+ }),
16042
+ data: series.map(function (item) {
16043
+ var _item$value;
16044
+ return (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 0;
16045
+ })
16046
+ };
16047
+ };
16048
+ var getCampaignInitials = function getCampaignInitials() {
16049
+ var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
16050
+ var words = name.trim().split(/\s+/).filter(Boolean);
16051
+ if (words.length >= 2) {
16052
+ return (words[0][0] + words[1][0]).toUpperCase();
16053
+ }
16054
+ return name.slice(0, 2).toUpperCase() || "—";
16055
+ };
16056
+ var computeYAxisMax = function computeYAxisMax(values) {
16057
+ var defaultMax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
16058
+ var max = Math.max.apply(Math, _toConsumableArray(values.length ? values : [0]).concat([0]));
16059
+ return max === 0 ? defaultMax : Math.ceil(max * 1.2);
16060
+ };
16061
+ var formatTrendBadge = function formatTrendBadge(value) {
16062
+ var isPercentage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
16063
+ var num = Number(value !== null && value !== void 0 ? value : 0);
16064
+ if (isPercentage) {
16065
+ return "".concat(num >= 0 ? "+" : "").concat(num.toFixed(1), "pp");
16066
+ }
16067
+ return "".concat(num >= 0 ? "+" : "").concat(num.toFixed(1), "%");
16068
+ };
16069
+ var EmailSection = function EmailSection(_ref) {
16070
+ var _deliverability$openR2, _deliverability$total2, _deliverability$bounc2;
16071
+ var _ref$apiData = _ref.apiData,
16072
+ apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
16073
+ _ref$dateName = _ref.dateName,
16074
+ dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName;
16208
16075
  var _useState = useState("Total raised"),
16209
16076
  _useState2 = _slicedToArray(_useState, 2),
16210
16077
  activeMetric = _useState2[0],
16211
16078
  setActiveMetric = _useState2[1];
16212
- var metricInfo = {
16213
- "Total raised": {
16214
- value: "$".concat(formatNumber(48920)),
16215
- subValue: "12% vs last month",
16216
- icon: /*#__PURE__*/jsx(PaidOutlined, {}),
16217
- data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
16218
- money: true,
16219
- error: false,
16220
- warning: false
16221
- },
16222
- Donations: {
16223
- value: "62",
16224
- subValue: "12% vs last month",
16225
- icon: /*#__PURE__*/jsx(FavoriteOutlined, {}),
16226
- data: [4, 8, 5, 12, 10, 11, 12],
16227
- money: false,
16228
- error: false,
16229
- warning: false
16230
- },
16231
- "Conversion rate": {
16232
- value: "3.2%",
16233
- subValue: "12% vs last month",
16234
- icon: /*#__PURE__*/jsx(Adjust, {}),
16235
- data: [2.8, 3.1, 2.9, 3.4, 3.2, 3.1, 3.2],
16236
- money: false,
16237
- error: false,
16238
- warning: false
16239
- },
16240
- CTR: {
16241
- value: "8.1%",
16242
- subValue: "12% vs last month",
16243
- icon: /*#__PURE__*/jsx(NotInterested, {}),
16244
- data: [7.2, 8.4, 7.8, 8.9, 8.1, 8.0, 8.1],
16245
- money: false,
16246
- error: false,
16247
- warning: false
16248
- },
16249
- "Revenue per email": {
16250
- value: "$".concat(formatNumber(2.45)),
16251
- subValue: "12% vs last month",
16252
- icon: /*#__PURE__*/jsx(IndeterminateCheckBoxOutlined, {}),
16253
- data: [2.1, 2.5, 2.3, 2.8, 2.4, 2.4, 2.45],
16254
- money: true,
16255
- error: false,
16256
- warning: false
16257
- },
16258
- "Open rate": {
16259
- value: "42.3%",
16260
- subValue: "12% vs last month",
16261
- icon: /*#__PURE__*/jsx(Email, {}),
16262
- data: [38, 44, 40, 46, 42, 41, 42.3],
16263
- money: false,
16264
- error: false,
16265
- warning: false
16266
- },
16267
- Clicks: {
16268
- value: "1,612",
16269
- subValue: "12% vs last month",
16270
- icon: /*#__PURE__*/jsx(NearMe, {}),
16271
- data: [210, 240, 220, 280, 250, 245, 245],
16272
- money: false,
16273
- error: false,
16274
- warning: false
16275
- },
16276
- "Unique Clicks": {
16277
- value: "".concat(formatNumber(1148)),
16278
- subValue: "12% vs last month",
16279
- icon: /*#__PURE__*/jsx(NearMe, {}),
16280
- data: [150, 180, 160, 210, 190, 185, 185],
16281
- money: false,
16282
- error: false,
16283
- warning: false
16284
- },
16285
- "Bounce rate": {
16286
- value: "1.8%",
16287
- subValue: "12% vs last month",
16288
- icon: /*#__PURE__*/jsx(HighlightOff, {}),
16289
- data: [2.1, 1.9, 1.8, 1.7, 1.8, 1.8, 1.8],
16290
- money: false,
16291
- error: false,
16292
- warning: false
16293
- },
16294
- "Revenue per Click": {
16295
- value: "$".concat(formatNumber(30.35)),
16296
- subValue: "12% vs last month",
16297
- icon: /*#__PURE__*/jsx(HighlightOff, {}),
16298
- data: [28, 32, 29, 34, 30, 30, 30.35],
16299
- money: true,
16300
- error: false,
16301
- warning: false
16302
- }
16079
+ var overview = (apiData === null || apiData === void 0 ? void 0 : apiData.overview) || {};
16080
+ var overviewGrowth = (overview === null || overview === void 0 ? void 0 : overview.growthPercentage) || {};
16081
+ var deliverability = (apiData === null || apiData === void 0 ? void 0 : apiData.deliverability) || {};
16082
+ var deliverabilityGrowth = (deliverability === null || deliverability === void 0 ? void 0 : deliverability.growthPercentage) || {};
16083
+ var hasEmailOverview = Boolean(apiData === null || apiData === void 0 ? void 0 : apiData.overview);
16084
+ var openRateTrend = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.openRateTrend);
16085
+ var totalClicksTrend = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.totalClicksTrend);
16086
+ var uniqueClicksTrend = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.uniqueClicksTrend);
16087
+ var bounceRateTrend = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.bounceRateTrend);
16088
+ var growthCaption = function growthCaption(key) {
16089
+ var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : overviewGrowth;
16090
+ return formatGrowth(source[key], dateName);
16303
16091
  };
16092
+ var metricInfo = useMemo(function () {
16093
+ var _overview$totalRevenu, _overview$totalDonati, _overview$conversionR, _overview$ctr, _overview$revenuePerE, _deliverability$openR, _deliverability$total, _deliverability$uniqu, _deliverability$bounc, _deliverability$reven;
16094
+ if (!hasEmailOverview) {
16095
+ return {
16096
+ "Total raised": {
16097
+ value: "$".concat(formatNumber(48920)),
16098
+ subValue: "12% vs last month",
16099
+ icon: /*#__PURE__*/jsx(PaidOutlined, {}),
16100
+ money: true,
16101
+ error: false,
16102
+ warning: false
16103
+ },
16104
+ Donations: {
16105
+ value: "62",
16106
+ subValue: "12% vs last month",
16107
+ icon: /*#__PURE__*/jsx(FavoriteOutlined, {}),
16108
+ money: false,
16109
+ error: false,
16110
+ warning: false
16111
+ },
16112
+ "Conversion rate": {
16113
+ value: "3.2%",
16114
+ subValue: "12% vs last month",
16115
+ icon: /*#__PURE__*/jsx(Adjust, {}),
16116
+ money: false,
16117
+ error: false,
16118
+ warning: false
16119
+ },
16120
+ CTR: {
16121
+ value: "8.1%",
16122
+ subValue: "12% vs last month",
16123
+ icon: /*#__PURE__*/jsx(NotInterested, {}),
16124
+ money: false,
16125
+ error: false,
16126
+ warning: false
16127
+ },
16128
+ "Revenue per email": {
16129
+ value: "$".concat(formatNumber(2.45)),
16130
+ subValue: "12% vs last month",
16131
+ icon: /*#__PURE__*/jsx(IndeterminateCheckBoxOutlined, {}),
16132
+ money: true,
16133
+ error: false,
16134
+ warning: false
16135
+ },
16136
+ "Open rate": {
16137
+ value: "42.3%",
16138
+ subValue: "12% vs last month",
16139
+ icon: /*#__PURE__*/jsx(Email, {}),
16140
+ money: false,
16141
+ error: false,
16142
+ warning: false
16143
+ },
16144
+ Clicks: {
16145
+ value: "1,612",
16146
+ subValue: "12% vs last month",
16147
+ icon: /*#__PURE__*/jsx(NearMe, {}),
16148
+ money: false,
16149
+ error: false,
16150
+ warning: false
16151
+ },
16152
+ "Unique Clicks": {
16153
+ value: formatNumber(1148),
16154
+ subValue: "12% vs last month",
16155
+ icon: /*#__PURE__*/jsx(NearMe, {}),
16156
+ money: false,
16157
+ error: false,
16158
+ warning: false
16159
+ },
16160
+ "Bounce rate": {
16161
+ value: "1.8%",
16162
+ subValue: "12% vs last month",
16163
+ icon: /*#__PURE__*/jsx(HighlightOff, {}),
16164
+ money: false,
16165
+ error: false,
16166
+ warning: false
16167
+ },
16168
+ "Revenue per Click": {
16169
+ value: "$".concat(formatNumber(30.35)),
16170
+ subValue: "12% vs last month",
16171
+ icon: /*#__PURE__*/jsx(HighlightOff, {}),
16172
+ money: true,
16173
+ error: false,
16174
+ warning: false
16175
+ }
16176
+ };
16177
+ }
16178
+ return {
16179
+ "Total raised": {
16180
+ value: "$".concat(formatNumber((_overview$totalRevenu = overview.totalRevenue) !== null && _overview$totalRevenu !== void 0 ? _overview$totalRevenu : 0)),
16181
+ subValue: growthCaption("totalRevenue"),
16182
+ icon: /*#__PURE__*/jsx(PaidOutlined, {}),
16183
+ money: true,
16184
+ error: false,
16185
+ warning: false
16186
+ },
16187
+ Donations: {
16188
+ value: formatNumber((_overview$totalDonati = overview.totalDonations) !== null && _overview$totalDonati !== void 0 ? _overview$totalDonati : 0),
16189
+ subValue: growthCaption("totalDonations"),
16190
+ icon: /*#__PURE__*/jsx(FavoriteOutlined, {}),
16191
+ money: false,
16192
+ error: false,
16193
+ warning: false
16194
+ },
16195
+ "Conversion rate": {
16196
+ value: "".concat(Number((_overview$conversionR = overview.conversionRate) !== null && _overview$conversionR !== void 0 ? _overview$conversionR : 0).toFixed(2), "%"),
16197
+ subValue: growthCaption("conversionRate"),
16198
+ icon: /*#__PURE__*/jsx(Adjust, {}),
16199
+ money: false,
16200
+ error: false,
16201
+ warning: false
16202
+ },
16203
+ CTR: {
16204
+ value: "".concat(Number((_overview$ctr = overview.ctr) !== null && _overview$ctr !== void 0 ? _overview$ctr : 0).toFixed(2), "%"),
16205
+ subValue: growthCaption("ctr"),
16206
+ icon: /*#__PURE__*/jsx(NotInterested, {}),
16207
+ money: false,
16208
+ error: false,
16209
+ warning: false
16210
+ },
16211
+ "Revenue per email": {
16212
+ value: "$".concat(formatNumber((_overview$revenuePerE = overview.revenuePerEmail) !== null && _overview$revenuePerE !== void 0 ? _overview$revenuePerE : 0)),
16213
+ subValue: growthCaption("revenuePerEmail"),
16214
+ icon: /*#__PURE__*/jsx(IndeterminateCheckBoxOutlined, {}),
16215
+ money: true,
16216
+ error: false,
16217
+ warning: false
16218
+ },
16219
+ "Open rate": {
16220
+ value: "".concat(Number((_deliverability$openR = deliverability.openRate) !== null && _deliverability$openR !== void 0 ? _deliverability$openR : 0).toFixed(2), "%"),
16221
+ subValue: growthCaption("openRate", deliverabilityGrowth),
16222
+ icon: /*#__PURE__*/jsx(Email, {}),
16223
+ money: false,
16224
+ error: false,
16225
+ warning: false
16226
+ },
16227
+ Clicks: {
16228
+ value: formatNumber((_deliverability$total = deliverability.totalClicks) !== null && _deliverability$total !== void 0 ? _deliverability$total : 0),
16229
+ subValue: growthCaption("totalClicks", deliverabilityGrowth),
16230
+ icon: /*#__PURE__*/jsx(NearMe, {}),
16231
+ money: false,
16232
+ error: false,
16233
+ warning: false
16234
+ },
16235
+ "Unique Clicks": {
16236
+ value: formatNumber((_deliverability$uniqu = deliverability.uniqueClicks) !== null && _deliverability$uniqu !== void 0 ? _deliverability$uniqu : 0),
16237
+ subValue: growthCaption("uniqueClicks", deliverabilityGrowth),
16238
+ icon: /*#__PURE__*/jsx(NearMe, {}),
16239
+ money: false,
16240
+ error: false,
16241
+ warning: false
16242
+ },
16243
+ "Bounce rate": {
16244
+ value: "".concat(Number((_deliverability$bounc = deliverability.bounceRate) !== null && _deliverability$bounc !== void 0 ? _deliverability$bounc : 0).toFixed(2), "%"),
16245
+ subValue: growthCaption("bounceRate", deliverabilityGrowth),
16246
+ icon: /*#__PURE__*/jsx(HighlightOff, {}),
16247
+ money: false,
16248
+ error: false,
16249
+ warning: false
16250
+ },
16251
+ "Revenue per Click": {
16252
+ value: "$".concat(formatNumber((_deliverability$reven = deliverability.revenuePerClick) !== null && _deliverability$reven !== void 0 ? _deliverability$reven : 0)),
16253
+ subValue: growthCaption("revenuePerClick", deliverabilityGrowth),
16254
+ icon: /*#__PURE__*/jsx(HighlightOff, {}),
16255
+ money: true,
16256
+ error: false,
16257
+ warning: false
16258
+ }
16259
+ };
16260
+ }, [deliverability, deliverabilityGrowth, hasEmailOverview, overview, overviewGrowth, dateName]);
16261
+ var campaignsRaisedData = useMemo(function () {
16262
+ var campaigns = apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByRaised;
16263
+ if (!hasEmailOverview) return null;
16264
+ if (!Array.isArray(campaigns) || campaigns.length === 0) return [];
16265
+ return campaigns.map(function (item) {
16266
+ var _item$value2;
16267
+ return {
16268
+ id: getCampaignInitials(item.campaignName),
16269
+ name: item.campaignName || "Unknown",
16270
+ value: "$".concat(formatNumber((_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : 0))
16271
+ };
16272
+ });
16273
+ }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByRaised, hasEmailOverview]);
16274
+ var campaignsCtrData = useMemo(function () {
16275
+ var campaigns = apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByCtr;
16276
+ if (!hasEmailOverview) return null;
16277
+ if (!Array.isArray(campaigns) || campaigns.length === 0) return [];
16278
+ return campaigns.map(function (item) {
16279
+ var _item$value3;
16280
+ return {
16281
+ id: getCampaignInitials(item.campaignName),
16282
+ name: item.campaignName || "Unknown",
16283
+ value: "".concat(Number((_item$value3 = item.value) !== null && _item$value3 !== void 0 ? _item$value3 : 0).toFixed(2), "%")
16284
+ };
16285
+ });
16286
+ }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByCtr, hasEmailOverview]);
16287
+ var campaignsConversionData = useMemo(function () {
16288
+ var campaigns = apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByConversion;
16289
+ if (!hasEmailOverview) return null;
16290
+ if (!Array.isArray(campaigns) || campaigns.length === 0) return [];
16291
+ return campaigns.map(function (item) {
16292
+ var _item$value4;
16293
+ return {
16294
+ id: getCampaignInitials(item.campaignName),
16295
+ name: item.campaignName || "Unknown",
16296
+ value: "".concat(Number((_item$value4 = item.value) !== null && _item$value4 !== void 0 ? _item$value4 : 0).toFixed(2), "%")
16297
+ };
16298
+ });
16299
+ }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByConversion, hasEmailOverview]);
16304
16300
  var renderCard = function renderCard(title) {
16305
- return /*#__PURE__*/jsx(MetricCard
16306
- // key={title}
16307
- , {
16301
+ return /*#__PURE__*/jsx(MetricCard, {
16308
16302
  title: title,
16309
- value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
16303
+ value: metricInfo[title].value,
16310
16304
  caption: metricInfo[title].subValue,
16311
16305
  icon: metricInfo[title].icon,
16312
16306
  error: metricInfo[title].error,
@@ -16318,19 +16312,7 @@ var EmailSection = function EmailSection() {
16318
16312
  border: "2px solid #ef4444",
16319
16313
  bgcolor: "#fffafa"
16320
16314
  } : {}
16321
- })
16322
- // <DisplayCard
16323
- // key={title}
16324
- // title={title}
16325
- // value={metricInfo[title].value}
16326
- // subValue={metricInfo[title].subValue}
16327
- // icon={metricInfo[title].icon}
16328
- // // onClick={() => setActiveMetric(title)}
16329
- // // isActive={activeMetric === title}
16330
- // sx={{
16331
- // }}
16332
- // />
16333
- ;
16315
+ });
16334
16316
  };
16335
16317
  return /*#__PURE__*/jsxs(Fragment, {
16336
16318
  children: [/*#__PURE__*/jsx(Box, {
@@ -16362,14 +16344,16 @@ var EmailSection = function EmailSection() {
16362
16344
  children: /*#__PURE__*/jsx(EmailTrendCard, {
16363
16345
  title: "Open rate trend",
16364
16346
  subtitle: "Daily \xB7 30 days",
16365
- value: "42.3%",
16366
- trend: "2.1pp",
16347
+ value: hasEmailOverview ? "".concat(Number((_deliverability$openR2 = deliverability.openRate) !== null && _deliverability$openR2 !== void 0 ? _deliverability$openR2 : 0).toFixed(2), "%") : "42.3%",
16348
+ trend: hasEmailOverview ? formatTrendBadge(deliverabilityGrowth.openRate, true) : "2.1pp",
16349
+ trendData: hasEmailOverview ? apiData === null || apiData === void 0 ? void 0 : apiData.openRateTrend : undefined,
16367
16350
  series: [{
16368
- name: 'Open Rate',
16351
+ name: "Open Rate",
16369
16352
  data: [38, 42, 41, 43, 42.3]
16370
16353
  }],
16371
- colors: ['rgb(99, 99, 230)'],
16372
- yAxisMax: 53,
16354
+ categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
16355
+ colors: ["rgb(99, 99, 230)"],
16356
+ yAxisMax: computeYAxisMax(openRateTrend.data, 5),
16373
16357
  yAxisTickAmount: 3
16374
16358
  })
16375
16359
  }), /*#__PURE__*/jsx(Grid, {
@@ -16387,18 +16371,27 @@ var EmailSection = function EmailSection() {
16387
16371
  children: /*#__PURE__*/jsx(EmailTrendCard, {
16388
16372
  title: "Clicks trend",
16389
16373
  subtitle: "Total + unique \xB7 30 days",
16390
- value: "1,612",
16391
- trend: "14%",
16374
+ value: hasEmailOverview ? formatNumber((_deliverability$total2 = deliverability.totalClicks) !== null && _deliverability$total2 !== void 0 ? _deliverability$total2 : 0) : "1,612",
16375
+ trend: hasEmailOverview ? formatTrendBadge(deliverabilityGrowth.totalClicks) : "14%",
16376
+ trendSeries: hasEmailOverview ? [{
16377
+ name: "Total clicks",
16378
+ data: apiData === null || apiData === void 0 ? void 0 : apiData.totalClicksTrend
16379
+ }, {
16380
+ name: "Unique clicks",
16381
+ data: apiData === null || apiData === void 0 ? void 0 : apiData.uniqueClicksTrend,
16382
+ dashed: true
16383
+ }] : undefined,
16392
16384
  series: [{
16393
- name: 'Total clicks',
16385
+ name: "Total clicks",
16394
16386
  data: [56, 112, 80, 150, 112]
16395
16387
  }, {
16396
- name: 'Unique clicks',
16388
+ name: "Unique clicks",
16397
16389
  data: [30, 70, 45, 100, 75],
16398
16390
  dashed: true
16399
16391
  }],
16400
- colors: ['#10B981', '#10B981'],
16401
- yAxisMax: 168,
16392
+ categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
16393
+ colors: ["#10B981", "#10B981"],
16394
+ yAxisMax: computeYAxisMax([].concat(_toConsumableArray(totalClicksTrend.data), _toConsumableArray(uniqueClicksTrend.data)), 10),
16402
16395
  yAxisTickAmount: 3,
16403
16396
  yAxisFormatter: function yAxisFormatter(val) {
16404
16397
  return val;
@@ -16419,14 +16412,16 @@ var EmailSection = function EmailSection() {
16419
16412
  children: /*#__PURE__*/jsx(EmailTrendCard, {
16420
16413
  title: "Bounce rate trend",
16421
16414
  subtitle: "Daily \xB7 lower is better",
16422
- value: "1.8%",
16423
- trend: "0.3pp",
16415
+ value: hasEmailOverview ? "".concat(Number((_deliverability$bounc2 = deliverability.bounceRate) !== null && _deliverability$bounc2 !== void 0 ? _deliverability$bounc2 : 0).toFixed(2), "%") : "1.8%",
16416
+ trend: hasEmailOverview ? formatTrendBadge(deliverabilityGrowth.bounceRate, true) : "0.3pp",
16417
+ trendData: hasEmailOverview ? apiData === null || apiData === void 0 ? void 0 : apiData.bounceRateTrend : undefined,
16424
16418
  series: [{
16425
- name: 'Bounce Rate',
16419
+ name: "Bounce Rate",
16426
16420
  data: [2.2, 1.9, 2.0, 1.7, 1.8]
16427
16421
  }],
16428
- colors: ['#f2994a'],
16429
- yAxisMax: 2.5,
16422
+ categories: ["Apr 5", "Apr 12", "Apr 19", "Apr 26", "May 4"],
16423
+ colors: ["#f2994a"],
16424
+ yAxisMax: computeYAxisMax(bounceRateTrend.data, 2.5),
16430
16425
  yAxisTickAmount: 3
16431
16426
  })
16432
16427
  })]
@@ -16443,7 +16438,9 @@ var EmailSection = function EmailSection() {
16443
16438
  sx: {
16444
16439
  paddingTop: "0px !important"
16445
16440
  },
16446
- children: /*#__PURE__*/jsx(TopCampaignsRaisedCard, {})
16441
+ children: /*#__PURE__*/jsx(TopCampaignsRaisedCard, {
16442
+ data: campaignsRaisedData
16443
+ })
16447
16444
  }), /*#__PURE__*/jsx(Grid, {
16448
16445
  item: true,
16449
16446
  xs: 12,
@@ -16456,7 +16453,9 @@ var EmailSection = function EmailSection() {
16456
16453
  md: "0px"
16457
16454
  }
16458
16455
  },
16459
- children: /*#__PURE__*/jsx(TopCampaignsCTRCard, {})
16456
+ children: /*#__PURE__*/jsx(TopCampaignsCTRCard, {
16457
+ data: campaignsCtrData
16458
+ })
16460
16459
  }), /*#__PURE__*/jsx(Grid, {
16461
16460
  item: true,
16462
16461
  xs: 12,
@@ -16469,7 +16468,9 @@ var EmailSection = function EmailSection() {
16469
16468
  md: "0px"
16470
16469
  }
16471
16470
  },
16472
- children: /*#__PURE__*/jsx(TopCampaignsConvRateCard, {})
16471
+ children: /*#__PURE__*/jsx(TopCampaignsConvRateCard, {
16472
+ data: campaignsConversionData
16473
+ })
16473
16474
  })]
16474
16475
  })]
16475
16476
  });