@ammarkhalidfarooq/dashboard-package 0.5.19 → 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';
@@ -902,6 +902,17 @@ var W = 794;
 var H = 1123;
 var MX = 32; // horizontal margin
 var CW = W - MX * 2; // 730 px usable width
+var THEME = {
+  pageBg: "#F8FAFC",
+  panelBg: "#FFFFFF",
+  panelBorder: "#DDE3EA",
+  kpiBg: "#F6F8FF",
+  kpiBorder: "#D9E0FF",
+  tableHeadBg: "#EEF2FF",
+  tableAltBg: "#F8FAFF",
+  muted: "#94A3B8",
+  text: "#111827"
+};
 
 // ─── Number helpers ───────────────────────────────────────────────────────────
 var d$ = function d$(v) {
@@ -995,7 +1006,7 @@ var LineChart = function LineChart(_ref2) {
     return /*#__PURE__*/jsx("div", {
       style: {
         height: height,
-        background: "#F9FAFB",
+        background: THEME.tableAltBg,
         borderRadius: 6
       }
     });
@@ -1038,14 +1049,14 @@ var LineChart = function LineChart(_ref2) {
           y1: y,
           x2: width - PR,
           y2: y,
-          stroke: "#F3F4F6",
+          stroke: "#E5EAF1",
           strokeWidth: 1
         }), /*#__PURE__*/jsx("text", {
           x: PL - 4,
           y: y + 3.5,
           textAnchor: "end",
           fontSize: 9,
-          fill: "#9CA3AF",
+          fill: THEME.muted,
           children: label
         })]
       }, i);
@@ -1071,7 +1082,7 @@ var LineChart = function LineChart(_ref2) {
         y: height - 5,
         textAnchor: "middle",
         fontSize: 9,
-        fill: "#9CA3AF",
+        fill: THEME.muted,
         children: label
       }, i);
     })]
@@ -1105,7 +1116,7 @@ var Donut = function Donut(_ref3) {
       cy: cy,
       r: r,
       fill: "none",
-      stroke: "#E5E7EB",
+      stroke: "#E6EBF5",
       strokeWidth: 12
     }), segments.map(function (seg, i) {
       var dash = seg.value / total * circ;
@@ -1136,7 +1147,7 @@ var Donut = function Donut(_ref3) {
       y: cy + 13,
       textAnchor: "middle",
       fontSize: 9,
-      fill: "#6B7280",
+      fill: THEME.muted,
       children: centerLabel
     })]
   });
@@ -1150,7 +1161,7 @@ var Divider = function Divider(_ref4) {
     mb = _ref4$mb === void 0 ? 0 : _ref4$mb;
   return /*#__PURE__*/jsx("div", {
     style: {
-      borderTop: "1px solid #E5E7EB",
+      borderTop: "1px solid #E5EAF1",
       marginTop: mt,
       marginBottom: mb
     }
@@ -1165,13 +1176,14 @@ var Panel = function Panel(_ref5) {
     style = _ref5$style === void 0 ? {} : _ref5$style;
   return /*#__PURE__*/jsxs("div", {
     style: _objectSpread2({
-      border: "1px solid #E5E7EB",
+      border: "1px solid ".concat(THEME.panelBorder),
       borderRadius: 8,
-      background: "#fff",
+      background: THEME.panelBg,
       padding: 12,
       display: "flex",
       flexDirection: "column",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      boxShadow: "0 1px 0 rgba(15,23,42,0.03)"
     }, style),
     children: [(title || subtitle || action) && /*#__PURE__*/jsxs("div", {
       style: {
@@ -1186,14 +1198,14 @@ var Panel = function Panel(_ref5) {
           style: {
             fontSize: 12,
             fontWeight: 700,
-            color: "#111827",
+            color: THEME.text,
             lineHeight: 1.2
           },
           children: title
         }), subtitle && /*#__PURE__*/jsx("div", {
           style: {
             fontSize: 9.5,
-            color: "#9CA3AF",
+            color: THEME.muted,
             marginTop: 2
           },
           children: subtitle
@@ -1220,12 +1232,13 @@ var MiniTable = function MiniTable(_ref6) {
       width: "100%",
       borderCollapse: "collapse",
       fontSize: 9.5,
-      tableLayout: "fixed"
+      tableLayout: "fixed",
+      background: "#fff"
     },
     children: [/*#__PURE__*/jsx("thead", {
       children: /*#__PURE__*/jsx("tr", {
         style: {
-          background: "#F9FAFB"
+          background: THEME.tableHeadBg
         },
         children: head.map(function (h, i) {
           return /*#__PURE__*/jsx("th", {
@@ -1235,8 +1248,8 @@ var MiniTable = function MiniTable(_ref6) {
               fontWeight: 700,
               fontSize: 8.5,
               letterSpacing: "0.3px",
-              color: "#6B7280",
-              borderBottom: "1px solid #E5E7EB"
+              color: "#64748B",
+              borderBottom: "1px solid #DDE3EA"
             },
             children: h
           }, i);
@@ -1246,15 +1259,15 @@ var MiniTable = function MiniTable(_ref6) {
       children: rows.map(function (row, ri) {
         return /*#__PURE__*/jsx("tr", {
           style: {
-            background: ri % 2 === 1 ? "#F9FAFB" : "#fff"
+            background: ri % 2 === 1 ? THEME.tableAltBg : "#fff"
           },
           children: row.map(function (cell, ci) {
             return /*#__PURE__*/jsx("td", {
               style: {
                 padding: "4px 6px",
                 textAlign: ci === 0 ? "left" : "right",
-                color: "#374151",
-                borderBottom: ri < rows.length - 1 ? "1px solid #F3F4F6" : "none"
+                color: "#334155",
+                borderBottom: ri < rows.length - 1 ? "1px solid #EEF2F7" : "none"
               },
               children: cell
             }, ci);
@@ -1272,10 +1285,10 @@ var KpiCard = function KpiCard(_ref7) {
   var neg = "".concat(trend).trim().startsWith("-");
   return /*#__PURE__*/jsxs("div", {
     style: {
-      border: "1px solid #E5E7EB",
+      border: "1px solid ".concat(THEME.kpiBorder),
       borderRadius: 8,
       padding: "10px 12px 9px",
-      background: "#fff",
+      background: THEME.kpiBg,
       width: "100%",
       minWidth: 0,
       boxSizing: "border-box",
@@ -1288,7 +1301,7 @@ var KpiCard = function KpiCard(_ref7) {
         fontSize: 8,
         fontWeight: 700,
         letterSpacing: "0.7px",
-        color: "#6B7280",
+        color: "#64748B",
         textTransform: "uppercase"
       },
       children: title
@@ -1296,7 +1309,7 @@ var KpiCard = function KpiCard(_ref7) {
       style: {
         fontSize: 17,
         fontWeight: 800,
-        color: "#111827",
+        color: THEME.text,
         lineHeight: 1.1,
         marginTop: 2
       },
@@ -1311,7 +1324,7 @@ var KpiCard = function KpiCard(_ref7) {
     }), /*#__PURE__*/jsx("div", {
       style: {
         fontSize: 8.5,
-        color: "#9CA3AF",
+        color: THEME.muted,
         lineHeight: 1.4
       },
       children: detail
@@ -1330,7 +1343,7 @@ var StatPair = function StatPair(_ref8) {
     children: [/*#__PURE__*/jsx("div", {
       style: {
         fontSize: 8.5,
-        color: "#9CA3AF",
+        color: THEME.muted,
         marginBottom: 1
       },
       children: label
@@ -1366,7 +1379,8 @@ var PageHeader = function PageHeader(_ref9) {
   return /*#__PURE__*/jsxs("div", {
     style: {
       padding: "22px ".concat(MX, "px 12px"),
-      borderBottom: "1px solid #E5E7EB",
+      borderBottom: "1px solid #DEE5EF",
+      background: "#FFFFFF",
       flexShrink: 0
     },
     children: [/*#__PURE__*/jsx("div", {
@@ -1385,7 +1399,7 @@ var PageHeader = function PageHeader(_ref9) {
           style: {
             fontSize: 20,
             fontWeight: 800,
-            color: "#111827",
+            color: THEME.text,
             letterSpacing: "-0.5px"
           },
           children: "Madinah"
@@ -1394,7 +1408,7 @@ var PageHeader = function PageHeader(_ref9) {
             fontSize: 8.5,
             fontWeight: 700,
             letterSpacing: "1.5px",
-            color: "#9CA3AF",
+            color: "#94A3B8",
             textTransform: "uppercase"
           },
           children: "PERFORMANCE REPORT"
@@ -1405,7 +1419,7 @@ var PageHeader = function PageHeader(_ref9) {
         marginTop: 8,
         fontSize: 13.5,
         fontWeight: 700,
-        color: "#111827"
+        color: THEME.text
       },
       children: "Dashboard overview \u2014 Overall"
     }), /*#__PURE__*/jsxs("div", {
@@ -1418,13 +1432,13 @@ var PageHeader = function PageHeader(_ref9) {
         children: [/*#__PURE__*/jsx("div", {
           style: {
             fontSize: 10.5,
-            color: "#374151"
+            color: "#334155"
           },
           children: dateLabel
         }), /*#__PURE__*/jsxs("div", {
           style: {
             fontSize: 9.5,
-            color: "#9CA3AF",
+            color: THEME.muted,
             marginTop: 1
           },
           children: ["30-day window \xB7 Generated ", generatedLabel]
@@ -1432,7 +1446,7 @@ var PageHeader = function PageHeader(_ref9) {
       }), /*#__PURE__*/jsxs("div", {
         style: {
           fontSize: 9,
-          color: "#9CA3AF",
+          color: THEME.muted,
           textAlign: "right",
           alignSelf: "flex-end"
         },
@@ -1443,8 +1457,8 @@ var PageHeader = function PageHeader(_ref9) {
         marginTop: 7,
         display: "inline-flex",
         gap: 5,
-        background: "#F9FAFB",
-        border: "1px solid #E5E7EB",
+        background: "#EEF2FF",
+        border: "1px solid #D7DEFF",
         borderRadius: 4,
         padding: "3px 9px",
         fontSize: 8.5
@@ -1471,14 +1485,15 @@ var PageFooter = function PageFooter(_ref0) {
   return /*#__PURE__*/jsx("div", {
     style: {
       padding: "7px ".concat(MX, "px"),
-      borderTop: "1px solid #E5E7EB",
+      borderTop: "1px solid #DEE5EF",
+      background: "#FFFFFF",
       marginTop: "auto",
       flexShrink: 0
     },
     children: /*#__PURE__*/jsxs("span", {
       style: {
         fontSize: 8,
-        color: "#9CA3AF"
+        color: THEME.muted
       },
       children: ["Confidential \xB7 Generated by Dashboard \xB7 ", generatedLabel, " \xA0\xA0 Page ", page, " of 2 \xB7 madinah.com"]
     })
@@ -1649,7 +1664,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
       style: {
         width: W,
         height: H,
-        background: "#fff",
+        background: THEME.pageBg,
         display: "flex",
         flexDirection: "column",
         fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
@@ -1816,7 +1831,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
       style: {
         width: W,
         height: H,
-        background: "#fff",
+        background: THEME.pageBg,
         display: "flex",
         flexDirection: "column",
         fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
@@ -2675,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: {},
@@ -5679,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",
@@ -5770,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",
@@ -5785,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: {
@@ -5825,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",
@@ -5857,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: /*#__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: "Position"
+        }), /*#__PURE__*/jsx(Typography, {
           sx: {
-            display: "flex",
+            fontSize: "12px",
+            color: "rgba(0, 0, 0, 0.4)",
+            fontWeight: 500,
+            textAlign: "left"
+          },
+          children: "Trend"
+        })]
+      }), data.map(function (item, index) {
+        return /*#__PURE__*/jsxs(Box, {
+          sx: {
+            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
@@ -6020,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",
@@ -6506,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 {
@@ -7975,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,
@@ -8056,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, {
@@ -8113,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,
@@ -8121,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"
@@ -8152,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
         })
       })]
     })]