@ammarkhalidfarooq/dashboard-package 0.5.20 → 0.5.21

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { Suspense, lazy, useState, useRef, useEffect } from 'react';
+import React, { Suspense, lazy, useState, useRef, useEffect, useMemo } from 'react';
 import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Avatar, Stack } from '@mui/material';
 import { MoreHoriz, MoreVert, Check, InfoOutlined, Settings, TrendingUp, Adjust, PaidOutlined, PeopleAltOutlined, FavoriteOutlined, PersonOutlined, IndeterminateCheckBoxOutlined, SearchOutlined, HighlightOff, NearMe, Email, NotInterested } from '@mui/icons-material';
 import { createTheme, useTheme } from '@mui/material/styles';
@@ -2690,7 +2690,8 @@ var NewOverview = function NewOverview(_ref) {
       }), activeSection === "Organic" && /*#__PURE__*/jsx(Box, {
         sx: {},
         children: /*#__PURE__*/jsx(OrganicSection$2, {
-          apiData: apiData
+          apiData: apiData,
+          dateName: dateName
         })
       }), activeSection === "Email" && /*#__PURE__*/jsx(Box, {
         sx: {},
@@ -5694,8 +5695,10 @@ var CardWrapper = function CardWrapper(_ref) {
     })
   });
 };
-var LandingPagesCard = function LandingPagesCard() {
-  var data = [{
+var SOURCE_COLORS = ["#4285F4", "#10B981", "#6366F1", "#F59E0B", "#94A3B8", "#EC4899", "#4267B2", "#06510b"];
+var LandingPagesCard = function LandingPagesCard(_ref2) {
+  var dataProp = _ref2.data;
+  var data = dataProp !== null && dataProp !== void 0 ? dataProp : [{
     page: "/yemen-orphans-appeal",
     visitors: "1,840",
     donations: "32",
@@ -5785,7 +5788,15 @@ var LandingPagesCard = function LandingPagesCard() {
         },
         children: "Conv. rate"
       })]
-    }), data.map(function (item, index) {
+    }), data.length === 0 ? /*#__PURE__*/jsx(Typography, {
+      sx: {
+        fontSize: "13px",
+        color: "rgba(0, 0, 0, 0.45)",
+        py: 2,
+        textAlign: "left"
+      },
+      children: "No landing page data for this period."
+    }) : data.map(function (item, index) {
       return /*#__PURE__*/jsxs(Box, {
         sx: {
           display: "grid",
@@ -5800,8 +5811,12 @@ var LandingPagesCard = function LandingPagesCard() {
             fontSize: "13px",
             fontWeight: 700,
             color: "#000",
-            textAlign: "left"
+            textAlign: "left",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
           },
+          title: item.page,
           children: item.page
         }), /*#__PURE__*/jsx(Typography, {
           sx: {
@@ -5840,8 +5855,11 @@ var LandingPagesCard = function LandingPagesCard() {
     })]
   });
 };
-var KeywordsCard = function KeywordsCard() {
-  var data = [{
+var KeywordsCard = function KeywordsCard(_ref3) {
+  var dataProp = _ref3.data,
+    _ref3$available = _ref3.available,
+    available = _ref3$available === void 0 ? true : _ref3$available;
+  var data = dataProp !== null && dataProp !== void 0 ? dataProp : [{
     keyword: "zakat calculator",
     clicks: "1,240",
     rank: "#2.1",
@@ -5872,142 +5890,153 @@ var KeywordsCard = function KeywordsCard() {
     trend: "Improving",
     trendType: "up"
   }];
-  return /*#__PURE__*/jsxs(CardWrapper, {
+  return /*#__PURE__*/jsx(CardWrapper, {
     title: "Top organic keywords",
     subtitle: "Search terms ranked by clicks \xB7 last 30 days",
-    children: [/*#__PURE__*/jsxs(Box, {
+    children: !available || data.length === 0 ? /*#__PURE__*/jsx(Typography, {
       sx: {
-        display: "grid",
-        gridTemplateColumns: "2.5fr 1fr 1fr 1fr",
-        gap: 2,
-        pb: 1,
-        borderBottom: "1px solid #f0f0f0"
+        fontSize: "13px",
+        color: "rgba(0, 0, 0, 0.45)",
+        py: 2,
+        textAlign: "left"
       },
-      children: [/*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: "12px",
-          color: "rgba(0, 0, 0, 0.4)",
-          fontWeight: 500,
-          textAlign: "left"
-        },
-        children: "Keyword"
-      }), /*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: "12px",
-          color: "rgba(0, 0, 0, 0.4)",
-          fontWeight: 500,
-          textAlign: "left"
-        },
-        children: "Clicks"
-      }), /*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: "12px",
-          color: "rgba(0, 0, 0, 0.4)",
-          fontWeight: 500,
-          textAlign: "left"
-        },
-        children: "Position"
-      }), /*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: "12px",
-          color: "rgba(0, 0, 0, 0.4)",
-          fontWeight: 500,
-          textAlign: "left"
-        },
-        children: "Trend"
-      })]
-    }), data.map(function (item, index) {
-      return /*#__PURE__*/jsxs(Box, {
+      children: "Keyword data is not available for this period."
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs(Box, {
         sx: {
           display: "grid",
           gridTemplateColumns: "2.5fr 1fr 1fr 1fr",
           gap: 2,
-          // py: 0.5,
-          alignItems: "center",
-          borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
+          pb: 1,
+          borderBottom: "1px solid #f0f0f0"
         },
         children: [/*#__PURE__*/jsx(Typography, {
           sx: {
-            fontSize: "13px",
-            fontWeight: 700,
-            color: "#000",
+            fontSize: "12px",
+            color: "rgba(0, 0, 0, 0.4)",
+            fontWeight: 500,
             textAlign: "left"
           },
-          children: item.keyword
+          children: "Keyword"
         }), /*#__PURE__*/jsx(Typography, {
           sx: {
-            fontSize: "13px",
-            color: "rgba(0, 0, 0, 0.6)",
+            fontSize: "12px",
+            color: "rgba(0, 0, 0, 0.4)",
             fontWeight: 500,
             textAlign: "left"
           },
-          children: item.clicks
-        }), /*#__PURE__*/jsx(Box, {
+          children: "Clicks"
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "12px",
+            color: "rgba(0, 0, 0, 0.4)",
+            fontWeight: 500,
+            textAlign: "left"
+          },
+          children: "Position"
+        }), /*#__PURE__*/jsx(Typography, {
           sx: {
+            fontSize: "12px",
+            color: "rgba(0, 0, 0, 0.4)",
+            fontWeight: 500,
             textAlign: "left"
           },
-          children: /*#__PURE__*/jsx(Box, {
-            sx: {
-              width: "40px",
-              bgcolor: "#ebf2ffb1",
-              color: "#3431e4",
-              // px: 0.5,
-              p: 0.5,
-              borderRadius: "100px",
-              fontSize: "11px",
-              fontWeight: 700,
-              textAlign: "center",
-              minWidth: "45px"
-            },
-            children: item.rank
-          })
-        }), /*#__PURE__*/jsx(Box, {
+          children: "Trend"
+        })]
+      }), data.map(function (item, index) {
+        return /*#__PURE__*/jsxs(Box, {
           sx: {
-            display: "flex",
+            display: "grid",
+            gridTemplateColumns: "2.5fr 1fr 1fr 1fr",
+            gap: 2,
+            // py: 0.5,
             alignItems: "center",
-            justifyContent: "flex-start",
-            gap: 0.5
+            borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
           },
-          children: item.trendType === "up" ? /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(Typography, {
-              sx: {
-                fontSize: "14px",
-                color: "#22C55E"
-              },
-              children: "\u25B2"
-            }), /*#__PURE__*/jsx(Typography, {
-              sx: {
-                fontSize: "12px",
-                color: "#22C55E",
-                fontWeight: 700
-              },
-              children: "Improving"
-            })]
-          }) : /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(Typography, {
-              sx: {
-                fontSize: "14px",
-                color: "#EF4444"
-              },
-              children: "\u25BC"
-            }), /*#__PURE__*/jsx(Typography, {
+          children: [/*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#000",
+              textAlign: "left"
+            },
+            children: item.keyword
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              color: "rgba(0, 0, 0, 0.6)",
+              fontWeight: 500,
+              textAlign: "left"
+            },
+            children: item.clicks
+          }), /*#__PURE__*/jsx(Box, {
+            sx: {
+              textAlign: "left"
+            },
+            children: /*#__PURE__*/jsx(Box, {
               sx: {
-                fontSize: "12px",
-                color: "#EF4444",
-                fontWeight: 700
+                width: "40px",
+                bgcolor: "#ebf2ffb1",
+                color: "#3431e4",
+                // px: 0.5,
+                p: 0.5,
+                borderRadius: "100px",
+                fontSize: "11px",
+                fontWeight: 700,
+                textAlign: "center",
+                minWidth: "45px"
               },
-              children: "Declining"
-            })]
-          })
-        })]
-      }, index);
-    })]
+              children: item.rank
+            })
+          }), /*#__PURE__*/jsx(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              gap: 0.5
+            },
+            children: item.trendType === "up" ? /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "14px",
+                  color: "#22C55E"
+                },
+                children: "\u25B2"
+              }), /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "12px",
+                  color: "#22C55E",
+                  fontWeight: 700
+                },
+                children: "Improving"
+              })]
+            }) : /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "14px",
+                  color: "#EF4444"
+                },
+                children: "\u25BC"
+              }), /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "12px",
+                  color: "#EF4444",
+                  fontWeight: 700
+                },
+                children: "Declining"
+              })]
+            })
+          })]
+        }, index);
+      })]
+    })
   });
 };
-var GeographyCard = function GeographyCard(_ref2) {
-  var _ref2$subtitle = _ref2.subtitle,
-    subtitle = _ref2$subtitle === void 0 ? "Top countries by organic traffic" : _ref2$subtitle;
-  var data = [{
+var GeographyCard = function GeographyCard(_ref4) {
+  var _ref4$subtitle = _ref4.subtitle,
+    subtitle = _ref4$subtitle === void 0 ? "Top countries by organic traffic" : _ref4$subtitle,
+    dataProp = _ref4.data;
+  var data = dataProp !== null && dataProp !== void 0 ? dataProp : [{
     country: "United States",
     stats: "3,120 · 37%",
     percentage: 37
@@ -6035,7 +6064,15 @@ var GeographyCard = function GeographyCard(_ref2) {
   return /*#__PURE__*/jsx(CardWrapper, {
     title: "Geography insights",
     subtitle: subtitle,
-    children: data.map(function (item, index) {
+    children: data.length === 0 ? /*#__PURE__*/jsx(Typography, {
+      sx: {
+        fontSize: "13px",
+        color: "rgba(0, 0, 0, 0.45)",
+        py: 2,
+        textAlign: "left"
+      },
+      children: "No geography data for this period."
+    }) : data.map(function (item, index) {
       return /*#__PURE__*/jsxs(Box, {
         sx: {
           display: "flex",
@@ -6521,9 +6558,9 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
     })]
   });
 };
-var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref3) {
-  var sx = _ref3.sx,
-    donorGeographyData = _ref3.donorGeographyData;
+var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref5) {
+  var sx = _ref5.sx,
+    donorGeographyData = _ref5.donorGeographyData;
   var rawCountries = Array.isArray(donorGeographyData) ? donorGeographyData : (donorGeographyData === null || donorGeographyData === void 0 ? void 0 : donorGeographyData.countries) || [];
   var data = rawCountries.map(function (item) {
     return {
@@ -7990,74 +8027,263 @@ var PaidSection$1 = /*#__PURE__*/Object.freeze({
   default: PaidSection
 });
 
+var formatGrowth = function formatGrowth(value, dateName) {
+  return "".concat(Number(value !== null && value !== void 0 ? value : 0).toFixed(2), "% vs ").concat(dateName || "previous period");
+};
+var mapTimeSeries = 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 OrganicSection = function OrganicSection(_ref) {
+  var _apiData$topOrganicKe2, _apiData$geographyIns2, _selectedInfo$categor, _sourceBreakdown$seri, _sourceBreakdown$labe, _sourceBreakdown$colo, _sourceBreakdown$cent, _sourceBreakdown$cent2, _sourceBreakdown$item, _apiData$topOrganicKe3;
   var _ref$apiData = _ref.apiData,
-    apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
+    _ref$dateName = _ref.dateName,
+    dateName = _ref$dateName === void 0 ? "Last Period" : _ref$dateName;
   var _useState = useState("Organic Users"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
-  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-  var metricInfo = {
-    "Organic Users": {
-      value: "".concat(formatNumber(8420)),
-      subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
-      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
-      icon: /*#__PURE__*/jsx(PeopleAltOutlined, {}),
-      money: false,
-      warning: false,
-      error: false
-    },
-    "Search Clicks": {
-      value: "".concat(formatNumber(5842)),
-      subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
-      data: [1500, 1800, 1600, 2200, 2000, 2400, 2800],
-      icon: /*#__PURE__*/jsx(SearchOutlined, {}),
-      money: false,
-      warning: false,
-      error: false
-    },
-    Donations: {
-      value: "".concat(formatNumber(420)),
-      subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
-      data: [15, 22, 18, 30, 25, 35, 42],
-      icon: /*#__PURE__*/jsx(FavoriteOutlined, {}),
-      money: false,
-      warning: false,
-      error: false
-    },
-    "Conversion Rate": {
-      value: "3.1%",
-      subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
-      data: [2.5, 2.7, 2.6, 3.1, 3.0, 2.9, 3.1],
-      icon: /*#__PURE__*/jsx(Adjust, {}),
-      money: false,
-      warning: false,
-      error: false
-    },
-    "Revenue raised": {
-      value: "$".concat(formatNumber(240398)),
-      subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
-      data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
-      icon: /*#__PURE__*/jsx(PaidOutlined, {}),
-      money: true,
-      warning: false,
-      error: false
-    },
-    "Avg donation": {
-      value: "$".concat(formatNumber(130.58)),
-      subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
-      data: [110, 125, 120, 135, 130, 128, 130.58],
-      icon: /*#__PURE__*/jsx(PaidOutlined, {}),
-      money: true,
-      warning: false,
-      error: false
-    }
+  var overview = (apiData === null || apiData === void 0 ? void 0 : apiData.overview) || {};
+  var growth = (overview === null || overview === void 0 ? void 0 : overview.growthPercentage) || {};
+  var hasOrganicOverview = Boolean(apiData === null || apiData === void 0 ? void 0 : apiData.overview);
+  var organicUsersSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.organicUsers);
+  var donationsSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations);
+  var conversionSeries = mapTimeSeries(apiData === null || apiData === void 0 ? void 0 : apiData.conversionRate);
+  var fallbackCategories = organicUsersSeries.categories.length ? organicUsersSeries.categories : ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+  var growthCaption = function growthCaption(key) {
+    return formatGrowth(growth[key], dateName);
   };
+  var metricInfo = useMemo(function () {
+    var _overview$totalRevenu2, _overview$overallAVGD2, _overview$organicUser, _apiData$topOrganicKe, _overview$totalDonati, _overview$conversionR, _overview$totalRevenu3, _overview$overallAVGD3;
+    if (!hasOrganicOverview) {
+      return {
+        "Organic Users": {
+          value: "".concat(formatNumber(8420)),
+          subValue: "18% vs last month",
+          data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(PeopleAltOutlined, {}),
+          money: false,
+          warning: false,
+          error: false
+        },
+        "Search Clicks": {
+          value: "".concat(formatNumber(5842)),
+          subValue: "92.3% pass-through",
+          data: [1500, 1800, 1600, 2200, 2000, 2400, 2800],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(SearchOutlined, {}),
+          money: false,
+          warning: false,
+          error: false
+        },
+        Donations: {
+          value: "".concat(formatNumber(420)),
+          subValue: "18% vs last month",
+          data: [15, 22, 18, 30, 25, 35, 42],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(FavoriteOutlined, {}),
+          money: false,
+          warning: false,
+          error: false
+        },
+        "Conversion Rate": {
+          value: "3.1%",
+          subValue: "8.4% vs last month",
+          data: [2.5, 2.7, 2.6, 3.1, 3.0, 2.9, 3.1],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(Adjust, {}),
+          money: false,
+          warning: false,
+          error: false
+        },
+        "Revenue raised": {
+          value: "$".concat(formatNumber(240398)),
+          subValue: "0.4x vs last month",
+          data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(PaidOutlined, {}),
+          money: true,
+          warning: false,
+          error: false
+        },
+        "Avg donation": {
+          value: "$".concat(formatNumber(130.58)),
+          subValue: "18% vs last month",
+          data: [110, 125, 120, 135, 130, 128, 130.58],
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(PaidOutlined, {}),
+          money: true,
+          warning: false,
+          error: false
+        }
+      };
+    }
+    var revenueChartData = organicUsersSeries.data.length > 0 ? organicUsersSeries.data.map(function () {
+      var _overview$totalRevenu;
+      return (_overview$totalRevenu = overview.totalRevenue) !== null && _overview$totalRevenu !== void 0 ? _overview$totalRevenu : 0;
+    }) : [(_overview$totalRevenu2 = overview.totalRevenue) !== null && _overview$totalRevenu2 !== void 0 ? _overview$totalRevenu2 : 0];
+    var avgChartData = organicUsersSeries.data.length > 0 ? organicUsersSeries.data.map(function () {
+      var _overview$overallAVGD;
+      return (_overview$overallAVGD = overview.overallAVGDonations) !== null && _overview$overallAVGD !== void 0 ? _overview$overallAVGD : 0;
+    }) : [(_overview$overallAVGD2 = overview.overallAVGDonations) !== null && _overview$overallAVGD2 !== void 0 ? _overview$overallAVGD2 : 0];
+    return {
+      "Organic Users": {
+        value: formatNumber((_overview$organicUser = overview.organicUsers) !== null && _overview$organicUser !== void 0 ? _overview$organicUser : 0),
+        subValue: growthCaption("organicUsers"),
+        data: organicUsersSeries.data,
+        categories: organicUsersSeries.categories,
+        icon: /*#__PURE__*/jsx(PeopleAltOutlined, {}),
+        money: false,
+        warning: false,
+        error: false
+      },
+      "Search Clicks": {
+        value: "—",
+        subValue: apiData !== null && apiData !== void 0 && (_apiData$topOrganicKe = apiData.topOrganicKeywords) !== null && _apiData$topOrganicKe !== void 0 && _apiData$topOrganicKe.available ? "From organic search" : "Keyword tracking unavailable",
+        data: organicUsersSeries.data.map(function () {
+          return 0;
+        }),
+        categories: organicUsersSeries.categories,
+        icon: /*#__PURE__*/jsx(SearchOutlined, {}),
+        money: false,
+        warning: false,
+        error: false
+      },
+      Donations: {
+        value: formatNumber((_overview$totalDonati = overview.totalDonations) !== null && _overview$totalDonati !== void 0 ? _overview$totalDonati : 0),
+        subValue: growthCaption("totalDonations"),
+        data: donationsSeries.data,
+        categories: donationsSeries.categories,
+        icon: /*#__PURE__*/jsx(FavoriteOutlined, {}),
+        money: false,
+        warning: false,
+        error: false
+      },
+      "Conversion Rate": {
+        value: "".concat(Number((_overview$conversionR = overview.conversionRate) !== null && _overview$conversionR !== void 0 ? _overview$conversionR : 0).toFixed(2), "%"),
+        subValue: growthCaption("conversionRate"),
+        data: conversionSeries.data,
+        categories: conversionSeries.categories,
+        icon: /*#__PURE__*/jsx(Adjust, {}),
+        money: false,
+        warning: false,
+        error: false
+      },
+      "Revenue raised": {
+        value: "$".concat(formatNumber((_overview$totalRevenu3 = overview.totalRevenue) !== null && _overview$totalRevenu3 !== void 0 ? _overview$totalRevenu3 : 0)),
+        subValue: growthCaption("totalRevenue"),
+        data: revenueChartData,
+        categories: organicUsersSeries.categories,
+        icon: /*#__PURE__*/jsx(PaidOutlined, {}),
+        money: true,
+        warning: false,
+        error: false
+      },
+      "Avg donation": {
+        value: "$".concat(formatNumber((_overview$overallAVGD3 = overview.overallAVGDonations) !== null && _overview$overallAVGD3 !== void 0 ? _overview$overallAVGD3 : 0)),
+        subValue: growthCaption("overallAVGDonations"),
+        data: avgChartData,
+        categories: organicUsersSeries.categories,
+        icon: /*#__PURE__*/jsx(PaidOutlined, {}),
+        money: true,
+        warning: false,
+        error: false
+      }
+    };
+  }, [apiData === null || apiData === void 0 || (_apiData$topOrganicKe2 = apiData.topOrganicKeywords) === null || _apiData$topOrganicKe2 === void 0 ? void 0 : _apiData$topOrganicKe2.available, conversionSeries, donationsSeries, fallbackCategories, growth, hasOrganicOverview, organicUsersSeries, overview, dateName]);
+  var landingPagesData = useMemo(function () {
+    var pages = apiData === null || apiData === void 0 ? void 0 : apiData.topLandingPages;
+    if (!hasOrganicOverview) return null;
+    if (!Array.isArray(pages) || pages.length === 0) return [];
+    return pages.map(function (item) {
+      var _item$visitors, _item$donations, _item$revenue, _item$conversionRate;
+      return {
+        page: item.page,
+        visitors: formatNumber((_item$visitors = item.visitors) !== null && _item$visitors !== void 0 ? _item$visitors : 0),
+        donations: formatNumber((_item$donations = item.donations) !== null && _item$donations !== void 0 ? _item$donations : 0),
+        revenue: "$".concat(formatNumber((_item$revenue = item.revenue) !== null && _item$revenue !== void 0 ? _item$revenue : 0)),
+        cvr: "".concat(Number((_item$conversionRate = item.conversionRate) !== null && _item$conversionRate !== void 0 ? _item$conversionRate : 0).toFixed(2), "%")
+      };
+    });
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.topLandingPages, hasOrganicOverview]);
+  var keywordsData = useMemo(function () {
+    var keywords = apiData === null || apiData === void 0 ? void 0 : apiData.topOrganicKeywords;
+    if (!hasOrganicOverview) return null;
+    if (!(keywords !== null && keywords !== void 0 && keywords.available) || !Array.isArray(keywords.data) || keywords.data.length === 0) {
+      return [];
+    }
+    return keywords.data.map(function (item) {
+      var _item$clicks, _item$rank, _item$trend, _item$trendType;
+      return {
+        keyword: item.keyword,
+        clicks: formatNumber((_item$clicks = item.clicks) !== null && _item$clicks !== void 0 ? _item$clicks : 0),
+        rank: (_item$rank = item.rank) !== null && _item$rank !== void 0 ? _item$rank : "—",
+        trend: (_item$trend = item.trend) !== null && _item$trend !== void 0 ? _item$trend : "—",
+        trendType: (_item$trendType = item.trendType) !== null && _item$trendType !== void 0 ? _item$trendType : "up"
+      };
+    });
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.topOrganicKeywords, hasOrganicOverview]);
+  var geographyData = useMemo(function () {
+    var _apiData$geographyIns;
+    var countries = apiData === null || apiData === void 0 || (_apiData$geographyIns = apiData.geographyInsights) === null || _apiData$geographyIns === void 0 ? void 0 : _apiData$geographyIns.countries;
+    if (!hasOrganicOverview) return null;
+    if (!Array.isArray(countries) || countries.length === 0) return [];
+    return countries.map(function (item) {
+      var _item$visitors2, _item$percentage, _item$percentage2;
+      return {
+        country: item.country || "Unknown",
+        stats: "".concat(formatNumber((_item$visitors2 = item.visitors) !== null && _item$visitors2 !== void 0 ? _item$visitors2 : 0), " \xB7 ").concat(Number((_item$percentage = item.percentage) !== null && _item$percentage !== void 0 ? _item$percentage : 0).toFixed(0), "%"),
+        percentage: Number((_item$percentage2 = item.percentage) !== null && _item$percentage2 !== void 0 ? _item$percentage2 : 0)
+      };
+    });
+  }, [apiData === null || apiData === void 0 || (_apiData$geographyIns2 = apiData.geographyInsights) === null || _apiData$geographyIns2 === void 0 ? void 0 : _apiData$geographyIns2.countries, hasOrganicOverview]);
+  var sourceBreakdown = useMemo(function () {
+    var _breakdown$totalVisit;
+    var breakdown = apiData === null || apiData === void 0 ? void 0 : apiData.sourceBreakdown;
+    var sources = breakdown === null || breakdown === void 0 ? void 0 : breakdown.data;
+    if (!hasOrganicOverview) return null;
+    if (!Array.isArray(sources) || sources.length === 0) return null;
+    var colors = sources.map(function (_, index) {
+      return SOURCE_COLORS[index % SOURCE_COLORS.length];
+    });
+    return {
+      series: sources.map(function (item) {
+        var _item$percentage3;
+        return Number((_item$percentage3 = item.percentage) !== null && _item$percentage3 !== void 0 ? _item$percentage3 : 0);
+      }),
+      labels: sources.map(function (item) {
+        return item.source;
+      }),
+      colors: colors,
+      centerLabel: "visitors",
+      centerValue: formatNumber((_breakdown$totalVisit = breakdown.totalVisitors) !== null && _breakdown$totalVisit !== void 0 ? _breakdown$totalVisit : 0),
+      items: sources.map(function (item, index) {
+        var _item$percentage4;
+        return {
+          label: item.source,
+          val: "".concat(Number((_item$percentage4 = item.percentage) !== null && _item$percentage4 !== void 0 ? _item$percentage4 : 0).toFixed(1), "%"),
+          color: colors[index]
+        };
+      })
+    };
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.sourceBreakdown, hasOrganicOverview]);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsx(MetricCard
-    // key={title}
-    , {
+    return /*#__PURE__*/jsx(MetricCard, {
       title: title,
       value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
       caption: metricInfo[title].subValue,
@@ -8071,31 +8297,16 @@ var OrganicSection = function OrganicSection(_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["Organic Users"];
+  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
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Box, {
@@ -8128,7 +8339,9 @@ var OrganicSection = function OrganicSection(_ref) {
         item: true,
         xs: 12,
         md: 6,
-        children: /*#__PURE__*/jsx(LandingPagesCard, {})
+        children: /*#__PURE__*/jsx(LandingPagesCard, {
+          data: landingPagesData
+        })
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
@@ -8136,12 +8349,12 @@ var OrganicSection = function OrganicSection(_ref) {
         children: /*#__PURE__*/jsx(DonorMixCard, {
           title: "Source breakdown",
           subtitle: "Where organic visitors come from",
-          series: [40.8, 35.1, 14.2, 3.3],
-          labels: ["Meta Ads", "Google Ads", "TikTok", "Snapchat"],
-          colors: ["#4267B2", "#4285F4", "#06510bff", "#f2b61dff"],
-          centerLabel: "total spend",
-          centerValue: "$8.3K",
-          items: [{
+          series: (_sourceBreakdown$seri = sourceBreakdown === null || sourceBreakdown === void 0 ? void 0 : sourceBreakdown.series) !== null && _sourceBreakdown$seri !== void 0 ? _sourceBreakdown$seri : [40.8, 35.1, 14.2, 3.3],
+          labels: (_sourceBreakdown$labe = sourceBreakdown === null || sourceBreakdown === void 0 ? void 0 : sourceBreakdown.labels) !== null && _sourceBreakdown$labe !== void 0 ? _sourceBreakdown$labe : ["Meta Ads", "Google Ads", "TikTok", "Snapchat"],
+          colors: (_sourceBreakdown$colo = sourceBreakdown === null || sourceBreakdown === void 0 ? void 0 : sourceBreakdown.colors) !== null && _sourceBreakdown$colo !== void 0 ? _sourceBreakdown$colo : ["#4267B2", "#4285F4", "#06510bff", "#f2b61dff"],
+          centerLabel: (_sourceBreakdown$cent = sourceBreakdown === null || sourceBreakdown === void 0 ? void 0 : sourceBreakdown.centerLabel) !== null && _sourceBreakdown$cent !== void 0 ? _sourceBreakdown$cent : "total spend",
+          centerValue: (_sourceBreakdown$cent2 = sourceBreakdown === null || sourceBreakdown === void 0 ? void 0 : sourceBreakdown.centerValue) !== null && _sourceBreakdown$cent2 !== void 0 ? _sourceBreakdown$cent2 : "$8.3K",
+          items: (_sourceBreakdown$item = sourceBreakdown === null || sourceBreakdown === void 0 ? void 0 : sourceBreakdown.items) !== null && _sourceBreakdown$item !== void 0 ? _sourceBreakdown$item : [{
             label: "Google Search",
             val: "40.8%",
             color: "#4267B2"
@@ -8167,13 +8380,17 @@ var OrganicSection = function OrganicSection(_ref) {
         item: true,
         xs: 12,
         md: 6,
-        children: /*#__PURE__*/jsx(KeywordsCard, {})
+        children: /*#__PURE__*/jsx(KeywordsCard, {
+          data: keywordsData,
+          available: hasOrganicOverview ? (apiData === null || apiData === void 0 || (_apiData$topOrganicKe3 = apiData.topOrganicKeywords) === null || _apiData$topOrganicKe3 === void 0 ? void 0 : _apiData$topOrganicKe3.available) !== false : true
+        })
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
         md: 6,
         children: /*#__PURE__*/jsx(GeographyCard, {
-          subtitle: "Top countries by organic traffic"
+          subtitle: "Top countries by organic traffic",
+          data: geographyData
         })
       })]
     })]