@ammarkhalidfarooq/dashboard-package 0.6.64 → 0.6.65

package/dist/index.es.js

@@ -1327,287 +1327,6 @@ var MetricCard$1 = function MetricCard(_ref) {
   });
 };
 
-var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
-  var sx = _ref.sx,
-    donationTypeData = _ref.donationTypeData,
-    _ref$exportMode = _ref.exportMode,
-    exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode,
-    _ref$subtitle = _ref.subtitle,
-    subtitle = _ref$subtitle === void 0 ? "Donation type" : _ref$subtitle,
-    chartHeight = _ref.chartHeight;
-  var recurringColor = "rgb(99, 99, 230)";
-  var oneTimeColor = "#10B981";
-  var colors = [recurringColor, oneTimeColor, "#06B6D4", "#F59E0B", "#EF4444"];
-  var categories = [];
-  var series = [];
-  var summaries = [];
-  var title = "Donation Type";
-  var isDistributed = false;
-  if (donationTypeData && donationTypeData.data && Array.isArray(donationTypeData.data)) {
-    // Time series recurring vs one-time format
-    categories = donationTypeData.data.map(function (item) {
-      return item.label || "";
-    });
-    series = [{
-      name: "Recurring",
-      data: donationTypeData.data.map(function (item) {
-        return item.recurring || 0;
-      })
-    }, {
-      name: "One-time",
-      data: donationTypeData.data.map(function (item) {
-        return item.oneTime || 0;
-      })
-    }];
-    summaries = [{
-      label: "Recurring",
-      total: donationTypeData.totalRecurringDonations || 0,
-      color: recurringColor
-    }, {
-      label: "One-time",
-      total: donationTypeData.totalOneTimeDonations || 0,
-      color: oneTimeColor
-    }];
-    title = "Recurring vs One-time";
-    isDistributed = false;
-  } else if (Array.isArray(donationTypeData) && donationTypeData.length > 0 && donationTypeData[0].totalAmount !== undefined) {
-    // New array format
-    categories = donationTypeData.map(function (item) {
-      return item.type || "";
-    });
-    series = [{
-      name: "Amount",
-      data: donationTypeData.map(function (item) {
-        return item.totalAmount || 0;
-      })
-    }];
-    summaries = donationTypeData.map(function (item, index) {
-      return {
-        label: item.type || "",
-        total: item.totalAmount || 0,
-        color: colors[index % colors.length]
-      };
-    });
-    isDistributed = true;
-    if (donationTypeData.length === 2) {
-      title = "".concat(donationTypeData[0].type, " vs ").concat(donationTypeData[1].type);
-    }
-  } else {
-    var _dataObj$summary, _dataObj$summary2, _dataObj$summary3, _dataObj$summary4;
-    // Object format, empty array, or missing data
-    var dataObj = donationTypeData && _typeof(donationTypeData) === "object" && !Array.isArray(donationTypeData) ? donationTypeData : {};
-    categories = dataObj.categories || [];
-    var rawSeries = dataObj.series || [];
-    if (rawSeries.length && categories.length) {
-      series = rawSeries;
-    } else {
-      series = [{
-        name: "Recurring",
-        data: []
-      }, {
-        name: "One-time",
-        data: []
-      }];
-    }
-    summaries = [{
-      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary = dataObj.summary) === null || _dataObj$summary === void 0 || (_dataObj$summary = _dataObj$summary.recurring) === null || _dataObj$summary === void 0 ? void 0 : _dataObj$summary.label) || "Recurring",
-      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary2 = dataObj.summary) === null || _dataObj$summary2 === void 0 || (_dataObj$summary2 = _dataObj$summary2.recurring) === null || _dataObj$summary2 === void 0 ? void 0 : _dataObj$summary2.total) || 0,
-      color: recurringColor
-    }, {
-      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary3 = dataObj.summary) === null || _dataObj$summary3 === void 0 || (_dataObj$summary3 = _dataObj$summary3.oneTime) === null || _dataObj$summary3 === void 0 ? void 0 : _dataObj$summary3.label) || "One-time",
-      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary4 = dataObj.summary) === null || _dataObj$summary4 === void 0 || (_dataObj$summary4 = _dataObj$summary4.oneTime) === null || _dataObj$summary4 === void 0 ? void 0 : _dataObj$summary4.total) || 0,
-      color: oneTimeColor
-    }];
-    title = "Recurring vs one-time";
-    isDistributed = false;
-  }
-  var resolvedChartHeight = chartHeight !== null && chartHeight !== void 0 ? chartHeight : exportMode ? 110 : 170;
-  var chartOptions = {
-    chart: {
-      type: "bar",
-      toolbar: {
-        show: false
-      },
-      zoom: {
-        enabled: false
-      },
-      fontFamily: "Inter, sans-serif"
-    },
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        columnWidth: exportMode ? "68%" : "75%",
-        borderRadius: exportMode ? 3 : 4,
-        distributed: isDistributed,
-        dataLabels: {
-          position: "top"
-        }
-      }
-    },
-    dataLabels: {
-      enabled: true,
-      formatter: function formatter(val) {
-        return "$".concat(formatNumber(val));
-      },
-      offsetY: exportMode ? -16 : -20,
-      style: {
-        fontSize: exportMode ? "7px" : "9px",
-        fontWeight: 600,
-        colors: ["#000"]
-      }
-    },
-    stroke: {
-      show: true,
-      width: 2,
-      colors: ["transparent"]
-    },
-    xaxis: {
-      categories: categories,
-      axisBorder: {
-        show: false
-      },
-      axisTicks: {
-        show: false
-      },
-      labels: {
-        style: {
-          colors: "rgba(0, 0, 0, 0.4)",
-          fontSize: exportMode ? "8px" : "11px"
-        }
-      }
-    },
-    yaxis: {
-      min: 0,
-      tickAmount: exportMode ? 3 : 4,
-      labels: {
-        formatter: function formatter(val) {
-          return "$".concat(formatNumber(val));
-        },
-        style: {
-          colors: "rgba(0, 0, 0, 0.4)",
-          fontSize: exportMode ? "8px" : "10px"
-        }
-      }
-    },
-    fill: {
-      opacity: 1
-    },
-    colors: colors,
-    grid: {
-      borderColor: "#f1f1f1",
-      strokeDashArray: 4,
-      padding: {
-        left: 0,
-        right: 0
-      },
-      yaxis: {
-        lines: {
-          show: true
-        }
-      }
-    },
-    legend: {
-      show: false
-    },
-    tooltip: {
-      y: {
-        formatter: function formatter(val) {
-          return "$".concat(formatNumber(val));
-        }
-      }
-    }
-  };
-  return /*#__PURE__*/jsxs(Card, {
-    sx: _objectSpread2({
-      bgcolor: "#fff",
-      borderRadius: exportMode ? 2 : 4,
-      border: exportMode ? "1px solid #DDE3EA" : "1px solid #f0f0f0",
-      boxShadow: exportMode ? "0 1px 0 rgba(15,23,42,0.03)" : "0 4px 24px rgba(0,0,0,0.06)",
-      p: exportMode ? 1.5 : 3,
-      height: exportMode ? "100%" : "auto",
-      boxSizing: "border-box"
-    }, sx),
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: "flex",
-        flexDirection: "column"
-      },
-      children: [/*#__PURE__*/jsxs(Box, {
-        sx: {
-          textAlign: "left"
-        },
-        children: [/*#__PURE__*/jsx(Typography, {
-          sx: {
-            fontWeight: 700,
-            fontSize: exportMode ? "12px" : "18px",
-            color: "#000",
-            lineHeight: 1.15
-          },
-          children: title
-        }), /*#__PURE__*/jsx(Typography, {
-          sx: {
-            fontSize: exportMode ? "9.5px" : "13px",
-            color: exportMode ? "#94A3B8" : "rgba(0, 0, 0, 0.4)",
-            lineHeight: 1.15
-          },
-          children: subtitle
-        })]
-      }), /*#__PURE__*/jsx(Box, {
-        sx: {
-          display: "flex",
-          gap: exportMode ? 1 : 1.5,
-          mt: exportMode ? 0.75 : 0.5,
-          flexWrap: "wrap"
-        },
-        children: summaries.map(function (item, index) {
-          return /*#__PURE__*/jsxs(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 0.5
-            },
-            children: [/*#__PURE__*/jsx(Box, {
-              sx: {
-                width: exportMode ? 6 : 8,
-                height: exportMode ? 6 : 8,
-                bgcolor: item.color,
-                borderRadius: "50%"
-              }
-            }), /*#__PURE__*/jsx(Typography, {
-              sx: {
-                fontSize: exportMode ? "9.5px" : "13px",
-                color: exportMode ? "#374151" : "rgba(0, 0, 0, 0.5)",
-                fontWeight: 500
-              },
-              children: item.label
-            }), /*#__PURE__*/jsxs(Typography, {
-              sx: {
-                fontSize: exportMode ? "9.5px" : "13px",
-                fontWeight: exportMode ? 700 : 600,
-                color: "#000"
-              },
-              children: ["$", formatNumber(item.total || 0)]
-            })]
-          }, item.label || index);
-        })
-      })]
-    }), /*#__PURE__*/jsx(Box, {
-      sx: {
-        height: resolvedChartHeight,
-        width: exportMode ? "calc(100% + 24px)" : "calc(100% + 48px)",
-        ml: exportMode ? -1.5 : -3,
-        mr: exportMode ? -1.5 : -3
-      },
-      children: /*#__PURE__*/jsx(ReactApexChart, {
-        options: chartOptions,
-        series: series,
-        type: "bar",
-        height: "100%"
-      })
-    })]
-  });
-};
-
 var PURPLE = "#6363E6";
 var REPORT_COLORS = {
   purple: PURPLE};
@@ -1678,6 +1397,57 @@ var parseDonationTypeTotals = function parseDonationTypeTotals(donationTypeData)
   };
 };
 
+/** Weekly chart points + totals for recurring vs one-time (PDF + report). */
+var parseDonationTypeChartData = function parseDonationTypeChartData(donationTypeData) {
+  var empty = {
+    categories: [],
+    recurring: [],
+    oneTime: [],
+    recurringTotal: 0,
+    oneTimeTotal: 0
+  };
+  if (donationTypeData !== null && donationTypeData !== void 0 && donationTypeData.data && Array.isArray(donationTypeData.data)) {
+    var _donationTypeData$tot3, _donationTypeData$tot4;
+    return {
+      categories: donationTypeData.data.map(function (item) {
+        return item.label || "";
+      }),
+      recurring: donationTypeData.data.map(function (item) {
+        return Number(item.recurring || 0);
+      }),
+      oneTime: donationTypeData.data.map(function (item) {
+        return Number(item.oneTime || 0);
+      }),
+      recurringTotal: Number((_donationTypeData$tot3 = donationTypeData.totalRecurringDonations) !== null && _donationTypeData$tot3 !== void 0 ? _donationTypeData$tot3 : 0),
+      oneTimeTotal: Number((_donationTypeData$tot4 = donationTypeData.totalOneTimeDonations) !== null && _donationTypeData$tot4 !== void 0 ? _donationTypeData$tot4 : 0)
+    };
+  }
+  if (Array.isArray(donationTypeData) && donationTypeData.length > 0 && donationTypeData[0].totalAmount !== undefined) {
+    var totals = parseDonationTypeTotals(donationTypeData);
+    return _objectSpread2(_objectSpread2({}, empty), totals);
+  }
+  if (Array.isArray(donationTypeData) && donationTypeData.length > 0 && (donationTypeData[0].recurring !== undefined || donationTypeData[0].oneTime !== undefined || donationTypeData[0].recurringAmount !== undefined || donationTypeData[0].oneTimeAmount !== undefined)) {
+    return {
+      categories: donationTypeData.map(function (item) {
+        return item.label || item.date || "";
+      }),
+      recurring: donationTypeData.map(function (item) {
+        return Number(item.recurring || item.recurringAmount || 0);
+      }),
+      oneTime: donationTypeData.map(function (item) {
+        return Number(item.oneTime || item.oneTimeAmount || 0);
+      }),
+      recurringTotal: donationTypeData.reduce(function (sum, item) {
+        return sum + Number(item.recurring || item.recurringAmount || 0);
+      }, 0),
+      oneTimeTotal: donationTypeData.reduce(function (sum, item) {
+        return sum + Number(item.oneTime || item.oneTimeAmount || 0);
+      }, 0)
+    };
+  }
+  return _objectSpread2(_objectSpread2({}, empty), parseDonationTypeTotals(donationTypeData));
+};
+
 /** Mirrors PaidDonorGeographyCard row mapping from donorGeography. */
 var parseDonorGeographyList = function parseDonorGeographyList(donorGeographyData) {
   var rawCountries = Array.isArray(donorGeographyData) ? donorGeographyData : (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.countries) || (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.data) || [];
@@ -1943,6 +1713,12 @@ var kpiPct = function kpiPct(v) {
 var kpiRoas = function kpiRoas(v) {
   return "".concat(formatNumber(Number(v !== null && v !== void 0 ? v : 0).toFixed(2)), "\xD7");
 };
+var d$Compact = function d$Compact(v) {
+  var n = Number(v !== null && v !== void 0 ? v : 0);
+  if (n >= 1000000) return "$".concat((n / 1000000).toFixed(1), "M");
+  if (n >= 1000) return "$".concat((n / 1000).toFixed(1), "K");
+  return d$(n);
+};
 var pct = function pct(v) {
   var dp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   return "".concat(Number(v !== null && v !== void 0 ? v : 0).toFixed(dp), "%");
@@ -2324,15 +2100,216 @@ var ProgressBar = function ProgressBar(_ref8) {
     })]
   });
 };
-var KpiCard = function KpiCard(_ref9) {
-  var title = _ref9.title,
-    value = _ref9.value,
-    trend = _ref9.trend,
-    detail = _ref9.detail,
-    _ref9$variant = _ref9.variant,
-    variant = _ref9$variant === void 0 ? "secondary" : _ref9$variant,
-    _ref9$trendPositiveWh = _ref9.trendPositiveWhenNegative,
-    trendPositiveWhenNegative = _ref9$trendPositiveWh === void 0 ? false : _ref9$trendPositiveWh;
+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 width = 158;
+  var height = 96;
+  var padL = 30;
+  var padR = 2;
+  var padT = 14;
+  var padB = 18;
+  var chartW = width - padL - padR;
+  var chartH = height - padT - padB;
+  var allVals = [].concat(_toConsumableArray(recurring), _toConsumableArray(oneTime));
+  var maxVal = Math.max.apply(Math, _toConsumableArray(allVals).concat([0])) || 1;
+  var n = categories.length;
+  var yTicks = [0, maxVal / 2, maxVal];
+  if (!n) {
+    return /*#__PURE__*/jsxs("svg", {
+      width: "100%",
+      height: height,
+      viewBox: "0 0 ".concat(width, " ").concat(height),
+      style: {
+        display: "block"
+      },
+      children: [/*#__PURE__*/jsx("line", {
+        x1: padL,
+        y1: padT + chartH,
+        x2: width - padR,
+        y2: padT + chartH,
+        stroke: "#f1f1f1"
+      }), /*#__PURE__*/jsx("text", {
+        x: padL - 4,
+        y: padT + chartH + 3,
+        textAnchor: "end",
+        fontSize: 7,
+        fill: "rgba(0,0,0,0.4)",
+        children: "$0"
+      })]
+    });
+  }
+  var groupW = chartW / n;
+  var barW = Math.min(groupW * 0.3, 12);
+  var baseY = padT + chartH;
+  return /*#__PURE__*/jsxs("svg", {
+    width: "100%",
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    style: {
+      display: "block"
+    },
+    children: [yTicks.map(function (tick, i) {
+      var y = padT + chartH - tick / maxVal * chartH;
+      return /*#__PURE__*/jsxs("g", {
+        children: [/*#__PURE__*/jsx("line", {
+          x1: padL,
+          y1: y,
+          x2: width - padR,
+          y2: y,
+          stroke: "#f1f1f1",
+          strokeDasharray: "4"
+        }), /*#__PURE__*/jsx("text", {
+          x: padL - 4,
+          y: y + 3,
+          textAnchor: "end",
+          fontSize: 7,
+          fill: "rgba(0,0,0,0.4)",
+          children: d$Compact(tick)
+        })]
+      }, "y-".concat(i));
+    }), categories.map(function (cat, i) {
+      var groupX = padL + i * groupW + groupW / 2;
+      var rVal = recurring[i] || 0;
+      var oVal = oneTime[i] || 0;
+      var rH = rVal / maxVal * chartH;
+      var oH = oVal / maxVal * chartH;
+      var rX = groupX - barW - 1;
+      var oX = groupX + 1;
+      return /*#__PURE__*/jsxs("g", {
+        children: [rVal > 0 && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("rect", {
+            x: rX,
+            y: baseY - rH,
+            width: barW,
+            height: Math.max(rH, 1),
+            fill: recurringColor,
+            rx: 2
+          }), /*#__PURE__*/jsx("text", {
+            x: rX + barW / 2,
+            y: baseY - rH - 3,
+            textAnchor: "middle",
+            fontSize: 6.5,
+            fontWeight: 600,
+            fill: "#111827",
+            children: d$Compact(rVal)
+          })]
+        }), oVal > 0 && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("rect", {
+            x: oX,
+            y: baseY - oH,
+            width: barW,
+            height: Math.max(oH, 1),
+            fill: oneTimeColor,
+            rx: 2
+          }), /*#__PURE__*/jsx("text", {
+            x: oX + barW / 2,
+            y: baseY - oH - 3,
+            textAnchor: "middle",
+            fontSize: 6.5,
+            fontWeight: 600,
+            fill: "#111827",
+            children: d$Compact(oVal)
+          })]
+        }), /*#__PURE__*/jsx("text", {
+          x: groupX,
+          y: height - 4,
+          textAnchor: "middle",
+          fontSize: 7.5,
+          fill: "rgba(0,0,0,0.4)",
+          children: cat
+        })]
+      }, "bar-".concat(i));
+    })]
+  });
+};
+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 _parseDonationTypeCha = parseDonationTypeChartData(donationTypeData),
+    categories = _parseDonationTypeCha.categories,
+    recurring = _parseDonationTypeCha.recurring,
+    oneTime = _parseDonationTypeCha.oneTime,
+    recurringTotal = _parseDonationTypeCha.recurringTotal,
+    oneTimeTotal = _parseDonationTypeCha.oneTimeTotal;
+  return /*#__PURE__*/jsxs(Panel, {
+    title: "Recurring vs one-time",
+    subtitle: "Donation type \xB7 weekly",
+    children: [/*#__PURE__*/jsx("div", {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "6px 10px",
+        marginBottom: 4
+      },
+      children: [{
+        label: "Recurring",
+        total: recurringTotal,
+        color: recurringColor
+      }, {
+        label: "One-time",
+        total: oneTimeTotal,
+        color: oneTimeColor
+      }].map(function (item) {
+        return /*#__PURE__*/jsxs("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 4
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: item.color,
+              flexShrink: 0
+            }
+          }), /*#__PURE__*/jsx("span", {
+            style: {
+              fontSize: 9.5,
+              color: "#374151"
+            },
+            children: item.label
+          }), /*#__PURE__*/jsx("span", {
+            style: {
+              fontSize: 9.5,
+              fontWeight: 700,
+              color: "#111827"
+            },
+            children: d$(item.total)
+          })]
+        }, item.label);
+      })
+    }), /*#__PURE__*/jsx(DonationTypeBarSvg, {
+      categories: categories,
+      recurring: recurring,
+      oneTime: oneTime,
+      recurringColor: recurringColor,
+      oneTimeColor: oneTimeColor
+    })]
+  });
+};
+var KpiCard = function KpiCard(_ref1) {
+  var title = _ref1.title,
+    value = _ref1.value,
+    trend = _ref1.trend,
+    detail = _ref1.detail,
+    _ref1$variant = _ref1.variant,
+    variant = _ref1$variant === void 0 ? "secondary" : _ref1$variant,
+    _ref1$trendPositiveWh = _ref1.trendPositiveWhenNegative,
+    trendPositiveWhenNegative = _ref1$trendPositiveWh === void 0 ? false : _ref1$trendPositiveWh;
   var displayTrend = withTrendArrow(trend);
   var isPrimary = variant === "primary";
   return /*#__PURE__*/jsxs("div", {
@@ -2383,10 +2360,10 @@ var KpiCard = function KpiCard(_ref9) {
     })]
   });
 };
-var StatPair = function StatPair(_ref0) {
-  var label = _ref0.label,
-    val = _ref0.val,
-    trend = _ref0.trend;
+var StatPair = function StatPair(_ref10) {
+  var label = _ref10.label,
+    val = _ref10.val,
+    trend = _ref10.trend;
   var displayTrend = withTrendArrow(trend);
   return /*#__PURE__*/jsxs("div", {
     style: {
@@ -2423,12 +2400,12 @@ var StatPair = function StatPair(_ref0) {
     })]
   });
 };
-var PageHeader = function PageHeader(_ref1) {
-  var dateLabel = _ref1.dateLabel,
-    generatedLabel = _ref1.generatedLabel,
-    activeFilters = _ref1.activeFilters,
-    page = _ref1.page,
-    windowLabel = _ref1.windowLabel;
+var PageHeader = function PageHeader(_ref11) {
+  var dateLabel = _ref11.dateLabel,
+    generatedLabel = _ref11.generatedLabel,
+    activeFilters = _ref11.activeFilters,
+    page = _ref11.page,
+    windowLabel = _ref11.windowLabel;
   return /*#__PURE__*/jsxs("div", {
     style: {
       padding: "22px ".concat(MX, "px 12px"),
@@ -2534,9 +2511,9 @@ var PageHeader = function PageHeader(_ref1) {
     })]
   });
 };
-var PageFooter = function PageFooter(_ref10) {
-  var generatedLabel = _ref10.generatedLabel,
-    page = _ref10.page;
+var PageFooter = function PageFooter(_ref12) {
+  var generatedLabel = _ref12.generatedLabel,
+    page = _ref12.page;
   return /*#__PURE__*/jsx("div", {
     style: {
       padding: "7px ".concat(MX, "px"),
@@ -2556,16 +2533,16 @@ var PageFooter = function PageFooter(_ref10) {
 };
 
 // ─── Main component ───────────────────────────────────────────────────────────
-var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
-  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _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, _ref14, _refundsRaw$refundRat2, _ob$growthPercentage, _ob$peakDay, _refCard$growthPercen;
-  var _ref11$apiData = _ref11.apiData,
-    apiData = _ref11$apiData === void 0 ? {} : _ref11$apiData,
-    _ref11$dateName = _ref11.dateName,
-    dateName = _ref11$dateName === void 0 ? "Last Period" : _ref11$dateName,
-    _ref11$numberOfDays = _ref11.numberOfDays,
-    numberOfDays = _ref11$numberOfDays === void 0 ? 30 : _ref11$numberOfDays,
-    _ref11$activeFilters = _ref11.activeFilters,
-    activeFilters = _ref11$activeFilters === void 0 ? [] : _ref11$activeFilters;
+var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
+  var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _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, _ref16, _refundsRaw$refundRat2, _ob$growthPercentage, _ob$peakDay, _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 now = new Date();
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
   var windowLabel = "".concat(numberOfDays, "-day window");
@@ -2874,10 +2851,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
               gap: 14,
               marginBottom: 6
             },
-            children: [["Email", C.cyan], ["Organic", C.emerald], ["Paid Ads", C.indigo]].map(function (_ref12) {
-              var _ref13 = _slicedToArray(_ref12, 2),
-                name = _ref13[0],
-                color = _ref13[1];
+            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__*/jsxs("div", {
                 style: {
                   display: "flex",
@@ -3053,7 +3030,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
                     style: {
                       fontSize: 9
                     },
-                    children: "".concat(Number((_ref14 = donorMixPrev !== null && donorMixPrev !== void 0 ? donorMixPrev : growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _ref14 !== void 0 ? _ref14 : 0).toFixed(2), "% vs pp")
+                    children: "".concat(Number((_ref16 = donorMixPrev !== null && donorMixPrev !== void 0 ? donorMixPrev : growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _ref16 !== void 0 ? _ref16 : 0).toFixed(2), "% vs pp")
                   })
                 })]
               })]
@@ -3065,10 +3042,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
             gridTemplateColumns: "repeat(4, 1fr)",
             gap: 8
           },
-          children: [/*#__PURE__*/jsx(DonationTypeBarChart, {
-            exportMode: true,
-            subtitle: "Donation type \xB7 weekly",
-            donationTypeData: report.donationTypeData
+          children: [/*#__PURE__*/jsx(DonationTypePanel, {
+            donationTypeData: report.donationTypeData,
+            recurringColor: C.indigo,
+            oneTimeColor: C.emerald
           }), /*#__PURE__*/jsx(Panel, {
             title: "Donor geography",
             subtitle: "Top countries \xB7 ".concat(formatNumber(totalDonors), " total"),
@@ -3224,10 +3201,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref11, 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 (_ref15) {
-                var _ref16 = _slicedToArray(_ref15, 2),
-                  l = _ref16[0],
-                  v = _ref16[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 (_ref17) {
+                var _ref18 = _slicedToArray(_ref17, 2),
+                  l = _ref18[0],
+                  v = _ref18[1];
                 return /*#__PURE__*/jsxs("div", {
                   children: [/*#__PURE__*/jsx("div", {
                     style: {
@@ -3354,10 +3331,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref11, 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 (_ref17) {
-                var _ref18 = _slicedToArray(_ref17, 2),
-                  l = _ref18[0],
-                  v = _ref18[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 (_ref19) {
+                var _ref20 = _slicedToArray(_ref19, 2),
+                  l = _ref20[0],
+                  v = _ref20[1];
                 return /*#__PURE__*/jsxs("div", {
                   children: [/*#__PURE__*/jsx("div", {
                     style: {
@@ -4701,274 +4678,555 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
         sx: {
           display: "flex",
           justifyContent: "space-between",
-          mt: 0.5
+          mt: 0.5
+        },
+        children: axisLabels.map(function (label, idx) {
+          return /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "10px",
+              color: "rgba(0, 0, 0, 0.3)"
+            },
+            children: label
+          }, "".concat(label, "-").concat(idx));
+        })
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: {
+        mt: "auto",
+        pt: bottomSection ? 1.5 : 3,
+        display: "flex",
+        justifyContent: "space-between"
+      },
+      children: footerMetrics.map(function (m, idx) {
+        return /*#__PURE__*/jsxs(Box, {
+          sx: {
+            textAlign: "center"
+          },
+          children: [/*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "10px",
+              color: "rgba(0, 0, 0, 0.4)",
+              fontWeight: 500
+            },
+            children: m.label
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "14px",
+              fontWeight: 700,
+              color: "#000"
+            },
+            children: "".concat(formatNumber(m.value))
+          })]
+        }, idx);
+      })
+    })]
+  });
+};
+
+var TrendValue = function TrendValue(_ref) {
+  var trend = _ref.trend;
+  var direction = getTrendDirection(trend);
+  var color = getTrendColor(trend);
+  var Icon = direction === "down" ? TrendingDown : TrendingUp;
+  return /*#__PURE__*/jsxs(Typography, {
+    sx: {
+      fontSize: "10px",
+      fontWeight: 700,
+      color: color,
+      display: "flex",
+      alignItems: "center"
+    },
+    children: [/*#__PURE__*/jsx(Icon, {
+      sx: {
+        fontSize: "12px"
+      }
+    }), " ", trend]
+  });
+};
+var MetricDonutCard = function MetricDonutCard(_ref2) {
+  var title = _ref2.title,
+    subtitle = _ref2.subtitle,
+    acceptanceRate = _ref2.acceptanceRate,
+    acceptanceVal = _ref2.acceptanceVal,
+    acceptanceTrend = _ref2.acceptanceTrend,
+    raisedVal = _ref2.raisedVal,
+    raisedTrend = _ref2.raisedTrend,
+    _ref2$chartColors = _ref2.chartColors,
+    chartColors = _ref2$chartColors === void 0 ? ["rgb(99, 99, 230)", "#88bfd290"] : _ref2$chartColors,
+    sx = _ref2.sx,
+    _ref2$compact = _ref2.compact,
+    compact = _ref2$compact === void 0 ? false : _ref2$compact;
+  var chartOptions = {
+    chart: {
+      type: "radialBar",
+      sparkline: {
+        enabled: true
+      }
+    },
+    plotOptions: {
+      radialBar: {
+        hollow: {
+          size: "45%"
+        },
+        track: {
+          background: chartColors[1] || "#f0f0f0",
+          strokeWidth: "100%"
+        },
+        dataLabels: {
+          name: {
+            show: true,
+            fontSize: "11px",
+            fontWeight: 500,
+            color: "rgba(0, 0, 0, 0.4)",
+            offsetY: 15
+          },
+          value: {
+            show: true,
+            fontSize: "18px",
+            fontWeight: 700,
+            color: "#000",
+            offsetY: -15,
+            formatter: function formatter() {
+              return acceptanceRate + "%";
+            }
+          }
+        }
+      }
+    },
+    stroke: {
+      lineCap: "butt"
+    },
+    colors: [chartColors[0]],
+    labels: ["accepted"],
+    tooltip: {
+      enabled: true,
+      theme: "dark",
+      y: {
+        formatter: function formatter(val) {
+          return "".concat(val, "%");
+        }
+      }
+    }
+  };
+  var series = [acceptanceRate];
+  return /*#__PURE__*/jsxs(Card, {
+    sx: _objectSpread2({
+      p: compact ? 1.25 : 3,
+      borderRadius: compact ? 3 : 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      bgcolor: "#fff",
+      // height: "100%",
+      display: "flex",
+      flexDirection: "column"
+    }, sx),
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {},
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontWeight: 700,
+          fontSize: compact ? "13px" : "16px",
+          color: "#000",
+          textAlign: "left",
+          lineHeight: 1.15
+        },
+        children: title
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          textAlign: "left",
+          lineHeight: 1.15
+        },
+        children: subtitle
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: {
+        height: compact ? 90 : 160,
+        position: "relative",
+        mt: compact ? 0.5 : 1,
+        display: "flex",
+        justifyContent: "center"
+      },
+      children: /*#__PURE__*/jsx(ReactApexChart, {
+        options: chartOptions,
+        series: series,
+        type: "radialBar",
+        width: "100%",
+        height: "100%"
+      })
+    }), /*#__PURE__*/jsxs(Box, {
+      sx: {},
+      children: [/*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1
+          },
+          children: [/*#__PURE__*/jsx(Box, {
+            sx: {
+              width: 10,
+              height: 10,
+              bgcolor: chartColors[0],
+              borderRadius: "2px"
+            }
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              color: "rgba(0, 0, 0, 0.5)",
+              fontWeight: 500
+            },
+            children: "Acceptance"
+          })]
+        }), /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#000"
+            },
+            children: acceptanceVal
+          }), /*#__PURE__*/jsx(TrendValue, {
+            trend: acceptanceTrend
+          })]
+        })]
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
         },
-        children: axisLabels.map(function (label, idx) {
-          return /*#__PURE__*/jsx(Typography, {
-            sx: {
-              fontSize: "10px",
-              color: "rgba(0, 0, 0, 0.3)"
-            },
-            children: label
-          }, "".concat(label, "-").concat(idx));
-        })
-      })]
-    }), /*#__PURE__*/jsx(Box, {
-      sx: {
-        mt: "auto",
-        pt: bottomSection ? 1.5 : 3,
-        display: "flex",
-        justifyContent: "space-between"
-      },
-      children: footerMetrics.map(function (m, idx) {
-        return /*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsxs(Box, {
           sx: {
-            textAlign: "center"
+            display: "flex",
+            alignItems: "center",
+            gap: 1
           },
-          children: [/*#__PURE__*/jsx(Typography, {
+          children: [/*#__PURE__*/jsx(Box, {
             sx: {
-              fontSize: "10px",
-              color: "rgba(0, 0, 0, 0.4)",
+              width: 10,
+              height: 10,
+              bgcolor: chartColors[1],
+              borderRadius: "2px"
+            }
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              color: "rgba(0, 0, 0, 0.5)",
               fontWeight: 500
             },
-            children: m.label
-          }), /*#__PURE__*/jsx(Typography, {
+            children: "Raised"
+          })]
+        }), /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/*#__PURE__*/jsx(Typography, {
             sx: {
-              fontSize: "14px",
+              fontSize: "13px",
               fontWeight: 700,
               color: "#000"
             },
-            children: "".concat(formatNumber(m.value))
+            children: raisedVal
+          }), /*#__PURE__*/jsx(TrendValue, {
+            trend: raisedTrend
           })]
-        }, idx);
-      })
+        })]
+      })]
     })]
   });
 };
 
-var TrendValue = function TrendValue(_ref) {
-  var trend = _ref.trend;
-  var direction = getTrendDirection(trend);
-  var color = getTrendColor(trend);
-  var Icon = direction === "down" ? TrendingDown : TrendingUp;
-  return /*#__PURE__*/jsxs(Typography, {
-    sx: {
-      fontSize: "10px",
-      fontWeight: 700,
-      color: color,
-      display: "flex",
-      alignItems: "center"
-    },
-    children: [/*#__PURE__*/jsx(Icon, {
-      sx: {
-        fontSize: "12px"
-      }
-    }), " ", trend]
-  });
-};
-var MetricDonutCard = function MetricDonutCard(_ref2) {
-  var title = _ref2.title,
-    subtitle = _ref2.subtitle,
-    acceptanceRate = _ref2.acceptanceRate,
-    acceptanceVal = _ref2.acceptanceVal,
-    acceptanceTrend = _ref2.acceptanceTrend,
-    raisedVal = _ref2.raisedVal,
-    raisedTrend = _ref2.raisedTrend,
-    _ref2$chartColors = _ref2.chartColors,
-    chartColors = _ref2$chartColors === void 0 ? ["rgb(99, 99, 230)", "#88bfd290"] : _ref2$chartColors,
-    sx = _ref2.sx,
-    _ref2$compact = _ref2.compact,
-    compact = _ref2$compact === void 0 ? false : _ref2$compact;
+var DonationTypeBarChart = function DonationTypeBarChart(_ref) {
+  var sx = _ref.sx,
+    donationTypeData = _ref.donationTypeData,
+    _ref$exportMode = _ref.exportMode,
+    exportMode = _ref$exportMode === void 0 ? false : _ref$exportMode,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? "Donation type" : _ref$subtitle,
+    chartHeight = _ref.chartHeight;
+  var recurringColor = "rgb(99, 99, 230)";
+  var oneTimeColor = "#10B981";
+  var colors = [recurringColor, oneTimeColor, "#06B6D4", "#F59E0B", "#EF4444"];
+  var categories = [];
+  var series = [];
+  var summaries = [];
+  var title = "Donation Type";
+  var isDistributed = false;
+  if (donationTypeData && donationTypeData.data && Array.isArray(donationTypeData.data)) {
+    // Time series recurring vs one-time format
+    categories = donationTypeData.data.map(function (item) {
+      return item.label || "";
+    });
+    series = [{
+      name: "Recurring",
+      data: donationTypeData.data.map(function (item) {
+        return item.recurring || 0;
+      })
+    }, {
+      name: "One-time",
+      data: donationTypeData.data.map(function (item) {
+        return item.oneTime || 0;
+      })
+    }];
+    summaries = [{
+      label: "Recurring",
+      total: donationTypeData.totalRecurringDonations || 0,
+      color: recurringColor
+    }, {
+      label: "One-time",
+      total: donationTypeData.totalOneTimeDonations || 0,
+      color: oneTimeColor
+    }];
+    title = "Recurring vs One-time";
+    isDistributed = false;
+  } else if (Array.isArray(donationTypeData) && donationTypeData.length > 0 && donationTypeData[0].totalAmount !== undefined) {
+    // New array format
+    categories = donationTypeData.map(function (item) {
+      return item.type || "";
+    });
+    series = [{
+      name: "Amount",
+      data: donationTypeData.map(function (item) {
+        return item.totalAmount || 0;
+      })
+    }];
+    summaries = donationTypeData.map(function (item, index) {
+      return {
+        label: item.type || "",
+        total: item.totalAmount || 0,
+        color: colors[index % colors.length]
+      };
+    });
+    isDistributed = true;
+    if (donationTypeData.length === 2) {
+      title = "".concat(donationTypeData[0].type, " vs ").concat(donationTypeData[1].type);
+    }
+  } else {
+    var _dataObj$summary, _dataObj$summary2, _dataObj$summary3, _dataObj$summary4;
+    // Object format, empty array, or missing data
+    var dataObj = donationTypeData && _typeof(donationTypeData) === "object" && !Array.isArray(donationTypeData) ? donationTypeData : {};
+    categories = dataObj.categories || [];
+    var rawSeries = dataObj.series || [];
+    if (rawSeries.length && categories.length) {
+      series = rawSeries;
+    } else {
+      series = [{
+        name: "Recurring",
+        data: []
+      }, {
+        name: "One-time",
+        data: []
+      }];
+    }
+    summaries = [{
+      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary = dataObj.summary) === null || _dataObj$summary === void 0 || (_dataObj$summary = _dataObj$summary.recurring) === null || _dataObj$summary === void 0 ? void 0 : _dataObj$summary.label) || "Recurring",
+      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary2 = dataObj.summary) === null || _dataObj$summary2 === void 0 || (_dataObj$summary2 = _dataObj$summary2.recurring) === null || _dataObj$summary2 === void 0 ? void 0 : _dataObj$summary2.total) || 0,
+      color: recurringColor
+    }, {
+      label: (dataObj === null || dataObj === void 0 || (_dataObj$summary3 = dataObj.summary) === null || _dataObj$summary3 === void 0 || (_dataObj$summary3 = _dataObj$summary3.oneTime) === null || _dataObj$summary3 === void 0 ? void 0 : _dataObj$summary3.label) || "One-time",
+      total: (dataObj === null || dataObj === void 0 || (_dataObj$summary4 = dataObj.summary) === null || _dataObj$summary4 === void 0 || (_dataObj$summary4 = _dataObj$summary4.oneTime) === null || _dataObj$summary4 === void 0 ? void 0 : _dataObj$summary4.total) || 0,
+      color: oneTimeColor
+    }];
+    title = "Recurring vs one-time";
+    isDistributed = false;
+  }
+  var resolvedChartHeight = chartHeight !== null && chartHeight !== void 0 ? chartHeight : exportMode ? 110 : 170;
   var chartOptions = {
     chart: {
-      type: "radialBar",
-      sparkline: {
-        enabled: true
+      type: "bar",
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      },
+      fontFamily: "Inter, sans-serif"
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: exportMode ? "68%" : "75%",
+        borderRadius: exportMode ? 3 : 4,
+        distributed: isDistributed,
+        dataLabels: {
+          position: "top"
+        }
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function formatter(val) {
+        return "$".concat(formatNumber(val));
+      },
+      offsetY: exportMode ? -16 : -20,
+      style: {
+        fontSize: exportMode ? "7px" : "9px",
+        fontWeight: 600,
+        colors: ["#000"]
+      }
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ["transparent"]
+    },
+    xaxis: {
+      categories: categories,
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      },
+      labels: {
+        style: {
+          colors: "rgba(0, 0, 0, 0.4)",
+          fontSize: exportMode ? "8px" : "11px"
+        }
       }
     },
-    plotOptions: {
-      radialBar: {
-        hollow: {
-          size: "45%"
-        },
-        track: {
-          background: chartColors[1] || "#f0f0f0",
-          strokeWidth: "100%"
+    yaxis: {
+      min: 0,
+      tickAmount: exportMode ? 3 : 4,
+      labels: {
+        formatter: function formatter(val) {
+          return "$".concat(formatNumber(val));
         },
-        dataLabels: {
-          name: {
-            show: true,
-            fontSize: "11px",
-            fontWeight: 500,
-            color: "rgba(0, 0, 0, 0.4)",
-            offsetY: 15
-          },
-          value: {
-            show: true,
-            fontSize: "18px",
-            fontWeight: 700,
-            color: "#000",
-            offsetY: -15,
-            formatter: function formatter() {
-              return acceptanceRate + "%";
-            }
-          }
+        style: {
+          colors: "rgba(0, 0, 0, 0.4)",
+          fontSize: exportMode ? "8px" : "10px"
         }
       }
     },
-    stroke: {
-      lineCap: "butt"
+    fill: {
+      opacity: 1
+    },
+    colors: colors,
+    grid: {
+      borderColor: "#f1f1f1",
+      strokeDashArray: 4,
+      padding: {
+        left: 0,
+        right: 0
+      },
+      yaxis: {
+        lines: {
+          show: true
+        }
+      }
+    },
+    legend: {
+      show: false
     },
-    colors: [chartColors[0]],
-    labels: ["accepted"],
     tooltip: {
-      enabled: true,
-      theme: "dark",
       y: {
         formatter: function formatter(val) {
-          return "".concat(val, "%");
+          return "$".concat(formatNumber(val));
         }
       }
     }
   };
-  var series = [acceptanceRate];
   return /*#__PURE__*/jsxs(Card, {
     sx: _objectSpread2({
-      p: compact ? 1.25 : 3,
-      borderRadius: compact ? 3 : 4,
-      border: "1px solid #f0f0f0",
-      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       bgcolor: "#fff",
-      // height: "100%",
-      display: "flex",
-      flexDirection: "column"
+      borderRadius: exportMode ? 2 : 4,
+      border: exportMode ? "1px solid #DDE3EA" : "1px solid #f0f0f0",
+      boxShadow: exportMode ? "0 1px 0 rgba(15,23,42,0.03)" : "0 4px 24px rgba(0,0,0,0.06)",
+      p: exportMode ? 1.5 : 3,
+      height: exportMode ? "100%" : "auto",
+      boxSizing: "border-box"
     }, sx),
     children: [/*#__PURE__*/jsxs(Box, {
-      sx: {},
-      children: [/*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontWeight: 700,
-          fontSize: compact ? "13px" : "16px",
-          color: "#000",
-          textAlign: "left",
-          lineHeight: 1.15
-        },
-        children: title
-      }), /*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: "12px",
-          color: "rgba(0, 0, 0, 0.4)",
-          textAlign: "left",
-          lineHeight: 1.15
-        },
-        children: subtitle
-      })]
-    }), /*#__PURE__*/jsx(Box, {
       sx: {
-        height: compact ? 90 : 160,
-        position: "relative",
-        mt: compact ? 0.5 : 1,
         display: "flex",
-        justifyContent: "center"
+        flexDirection: "column"
       },
-      children: /*#__PURE__*/jsx(ReactApexChart, {
-        options: chartOptions,
-        series: series,
-        type: "radialBar",
-        width: "100%",
-        height: "100%"
-      })
-    }), /*#__PURE__*/jsxs(Box, {
-      sx: {},
       children: [/*#__PURE__*/jsxs(Box, {
         sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center"
+          textAlign: "left"
         },
-        children: [/*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Typography, {
           sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 1
+            fontWeight: 700,
+            fontSize: exportMode ? "12px" : "18px",
+            color: "#000",
+            lineHeight: 1.15
           },
-          children: [/*#__PURE__*/jsx(Box, {
-            sx: {
-              width: 10,
-              height: 10,
-              bgcolor: chartColors[0],
-              borderRadius: "2px"
-            }
-          }), /*#__PURE__*/jsx(Typography, {
-            sx: {
-              fontSize: "13px",
-              color: "rgba(0, 0, 0, 0.5)",
-              fontWeight: 500
-            },
-            children: "Acceptance"
-          })]
-        }), /*#__PURE__*/jsxs(Box, {
+          children: title
+        }), /*#__PURE__*/jsx(Typography, {
           sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 0.5
+            fontSize: exportMode ? "9.5px" : "13px",
+            color: exportMode ? "#94A3B8" : "rgba(0, 0, 0, 0.4)",
+            lineHeight: 1.15
           },
-          children: [/*#__PURE__*/jsx(Typography, {
-            sx: {
-              fontSize: "13px",
-              fontWeight: 700,
-              color: "#000"
-            },
-            children: acceptanceVal
-          }), /*#__PURE__*/jsx(TrendValue, {
-            trend: acceptanceTrend
-          })]
+          children: subtitle
         })]
-      }), /*#__PURE__*/jsxs(Box, {
+      }), /*#__PURE__*/jsx(Box, {
         sx: {
           display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center"
+          gap: exportMode ? 1 : 1.5,
+          mt: exportMode ? 0.75 : 0.5,
+          flexWrap: "wrap"
         },
-        children: [/*#__PURE__*/jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 1
-          },
-          children: [/*#__PURE__*/jsx(Box, {
-            sx: {
-              width: 10,
-              height: 10,
-              bgcolor: chartColors[1],
-              borderRadius: "2px"
-            }
-          }), /*#__PURE__*/jsx(Typography, {
-            sx: {
-              fontSize: "13px",
-              color: "rgba(0, 0, 0, 0.5)",
-              fontWeight: 500
-            },
-            children: "Raised"
-          })]
-        }), /*#__PURE__*/jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 0.5
-          },
-          children: [/*#__PURE__*/jsx(Typography, {
+        children: summaries.map(function (item, index) {
+          return /*#__PURE__*/jsxs(Box, {
             sx: {
-              fontSize: "13px",
-              fontWeight: 700,
-              color: "#000"
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
             },
-            children: raisedVal
-          }), /*#__PURE__*/jsx(TrendValue, {
-            trend: raisedTrend
-          })]
-        })]
+            children: [/*#__PURE__*/jsx(Box, {
+              sx: {
+                width: exportMode ? 6 : 8,
+                height: exportMode ? 6 : 8,
+                bgcolor: item.color,
+                borderRadius: "50%"
+              }
+            }), /*#__PURE__*/jsx(Typography, {
+              sx: {
+                fontSize: exportMode ? "9.5px" : "13px",
+                color: exportMode ? "#374151" : "rgba(0, 0, 0, 0.5)",
+                fontWeight: 500
+              },
+              children: item.label
+            }), /*#__PURE__*/jsxs(Typography, {
+              sx: {
+                fontSize: exportMode ? "9.5px" : "13px",
+                fontWeight: exportMode ? 700 : 600,
+                color: "#000"
+              },
+              children: ["$", formatNumber(item.total || 0)]
+            })]
+          }, item.label || index);
+        })
       })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: {
+        height: resolvedChartHeight,
+        width: exportMode ? "calc(100% + 24px)" : "calc(100% + 48px)",
+        ml: exportMode ? -1.5 : -3,
+        mr: exportMode ? -1.5 : -3
+      },
+      children: /*#__PURE__*/jsx(ReactApexChart, {
+        options: chartOptions,
+        series: series,
+        type: "bar",
+        height: "100%"
+      })
     })]
   });
 };