@ammarkhalidfarooq/dashboard-package 0.6.128 → 0.6.129

package/dist/index.es.js

@@ -1,12 +1,13 @@
 import React, { Suspense, lazy, useState, useRef, useEffect, useMemo } from 'react';
-import { Box, Button, Menu, MenuItem, useTheme, useMediaQuery, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, Stack, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } from '@mui/material';
-import { MoreHoriz, TrendingDown, TrendingUp, MoreVert, Check, InfoOutlined, Settings, PeopleAltOutlined, RequestQuoteOutlined, PaidOutlined, Adjust, PersonOutlined, IndeterminateCheckBoxOutlined, FavoriteOutlined, SearchOutlined, HighlightOff, Email } from '@mui/icons-material';
+import { Box, Button, Menu, MenuItem, useTheme, useMediaQuery, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, LinearProgress, Stack, Avatar, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } from '@mui/material';
+import { MoreHoriz, TrendingDown, TrendingUp, MoreVert, Check, InfoOutlined, Settings, PeopleAltOutlined, RequestQuoteOutlined, PaidOutlined, PersonOutlined, IndeterminateCheckBoxOutlined, FavoriteOutlined, SearchOutlined, HighlightOff, Email } from '@mui/icons-material';
 import { createTheme } from '@mui/material/styles';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Grid$1 from '@mui/material/Grid';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import ReactApexChart from 'react-apexcharts';
+import { SiSnapchat, SiYoutube, SiTiktok, SiGoogleads, SiMeta } from 'react-icons/si';
 
 var theme = createTheme({
   cssVariables: true,
@@ -1019,482 +1020,281 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
     title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
     _ref$subtitle = _ref.subtitle,
     subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
+    actionLabel = _ref.actionLabel,
     _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift"] : _ref$columns,
+    columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg Gift"] : _ref$columns,
     _ref$rows = _ref.rows,
     rows = _ref$rows === void 0 ? [] : _ref$rows,
     _ref$gridTemplateColu = _ref.gridTemplateColumns,
-    gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr" : _ref$gridTemplateColu;
-  var theme = useTheme();
-  var isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-  var isTablet = useMediaQuery(theme.breakpoints.between("sm", "md"));
-
-  /* ─── Desktop / Tablet: Grid Table ─── */
-  if (!isMobile) {
-    return /*#__PURE__*/jsxs(Box, {
-      sx: {
-        bgcolor: "#fff",
-        borderRadius: 4,
-        border: "1px solid #f0f0f0",
-        boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-        p: 3
-      },
+    gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu,
+    height = _ref.height,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    _ref$headerSx = _ref.headerSx,
+    headerSx = _ref$headerSx === void 0 ? {} : _ref$headerSx,
+    _ref$tableSx = _ref.tableSx,
+    tableSx = _ref$tableSx === void 0 ? {} : _ref$tableSx;
+  return /*#__PURE__*/jsxs(Box, {
+    sx: _objectSpread2({
+      bgcolor: "#fff",
+      borderRadius: compact ? 3 : 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: compact ? "0 2px 12px rgba(0,0,0,0.05)" : "0 4px 24px rgba(0,0,0,0.06)",
+      p: compact ? 1.5 : 3,
+      height: height
+    }, sx),
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: _objectSpread2({
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        mb: compact ? 1.25 : 3
+      }, headerSx),
       children: [/*#__PURE__*/jsxs(Box, {
-        sx: {
-          mb: 3
-        },
         children: [/*#__PURE__*/jsx(Typography, {
           sx: {
             fontWeight: 700,
-            fontSize: "18px",
-            color: "#000"
+            fontSize: compact ? "14px" : "18px",
+            color: "#000",
+            textAlign: "left",
+            lineHeight: 1.15
           },
           children: title
         }), /*#__PURE__*/jsx(Typography, {
           sx: {
-            fontSize: "13px",
-            color: "rgba(0,0,0,0.4)",
-            mt: 0.2
+            fontSize: compact ? "10px" : "13px",
+            color: "rgba(0, 0, 0, 0.4)",
+            textAlign: "left",
+            lineHeight: 1.15
           },
           children: subtitle
         })]
-      }), /*#__PURE__*/jsx(Box, {
+      }), actionLabel && /*#__PURE__*/jsx(Typography, {
         sx: {
-          overflowX: "auto"
+          fontSize: compact ? "10px" : "13px",
+          fontWeight: 600,
+          color: "rgb(99, 99, 230)",
+          cursor: "pointer"
         },
-        children: /*#__PURE__*/jsxs(Box, {
+        children: actionLabel
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: _objectSpread2({
+        overflowX: compact ? "hidden" : "auto"
+      }, tableSx),
+      children: /*#__PURE__*/jsxs(Box, {
+        sx: {
+          minWidth: compact ? 0 : "600px"
+        },
+        children: [/*#__PURE__*/jsx(Box, {
           sx: {
-            minWidth: "600px"
+            display: "grid",
+            gridTemplateColumns: gridTemplateColumns,
+            gap: compact ? 1 : 2,
+            pb: compact ? 1 : 2.5,
+            borderBottom: "1px solid #f0f0f0"
           },
-          children: [/*#__PURE__*/jsx(Box, {
-            sx: {
-              display: "grid",
-              gridTemplateColumns: gridTemplateColumns,
-              gap: 2,
-              pb: 2.5,
-              borderBottom: "1px solid #f0f0f0"
-            },
-            children: columns.map(function (header, colIdx) {
-              return /*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "12px",
-                  color: "rgba(0,0,0,0.4)",
-                  fontWeight: 500,
-                  whiteSpace: "nowrap",
-                  textAlign: colIdx === 0 ? "left" : "center"
-                },
-                children: header
-              }, header);
-            })
-          }), /*#__PURE__*/jsx(Box, {
-            sx: {
-              mt: 1
-            },
-            children: rows.map(function (row, idx) {
-              var isDisabled = row.comingSoon;
-              return /*#__PURE__*/jsxs(Box, {
+          children: columns.map(function (header) {
+            return /*#__PURE__*/jsx(Typography, {
+              sx: {
+                fontSize: compact ? "9px" : "12px",
+                color: "rgba(0, 0, 0, 0.4)",
+                fontWeight: 500,
+                textAlign: "left"
+              },
+              children: header
+            }, header);
+          })
+        }), /*#__PURE__*/jsx(Box, {
+          sx: {
+            mt: 1
+          },
+          children: rows.map(function (row, idx) {
+            var _row$progress;
+            return /*#__PURE__*/jsxs(Box, {
+              sx: {
+                display: "grid",
+                gridTemplateColumns: gridTemplateColumns,
+                gap: compact ? 1 : 2,
+                py: compact ? 0.5 : 1.2,
+                alignItems: "center",
+                borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
+              },
+              children: [/*#__PURE__*/jsxs(Box, {
                 sx: {
-                  display: "grid",
-                  gridTemplateColumns: gridTemplateColumns,
-                  gap: 2,
-                  py: 1.2,
+                  display: "flex",
                   alignItems: "center",
-                  borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5",
-                  opacity: isDisabled ? 0.55 : 1,
-                  transition: "opacity 0.2s ease"
+                  gap: 1.5
                 },
-                children: [/*#__PURE__*/jsxs(Box, {
+                children: [(row.icon || row.id) && /*#__PURE__*/jsx(Box, {
                   sx: {
+                    width: compact ? 22 : 32,
+                    height: compact ? 22 : 32,
+                    borderRadius: "50%",
+                    bgcolor: "#fff",
+                    border: "2px solid ".concat(row.avatarBorder || row.avatarBg || "#E5E7EB"),
                     display: "flex",
                     alignItems: "center",
-                    gap: 1.5,
-                    minWidth: 0
+                    justifyContent: "center",
+                    flexShrink: 0,
+                    boxSizing: "border-box",
+                    filter: row.comingSoon ? "grayscale(1)" : "none",
+                    opacity: row.comingSoon ? 0.55 : 1
                   },
-                  children: [row.id && /*#__PURE__*/jsx(Avatar, {
+                  children: row.icon ? /*#__PURE__*/jsx(row.icon, {
+                    size: compact ? 12 : 16,
+                    color: row.iconColor || row.avatarBorder || row.avatarBg
+                  }) : /*#__PURE__*/jsx(Typography, {
                     sx: {
-                      width: 28,
-                      height: 28,
-                      fontSize: "10px",
+                      fontSize: compact ? "8px" : "10px",
                       fontWeight: 700,
-                      bgcolor: row.avatarBg || "#F3F4F6",
-                      color: row.avatarColor || "#fff",
-                      flexShrink: 0
+                      color: row.avatarColor || "#111"
                     },
                     children: row.id
-                  }), /*#__PURE__*/jsxs(Box, {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 0.8,
-                      flexWrap: "nowrap",
-                      minWidth: 0
-                    },
-                    children: [/*#__PURE__*/jsx(Typography, {
-                      sx: {
-                        fontSize: "12px",
-                        fontWeight: 700,
-                        color: "#000",
-                        whiteSpace: "nowrap"
-                      },
-                      children: row.name
-                    }), isDisabled && /*#__PURE__*/jsx(Box, {
-                      sx: {
-                        display: "inline-flex",
-                        alignItems: "center",
-                        px: 0.8,
-                        py: 0.2,
-                        borderRadius: "100px",
-                        bgcolor: "#F3F4F6",
-                        border: "1px solid #E5E7EB",
-                        flexShrink: 0,
-                        whiteSpace: "nowrap"
-                      },
-                      children: /*#__PURE__*/jsx(Typography, {
-                        sx: {
-                          fontSize: "8px",
-                          fontWeight: 700,
-                          color: "#6B7280",
-                          letterSpacing: "0.3px",
-                          textTransform: "uppercase",
-                          whiteSpace: "nowrap"
-                        },
-                        children: "Coming Soon"
-                      })
-                    })]
-                  })]
+                  })
                 }), /*#__PURE__*/jsx(Typography, {
                   sx: {
-                    fontSize: "13px",
-                    fontWeight: 600,
-                    color: isDisabled ? "#9CA3AF" : "#000",
-                    whiteSpace: "nowrap",
-                    textAlign: "center"
+                    fontSize: compact ? "10px" : "12px",
+                    fontWeight: 700,
+                    color: row.comingSoon ? "#9CA3AF" : "#000"
                   },
-                  children: row.val1
-                }), row.type === "progress" ? /*#__PURE__*/jsxs(Box, {
+                  children: row.name
+                })]
+              }), /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: compact ? "10px" : "13px",
+                  fontWeight: 600,
+                  color: row.comingSoon ? "#9CA3AF" : "#000",
+                  textAlign: "left"
+                },
+                children: row.val1
+              }), row.type === "progress" ? /*#__PURE__*/jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1.5
+                },
+                children: [/*#__PURE__*/jsx(Box, {
                   sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1.5,
-                    justifyContent: "center"
+                    flexGrow: 1
                   },
-                  children: [/*#__PURE__*/jsx(Box, {
+                  children: /*#__PURE__*/jsx(LinearProgress, {
+                    variant: "determinate",
+                    value: Math.min(100, Math.max(0, (_row$progress = row.progress) !== null && _row$progress !== void 0 ? _row$progress : 0)),
                     sx: {
-                      flexGrow: 1,
-                      maxWidth: "80px"
-                    },
-                    children: /*#__PURE__*/jsx(LinearProgress, {
-                      variant: "determinate",
-                      value: row.progress,
-                      sx: {
-                        height: 8,
+                      height: compact ? 6 : 8,
+                      borderRadius: 4,
+                      bgcolor: "#F3F4F6",
+                      "& .MuiLinearProgress-bar": {
                         borderRadius: 4,
-                        bgcolor: "#F3F4F6",
-                        "& .MuiLinearProgress-bar": {
-                          borderRadius: 4,
-                          bgcolor: row.progressColor || "rgb(99,99,230)"
-                        }
+                        bgcolor: row.progressColor || "rgb(99, 99, 230)"
                       }
-                    })
-                  }), /*#__PURE__*/jsxs(Typography, {
-                    sx: {
-                      fontSize: "11px",
-                      color: "rgba(0,0,0,0.4)",
-                      minWidth: "30px",
-                      textAlign: "center"
-                    },
-                    children: [row.progress, "%"]
-                  })]
-                }) : /*#__PURE__*/jsx(Typography, {
-                  sx: {
-                    fontSize: "13px",
-                    fontWeight: 600,
-                    color: isDisabled ? "#9CA3AF" : "#000",
-                    whiteSpace: "nowrap",
-                    textAlign: "center"
-                  },
-                  children: row.val2
-                }), /*#__PURE__*/jsx(Typography, {
+                    }
+                  })
+                }), /*#__PURE__*/jsxs(Typography, {
                   sx: {
-                    fontSize: "13px",
-                    fontWeight: row.highlightVal3 ? 700 : 500,
-                    color: isDisabled ? "#9CA3AF" : row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
-                    whiteSpace: "nowrap",
-                    textAlign: "center"
+                    fontSize: compact ? "9px" : "11px",
+                    color: "rgba(0, 0, 0, 0.4)",
+                    minWidth: "30px"
                   },
-                  children: row.val3
-                }), /*#__PURE__*/jsx(Typography, {
+                  children: [row.progress, "%"]
+                })]
+              }) : /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "13px",
+                  fontWeight: 600,
+                  color: row.comingSoon ? "#9CA3AF" : "#000",
+                  textAlign: "left"
+                },
+                children: row.val2
+              }), /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: compact ? "10px" : "13px",
+                  fontWeight: row.highlightVal3 ? 700 : 500,
+                  color: row.comingSoon ? "#9CA3AF" : row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
+                  textAlign: "left"
+                },
+                children: row.val3
+              }), /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "13px",
+                  fontWeight: 500,
+                  color: row.comingSoon ? "#9CA3AF" : "#000",
+                  textAlign: "left"
+                },
+                children: row.val4
+              }), columns.length > 5 && /*#__PURE__*/jsx(Box, {
+                children: row.comingSoon ? /*#__PURE__*/jsx(Box, {
                   sx: {
-                    fontSize: "13px",
-                    fontWeight: 500,
-                    color: isDisabled ? "#9CA3AF" : "#000",
-                    whiteSpace: "nowrap",
-                    textAlign: "center"
+                    display: "inline-block",
+                    px: compact ? 1 : 1.5,
+                    py: compact ? 0.25 : 0.5,
+                    borderRadius: "100px",
+                    bgcolor: "#F3F4F6",
+                    color: "#9CA3AF",
+                    fontSize: compact ? "9px" : "11px",
+                    fontWeight: 700,
+                    textAlign: "center",
+                    whiteSpace: "nowrap"
                   },
-                  children: row.val4
-                }), columns.length > 5 && /*#__PURE__*/jsx(Box, {
+                  children: "Coming Soon"
+                }) : row.type === "trend" ? /*#__PURE__*/jsx(Box, {
                   sx: {
                     display: "flex",
-                    justifyContent: "center"
+                    alignItems: "center",
+                    gap: 0.5
                   },
-                  children: row.type === "trend" ? /*#__PURE__*/jsxs(Box, {
-                    sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 0.5
-                    },
+                  children: row.trendType === "up" ? /*#__PURE__*/jsxs(Fragment, {
                     children: [/*#__PURE__*/jsx(Typography, {
                       sx: {
                         fontSize: "14px",
-                        color: row.trendType === "up" ? "#22C55E" : "#EF4444"
+                        color: "#22C55E"
                       },
-                      children: row.trendType === "up" ? "▲" : "▼"
+                      children: "\u25B2"
                     }), /*#__PURE__*/jsx(Typography, {
                       sx: {
                         fontSize: "12px",
-                        color: row.trendType === "up" ? "#22C55E" : "#EF4444",
-                        fontWeight: 700,
-                        whiteSpace: "nowrap"
+                        color: "#22C55E",
+                        fontWeight: 700
                       },
-                      children: isTablet ? row.trendType === "up" ? "Up" : "Down" : row.trendLabel
+                      children: row.trendLabel
+                    })]
+                  }) : /*#__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: row.trendLabel
                     })]
-                  }) : row.type === "comingSoon" ? /*#__PURE__*/jsx(Typography, {
-                    sx: {
-                      fontSize: "12px",
-                      color: "#9CA3AF",
-                      fontWeight: 500,
-                      textAlign: "center"
-                    },
-                    children: "\u2014"
-                  }) : /*#__PURE__*/jsx(Box, {
-                    sx: {
-                      display: "inline-block",
-                      px: 1.5,
-                      py: 0.5,
-                      borderRadius: "100px",
-                      bgcolor: row.statusBg,
-                      color: row.statusColor,
-                      fontSize: "11px",
-                      fontWeight: 700
-                    },
-                    children: row.status
                   })
-                })]
-              }, idx);
-            })
-          })]
-        })
-      })]
-    });
-  }
-
-  /* ─── Mobile: Stacked Card Layout ─── */
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: "1px solid #f0f0f0",
-      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      p: 2
-    },
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        mb: 2
-      },
-      children: [/*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontWeight: 700,
-          fontSize: "16px",
-          color: "#000"
-        },
-        children: title
-      }), /*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: "11px",
-          color: "rgba(0,0,0,0.4)",
-          mt: 0.2
-        },
-        children: subtitle
-      })]
-    }), /*#__PURE__*/jsx(Box, {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 1.5
-      },
-      children: rows.map(function (row, idx) {
-        var isDisabled = row.comingSoon;
-        return /*#__PURE__*/jsxs(Box, {
-          sx: {
-            p: 2,
-            borderRadius: 3,
-            border: isDisabled ? "1px dashed #E5E7EB" : "1px solid #F3F4F6",
-            bgcolor: isDisabled ? "#FAFAFA" : "#fff",
-            opacity: isDisabled ? 0.7 : 1,
-            transition: "opacity 0.2s ease"
-          },
-          children: [/*#__PURE__*/jsxs(Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 1.5,
-              mb: isDisabled ? 0 : 1.5
-            },
-            children: [row.id && /*#__PURE__*/jsx(Avatar, {
-              sx: {
-                width: 32,
-                height: 32,
-                fontSize: "11px",
-                fontWeight: 700,
-                bgcolor: row.avatarBg || "#F3F4F6",
-                color: row.avatarColor || "#fff",
-                flexShrink: 0
-              },
-              children: row.id
-            }), /*#__PURE__*/jsxs(Box, {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 1,
-                flex: 1,
-                flexWrap: "nowrap"
-              },
-              children: [/*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "14px",
-                  fontWeight: 700,
-                  color: "#000"
-                },
-                children: row.name
-              }), isDisabled && /*#__PURE__*/jsx(Box, {
-                sx: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  px: 1,
-                  py: 0.3,
-                  borderRadius: "100px",
-                  bgcolor: "#F3F4F6",
-                  border: "1px solid #E5E7EB",
-                  flexShrink: 0
-                },
-                children: /*#__PURE__*/jsx(Typography, {
+                }) : /*#__PURE__*/jsx(Box, {
                   sx: {
-                    fontSize: "8px",
+                    display: "inline-block",
+                    px: compact ? 1 : 1.5,
+                    py: compact ? 0.25 : 0.5,
+                    borderRadius: "100px",
+                    bgcolor: row.statusBg,
+                    color: row.statusColor,
+                    fontSize: compact ? "9px" : "11px",
                     fontWeight: 700,
-                    color: "#6B7280",
-                    letterSpacing: "0.3px",
-                    textTransform: "uppercase"
+                    textAlign: "center"
                   },
-                  children: "Coming Soon"
+                  children: row.status
                 })
               })]
-            }), row.type === "trend" && /*#__PURE__*/jsxs(Box, {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: 0.3,
-                flexShrink: 0
-              },
-              children: [/*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "12px",
-                  color: row.trendType === "up" ? "#22C55E" : "#EF4444"
-                },
-                children: row.trendType === "up" ? "▲" : "▼"
-              }), /*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "11px",
-                  color: row.trendType === "up" ? "#22C55E" : "#EF4444",
-                  fontWeight: 700
-                },
-                children: row.trendType === "up" ? "Up" : "Down"
-              })]
-            })]
-          }), !isDisabled && /*#__PURE__*/jsxs(Box, {
-            sx: {
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr 1fr",
-              gap: 1
-            },
-            children: [/*#__PURE__*/jsxs(Box, {
-              children: [/*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "9px",
-                  color: "#9CA3AF",
-                  fontWeight: 600,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.3px"
-                },
-                children: "Spend"
-              }), /*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "13px",
-                  fontWeight: 700,
-                  color: "#000",
-                  mt: 0.3
-                },
-                children: row.val1
-              })]
-            }), /*#__PURE__*/jsxs(Box, {
-              children: [/*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "9px",
-                  color: "#9CA3AF",
-                  fontWeight: 600,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.3px"
-                },
-                children: "Revenue"
-              }), /*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "13px",
-                  fontWeight: 700,
-                  color: "#000",
-                  mt: 0.3
-                },
-                children: row.val2
-              })]
-            }), /*#__PURE__*/jsxs(Box, {
-              children: [/*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "9px",
-                  color: "#9CA3AF",
-                  fontWeight: 600,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.3px"
-                },
-                children: "ROAS"
-              }), /*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "13px",
-                  fontWeight: 700,
-                  color: row.val3Color || "#22C55E",
-                  mt: 0.3
-                },
-                children: row.val3
-              })]
-            }), /*#__PURE__*/jsxs(Box, {
-              children: [/*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "9px",
-                  color: "#9CA3AF",
-                  fontWeight: 600,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.3px"
-                },
-                children: "CPA"
-              }), /*#__PURE__*/jsx(Typography, {
-                sx: {
-                  fontSize: "13px",
-                  fontWeight: 700,
-                  color: "#000",
-                  mt: 0.3
-                },
-                children: row.val4
-              })]
-            })]
-          })]
-        }, idx);
+            }, idx);
+          })
+        })]
       })
     })]
   });
@@ -1588,99 +1388,6 @@ var MetricCard$1 = function MetricCard(_ref) {
   });
 };
 
-var DisplayCard = function DisplayCard(_ref) {
-  var title = _ref.title,
-    value = _ref.value,
-    subValue = _ref.subValue,
-    Icon = _ref.icon,
-    onClick = _ref.onClick,
-    _ref$sx = _ref.sx,
-    sx = _ref$sx === void 0 ? {} : _ref$sx,
-    _ref$isActive = _ref.isActive,
-    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
-  return /*#__PURE__*/jsxs(Box, {
-    onClick: onClick,
-    sx: _objectSpread2({
-      height: "100px",
-      borderRadius: "24px",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      boxShadow: "rgba(0, 0, 0, 0.06) 0px 4px 15px 0px",
-      // boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      // padding: "16px 16px 16px 18px",
-      py: "10px",
-      px: "16px",
-      cursor: "pointer",
-      bgcolor: "#fff",
-      border: isActive ? "1px solid rgb(99, 99, 230)" : "none",
-      // border: "2px solid #f0f0f0",
-      transition: "all 0.3s ease"
-    }, sx),
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 0.5
-      },
-      children: [/*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontWeight: "400",
-          color: isActive ? "#c1c1f5" : "#a1a1a8",
-          fontSize: "14px",
-          lineHeight: "16px",
-          textAlign: "left"
-        },
-        children: title
-      }), /*#__PURE__*/jsx(Typography, {
-        sx: {
-          lineHeight: "1.2",
-          textAlign: "left",
-          color: isActive ? "#6363e6" : "#000",
-          fontSize: "20px",
-          fontWeight: "700",
-          mb: 0.5
-        },
-        children: statusValue(value)
-      }), subValue && /*#__PURE__*/jsxs(Typography, {
-        sx: {
-          fontSize: "11px",
-          color: typeof subValue === "string" && (subValue.includes("%") || subValue.includes("new") || subValue.includes("x")) && !subValue.includes("/") && !subValue.includes("pass-through") ? "#22C55E" : "rgba(0, 0, 0, 0.4)",
-          fontWeight: "500",
-          display: "flex",
-          alignItems: "center",
-          gap: 0.5
-        },
-        children: [typeof subValue === "string" && (subValue.includes("%") || subValue.includes("new") || subValue.includes("x")) && !subValue.includes("/") && !subValue.includes("pass-through") && /*#__PURE__*/jsx("span", {
-          style: {
-            fontSize: "14px"
-          },
-          children: "\u25B2"
-        }), subValue]
-      })]
-    }), Icon && /*#__PURE__*/jsx(Box, {
-      sx: {
-        width: "44px",
-        height: "44px",
-        borderRadius: "50%",
-        backgroundColor: "#f7f7ff",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: "rgb(99, 99, 230)"
-      },
-      children: /*#__PURE__*/jsx(Icon, {
-        sx: {
-          fontSize: "20px"
-        }
-      })
-    })]
-  });
-};
-var statusValue = function statusValue(value) {
-  return _typeof(value) === "object" && value !== null ? value.value !== undefined ? value.value : JSON.stringify(value) : value;
-};
-
 var PURPLE = "#6363E6";
 var REPORT_COLORS = {
   purple: PURPLE};
@@ -4914,6 +4621,8 @@ var DonorMixCard = function DonorMixCard(_ref) {
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       p: compact ? 1.5 : 3,
+      // height: "100%",
+      // width: "100%",
       display: "flex",
       flexDirection: "column"
     }, sx),
@@ -4943,6 +4652,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
       sx: {
         position: "relative",
         height: compact ? "110px" : "180px",
+        // mb: 1,
         display: "flex",
         justifyContent: "center"
       },
@@ -4953,16 +4663,14 @@ var DonorMixCard = function DonorMixCard(_ref) {
         width: compact ? "140" : "210"
       })
     }), /*#__PURE__*/jsxs(Box, {
+      sx: {},
       children: [items.map(function (item, idx) {
-        var isComingSoon = item.comingSoon;
         return /*#__PURE__*/jsxs(Box, {
           sx: {
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-            mb: idx === items.length - 1 ? showBottomSummary ? compact ? 0.5 : 0 : 0 : compact ? 0.5 : 0,
-            opacity: isComingSoon ? 0.55 : 1,
-            transition: "opacity 0.2s ease"
+            mb: idx === items.length - 1 ? showBottomSummary ? compact ? 0.5 : 0 : 0 : compact ? 0.5 : 0
           },
           children: [/*#__PURE__*/jsxs(Box, {
             sx: {
@@ -4974,38 +4682,31 @@ var DonorMixCard = function DonorMixCard(_ref) {
               sx: {
                 width: 10,
                 height: 10,
-                bgcolor: item.color,
+                bgcolor: item.comingSoon ? "#D1D5DB" : item.color,
                 borderRadius: "2px"
               }
             }), /*#__PURE__*/jsx(Typography, {
               sx: {
                 fontSize: compact ? "10px" : "13px",
                 fontWeight: 500,
-                color: isComingSoon ? "#9CA3AF" : "rgba(0, 0, 0, 0.4)"
+                color: item.comingSoon ? "#9CA3AF" : "rgba(0, 0, 0, 0.4)"
               },
               children: item.label
             })]
-          }), isComingSoon ? /*#__PURE__*/jsx(Box, {
+          }), item.comingSoon ? /*#__PURE__*/jsx(Box, {
             sx: {
               display: "inline-flex",
               alignItems: "center",
               px: 1,
-              py: 0.3,
+              py: 0.2,
               borderRadius: "100px",
               bgcolor: "#F3F4F6",
-              border: "1px solid #E5E7EB"
+              color: "#9CA3AF",
+              fontSize: "10px",
+              fontWeight: 700,
+              whiteSpace: "nowrap"
             },
-            children: /*#__PURE__*/jsx(Typography, {
-              sx: {
-                fontSize: "9px",
-                fontWeight: 700,
-                color: "#6B7280",
-                letterSpacing: "0.3px",
-                textTransform: "uppercase",
-                lineHeight: 1
-              },
-              children: "Coming Soon"
-            })
+            children: "Coming Soon"
           }) : /*#__PURE__*/jsx(Typography, {
             sx: {
               fontSize: compact ? "10px" : "13px",
@@ -5017,6 +4718,9 @@ var DonorMixCard = function DonorMixCard(_ref) {
         }, idx);
       }), showBottomSummary && /*#__PURE__*/jsxs(Box, {
         sx: {
+          // display: "flex",
+          // justifyContent: "space-between",
+          // alignItems: "center",
           pt: compact ? 1 : 2,
           borderTop: "1px solid #f0f0f0",
           textAlign: "left"
@@ -6792,7 +6496,7 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard(_ref7) {
     })]
   });
 };
-var getCampaignInitials$1 = function getCampaignInitials() {
+var getCampaignInitials$2 = function getCampaignInitials() {
   var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
   var words = name.match(/[A-Za-z]+/g) || [];
   if (words.length >= 2) {
@@ -6915,7 +6619,7 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard(_ref8) {
               fontSize: "10px",
               fontWeight: 700
             },
-            children: item.id || getCampaignInitials$1(item.name)
+            children: item.id || getCampaignInitials$2(item.name)
           }), /*#__PURE__*/jsx(Typography, {
             sx: {
               fontSize: "13px",
@@ -17791,6 +17495,89 @@ var OverallSectionSkeleton = function OverallSectionSkeleton() {
     })]
   });
 };
+var PaidSectionSkeleton = function PaidSectionSkeleton() {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(MetricCardsSkeleton, {
+      count: 6,
+      gridTemplateColumns: {
+        xs: "1fr",
+        sm: "1fr 1fr",
+        md: "1fr 1fr 1fr",
+        lg: "repeat(6, 1fr)"
+      },
+      gap: 2
+    }), /*#__PURE__*/jsx(Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 2.75
+      },
+      children: /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        sx: {
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsx(ChartCardSkeleton, {
+          height: 400
+        })
+      })
+    }), /*#__PURE__*/jsxs(Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 2.25
+      },
+      children: [/*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          paddingTop: "0px !important",
+          minHeight: 430
+        },
+        children: /*#__PURE__*/jsx(TableCardSkeleton, {})
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          paddingTop: "0px !important",
+          minHeight: 430
+        },
+        children: /*#__PURE__*/jsx(DonutCardSkeleton, {})
+      })]
+    }), /*#__PURE__*/jsxs(Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 2.25
+      },
+      children: [/*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsx(TableCardSkeleton, {
+          height: 360,
+          rowCount: 4
+        })
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 6,
+        sx: {
+          paddingTop: "0px !important"
+        },
+        children: /*#__PURE__*/jsx(PanelCardSkeleton, {
+          height: 360
+        })
+      })]
+    })]
+  });
+};
 var OrganicSectionSkeleton = function OrganicSectionSkeleton() {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(MetricCardsSkeleton, {
@@ -17931,7 +17718,7 @@ var EmailSectionSkeleton = function EmailSectionSkeleton() {
   });
 };
 
-var formatKpi$2 = function formatKpi(value) {
+var formatKpi$3 = function formatKpi(value) {
   return Number(value !== null && value !== void 0 ? value : 0).toLocaleString("en-US", {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
@@ -18009,7 +17796,7 @@ var OverallSection = function OverallSection(_ref) {
   };
   var metricInfo = {
     "Total Raised": {
-      value: "$".concat(formatKpi$2((_apiData$overviewStat = apiData === null || apiData === void 0 || (_apiData$overviewStat2 = apiData.overviewStats) === null || _apiData$overviewStat2 === void 0 || (_apiData$overviewStat2 = _apiData$overviewStat2.overview) === null || _apiData$overviewStat2 === void 0 ? void 0 : _apiData$overviewStat2.totalRevenue) !== null && _apiData$overviewStat !== void 0 ? _apiData$overviewStat : 0)) || "$0",
+      value: "$".concat(formatKpi$3((_apiData$overviewStat = apiData === null || apiData === void 0 || (_apiData$overviewStat2 = apiData.overviewStats) === null || _apiData$overviewStat2 === void 0 || (_apiData$overviewStat2 = _apiData$overviewStat2.overview) === null || _apiData$overviewStat2 === void 0 ? void 0 : _apiData$overviewStat2.totalRevenue) !== null && _apiData$overviewStat !== void 0 ? _apiData$overviewStat : 0)) || "$0",
       subValue: "".concat(Number((_apiData$overviewStat3 = apiData === null || apiData === void 0 || (_apiData$overviewStat4 = apiData.overviewStats) === null || _apiData$overviewStat4 === void 0 || (_apiData$overviewStat4 = _apiData$overviewStat4.overview) === null || _apiData$overviewStat4 === void 0 || (_apiData$overviewStat4 = _apiData$overviewStat4.growthPercentage) === null || _apiData$overviewStat4 === void 0 ? void 0 : _apiData$overviewStat4.totalRevenue) !== null && _apiData$overviewStat3 !== void 0 ? _apiData$overviewStat3 : 0).toFixed(2), "% vs pp"),
       label: "Total Raised",
       icon: /*#__PURE__*/jsx(PaidOutlined, {}),
@@ -18018,7 +17805,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Net Raised": {
-      value: "$".concat(formatKpi$2((_apiData$overviewStat5 = apiData === null || apiData === void 0 || (_apiData$overviewStat6 = apiData.overviewStats) === null || _apiData$overviewStat6 === void 0 || (_apiData$overviewStat6 = _apiData$overviewStat6.overview) === null || _apiData$overviewStat6 === void 0 ? void 0 : _apiData$overviewStat6.netRevenue) !== null && _apiData$overviewStat5 !== void 0 ? _apiData$overviewStat5 : 0)),
+      value: "$".concat(formatKpi$3((_apiData$overviewStat5 = apiData === null || apiData === void 0 || (_apiData$overviewStat6 = apiData.overviewStats) === null || _apiData$overviewStat6 === void 0 || (_apiData$overviewStat6 = _apiData$overviewStat6.overview) === null || _apiData$overviewStat6 === void 0 ? void 0 : _apiData$overviewStat6.netRevenue) !== null && _apiData$overviewStat5 !== void 0 ? _apiData$overviewStat5 : 0)),
       subValue: "".concat(Number((_apiData$overviewStat7 = apiData === null || apiData === void 0 || (_apiData$overviewStat8 = apiData.overviewStats) === null || _apiData$overviewStat8 === void 0 || (_apiData$overviewStat8 = _apiData$overviewStat8.overview.growthPercentage) === null || _apiData$overviewStat8 === void 0 ? void 0 : _apiData$overviewStat8.netRevenue) !== null && _apiData$overviewStat7 !== void 0 ? _apiData$overviewStat7 : 0).toFixed(2), "% vs pp\n        "),
       label: "Net Raised",
       icon: /*#__PURE__*/jsx(RequestQuoteOutlined, {}),
@@ -18027,7 +17814,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Total Donors": {
-      value: formatKpi$2((_apiData$overviewStat9 = apiData === null || apiData === void 0 || (_apiData$overviewStat0 = apiData.overviewStats) === null || _apiData$overviewStat0 === void 0 || (_apiData$overviewStat0 = _apiData$overviewStat0.overview) === null || _apiData$overviewStat0 === void 0 ? void 0 : _apiData$overviewStat0.totalDonations) !== null && _apiData$overviewStat9 !== void 0 ? _apiData$overviewStat9 : 0),
+      value: formatKpi$3((_apiData$overviewStat9 = apiData === null || apiData === void 0 || (_apiData$overviewStat0 = apiData.overviewStats) === null || _apiData$overviewStat0 === void 0 || (_apiData$overviewStat0 = _apiData$overviewStat0.overview) === null || _apiData$overviewStat0 === void 0 ? void 0 : _apiData$overviewStat0.totalDonations) !== null && _apiData$overviewStat9 !== void 0 ? _apiData$overviewStat9 : 0),
       subValue: "".concat(Number((_apiData$overviewStat1 = apiData === null || apiData === void 0 || (_apiData$overviewStat10 = apiData.overviewStats) === null || _apiData$overviewStat10 === void 0 || (_apiData$overviewStat10 = _apiData$overviewStat10.overview.growthPercentage) === null || _apiData$overviewStat10 === void 0 ? void 0 : _apiData$overviewStat10.totalDonations) !== null && _apiData$overviewStat1 !== void 0 ? _apiData$overviewStat1 : 0).toFixed(2), "%") || "0 new",
       label: "Total Donors",
       icon: /*#__PURE__*/jsx(PeopleAltOutlined, {}),
@@ -18036,7 +17823,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Avg Donation": {
-      value: "$".concat(formatKpi$2((_apiData$overviewStat11 = apiData === null || apiData === void 0 || (_apiData$overviewStat12 = apiData.overviewStats) === null || _apiData$overviewStat12 === void 0 || (_apiData$overviewStat12 = _apiData$overviewStat12.overview) === null || _apiData$overviewStat12 === void 0 ? void 0 : _apiData$overviewStat12.overallAVGDonations) !== null && _apiData$overviewStat11 !== void 0 ? _apiData$overviewStat11 : 0)),
+      value: "$".concat(formatKpi$3((_apiData$overviewStat11 = apiData === null || apiData === void 0 || (_apiData$overviewStat12 = apiData.overviewStats) === null || _apiData$overviewStat12 === void 0 || (_apiData$overviewStat12 = _apiData$overviewStat12.overview) === null || _apiData$overviewStat12 === void 0 ? void 0 : _apiData$overviewStat12.overallAVGDonations) !== null && _apiData$overviewStat11 !== void 0 ? _apiData$overviewStat11 : 0)),
       subValue: "".concat(Number((_apiData$overviewStat13 = apiData === null || apiData === void 0 || (_apiData$overviewStat14 = apiData.overviewStats) === null || _apiData$overviewStat14 === void 0 || (_apiData$overviewStat14 = _apiData$overviewStat14.overview.growthPercentage) === null || _apiData$overviewStat14 === void 0 ? void 0 : _apiData$overviewStat14.overallAVGDonations) !== null && _apiData$overviewStat13 !== void 0 ? _apiData$overviewStat13 : 0).toFixed(2), "% vs pp\n        "),
       label: "Average Donation Amount",
       icon: /*#__PURE__*/jsx(AverageDonationIcon, {}),
@@ -18045,7 +17832,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "ROAS": {
-      value: "".concat(formatKpi$2((_apiData$overviewStat15 = apiData === null || apiData === void 0 || (_apiData$overviewStat16 = apiData.overviewStats) === null || _apiData$overviewStat16 === void 0 || (_apiData$overviewStat16 = _apiData$overviewStat16.overview) === null || _apiData$overviewStat16 === void 0 ? void 0 : _apiData$overviewStat16.roas) !== null && _apiData$overviewStat15 !== void 0 ? _apiData$overviewStat15 : 0), "x"),
+      value: "".concat(formatKpi$3((_apiData$overviewStat15 = apiData === null || apiData === void 0 || (_apiData$overviewStat16 = apiData.overviewStats) === null || _apiData$overviewStat16 === void 0 || (_apiData$overviewStat16 = _apiData$overviewStat16.overview) === null || _apiData$overviewStat16 === void 0 ? void 0 : _apiData$overviewStat16.roas) !== null && _apiData$overviewStat15 !== void 0 ? _apiData$overviewStat15 : 0), "x"),
       subValue: "".concat(Number((_apiData$overviewStat17 = apiData === null || apiData === void 0 || (_apiData$overviewStat18 = apiData.overviewStats) === null || _apiData$overviewStat18 === void 0 || (_apiData$overviewStat18 = _apiData$overviewStat18.overview) === null || _apiData$overviewStat18 === void 0 || (_apiData$overviewStat18 = _apiData$overviewStat18.growthPercentage) === null || _apiData$overviewStat18 === void 0 ? void 0 : _apiData$overviewStat18.roas) !== null && _apiData$overviewStat17 !== void 0 ? _apiData$overviewStat17 : 0).toFixed(2), "x vs pp"),
       label: "ROAS",
       icon: /*#__PURE__*/jsx(TrendingUp, {}),
@@ -18054,7 +17841,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Conversion": {
-      value: "".concat(formatKpi$2((_apiData$overviewStat19 = apiData === null || apiData === void 0 || (_apiData$overviewStat20 = apiData.overviewStats) === null || _apiData$overviewStat20 === void 0 || (_apiData$overviewStat20 = _apiData$overviewStat20.overview) === null || _apiData$overviewStat20 === void 0 ? void 0 : _apiData$overviewStat20.conversionRate) !== null && _apiData$overviewStat19 !== void 0 ? _apiData$overviewStat19 : 0), "%"),
+      value: "".concat(formatKpi$3((_apiData$overviewStat19 = apiData === null || apiData === void 0 || (_apiData$overviewStat20 = apiData.overviewStats) === null || _apiData$overviewStat20 === void 0 || (_apiData$overviewStat20 = _apiData$overviewStat20.overview) === null || _apiData$overviewStat20 === void 0 ? void 0 : _apiData$overviewStat20.conversionRate) !== null && _apiData$overviewStat19 !== void 0 ? _apiData$overviewStat19 : 0), "%"),
       subValue: "".concat(((_apiData$overviewStat21 = apiData === null || apiData === void 0 || (_apiData$overviewStat22 = apiData.overviewStats) === null || _apiData$overviewStat22 === void 0 || (_apiData$overviewStat22 = _apiData$overviewStat22.overview) === null || _apiData$overviewStat22 === void 0 || (_apiData$overviewStat22 = _apiData$overviewStat22.growthPercentage) === null || _apiData$overviewStat22 === void 0 ? void 0 : _apiData$overviewStat22.conversionRate) !== null && _apiData$overviewStat21 !== void 0 ? _apiData$overviewStat21 : 0).toFixed(2), "%") || "0%",
       label: "Conversion Rate",
       icon: /*#__PURE__*/jsx(ConversionRateIcon, {}),
@@ -18440,93 +18227,473 @@ var OverallSection$1 = /*#__PURE__*/Object.freeze({
   default: OverallSection
 });
 
-var PaidSection = function PaidSection() {
+var formatKpi$2 = function formatKpi(value) {
+  return Number(value !== null && value !== void 0 ? value : 0).toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+};
+var CHANNEL_STYLES = {
+  "Meta Ads": {
+    id: "M",
+    icon: SiMeta,
+    avatarBg: "#1877F2",
+    avatarBorder: "#1877F2",
+    color: "#1877F2",
+    comingSoon: false
+  },
+  "Google Ads": {
+    id: "G",
+    icon: SiGoogleads,
+    avatarBg: "#4285F4",
+    avatarBorder: "#4285F4",
+    color: "#4285F4",
+    comingSoon: true
+  },
+  "TikTok Ads": {
+    id: "T",
+    icon: SiTiktok,
+    avatarBg: "#000000",
+    avatarBorder: "#000000",
+    color: "#000000",
+    comingSoon: true
+  },
+  YouTube: {
+    id: "Y",
+    icon: SiYoutube,
+    avatarBg: "#FF0000",
+    avatarBorder: "#FF0000",
+    color: "#FF0000",
+    comingSoon: true
+  },
+  Snapchat: {
+    id: "S",
+    icon: SiSnapchat,
+    avatarBg: "#FFFC00",
+    avatarBorder: "#FFFC00",
+    iconColor: "#8A6D00",
+    color: "#FFFC00",
+    comingSoon: true
+  }
+};
+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",
+    comingSoon: true
+  };
+};
+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 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 buildEmptySpendAllocation = function buildEmptySpendAllocation() {
+  var channels = Object.keys(CHANNEL_STYLES);
+  return {
+    series: channels.map(function () {
+      return 0;
+    }),
+    labels: channels,
+    colors: channels.map(function (channel) {
+      return CHANNEL_STYLES[channel].color;
+    }),
+    centerLabel: "total spend",
+    centerValue: "$".concat(formatNumber(0)),
+    subtitle: "Where $".concat(formatNumber(0), " went"),
+    items: channels.map(function (channel) {
+      return {
+        label: channel,
+        val: "0.0%",
+        color: CHANNEL_STYLES[channel].color,
+        comingSoon: CHANNEL_STYLES[channel].comingSoon
+      };
+    })
+  };
+};
+var PaidSection = function PaidSection(_ref) {
+  var _ref2, _rawOverview$totalSpe, _ref3, _rawOverview$totalRev, _ref4, _rawOverview$roas, _ref5, _rawOverview$costPerD, _rawOverview$conversi, _ref6, _rawOverview$averageD, _ref7, _rawOverview$totalDon, _ref8, _rawOverview$growthPe, _rawOverview$growthPe2, _ref9, _rawOverview$growthPe3, _rawOverview$growthPe4, _ref0, _rawOverview$growthPe5, _rawOverview$growthPe6, _rawOverview$growthPe7, _rawOverview$growthPe8, _rawOverview$growthPe9, _rawOverview$growthPe0, _rawOverview$growthPe1, _rawOverview$growthPe10, _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 = useState("Total Spent"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
-  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-  var metricInfo = {
-    "Total Spent": {
-      value: "$80,313",
-      subValue: "12% vs last month",
-      chartLabel: "Daily Spend",
-      data: [800, 950, 700, 1100, 900, 1200, 1300],
-      icon: IndeterminateCheckBoxOutlined
-    },
-    "Revinue Raised": {
-      value: "$240,398",
-      subValue: "12% vs last month",
-      chartLabel: "Daily Revenue",
-      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
-      icon: PaidOutlined
-    },
-    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: TrendingUp
-    },
-    "Cost per donor": {
-      value: "$373",
-      subValue: "12% vs last month",
-      chartLabel: "CPA Trend",
-      data: [350, 380, 360, 410, 390, 370, 373],
-      icon: PersonOutlined
-    },
-    "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: Adjust
-    },
-    "Avg donation": {
-      value: "$130.58",
-      subValue: "12% vs last month",
-      chartLabel: "Average Donation",
-      data: [120, 135, 125, 140, 130, 128, 130.58],
-      icon: PaidOutlined
+  var rawOverview = (apiData === null || apiData === void 0 ? void 0 : apiData.overview) || {};
+  var metaSummary = (apiData === null || apiData === void 0 ? void 0 : apiData.metaSummary) || {};
+  var overview = {
+    totalSpent: (_ref2 = (_rawOverview$totalSpe = rawOverview.totalSpent) !== null && _rawOverview$totalSpe !== void 0 ? _rawOverview$totalSpe : metaSummary.metaSpend) !== null && _ref2 !== void 0 ? _ref2 : 0,
+    totalRevenue: (_ref3 = (_rawOverview$totalRev = rawOverview.totalRevenue) !== null && _rawOverview$totalRev !== void 0 ? _rawOverview$totalRev : metaSummary.attributedAmount) !== null && _ref3 !== void 0 ? _ref3 : 0,
+    roas: (_ref4 = (_rawOverview$roas = rawOverview.roas) !== null && _rawOverview$roas !== void 0 ? _rawOverview$roas : metaSummary.roas) !== null && _ref4 !== void 0 ? _ref4 : 0,
+    costPerDonor: (_ref5 = (_rawOverview$costPerD = rawOverview.costPerDonor) !== null && _rawOverview$costPerD !== void 0 ? _rawOverview$costPerD : metaSummary.cpa) !== null && _ref5 !== void 0 ? _ref5 : 0,
+    conversionRate: (_rawOverview$conversi = rawOverview.conversionRate) !== null && _rawOverview$conversi !== void 0 ? _rawOverview$conversi : 0,
+    averageDonation: (_ref6 = (_rawOverview$averageD = rawOverview.averageDonation) !== null && _rawOverview$averageD !== void 0 ? _rawOverview$averageD : metaSummary.averageGift) !== null && _ref6 !== void 0 ? _ref6 : 0,
+    totalDonations: (_ref7 = (_rawOverview$totalDon = rawOverview.totalDonations) !== null && _rawOverview$totalDon !== void 0 ? _rawOverview$totalDon : metaSummary.donationsCount) !== null && _ref7 !== void 0 ? _ref7 : 0
+  };
+  var growth = {
+    totalSpent: (_ref8 = (_rawOverview$growthPe = (_rawOverview$growthPe2 = rawOverview.growthPercentage) === null || _rawOverview$growthPe2 === void 0 ? void 0 : _rawOverview$growthPe2.totalSpent) !== null && _rawOverview$growthPe !== void 0 ? _rawOverview$growthPe : metaSummary.metaSpendChangePercent) !== null && _ref8 !== void 0 ? _ref8 : 0,
+    totalRevenue: (_ref9 = (_rawOverview$growthPe3 = (_rawOverview$growthPe4 = rawOverview.growthPercentage) === null || _rawOverview$growthPe4 === void 0 ? void 0 : _rawOverview$growthPe4.totalRevenue) !== null && _rawOverview$growthPe3 !== void 0 ? _rawOverview$growthPe3 : metaSummary.attributedChangePercent) !== null && _ref9 !== void 0 ? _ref9 : 0,
+    roas: (_ref0 = (_rawOverview$growthPe5 = (_rawOverview$growthPe6 = rawOverview.growthPercentage) === null || _rawOverview$growthPe6 === void 0 ? void 0 : _rawOverview$growthPe6.roas) !== null && _rawOverview$growthPe5 !== void 0 ? _rawOverview$growthPe5 : metaSummary.roasChange) !== null && _ref0 !== void 0 ? _ref0 : 0,
+    costPerDonor: (_rawOverview$growthPe7 = (_rawOverview$growthPe8 = rawOverview.growthPercentage) === null || _rawOverview$growthPe8 === void 0 ? void 0 : _rawOverview$growthPe8.costPerDonor) !== null && _rawOverview$growthPe7 !== void 0 ? _rawOverview$growthPe7 : 0,
+    conversionRate: (_rawOverview$growthPe9 = (_rawOverview$growthPe0 = rawOverview.growthPercentage) === null || _rawOverview$growthPe0 === void 0 ? void 0 : _rawOverview$growthPe0.conversionRate) !== null && _rawOverview$growthPe9 !== void 0 ? _rawOverview$growthPe9 : 0,
+    averageDonation: (_rawOverview$growthPe1 = (_rawOverview$growthPe10 = rawOverview.growthPercentage) === null || _rawOverview$growthPe10 === void 0 ? void 0 : _rawOverview$growthPe10.averageDonation) !== null && _rawOverview$growthPe1 !== void 0 ? _rawOverview$growthPe1 : 0
+  };
+  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 = 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 = useMemo(function () {
+    if (!hasPaidOverview) {
+      return {
+        "Total Spent": {
+          value: "$".concat(formatKpi$2(0)),
+          subValue: formatGrowth$2(0),
+          data: flatSeries(0),
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(IndeterminateCheckBoxOutlined, {}),
+          money: true,
+          error: false,
+          warning: false
+        },
+        "Revenue Raised": {
+          value: "$".concat(formatKpi$2(0)),
+          subValue: formatGrowth$2(0),
+          data: flatSeries(0),
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(PaidOutlined, {}),
+          money: true,
+          error: false,
+          warning: false
+        },
+        ROAS: {
+          value: "".concat(formatKpi$2(0), "x"),
+          subValue: formatGrowth$2(0),
+          data: flatSeries(0),
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(TrendingUp, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        "Cost Per Donor": {
+          value: "$".concat(formatKpi$2(0)),
+          subValue: formatGrowth$2(0),
+          data: flatSeries(0),
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(PersonOutlined, {}),
+          money: true,
+          error: false,
+          warning: false
+        },
+        "Conversion Rate": {
+          value: "".concat(formatKpi$2(0), "%"),
+          subValue: formatGrowth$2(0),
+          data: flatSeries(0),
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(ConversionRateIcon, {}),
+          money: false,
+          error: false,
+          warning: false
+        },
+        "Avg Donation": {
+          value: "$".concat(formatKpi$2(0)),
+          subValue: formatGrowth$2(0),
+          data: flatSeries(0),
+          categories: fallbackCategories,
+          icon: /*#__PURE__*/jsx(AverageDonationIcon, {}),
+          money: true,
+          error: false,
+          warning: false
+        }
+      };
+    }
+    var chartCategories = spendSeries.categories.length > 0 ? spendSeries.categories : revenueSeries.categories.length > 0 ? revenueSeries.categories : fallbackCategories;
+    return {
+      "Total Spent": {
+        value: "$".concat(formatKpi$2(overview.totalSpent)),
+        subValue: formatGrowth$2(growth.totalSpent),
+        data: spendSeries.data.length > 0 ? spendSeries.data : flatSeries(0),
+        categories: chartCategories,
+        icon: /*#__PURE__*/jsx(IndeterminateCheckBoxOutlined, {}),
+        money: true,
+        error: false,
+        warning: false
+      },
+      "Revenue Raised": {
+        value: "$".concat(formatKpi$2(overview.totalRevenue)),
+        subValue: formatGrowth$2(growth.totalRevenue),
+        data: revenueSeries.data.length > 0 ? revenueSeries.data : flatSeries(0),
+        categories: chartCategories,
+        icon: /*#__PURE__*/jsx(PaidOutlined, {}),
+        money: true,
+        error: false,
+        warning: false
+      },
+      ROAS: {
+        value: "".concat(formatKpi$2(overview.roas), "x"),
+        subValue: formatGrowth$2(growth.roas),
+        data: roasChartData.length > 0 ? roasChartData : flatSeries(0),
+        categories: chartCategories,
+        icon: /*#__PURE__*/jsx(TrendingUp, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      "Cost Per Donor": {
+        value: "$".concat(formatKpi$2(overview.costPerDonor)),
+        subValue: formatGrowth$2(growth.costPerDonor),
+        data: flatSeries(overview.costPerDonor),
+        categories: chartCategories,
+        icon: /*#__PURE__*/jsx(PersonOutlined, {}),
+        money: true,
+        error: false,
+        warning: false
+      },
+      "Conversion Rate": {
+        value: "".concat(formatKpi$2(overview.conversionRate), "%"),
+        subValue: formatGrowth$2(growth.conversionRate),
+        data: flatSeries(overview.conversionRate),
+        categories: chartCategories,
+        icon: /*#__PURE__*/jsx(ConversionRateIcon, {}),
+        money: false,
+        error: false,
+        warning: false
+      },
+      "Avg Donation": {
+        value: "$".concat(formatKpi$2(overview.averageDonation)),
+        subValue: formatGrowth$2(growth.averageDonation),
+        data: flatSeries(overview.averageDonation),
+        categories: chartCategories,
+        icon: /*#__PURE__*/jsx(AverageDonationIcon, {}),
+        money: true,
+        error: false,
+        warning: false
+      }
+    };
+  }, [fallbackCategories, growth, hasPaidOverview, overview, revenueSeries, roasChartData, spendSeries]);
+  var channelRows = useMemo(function () {
+    var channels = apiData === null || apiData === void 0 ? void 0 : apiData.channelPerformance;
+    if (!hasPaidOverview) return [];
+    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,
+        icon: style.icon,
+        avatarBg: style.avatarBg,
+        avatarBorder: style.avatarBorder,
+        iconColor: style.iconColor || style.avatarBorder,
+        comingSoon: style.comingSoon,
+        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 = useMemo(function () {
+    var _allocation$totalSpen, _allocation$totalSpen2;
+    var allocation = apiData === null || apiData === void 0 ? void 0 : apiData.spendAllocation;
+    if (!hasPaidOverview) return [];
+    if (!allocation || !Array.isArray(allocation.data) || allocation.data.length === 0) {
+      return buildEmptySpendAllocation();
+    }
+    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,
+        comingSoon: style.comingSoon
+      };
+    });
+    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 (_ref1) {
+        var label = _ref1.label,
+          val = _ref1.val,
+          color = _ref1.color,
+          comingSoon = _ref1.comingSoon;
+        return {
+          label: label,
+          val: val,
+          color: color,
+          comingSoon: comingSoon
+        };
+      })
+    };
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.spendAllocation, hasPaidOverview]);
+  var topCampaignsData = useMemo(function () {
+    var campaigns = apiData === null || apiData === void 0 ? void 0 : apiData.topCampaigns;
+    if (!hasPaidOverview) return [];
+    if (!Array.isArray(campaigns)) return [];
+    if (campaigns.length === 0) return [];
+    return campaigns.map(function (item) {
+      var _item$spend3, _item$revenue2, _item$roas2;
+      var name = item.campaignName || item.campaign || item.name || "Unknown";
+      return {
+        id: getCampaignInitials$1(name),
+        name: name,
+        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 donorGeographyData = useMemo(function () {
+    var geography = apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography;
+    if (!hasPaidOverview) return [];
+    var rawCountries = Array.isArray(geography) ? geography : (geography === null || geography === void 0 ? void 0 : geography.countries) || (geography === null || geography === void 0 ? void 0 : geography.data) || [];
+    return Array.isArray(rawCountries) ? rawCountries : [];
+  }, [apiData === null || apiData === void 0 ? void 0 : apiData.donorGeography, hasPaidOverview]);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsx(DisplayCard, {
+    return /*#__PURE__*/jsx(MetricCard$1, {
       title: title,
       value: metricInfo[title].value,
-      subValue: metricInfo[title].subValue,
+      caption: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
+      error: metricInfo[title].error,
+      active: activeMetric === title,
       onClick: function onClick() {
         return setActiveMetric(title);
       },
-      isActive: activeMetric === title,
-      sx: {
-        flex: 1
+      sx: metricInfo[title].error ? {
+        border: "2px solid #ef4444",
+        bgcolor: "#fffafa",
+        cursor: "pointer"
+      } : {
+        cursor: "pointer"
       }
-    }, title);
+    });
   };
-  var selectedInfo = metricInfo[activeMetric];
+  var selectedInfo = metricInfo[activeMetric] || metricInfo["Total Spent"];
+  var emptySpendAllocation = buildEmptySpendAllocation();
+  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__*/jsx(PaidSectionSkeleton, {});
+  }
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Box, {
       sx: {
-        display: "flex",
-        gap: 2,
-        mb: 1,
-        flexWrap: "wrap"
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "1fr",
+          sm: "1fr 1fr",
+          md: "1fr 1fr 1fr",
+          lg: "repeat(6, 1fr)"
+        },
+        gap: "6px",
+        mb: 0
       },
       children: Object.keys(metricInfo).map(renderCard)
     }), /*#__PURE__*/jsx(Grid, {
       container: true,
       spacing: 3,
       sx: {
-        mt: 1
+        mt: "12px"
       },
       children: /*#__PURE__*/jsx(RenderChartCard, {
         item: mainChart,
@@ -18534,125 +18701,61 @@ var PaidSection = function PaidSection() {
         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__*/jsxs(Grid, {
       container: true,
       spacing: 3,
       sx: {
-        mt: 3
+        mt: "6px"
       },
       children: [/*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
         md: 6,
+        sx: {
+          paddingTop: "0px !important",
+          minHeight: "430px"
+        },
         children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
-          title: "Channel performance",
+          title: "Channel Performance",
           subtitle: "Ad platforms ranked by ROAS",
-          columns: ["channel", "spend", "revenue", "ROAS", "CPA", "trend"],
+          columns: ["Channel", "Ppend", "Revenue", "ROAS", "CPA", "Trend"],
           gridTemplateColumns: "2.2fr 1fr 1fr 0.8fr 0.8fr 1.2fr",
-          rows: [{
-            id: "M",
-            avatarBg: "#4267B2",
-            avatarColor: "#fff",
-            name: "Meta Ads",
-            val1: "$32,800",
-            val2: "$112,400",
-            val3: "3.4x",
-            val4: "$340",
-            type: "trend",
-            trendType: "up",
-            trendLabel: "Improving",
-            highlightVal3: true,
-            val3Color: "#22C55E",
-            comingSoon: false
-          }, {
-            id: "G",
-            avatarBg: "#C4C4C4",
-            avatarColor: "#fff",
-            name: "Google Ads",
-            val1: "—",
-            val2: "—",
-            val3: "—",
-            val4: "—",
-            type: "comingSoon",
-            comingSoon: true
-          }, {
-            id: "T",
-            avatarBg: "#C4C4C4",
-            avatarColor: "#fff",
-            name: "TikTok Ads",
-            val1: "—",
-            val2: "—",
-            val3: "—",
-            val4: "—",
-            type: "comingSoon",
-            comingSoon: true
-          }, {
-            id: "Y",
-            avatarBg: "#C4C4C4",
-            avatarColor: "#fff",
-            name: "YouTube",
-            val1: "—",
-            val2: "—",
-            val3: "—",
-            val4: "—",
-            type: "comingSoon",
-            comingSoon: true
-          }, {
-            id: "S",
-            avatarBg: "#C4C4C4",
-            avatarColor: "#fff",
-            name: "Snapchat",
-            val1: "—",
-            val2: "—",
-            val3: "—",
-            val4: "—",
-            type: "comingSoon",
-            comingSoon: true
-          }]
+          height: "100%",
+          rows: channelRows !== null && channelRows !== void 0 ? channelRows : []
         })
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
         md: 6,
+        sx: {
+          paddingTop: "0px !important",
+          minHeight: "430px",
+          paddingLeft: {
+            xs: "24px !important",
+            md: "6px !important"
+          },
+          marginTop: {
+            xs: "6px",
+            md: "0px"
+          }
+        },
         children: /*#__PURE__*/jsx(DonorMixCard, {
-          title: "Spend allocation",
-          subtitle: "Where $80.3K went this month",
-          series: [100],
-          labels: ["Meta Ads"],
-          colors: ["#4267B2"],
-          centerLabel: "total spend",
-          centerValue: "$80.3K",
-          items: [{
-            label: "Meta Ads",
-            val: "100%",
-            color: "#4267B2",
-            comingSoon: false
-          }, {
-            label: "Google Ads",
-            val: "Coming Soon",
-            color: "#C4C4C4",
-            comingSoon: true
-          }, {
-            label: "TikTok",
-            val: "Coming Soon",
-            color: "#C4C4C4",
-            comingSoon: true
-          }, {
-            label: "YouTube",
-            val: "Coming Soon",
-            color: "#C4C4C4",
-            comingSoon: true
-          }, {
-            label: "Snapchat",
-            val: "Coming Soon",
-            color: "#C4C4C4",
-            comingSoon: true
-          }],
+          title: "Spend Allocation",
+          subtitle: (_spendAllocation$subt = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.subtitle) !== null && _spendAllocation$subt !== void 0 ? _spendAllocation$subt : emptySpendAllocation.subtitle,
+          series: (_spendAllocation$seri = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.series) !== null && _spendAllocation$seri !== void 0 ? _spendAllocation$seri : emptySpendAllocation.series,
+          labels: (_spendAllocation$labe = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.labels) !== null && _spendAllocation$labe !== void 0 ? _spendAllocation$labe : emptySpendAllocation.labels,
+          colors: (_spendAllocation$colo = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.colors) !== null && _spendAllocation$colo !== void 0 ? _spendAllocation$colo : emptySpendAllocation.colors,
+          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 : emptySpendAllocation.centerValue,
+          items: (_spendAllocation$item = spendAllocation === null || spendAllocation === void 0 ? void 0 : spendAllocation.items) !== null && _spendAllocation$item !== void 0 ? _spendAllocation$item : emptySpendAllocation.items,
           showBottomSummary: false,
           sx: {
-            pb: 3.5
+            pb: 3.5,
+            height: "100%"
           }
         })
       })]
@@ -18660,18 +18763,44 @@ var PaidSection = function PaidSection() {
       container: true,
       spacing: 3,
       sx: {
-        mt: 3
+        mt: "6px",
+        alignItems: "stretch"
       },
       children: [/*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
         md: 6,
-        children: /*#__PURE__*/jsx(TopPerformingCampaignsCard, {})
+        sx: {
+          paddingTop: "0px !important",
+          display: "flex"
+        },
+        children: /*#__PURE__*/jsx(Box, {
+          sx: {
+            width: "100%"
+          },
+          children: /*#__PURE__*/jsx(TopPerformingCampaignsCard, {
+            data: topCampaignsData !== null && topCampaignsData !== void 0 ? topCampaignsData : []
+          })
+        })
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
         md: 6,
-        children: /*#__PURE__*/jsx(PaidDonorGeographyCard, {})
+        sx: {
+          paddingTop: "0px !important",
+          paddingLeft: {
+            xs: "24px !important",
+            md: "6px !important"
+          },
+          marginTop: {
+            xs: "6px",
+            md: "0px"
+          },
+          display: "flex"
+        },
+        children: /*#__PURE__*/jsx(PaidDonorGeographyCard, {
+          donorGeographyData: donorGeographyData
+        })
       })]
     })]
   });