@ammarkhalidfarooq/dashboard-package 0.6.82 → 0.6.84

package/dist/index.cjs.js

@@ -716,7 +716,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
           },
           children: [isPremium ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
             sx: {
-              textAlign: "left"
+              textAlign: "left",
+              marginBottom: "12px"
             },
             children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
               sx: {
@@ -769,7 +770,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
             })]
           }) : /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
             sx: {
-              textAlign: "left"
+              textAlign: "left",
+              marginBottom: "12px"
             },
             children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
               variant: "subtitle2",
@@ -4005,7 +4007,9 @@ var NewOverview = function NewOverview(_ref) {
         apiLoading: apiLoading
       }), activeSection === "Paid" && /*#__PURE__*/jsxRuntime.jsx(PaidSection$2, {
         apiData: apiData,
-        apiLoading: apiLoading
+        dateName: dateName,
+        apiLoading: apiLoading,
+        numberOfDays: numberOfDays
       }), activeSection === "Organic" && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: {},
         children: /*#__PURE__*/jsxRuntime.jsx(OrganicSection$2, {
@@ -6253,36 +6257,39 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard(_ref7) {
     })]
   });
 };
-var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
-  var data = [{
-    id: "YO",
-    // avatarBg: "#c1cfde70",
+var getCampaignInitials$1 = function getCampaignInitials() {
+  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase() || "—";
+};
+var TopPerformingCampaignsCard = function TopPerformingCampaignsCard(_ref8) {
+  var _ref8$data = _ref8.data,
+    dataProp = _ref8$data === void 0 ? null : _ref8$data;
+  var fallbackData = [{
     name: "Yemen Orphans - Meta",
     spend: "$8,200",
     revenue: "$31,400",
     roas: "3.8x"
   }, {
-    id: "GF",
-    // avatarBg: "#c1cfdedb",
     name: "Gaza Food - Google",
     spend: "$7,400",
     revenue: "$25,200",
     roas: "3.4x"
   }, {
-    id: "PW",
-    // avatarBg: "#c1cfdedb",
     name: "Pakistan Wells - Meta",
     spend: "$5,800",
     revenue: "$18,600",
     roas: "3.2x"
   }, {
-    id: "R",
-    // avatarBg: "#c1cfdedb",
     name: "Ramadan - TikTok",
     spend: "$3,200",
     revenue: "$8,900",
     roas: "2.8x"
   }];
+  var data = dataProp === null ? fallbackData : dataProp;
   return /*#__PURE__*/jsxRuntime.jsxs(CardWrapper, {
     title: "Top performing campaigns",
     subtitle: "Paid campaigns ranked by ROAS",
@@ -6327,7 +6334,14 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
         },
         children: "ROAS"
       })]
-    }), data.map(function (item, index) {
+    }), data.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      sx: {
+        fontSize: "13px",
+        color: "rgba(0, 0, 0, 0.4)",
+        py: 2
+      },
+      children: "No campaign data for this period"
+    }) : data.map(function (item, index) {
       return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
         sx: {
           display: "grid",
@@ -6356,7 +6370,7 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
               fontSize: "10px",
               fontWeight: 700
             },
-            children: item.id
+            children: item.id || getCampaignInitials$1(item.name)
           }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
             sx: {
               fontSize: "13px",
@@ -6400,9 +6414,9 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
     })]
   });
 };
-var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref8) {
-  var sx = _ref8.sx,
-    donorGeographyData = _ref8.donorGeographyData;
+var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref9) {
+  var sx = _ref9.sx,
+    donorGeographyData = _ref9.donorGeographyData;
   var rawCountries = Array.isArray(donorGeographyData) ? donorGeographyData : (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.countries) || [];
   var data = rawCountries.map(function (item) {
     return {
@@ -17978,87 +17992,341 @@ var OverallSection$1 = /*#__PURE__*/Object.freeze({
   default: OverallSection
 });
 
+var CHANNEL_STYLES = {
+  "Meta Ads": {
+    id: "M",
+    avatarBg: "#4267B2",
+    color: "#4267B2"
+  },
+  "Google Ads": {
+    id: "G",
+    avatarBg: "#4285F4",
+    color: "#4285F4"
+  },
+  "TikTok Ads": {
+    id: "T",
+    avatarBg: "#000000",
+    color: "#cd249dff"
+  },
+  YouTube: {
+    id: "Y",
+    avatarBg: "#FF0000",
+    color: "#FF0000"
+  },
+  Snapchat: {
+    id: "S",
+    avatarBg: "#FFFC00",
+    color: "#FFFC00"
+  }
+};
+var formatGrowth$2 = function formatGrowth(value) {
+  return "".concat(Number(value !== null && value !== void 0 ? value : 0).toFixed(2), "% vs pp");
+};
+var mapTimeSeries$2 = function mapTimeSeries(series) {
+  if (!Array.isArray(series) || series.length === 0) {
+    return {
+      categories: [],
+      data: []
+    };
+  }
+  return {
+    categories: series.map(function (item) {
+      return item.date;
+    }),
+    data: series.map(function (item) {
+      var _item$value;
+      return (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 0;
+    })
+  };
+};
+var getChannelStyle = function getChannelStyle() {
+  var channel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  return CHANNEL_STYLES[channel] || {
+    id: channel.slice(0, 1).toUpperCase() || "?",
+    avatarBg: "#F3F4F6",
+    color: "#6366F1"
+  };
+};
+var mapChannelTrend = function mapChannelTrend(trend) {
+  var normalized = (trend || "stable").toLowerCase();
+  if (normalized === "down" || normalized === "declining") {
+    return {
+      type: "trend",
+      trendType: "down",
+      trendLabel: "Declining"
+    };
+  }
+  if (normalized === "up" || normalized === "improving") {
+    return {
+      type: "trend",
+      trendType: "up",
+      trendLabel: "Improving"
+    };
+  }
+  return {
+    type: "status",
+    status: "Stable",
+    statusBg: "#F3F4F6",
+    statusColor: "#6B7280"
+  };
+};
+var getRoasColor = function getRoasColor(roas) {
+  return Number(roas !== null && roas !== void 0 ? roas : 0) >= 2.5 ? "#22C55E" : "#EF4444";
+};
 var PaidSection = function PaidSection(_ref) {
-  var _ref$apiLoading = _ref.apiLoading,
-    apiLoading = _ref$apiLoading === void 0 ? false : _ref$apiLoading;
+  var _apiData$spendVsReven, _apiData$spendVsReven2, _selectedInfo$categor, _spendAllocation$subt, _spendAllocation$seri, _spendAllocation$labe, _spendAllocation$colo, _spendAllocation$cent, _spendAllocation$cent2, _spendAllocation$item;
+  var _ref$apiData = _ref.apiData,
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
+    _ref.dateName;
+    var _ref$apiLoading = _ref.apiLoading,
+    apiLoading = _ref$apiLoading === void 0 ? false : _ref$apiLoading,
+    _ref$numberOfDays = _ref.numberOfDays,
+    numberOfDays = _ref$numberOfDays === void 0 ? 30 : _ref$numberOfDays;
   var _useState = React.useState("Total Spent"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
-  if (apiLoading) {
-    return /*#__PURE__*/jsxRuntime.jsx(PaidSectionSkeleton, {});
-  }
-  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-  var metricInfo = {
-    "Total Spent": {
-      value: "$".concat(formatNumber(80313)),
-      subValue: "12% vs last month",
-      chartLabel: "Daily Spend",
-      data: [800, 950, 700, 1100, 900, 1200, 1300],
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
-      money: true,
-      error: false,
-      warning: false
-    },
-    "Revinue Raised": {
-      value: "$".concat(formatNumber(240398)),
-      subValue: "12% vs last month",
-      chartLabel: "Daily Revenue",
-      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
-      money: true,
-      error: false,
-      warning: false
-    },
-    ROAS: {
-      value: "3.0",
-      subValue: "12% vs last month",
-      chartLabel: "ROAS Trend",
-      data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {}),
-      money: false,
-      error: false,
-      warning: false
-    },
-    "Cost per donor": {
-      value: "$".concat(formatNumber(373)),
-      subValue: "12% vs last month",
-      chartLabel: "CPA Trend",
-      data: [350, 380, 360, 410, 390, 370, 373],
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PersonOutlined, {}),
-      money: true,
-      error: false,
-      warning: false
-    },
-    "Conversion rate": {
-      value: "3.1%",
-      subValue: "12% vs last month",
-      chartLabel: "Conversion Rate",
-      data: [2.8, 3.0, 2.9, 3.4, 3.2, 3.1, 3.1],
-      icon: /*#__PURE__*/jsxRuntime.jsx(ConversionRateIcon, {}),
-      avatarSx: conversionRateAvatarSx,
-      money: false,
-      error: false,
-      warning: false
-    },
-    "Avg donation": {
-      value: "$".concat(formatNumber(130.58)),
-      subValue: "12% vs last month",
-      chartLabel: "Average Donation",
-      data: [120, 135, 125, 140, 130, 128, 130.58],
-      icon: /*#__PURE__*/jsxRuntime.jsx(AverageDonationIcon, {}),
-      avatarSx: avgDonationAvatarSx,
-      money: true,
-      error: false,
-      warning: false
+  var overview = (apiData === null || apiData === void 0 ? void 0 : apiData.overview) || {};
+  var growth = (overview === null || overview === void 0 ? void 0 : overview.growthPercentage) || {};
+  var hasPaidOverview = Boolean(apiData === null || apiData === void 0 ? void 0 : apiData.overview);
+  var spendSeries = mapTimeSeries$2(apiData === null || apiData === void 0 || (_apiData$spendVsReven = apiData.spendVsRevenue) === null || _apiData$spendVsReven === void 0 ? void 0 : _apiData$spendVsReven.spend);
+  var revenueSeries = mapTimeSeries$2(apiData === null || apiData === void 0 || (_apiData$spendVsReven2 = apiData.spendVsRevenue) === null || _apiData$spendVsReven2 === void 0 ? void 0 : _apiData$spendVsReven2.revenue);
+  var roasChartData = React.useMemo(function () {
+    if (spendSeries.data.length === 0 || revenueSeries.data.length === 0) {
+      return [];
     }
+    var length = Math.min(spendSeries.data.length, revenueSeries.data.length);
+    return Array.from({
+      length: length
+    }, function (_, index) {
+      var _spendSeries$data$ind, _revenueSeries$data$i;
+      var spend = (_spendSeries$data$ind = spendSeries.data[index]) !== null && _spendSeries$data$ind !== void 0 ? _spendSeries$data$ind : 0;
+      var revenue = (_revenueSeries$data$i = revenueSeries.data[index]) !== null && _revenueSeries$data$i !== void 0 ? _revenueSeries$data$i : 0;
+      return spend > 0 ? revenue / spend : 0;
+    });
+  }, [spendSeries.data, revenueSeries.data]);
+  var fallbackCategories = spendSeries.categories.length ? spendSeries.categories : revenueSeries.categories.length ? revenueSeries.categories : ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+  var flatSeries = function flatSeries(value) {
+    return fallbackCategories.length > 0 ? fallbackCategories.map(function () {
+      return Number(value !== null && value !== void 0 ? value : 0);
+    }) : [Number(value !== null && value !== void 0 ? value : 0)];
   };
+  var metricInfo = React.useMemo(function () {
+    var _overview$totalSpent, _overview$totalRevenu, _overview$roas, _overview$roas2, _overview$costPerDono, _overview$costPerDono2, _overview$conversionR, _overview$conversionR2, _overview$averageDona, _overview$averageDona2;
+    if (!hasPaidOverview) {
+      return {
+        "Total Spent": {
+          value: "$".concat(formatNumber(80313)),
+          subValue: "12% vs pp",
+          data: [800, 950, 700, 1100, 900, 1200, 1300],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
+          money: true,
+          error: false,
+          warning: false
+        },
+        "Revinue Raised": {
+          value: "$".concat(formatNumber(240398)),
+          subValue: "12% vs pp",
+          data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+          money: true,
+          error: false,
+          warning: false
+        },
+        ROAS: {
+          value: "3.0x",
+          subValue: "12% vs pp",
+          data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        "Cost per donor": {
+          value: "$".concat(formatNumber(373)),
+          subValue: "12% vs pp",
+          data: [350, 380, 360, 410, 390, 370, 373],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PersonOutlined, {}),
+          money: true,
+          error: false,
+          warning: false
+        },
+        "Conversion rate": {
+          value: "3.1%",
+          subValue: "12% vs pp",
+          data: [2.8, 3.0, 2.9, 3.4, 3.2, 3.1, 3.1],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsxRuntime.jsx(ConversionRateIcon, {}),
+          avatarSx: conversionRateAvatarSx,
+          money: false,
+          error: false,
+          warning: false
+        },
+        "Avg donation": {
+          value: "$".concat(formatNumber(130.58)),
+          subValue: "12% vs pp",
+          data: [120, 135, 125, 140, 130, 128, 130.58],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsxRuntime.jsx(AverageDonationIcon, {}),
+          avatarSx: avgDonationAvatarSx,
+          money: true,
+          error: false,
+          warning: false
+        }
+      };
+    }
+    return {
+      "Total Spent": {
+        value: "$".concat(formatNumber((_overview$totalSpent = overview.totalSpent) !== null && _overview$totalSpent !== void 0 ? _overview$totalSpent : 0)),
+        subValue: formatGrowth$2(growth.totalSpent),
+        data: spendSeries.data,
+        categories: spendSeries.categories,
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
+        money: true,
+        error: false,
+        warning: false
+      },
+      "Revinue Raised": {
+        value: "$".concat(formatNumber((_overview$totalRevenu = overview.totalRevenue) !== null && _overview$totalRevenu !== void 0 ? _overview$totalRevenu : 0)),
+        subValue: formatGrowth$2(growth.totalRevenue),
+        data: revenueSeries.data,
+        categories: revenueSeries.categories,
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+        money: true,
+        error: false,
+        warning: false
+      },
+      ROAS: {
+        value: "".concat(Number((_overview$roas = overview.roas) !== null && _overview$roas !== void 0 ? _overview$roas : 0).toFixed(1), "x"),
+        subValue: formatGrowth$2(growth.roas),
+        data: roasChartData.length > 0 ? roasChartData : flatSeries((_overview$roas2 = overview.roas) !== null && _overview$roas2 !== void 0 ? _overview$roas2 : 0),
+        categories: spendSeries.categories.length ? spendSeries.categories : fallbackCategories,
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      "Cost per donor": {
+        value: "$".concat(formatNumber((_overview$costPerDono = overview.costPerDonor) !== null && _overview$costPerDono !== void 0 ? _overview$costPerDono : 0)),
+        subValue: formatGrowth$2(growth.costPerDonor),
+        data: flatSeries((_overview$costPerDono2 = overview.costPerDonor) !== null && _overview$costPerDono2 !== void 0 ? _overview$costPerDono2 : 0),
+        categories: fallbackCategories,
+        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PersonOutlined, {}),
+        money: true,
+        error: false,
+        warning: false
+      },
+      "Conversion rate": {
+        value: "".concat(Number((_overview$conversionR = overview.conversionRate) !== null && _overview$conversionR !== void 0 ? _overview$conversionR : 0).toFixed(2), "%"),
+        subValue: formatGrowth$2(growth.conversionRate),
+        data: flatSeries((_overview$conversionR2 = overview.conversionRate) !== null && _overview$conversionR2 !== void 0 ? _overview$conversionR2 : 0),
+        categories: fallbackCategories,
+        icon: /*#__PURE__*/jsxRuntime.jsx(ConversionRateIcon, {}),
+        avatarSx: conversionRateAvatarSx,
+        money: false,
+        error: false,
+        warning: false
+      },
+      "Avg donation": {
+        value: "$".concat(formatNumber((_overview$averageDona = overview.averageDonation) !== null && _overview$averageDona !== void 0 ? _overview$averageDona : 0)),
+        subValue: formatGrowth$2(growth.averageDonation),
+        data: flatSeries((_overview$averageDona2 = overview.averageDonation) !== null && _overview$averageDona2 !== void 0 ? _overview$averageDona2 : 0),
+        categories: fallbackCategories,
+        icon: /*#__PURE__*/jsxRuntime.jsx(AverageDonationIcon, {}),
+        avatarSx: avgDonationAvatarSx,
+        money: true,
+        error: false,
+        warning: false
+      }
+    };
+  }, [fallbackCategories, growth, hasPaidOverview, overview, revenueSeries, roasChartData, spendSeries]);
+  var channelRows = React.useMemo(function () {
+    var channels = apiData === null || apiData === void 0 ? void 0 : apiData.channelPerformance;
+    if (!hasPaidOverview) return null;
+    if (!Array.isArray(channels) || channels.length === 0) return [];
+    return channels.map(function (item) {
+      var _item$roas, _item$spend, _item$revenue, _item$cpa;
+      var style = getChannelStyle(item.channel);
+      var roas = Number((_item$roas = item.roas) !== null && _item$roas !== void 0 ? _item$roas : 0);
+      return _objectSpread2({
+        id: style.id,
+        avatarBg: style.avatarBg,
+        name: item.channel,
+        val1: "$".concat(formatNumber((_item$spend = item.spend) !== null && _item$spend !== void 0 ? _item$spend : 0)),
+        val2: "$".concat(formatNumber((_item$revenue = item.revenue) !== null && _item$revenue !== void 0 ? _item$revenue : 0)),
+        val3: "".concat(roas.toFixed(1), "x"),
+        val4: "$".concat(formatNumber((_item$cpa = item.cpa) !== null && _item$cpa !== void 0 ? _item$cpa : 0)),
+        highlightVal3: true,
+        val3Color: getRoasColor(roas)
+      }, mapChannelTrend(item.trend));
+    });
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.channelPerformance, hasPaidOverview]);
+  var spendAllocation = React.useMemo(function () {
+    var _allocation$totalSpen, _allocation$totalSpen2;
+    var allocation = apiData === null || apiData === void 0 ? void 0 : apiData.spendAllocation;
+    if (!hasPaidOverview) return null;
+    if (!allocation || !Array.isArray(allocation.data) || allocation.data.length === 0) {
+      return null;
+    }
+    var items = allocation.data.map(function (item) {
+      var _item$percentage, _item$spend2, _item$percentage2;
+      var style = getChannelStyle(item.channel);
+      return {
+        label: item.channel,
+        val: "".concat(Number((_item$percentage = item.percentage) !== null && _item$percentage !== void 0 ? _item$percentage : 0).toFixed(1), "%"),
+        color: style.color,
+        spend: (_item$spend2 = item.spend) !== null && _item$spend2 !== void 0 ? _item$spend2 : 0,
+        percentage: (_item$percentage2 = item.percentage) !== null && _item$percentage2 !== void 0 ? _item$percentage2 : 0
+      };
+    });
+    return {
+      series: items.map(function (item) {
+        return item.percentage;
+      }),
+      labels: items.map(function (item) {
+        return item.label;
+      }),
+      colors: items.map(function (item) {
+        return item.color;
+      }),
+      centerLabel: "total spend",
+      centerValue: "$".concat(formatNumber((_allocation$totalSpen = allocation.totalSpend) !== null && _allocation$totalSpen !== void 0 ? _allocation$totalSpen : 0)),
+      subtitle: "Where $".concat(formatNumber((_allocation$totalSpen2 = allocation.totalSpend) !== null && _allocation$totalSpen2 !== void 0 ? _allocation$totalSpen2 : 0), " went"),
+      items: items.map(function (_ref2) {
+        var label = _ref2.label,
+          val = _ref2.val,
+          color = _ref2.color;
+        return {
+          label: label,
+          val: val,
+          color: color
+        };
+      })
+    };
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.spendAllocation, hasPaidOverview]);
+  var topCampaignsData = React.useMemo(function () {
+    var campaigns = apiData === null || apiData === void 0 ? void 0 : apiData.topCampaigns;
+    if (!hasPaidOverview) return null;
+    if (!Array.isArray(campaigns)) return null;
+    if (campaigns.length === 0) return [];
+    return campaigns.map(function (item) {
+      var _item$spend3, _item$revenue2, _item$roas2;
+      return {
+        name: item.campaign || item.name || "Unknown",
+        spend: "$".concat(formatNumber((_item$spend3 = item.spend) !== null && _item$spend3 !== void 0 ? _item$spend3 : 0)),
+        revenue: "$".concat(formatNumber((_item$revenue2 = item.revenue) !== null && _item$revenue2 !== void 0 ? _item$revenue2 : 0)),
+        roas: "".concat(Number((_item$roas2 = item.roas) !== null && _item$roas2 !== void 0 ? _item$roas2 : 0).toFixed(1), "x")
+      };
+    });
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaigns, hasPaidOverview]);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsxRuntime.jsx(MetricCard$1
-    // key={title}
-    , {
+    return /*#__PURE__*/jsxRuntime.jsx(MetricCard$1, {
       title: title,
-      value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
+      value: metricInfo[title].value,
       caption: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
       avatarSx: metricInfo[title].avatarSx,
@@ -18071,32 +18339,22 @@ var PaidSection = function PaidSection(_ref) {
         border: "2px solid #ef4444",
         bgcolor: "#fffafa"
       } : {}
-    })
-    // <DisplayCard
-    //   key={title}
-    //   title={title}
-    //   value={metricInfo[title].value}
-    //   subValue={metricInfo[title].subValue}
-    //   icon={metricInfo[title].icon}
-    //   onClick={() => setActiveMetric(title)}
-    //   isActive={activeMetric === title}
-    //   sx={{
-    //     // border:
-    //     //   activeMetric === title
-    //     //     ? "2px solid rgb(99, 99, 230)"
-    //     //     : "2px solid #f0f0f0",
-    //   }}
-    // />
-;
+    });
   };
-  var selectedInfo = metricInfo[activeMetric];
+  var selectedInfo = metricInfo[activeMetric] || metricInfo["Total Spent"];
+  var chartCategories = ((_selectedInfo$categor = selectedInfo.categories) === null || _selectedInfo$categor === void 0 ? void 0 : _selectedInfo$categor.length) > 0 ? selectedInfo.categories : fallbackCategories;
   var mainChart = {
     label: activeMetric,
     value: selectedInfo.value,
     trend: selectedInfo.subValue,
     data: selectedInfo.data,
-    categories: categories
+    categories: chartCategories,
+    hideControls: true,
+    isAmount: selectedInfo.money
   };
+  if (apiLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx(PaidSectionSkeleton, {});
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
@@ -18123,7 +18381,9 @@ var PaidSection = function PaidSection(_ref) {
         md: 12,
         type: "area",
         isPrimary: true,
-        isPremium: true
+        isPremium: true,
+        numberOfDays: numberOfDays,
+        metric: activeMetric === "Conversion rate" ? "Percent" : activeMetric === "ROAS" ? "ROAS" : selectedInfo.money ? "Revenue" : "Donors"
       })
     }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
       container: true,
@@ -18145,7 +18405,7 @@ var PaidSection = function PaidSection(_ref) {
           columns: ["channel", "spend", "revenue", "ROAS", "CPA", "trend"],
           gridTemplateColumns: "2.2fr 1fr 1fr 0.8fr 0.8fr 1.2fr",
           height: "100%",
-          rows: [{
+          rows: channelRows !== null && channelRows !== void 0 ? channelRows : [{
             id: "M",
             avatarBg: "#4267B2",
             name: "Meta Ads",
@@ -18226,13 +18486,13 @@ var PaidSection = function PaidSection(_ref) {
         },
         children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
           title: "Spend allocation",
-          subtitle: "Where $80.3K went this month",
-          series: [40.8, 35.1, 14.2, 6.6, 3.3],
-          labels: ["Meta Ads", "Google Ads", "TikTok", "YouTube", "Snapchat"],
-          colors: ["#4267B2", "#4285F4", "#cd249dff", "#FF0000", "#FFFC00"],
-          centerLabel: "total spend",
-          centerValue: "$80.3K",
-          items: [{
+          subtitle: (_spendAllocation$subt = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.subtitle) !== null && _spendAllocation$subt !== void 0 ? _spendAllocation$subt : "Where $80.3K went this month",
+          series: (_spendAllocation$seri = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.series) !== null && _spendAllocation$seri !== void 0 ? _spendAllocation$seri : [40.8, 35.1, 14.2, 6.6, 3.3],
+          labels: (_spendAllocation$labe = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.labels) !== null && _spendAllocation$labe !== void 0 ? _spendAllocation$labe : ["Meta Ads", "Google Ads", "TikTok", "YouTube", "Snapchat"],
+          colors: (_spendAllocation$colo = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.colors) !== null && _spendAllocation$colo !== void 0 ? _spendAllocation$colo : ["#4267B2", "#4285F4", "#cd249dff", "#FF0000", "#FFFC00"],
+          centerLabel: (_spendAllocation$cent = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.centerLabel) !== null && _spendAllocation$cent !== void 0 ? _spendAllocation$cent : "total spend",
+          centerValue: (_spendAllocation$cent2 = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.centerValue) !== null && _spendAllocation$cent2 !== void 0 ? _spendAllocation$cent2 : "$80.3K",
+          items: (_spendAllocation$item = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.items) !== null && _spendAllocation$item !== void 0 ? _spendAllocation$item : [{
             label: "Meta Ads",
             val: "40.8%",
             color: "#4267B2"
@@ -18273,7 +18533,9 @@ var PaidSection = function PaidSection(_ref) {
         sx: {
           paddingTop: "0px !important"
         },
-        children: /*#__PURE__*/jsxRuntime.jsx(TopPerformingCampaignsCard, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(TopPerformingCampaignsCard, {
+          data: topCampaignsData
+        })
       }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
         xs: 12,
@@ -18285,7 +18547,9 @@ var PaidSection = function PaidSection(_ref) {
             md: "0px"
           }
         },
-        children: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {})
+        children: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
+          donorGeographyData: apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography
+        })
       })]
     })]
   });