@ammarkhalidfarooq/dashboard-package 0.6.69 → 0.6.71

package/dist/index.cjs.js

@@ -2097,17 +2097,82 @@ var ProgressBar = function ProgressBar(_ref8) {
     })]
   });
 };
-var DonationTypeBarSvg = function DonationTypeBarSvg(_ref9) {
-  var _ref9$categories = _ref9.categories,
-    categories = _ref9$categories === void 0 ? [] : _ref9$categories,
-    _ref9$recurring = _ref9.recurring,
-    recurring = _ref9$recurring === void 0 ? [] : _ref9$recurring,
-    _ref9$oneTime = _ref9.oneTime,
-    oneTime = _ref9$oneTime === void 0 ? [] : _ref9$oneTime,
-    _ref9$recurringColor = _ref9.recurringColor,
-    recurringColor = _ref9$recurringColor === void 0 ? "#6366F1" : _ref9$recurringColor,
-    _ref9$oneTimeColor = _ref9.oneTimeColor,
-    oneTimeColor = _ref9$oneTimeColor === void 0 ? "#10B981" : _ref9$oneTimeColor;
+var DonorGeographyPanel = function DonorGeographyPanel(_ref9) {
+  var _ref9$geoList = _ref9.geoList,
+    geoList = _ref9$geoList === void 0 ? [] : _ref9$geoList,
+    _ref9$totalDonors = _ref9.totalDonors,
+    totalDonors = _ref9$totalDonors === void 0 ? 0 : _ref9$totalDonors,
+    _ref9$barColor = _ref9.barColor,
+    barColor = _ref9$barColor === void 0 ? "#6366F1" : _ref9$barColor;
+  return /*#__PURE__*/jsxRuntime.jsx(Panel, {
+    title: "Donor geography",
+    subtitle: "Top countries \xB7 ".concat(formatNumber(totalDonors), " total"),
+    children: (geoList.length ? geoList.slice(0, 6) : []).map(function (g, i) {
+      var _g$percentage;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          padding: i < 5 ? "0 0 5px" : 0,
+          marginBottom: i < 5 ? 5 : 0,
+          borderBottom: i < 5 ? "1px solid #F3F4F6" : "none"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 6,
+            marginBottom: 3
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            style: {
+              fontSize: 9,
+              color: "#374151",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              minWidth: 0
+            },
+            children: g.country
+          }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+            style: {
+              fontSize: 9,
+              fontWeight: 700,
+              color: "#111827",
+              flexShrink: 0
+            },
+            children: [formatNumber(g.value), " \xB7 ", formatNumber(g.percentage), "%"]
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            height: 5,
+            background: "#F3F4F6",
+            borderRadius: 3,
+            overflow: "hidden"
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            style: {
+              width: "".concat(Math.min(100, Math.max(0, Number((_g$percentage = g.percentage) !== null && _g$percentage !== void 0 ? _g$percentage : 0))), "%"),
+              height: "100%",
+              background: barColor,
+              borderRadius: 3
+            }
+          })
+        })]
+      }, i);
+    })
+  });
+};
+var DonationTypeBarSvg = function DonationTypeBarSvg(_ref0) {
+  var _ref0$categories = _ref0.categories,
+    categories = _ref0$categories === void 0 ? [] : _ref0$categories,
+    _ref0$recurring = _ref0.recurring,
+    recurring = _ref0$recurring === void 0 ? [] : _ref0$recurring,
+    _ref0$oneTime = _ref0.oneTime,
+    oneTime = _ref0$oneTime === void 0 ? [] : _ref0$oneTime,
+    _ref0$recurringColor = _ref0.recurringColor,
+    recurringColor = _ref0$recurringColor === void 0 ? "#6366F1" : _ref0$recurringColor,
+    _ref0$oneTimeColor = _ref0.oneTimeColor,
+    oneTimeColor = _ref0$oneTimeColor === void 0 ? "#10B981" : _ref0$oneTimeColor;
   var width = 158;
   var height = 96;
   var padL = 30;
@@ -2228,12 +2293,12 @@ var DonationTypeBarSvg = function DonationTypeBarSvg(_ref9) {
     })]
   });
 };
-var DonationTypePanel = function DonationTypePanel(_ref0) {
-  var donationTypeData = _ref0.donationTypeData,
-    _ref0$recurringColor = _ref0.recurringColor,
-    recurringColor = _ref0$recurringColor === void 0 ? "#6366F1" : _ref0$recurringColor,
-    _ref0$oneTimeColor = _ref0.oneTimeColor,
-    oneTimeColor = _ref0$oneTimeColor === void 0 ? "#10B981" : _ref0$oneTimeColor;
+var DonationTypePanel = function DonationTypePanel(_ref1) {
+  var donationTypeData = _ref1.donationTypeData,
+    _ref1$recurringColor = _ref1.recurringColor,
+    recurringColor = _ref1$recurringColor === void 0 ? "#6366F1" : _ref1$recurringColor,
+    _ref1$oneTimeColor = _ref1.oneTimeColor,
+    oneTimeColor = _ref1$oneTimeColor === void 0 ? "#10B981" : _ref1$oneTimeColor;
   var _parseDonationTypeCha = parseDonationTypeChartData(donationTypeData),
     categories = _parseDonationTypeCha.categories,
     recurring = _parseDonationTypeCha.recurring,
@@ -2298,21 +2363,21 @@ var DonationTypePanel = function DonationTypePanel(_ref0) {
     })]
   });
 };
-var AcceptanceRaisedPanel = function AcceptanceRaisedPanel(_ref1) {
-  var title = _ref1.title,
-    subtitle = _ref1.subtitle,
-    _ref1$acceptanceRate = _ref1.acceptanceRate,
-    acceptanceRate = _ref1$acceptanceRate === void 0 ? 0 : _ref1$acceptanceRate,
-    _ref1$acceptanceGrowt = _ref1.acceptanceGrowth,
-    acceptanceGrowth = _ref1$acceptanceGrowt === void 0 ? 0 : _ref1$acceptanceGrowt,
-    _ref1$raised = _ref1.raised,
-    raised = _ref1$raised === void 0 ? 0 : _ref1$raised,
-    _ref1$raisedGrowth = _ref1.raisedGrowth,
-    raisedGrowth = _ref1$raisedGrowth === void 0 ? 0 : _ref1$raisedGrowth,
-    _ref1$primaryColor = _ref1.primaryColor,
-    primaryColor = _ref1$primaryColor === void 0 ? "#6366F1" : _ref1$primaryColor,
-    _ref1$secondaryColor = _ref1.secondaryColor,
-    secondaryColor = _ref1$secondaryColor === void 0 ? "#88bfd290" : _ref1$secondaryColor;
+var AcceptanceRaisedPanel = function AcceptanceRaisedPanel(_ref10) {
+  var title = _ref10.title,
+    subtitle = _ref10.subtitle,
+    _ref10$acceptanceRate = _ref10.acceptanceRate,
+    acceptanceRate = _ref10$acceptanceRate === void 0 ? 0 : _ref10$acceptanceRate,
+    _ref10$acceptanceGrow = _ref10.acceptanceGrowth,
+    acceptanceGrowth = _ref10$acceptanceGrow === void 0 ? 0 : _ref10$acceptanceGrow,
+    _ref10$raised = _ref10.raised,
+    raised = _ref10$raised === void 0 ? 0 : _ref10$raised,
+    _ref10$raisedGrowth = _ref10.raisedGrowth,
+    raisedGrowth = _ref10$raisedGrowth === void 0 ? 0 : _ref10$raisedGrowth,
+    _ref10$primaryColor = _ref10.primaryColor,
+    primaryColor = _ref10$primaryColor === void 0 ? "#6366F1" : _ref10$primaryColor,
+    _ref10$secondaryColor = _ref10.secondaryColor,
+    secondaryColor = _ref10$secondaryColor === void 0 ? "#88bfd290" : _ref10$secondaryColor;
   return /*#__PURE__*/jsxRuntime.jsx(Panel, {
     title: title,
     subtitle: subtitle,
@@ -2438,15 +2503,15 @@ var AcceptanceRaisedPanel = function AcceptanceRaisedPanel(_ref1) {
     })
   });
 };
-var KpiCard = function KpiCard(_ref10) {
-  var title = _ref10.title,
-    value = _ref10.value,
-    trend = _ref10.trend,
-    detail = _ref10.detail,
-    _ref10$variant = _ref10.variant,
-    variant = _ref10$variant === void 0 ? "secondary" : _ref10$variant,
-    _ref10$trendPositiveW = _ref10.trendPositiveWhenNegative,
-    trendPositiveWhenNegative = _ref10$trendPositiveW === void 0 ? false : _ref10$trendPositiveW;
+var KpiCard = function KpiCard(_ref11) {
+  var title = _ref11.title,
+    value = _ref11.value,
+    trend = _ref11.trend,
+    detail = _ref11.detail,
+    _ref11$variant = _ref11.variant,
+    variant = _ref11$variant === void 0 ? "secondary" : _ref11$variant,
+    _ref11$trendPositiveW = _ref11.trendPositiveWhenNegative,
+    trendPositiveWhenNegative = _ref11$trendPositiveW === void 0 ? false : _ref11$trendPositiveW;
   var displayTrend = withTrendArrow(trend);
   var isPrimary = variant === "primary";
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -2497,12 +2562,12 @@ var KpiCard = function KpiCard(_ref10) {
     })]
   });
 };
-var PageHeader = function PageHeader(_ref11) {
-  var dateLabel = _ref11.dateLabel,
-    generatedLabel = _ref11.generatedLabel,
-    activeFilters = _ref11.activeFilters,
-    page = _ref11.page,
-    windowLabel = _ref11.windowLabel;
+var PageHeader = function PageHeader(_ref12) {
+  var dateLabel = _ref12.dateLabel,
+    generatedLabel = _ref12.generatedLabel,
+    activeFilters = _ref12.activeFilters,
+    page = _ref12.page,
+    windowLabel = _ref12.windowLabel;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     style: {
       padding: "22px ".concat(MX, "px 12px"),
@@ -2608,9 +2673,9 @@ var PageHeader = function PageHeader(_ref11) {
     })]
   });
 };
-var PageFooter = function PageFooter(_ref12) {
-  var generatedLabel = _ref12.generatedLabel,
-    page = _ref12.page;
+var PageFooter = function PageFooter(_ref13) {
+  var generatedLabel = _ref13.generatedLabel,
+    page = _ref13.page;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: {
       padding: "7px ".concat(MX, "px"),
@@ -2630,16 +2695,16 @@ var PageFooter = function PageFooter(_ref12) {
 };
 
 // ─── Main component ───────────────────────────────────────────────────────────
-var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
+var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
   var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc, _apiData$trafficSourc2, _apiData$trafficSourc3, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _metricByTitle$AvgDo2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Refund, _metricByTitle$Refund2, _refundsRaw$refundCou, _metricByTitle$Refund3, _mainChart$stacked, _refundsRaw$refundRat2, _ob$growthPercentage, _ob$peakDay, _up$acceptanceGrowth, _up$raisedGrowth, _dn$acceptanceGrowth, _dn$raisedGrowth, _refCard$growthPercen;
-  var _ref13$apiData = _ref13.apiData,
-    apiData = _ref13$apiData === void 0 ? {} : _ref13$apiData,
-    _ref13$dateName = _ref13.dateName,
-    dateName = _ref13$dateName === void 0 ? "Last Period" : _ref13$dateName,
-    _ref13$numberOfDays = _ref13.numberOfDays,
-    numberOfDays = _ref13$numberOfDays === void 0 ? 30 : _ref13$numberOfDays,
-    _ref13$activeFilters = _ref13.activeFilters,
-    activeFilters = _ref13$activeFilters === void 0 ? [] : _ref13$activeFilters;
+  var _ref14$apiData = _ref14.apiData,
+    apiData = _ref14$apiData === void 0 ? {} : _ref14$apiData,
+    _ref14$dateName = _ref14.dateName,
+    dateName = _ref14$dateName === void 0 ? "Last Period" : _ref14$dateName,
+    _ref14$numberOfDays = _ref14.numberOfDays,
+    numberOfDays = _ref14$numberOfDays === void 0 ? 30 : _ref14$numberOfDays,
+    _ref14$activeFilters = _ref14.activeFilters,
+    activeFilters = _ref14$activeFilters === void 0 ? [] : _ref14$activeFilters;
   var now = new Date();
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
   var windowLabel = "".concat(numberOfDays, "-day window");
@@ -2781,6 +2846,23 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
     emerald: "#10B981",
     cyan: "#06B6D4"
   };
+  var revenueLegend = [{
+    label: "Paid Ads",
+    color: C.indigo
+  }, {
+    label: "Organic",
+    color: C.emerald
+  }, {
+    label: "Email",
+    color: C.cyan
+  }];
+  var revenueTrendText = mainChart.trend || "";
+  var revenueTrendColor = getTrendColor(revenueTrendText, {
+    up: "#054835ff",
+    down: "#EF4444"
+  });
+  var revenueTrendBadgeBg = revenueTrendColor === "#EF4444" ? "#fee2e2" : "#8df3be9a";
+  var revenueTrendArrow = getTrendArrow(revenueTrendText);
   var headerProps = {
     dateLabel: dateLabel,
     generatedLabel: generatedLabel,
@@ -2880,77 +2962,90 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
               display: "flex",
               justifyContent: "space-between",
               alignItems: "flex-start",
-              marginBottom: 6
+              marginBottom: 8
             },
             children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
               children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                 style: {
                   fontSize: 13,
                   fontWeight: 700,
-                  color: "#111827"
+                  color: "#111827",
+                  lineHeight: 1.15
                 },
                 children: "Total revenue trend"
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 style: {
                   fontSize: 9.5,
-                  color: "#9CA3AF",
-                  marginTop: 1
+                  color: "rgba(0, 0, 0, 0.4)",
+                  marginTop: 2,
+                  lineHeight: 1.15
                 },
                 children: ["Last ", daysLabel, " \xB7 daily aggregation"]
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              style: {
-                textAlign: "right"
-              },
-              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                style: {
-                  fontSize: 15,
-                  fontWeight: 800,
-                  color: "#111827"
-                },
-                children: kpi$(totalRaised)
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                style: {
-                  marginLeft: 8,
-                  fontSize: 10.5
-                },
-                children: /*#__PURE__*/jsxRuntime.jsx(TrendText, {
-                  children: mainChart.trend
-                })
-              })]
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            style: {
-              display: "flex",
-              gap: 14,
-              marginBottom: 6
-            },
-            children: [["Email", C.cyan], ["Organic", C.emerald], ["Paid Ads", C.indigo]].map(function (_ref14) {
-              var _ref15 = _slicedToArray(_ref14, 2),
-                name = _ref15[0],
-                color = _ref15[1];
-              return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 style: {
                   display: "flex",
                   alignItems: "center",
-                  gap: 5
+                  gap: 6,
+                  marginTop: 8
                 },
-                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                   style: {
-                    width: 20,
-                    height: 2.5,
-                    background: color,
-                    borderRadius: 2
-                  }
-                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    fontSize: 22,
+                    fontWeight: 700,
+                    color: "#111827"
+                  },
+                  children: kpi$(totalRaised)
+                }), revenueTrendText && /*#__PURE__*/jsxRuntime.jsxs("span", {
                   style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 3,
+                    background: revenueTrendBadgeBg,
+                    color: revenueTrendColor,
+                    padding: "2px 8px",
+                    borderRadius: 100,
                     fontSize: 9.5,
-                    color: "#6B7280"
+                    fontWeight: 600
                   },
-                  children: name
+                  children: [revenueTrendArrow && /*#__PURE__*/jsxRuntime.jsx("span", {
+                    children: revenueTrendArrow
+                  }), revenueTrendText]
                 })]
-              }, name);
-            })
+              })]
+            }), revSeries.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+              style: {
+                display: "flex",
+                gap: 10,
+                alignItems: "center",
+                flexShrink: 0,
+                paddingTop: 2
+              },
+              children: revenueLegend.map(function (leg) {
+                return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4
+                  },
+                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: leg.color,
+                      flexShrink: 0
+                    }
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    style: {
+                      fontSize: 9.5,
+                      color: "rgba(0, 0, 0, 0.6)",
+                      fontWeight: 500
+                    },
+                    children: leg.label
+                  })]
+                }, leg.label);
+              })
+            })]
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
               width: "100%",
@@ -3152,32 +3247,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
             donationTypeData: report.donationTypeData,
             recurringColor: C.indigo,
             oneTimeColor: C.emerald
-          }), /*#__PURE__*/jsxRuntime.jsx(Panel, {
-            title: "Donor geography",
-            subtitle: "Top countries \xB7 ".concat(formatNumber(totalDonors), " total"),
-            children: (geoList.length ? geoList.slice(0, 6) : []).map(function (g, i) {
-              return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                style: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  padding: "3.5px 0",
-                  borderBottom: i < 5 ? "1px solid #F3F4F6" : "none"
-                },
-                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                  style: {
-                    fontSize: 9,
-                    color: "#374151"
-                  },
-                  children: g.country
-                }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-                  style: {
-                    fontSize: 9,
-                    color: "#6B7280"
-                  },
-                  children: [formatNumber(g.value), " \xB7 ", formatNumber(g.percentage), "%"]
-                })]
-              }, i);
-            })
+          }), /*#__PURE__*/jsxRuntime.jsx(DonorGeographyPanel, {
+            geoList: geoList,
+            totalDonors: totalDonors,
+            barColor: C.indigo
           }), /*#__PURE__*/jsxRuntime.jsxs(Panel, {
             title: "Refunds & chargebacks",
             subtitle: "Trust health \xB7 ".concat(numberOfDays, "-day window"),
@@ -3307,10 +3380,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref16) {
-                var _ref17 = _slicedToArray(_ref16, 2),
-                  l = _ref17[0],
-                  v = _ref17[1];
+              children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref15) {
+                var _ref16 = _slicedToArray(_ref15, 2),
+                  l = _ref16[0],
+                  v = _ref16[1];
                 return /*#__PURE__*/jsxRuntime.jsxs("div", {
                   children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {
@@ -3383,10 +3456,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
                 display: "flex",
                 gap: 12
               },
-              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref18) {
-                var _ref19 = _slicedToArray(_ref18, 2),
-                  l = _ref19[0],
-                  v = _ref19[1];
+              children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref17) {
+                var _ref18 = _slicedToArray(_ref17, 2),
+                  l = _ref18[0],
+                  v = _ref18[1];
                 return /*#__PURE__*/jsxRuntime.jsxs("div", {
                   children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                     style: {