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