@ammarkhalidfarooq/dashboard-package 0.6.127 → 0.6.128

package/dist/index.es.js

@@ -1,6 +1,6 @@
 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, PersonOutlined, IndeterminateCheckBoxOutlined, FavoriteOutlined, SearchOutlined, HighlightOff, Email } from '@mui/icons-material';
+import { MoreHoriz, TrendingDown, TrendingUp, MoreVert, Check, InfoOutlined, Settings, PeopleAltOutlined, RequestQuoteOutlined, PaidOutlined, Adjust, 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';
@@ -1019,262 +1019,482 @@ 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,
-    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),
+    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
+      },
       children: [/*#__PURE__*/jsxs(Box, {
+        sx: {
+          mb: 3
+        },
         children: [/*#__PURE__*/jsx(Typography, {
           sx: {
             fontWeight: 700,
-            fontSize: compact ? "14px" : "18px",
-            color: "#000",
-            textAlign: "left",
-            lineHeight: 1.15
+            fontSize: "18px",
+            color: "#000"
           },
           children: title
         }), /*#__PURE__*/jsx(Typography, {
           sx: {
-            fontSize: compact ? "10px" : "13px",
-            color: "rgba(0, 0, 0, 0.4)",
-            textAlign: "left",
-            lineHeight: 1.15
+            fontSize: "13px",
+            color: "rgba(0,0,0,0.4)",
+            mt: 0.2
           },
           children: subtitle
         })]
-      }), actionLabel && /*#__PURE__*/jsx(Typography, {
+      }), /*#__PURE__*/jsx(Box, {
         sx: {
-          fontSize: compact ? "10px" : "13px",
-          fontWeight: 600,
-          color: "rgb(99, 99, 230)",
-          cursor: "pointer"
+          overflowX: "auto"
         },
-        children: actionLabel
+        children: /*#__PURE__*/jsxs(Box, {
+          sx: {
+            minWidth: "600px"
+          },
+          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, {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: gridTemplateColumns,
+                  gap: 2,
+                  py: 1.2,
+                  alignItems: "center",
+                  borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5",
+                  opacity: isDisabled ? 0.55 : 1,
+                  transition: "opacity 0.2s ease"
+                },
+                children: [/*#__PURE__*/jsxs(Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.5,
+                    minWidth: 0
+                  },
+                  children: [row.id && /*#__PURE__*/jsx(Avatar, {
+                    sx: {
+                      width: 28,
+                      height: 28,
+                      fontSize: "10px",
+                      fontWeight: 700,
+                      bgcolor: row.avatarBg || "#F3F4F6",
+                      color: row.avatarColor || "#fff",
+                      flexShrink: 0
+                    },
+                    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"
+                  },
+                  children: row.val1
+                }), row.type === "progress" ? /*#__PURE__*/jsxs(Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.5,
+                    justifyContent: "center"
+                  },
+                  children: [/*#__PURE__*/jsx(Box, {
+                    sx: {
+                      flexGrow: 1,
+                      maxWidth: "80px"
+                    },
+                    children: /*#__PURE__*/jsx(LinearProgress, {
+                      variant: "determinate",
+                      value: row.progress,
+                      sx: {
+                        height: 8,
+                        borderRadius: 4,
+                        bgcolor: "#F3F4F6",
+                        "& .MuiLinearProgress-bar": {
+                          borderRadius: 4,
+                          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, {
+                  sx: {
+                    fontSize: "13px",
+                    fontWeight: row.highlightVal3 ? 700 : 500,
+                    color: isDisabled ? "#9CA3AF" : row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
+                    whiteSpace: "nowrap",
+                    textAlign: "center"
+                  },
+                  children: row.val3
+                }), /*#__PURE__*/jsx(Typography, {
+                  sx: {
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: isDisabled ? "#9CA3AF" : "#000",
+                    whiteSpace: "nowrap",
+                    textAlign: "center"
+                  },
+                  children: row.val4
+                }), columns.length > 5 && /*#__PURE__*/jsx(Box, {
+                  sx: {
+                    display: "flex",
+                    justifyContent: "center"
+                  },
+                  children: row.type === "trend" ? /*#__PURE__*/jsxs(Box, {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.5
+                    },
+                    children: [/*#__PURE__*/jsx(Typography, {
+                      sx: {
+                        fontSize: "14px",
+                        color: row.trendType === "up" ? "#22C55E" : "#EF4444"
+                      },
+                      children: row.trendType === "up" ? "▲" : "▼"
+                    }), /*#__PURE__*/jsx(Typography, {
+                      sx: {
+                        fontSize: "12px",
+                        color: row.trendType === "up" ? "#22C55E" : "#EF4444",
+                        fontWeight: 700,
+                        whiteSpace: "nowrap"
+                      },
+                      children: isTablet ? row.trendType === "up" ? "Up" : "Down" : 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);
+            })
+          })]
+        })
       })]
-    }), /*#__PURE__*/jsx(Box, {
-      sx: _objectSpread2({
-        overflowX: compact ? "hidden" : "auto"
-      }, tableSx),
-      children: /*#__PURE__*/jsxs(Box, {
+    });
+  }
+
+  /* ─── 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: {
-          minWidth: compact ? 0 : "600px"
+          fontWeight: 700,
+          fontSize: "16px",
+          color: "#000"
         },
-        children: [/*#__PURE__*/jsx(Box, {
+        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: {
-            display: "grid",
-            gridTemplateColumns: gridTemplateColumns,
-            gap: compact ? 1 : 2,
-            pb: compact ? 1 : 2.5,
-            borderBottom: "1px solid #f0f0f0"
+            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: columns.map(function (header) {
-            return /*#__PURE__*/jsx(Typography, {
+          children: [/*#__PURE__*/jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              mb: isDisabled ? 0 : 1.5
+            },
+            children: [row.id && /*#__PURE__*/jsx(Avatar, {
               sx: {
-                fontSize: compact ? "9px" : "12px",
-                color: "rgba(0, 0, 0, 0.4)",
-                fontWeight: 500,
-                textAlign: "left"
+                width: 32,
+                height: 32,
+                fontSize: "11px",
+                fontWeight: 700,
+                bgcolor: row.avatarBg || "#F3F4F6",
+                color: row.avatarColor || "#fff",
+                flexShrink: 0
               },
-              children: header
-            }, header);
-          })
-        }), /*#__PURE__*/jsx(Box, {
-          sx: {
-            mt: 1
-          },
-          children: rows.map(function (row, idx) {
-            var _row$progress;
-            return /*#__PURE__*/jsxs(Box, {
+              children: row.id
+            }), /*#__PURE__*/jsxs(Box, {
               sx: {
-                display: "grid",
-                gridTemplateColumns: gridTemplateColumns,
-                gap: compact ? 1 : 2,
-                py: compact ? 0.5 : 1.2,
+                display: "flex",
                 alignItems: "center",
-                borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
+                gap: 1,
+                flex: 1,
+                flexWrap: "nowrap"
               },
-              children: [/*#__PURE__*/jsxs(Box, {
+              children: [/*#__PURE__*/jsx(Typography, {
                 sx: {
-                  display: "flex",
+                  fontSize: "14px",
+                  fontWeight: 700,
+                  color: "#000"
+                },
+                children: row.name
+              }), isDisabled && /*#__PURE__*/jsx(Box, {
+                sx: {
+                  display: "inline-flex",
                   alignItems: "center",
-                  gap: 1.5
+                  px: 1,
+                  py: 0.3,
+                  borderRadius: "100px",
+                  bgcolor: "#F3F4F6",
+                  border: "1px solid #E5E7EB",
+                  flexShrink: 0
                 },
-                children: [row.id && /*#__PURE__*/jsx(Avatar, {
-                  sx: {
-                    width: compact ? 22 : 28,
-                    height: compact ? 22 : 28,
-                    fontSize: compact ? "8px" : "10px",
-                    fontWeight: 700,
-                    bgcolor: row.avatarBg || "#F3F4F6",
-                    color: "rgb(99, 99, 230)"
-                  },
-                  children: row.id
-                }), row.icon && /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    color: row.iconColor || "inherit",
-                    display: "flex",
-                    alignItems: "center"
-                  },
-                  children: /*#__PURE__*/jsx(row.icon, {
-                    sx: {
-                      fontSize: "18px"
-                    }
-                  })
-                }), /*#__PURE__*/jsx(Typography, {
+                children: /*#__PURE__*/jsx(Typography, {
                   sx: {
-                    fontSize: compact ? "10px" : "12px",
+                    fontSize: "8px",
                     fontWeight: 700,
-                    color: "#000"
+                    color: "#6B7280",
+                    letterSpacing: "0.3px",
+                    textTransform: "uppercase"
                   },
-                  children: row.name
-                })]
+                  children: "Coming Soon"
+                })
+              })]
+            }), 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: compact ? "10px" : "13px",
+                  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",
-                  textAlign: "left"
+                  mt: 0.3
                 },
                 children: row.val1
-              }), row.type === "progress" ? /*#__PURE__*/jsxs(Box, {
+              })]
+            }), /*#__PURE__*/jsxs(Box, {
+              children: [/*#__PURE__*/jsx(Typography, {
                 sx: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 1.5
+                  fontSize: "9px",
+                  color: "#9CA3AF",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.3px"
                 },
-                children: [/*#__PURE__*/jsx(Box, {
-                  sx: {
-                    flexGrow: 1
-                  },
-                  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: {
-                      height: compact ? 6 : 8,
-                      borderRadius: 4,
-                      bgcolor: "#F3F4F6",
-                      "& .MuiLinearProgress-bar": {
-                        borderRadius: 4,
-                        bgcolor: row.progressColor || "rgb(99, 99, 230)"
-                      }
-                    }
-                  })
-                }), /*#__PURE__*/jsxs(Typography, {
-                  sx: {
-                    fontSize: compact ? "9px" : "11px",
-                    color: "rgba(0, 0, 0, 0.4)",
-                    minWidth: "30px"
-                  },
-                  children: [row.progress, "%"]
-                })]
-              }) : /*#__PURE__*/jsx(Typography, {
+                children: "Revenue"
+              }), /*#__PURE__*/jsx(Typography, {
                 sx: {
                   fontSize: "13px",
-                  fontWeight: 600,
+                  fontWeight: 700,
                   color: "#000",
-                  textAlign: "left"
+                  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: compact ? "10px" : "13px",
-                  fontWeight: row.highlightVal3 ? 700 : 500,
-                  color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
-                  textAlign: "left"
+                  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: 500,
+                  fontWeight: 700,
                   color: "#000",
-                  textAlign: "left"
+                  mt: 0.3
                 },
                 children: row.val4
-              }), columns.length > 5 && /*#__PURE__*/jsx(Box, {
-                children: row.type === "trend" ? /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 0.5
-                  },
-                  children: row.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: 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
-                    })]
-                  })
-                }) : /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    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,
-                    textAlign: "center"
-                  },
-                  children: row.status
-                })
               })]
-            }, idx);
-          })
-        })]
+            })]
+          })]
+        }, idx);
       })
     })]
   });
@@ -1368,6 +1588,99 @@ 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};
@@ -3756,9 +4069,9 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref34, ref) {
 });
 ExportPdfLayout.displayName = "ExportPdfLayout";
 
-/**
- * Captures [data-export-page] elements and saves a multi-page PDF.
- * Each page uses a custom size matching the captured content so nothing is cropped.
+/**
+ * Captures [data-export-page] elements and saves a multi-page PDF.
+ * Each page uses a custom size matching the captured content so nothing is cropped.
  */
 function exportReportPdf(_x, _x2) {
   return _exportReportPdf.apply(this, arguments);
@@ -4601,8 +4914,6 @@ 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),
@@ -4632,7 +4943,6 @@ var DonorMixCard = function DonorMixCard(_ref) {
       sx: {
         position: "relative",
         height: compact ? "110px" : "180px",
-        // mb: 1,
         display: "flex",
         justifyContent: "center"
       },
@@ -4643,13 +4953,16 @@ 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",
-            mb: idx === items.length - 1 ? showBottomSummary ? compact ? 0.5 : 0 : 0 : compact ? 0.5 : 0
+            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"
           },
           children: [/*#__PURE__*/jsxs(Box, {
             sx: {
@@ -4668,11 +4981,32 @@ var DonorMixCard = function DonorMixCard(_ref) {
               sx: {
                 fontSize: compact ? "10px" : "13px",
                 fontWeight: 500,
-                color: "rgba(0, 0, 0, 0.4)"
+                color: isComingSoon ? "#9CA3AF" : "rgba(0, 0, 0, 0.4)"
               },
               children: item.label
             })]
-          }), /*#__PURE__*/jsx(Typography, {
+          }), isComingSoon ? /*#__PURE__*/jsx(Box, {
+            sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              px: 1,
+              py: 0.3,
+              borderRadius: "100px",
+              bgcolor: "#F3F4F6",
+              border: "1px solid #E5E7EB"
+            },
+            children: /*#__PURE__*/jsx(Typography, {
+              sx: {
+                fontSize: "9px",
+                fontWeight: 700,
+                color: "#6B7280",
+                letterSpacing: "0.3px",
+                textTransform: "uppercase",
+                lineHeight: 1
+              },
+              children: "Coming Soon"
+            })
+          }) : /*#__PURE__*/jsx(Typography, {
             sx: {
               fontSize: compact ? "10px" : "13px",
               fontWeight: 700,
@@ -4683,9 +5017,6 @@ 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"
@@ -6461,13 +6792,16 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard(_ref7) {
     })]
   });
 };
-var getCampaignInitials$2 = function getCampaignInitials() {
+var getCampaignInitials$1 = function getCampaignInitials() {
   var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var words = name.trim().split(/\s+/).filter(Boolean);
+  var words = name.match(/[A-Za-z]+/g) || [];
   if (words.length >= 2) {
     return (words[0][0] + words[1][0]).toUpperCase();
   }
-  return name.slice(0, 2).toUpperCase() || "—";
+  if (words.length === 1) {
+    return words[0].slice(0, 2).toUpperCase();
+  }
+  return "—";
 };
 var TopPerformingCampaignsCard = function TopPerformingCampaignsCard(_ref8) {
   var _ref8$data = _ref8.data,
@@ -6561,20 +6895,27 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard(_ref8) {
             alignItems: "center",
             gap: 1.5
           },
-          children: [/*#__PURE__*/jsx(Box, {
+          children: [/*#__PURE__*/jsx(Avatar, {
+            src: item.image || item.avatar || item.logo || item.thumbnail || item.campaignImage || undefined,
+            alt: item.name,
+            imgProps: {
+              style: {
+                width: "100%",
+                height: "100%",
+                objectFit: "cover"
+              }
+            },
             sx: {
               width: 24,
               height: 24,
+              flexShrink: 0,
               borderRadius: "50%",
               bgcolor: "#c1cfde71",
               color: "#3431e4ff",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
               fontSize: "10px",
               fontWeight: 700
             },
-            children: item.id || getCampaignInitials$2(item.name)
+            children: item.id || getCampaignInitials$1(item.name)
           }), /*#__PURE__*/jsx(Typography, {
             sx: {
               fontSize: "13px",
@@ -9090,14 +9431,14 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
   });
 };
 
-/**
- * Theme colors for server components
- *
- * These are plain JavaScript objects that can be safely imported
- * in both server and client components without triggering
- * client-only code in server components.
- *
- * For client components, use the full theme from @/config/customTheme
+/**
+ * Theme colors for server components
+ *
+ * These are plain JavaScript objects that can be safely imported
+ * in both server and client components without triggering
+ * client-only code in server components.
+ *
+ * For client components, use the full theme from @/config/customTheme
  */
 
 var themeColors = {
@@ -17437,98 +17778,15 @@ var OverallSectionSkeleton = function OverallSectionSkeleton() {
             height: 280
           }, index);
         })
-      }), /*#__PURE__*/jsx(Box, {
-        sx: fourColGridSx,
-        children: Array.from({
-          length: 4
-        }).map(function (_, index) {
-          return /*#__PURE__*/jsx(PanelCardSkeleton, {
-            height: 280
-          }, index);
-        })
-      })]
-    })]
-  });
-};
-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
-        })
+      }), /*#__PURE__*/jsx(Box, {
+        sx: fourColGridSx,
+        children: Array.from({
+          length: 4
+        }).map(function (_, index) {
+          return /*#__PURE__*/jsx(PanelCardSkeleton, {
+            height: 280
+          }, index);
+        })
       })]
     })]
   });
@@ -17673,7 +17931,7 @@ var EmailSectionSkeleton = function EmailSectionSkeleton() {
   });
 };
 
-var formatKpi$3 = function formatKpi(value) {
+var formatKpi$2 = function formatKpi(value) {
   return Number(value !== null && value !== void 0 ? value : 0).toLocaleString("en-US", {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
@@ -17751,7 +18009,7 @@ var OverallSection = function OverallSection(_ref) {
   };
   var metricInfo = {
     "Total Raised": {
-      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",
+      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",
       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, {}),
@@ -17760,7 +18018,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Net Raised": {
-      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)),
+      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)),
       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, {}),
@@ -17769,7 +18027,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Total Donors": {
-      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),
+      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),
       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, {}),
@@ -17778,7 +18036,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Avg Donation": {
-      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)),
+      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)),
       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, {}),
@@ -17787,7 +18045,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "ROAS": {
-      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"),
+      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"),
       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, {}),
@@ -17796,7 +18054,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Conversion": {
-      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), "%"),
+      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), "%"),
       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, {}),
@@ -18182,448 +18440,93 @@ var OverallSection$1 = /*#__PURE__*/Object.freeze({
   default: OverallSection
 });
 
-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",
-    avatarBg: "#4267B2",
-    color: "#4267B2"
-  },
-  "Google Ads": {
-    id: "G",
-    avatarBg: "#4285F4",
-    color: "#4285F4"
-  },
-  "TikTok Ads": {
-    id: "T",
-    avatarBg: "#000000",
-    color: "#cd249dff"
-  },
-  YouTube: {
-    id: "Y",
-    avatarBg: "#FF0000",
-    color: "#FF0000"
-  },
-  Snapchat: {
-    id: "S",
-    avatarBg: "#FFFC00",
-    color: "#FFFC00"
-  }
-};
-var formatGrowth$2 = function formatGrowth(value) {
-  return "".concat(Number(value !== null && value !== void 0 ? value : 0).toFixed(2), "% vs pp");
-};
-var mapTimeSeries$2 = function mapTimeSeries(series) {
-  if (!Array.isArray(series) || series.length === 0) {
-    return {
-      categories: [],
-      data: []
-    };
-  }
-  return {
-    categories: series.map(function (item) {
-      return item.date;
-    }),
-    data: series.map(function (item) {
-      var _item$value;
-      return (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 0;
-    })
-  };
-};
-var getChannelStyle = function getChannelStyle() {
-  var channel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  return CHANNEL_STYLES[channel] || {
-    id: channel.slice(0, 1).toUpperCase() || "?",
-    avatarBg: "#F3F4F6",
-    color: "#6366F1"
-  };
-};
-var mapChannelTrend = function mapChannelTrend(trend) {
-  var normalized = (trend || "stable").toLowerCase();
-  if (normalized === "down" || normalized === "declining") {
-    return {
-      type: "trend",
-      trendType: "down",
-      trendLabel: "Declining"
-    };
-  }
-  if (normalized === "up" || normalized === "improving") {
-    return {
-      type: "trend",
-      trendType: "up",
-      trendLabel: "Improving"
-    };
-  }
-  return {
-    type: "status",
-    status: "Stable",
-    statusBg: "#F3F4F6",
-    statusColor: "#6B7280"
-  };
-};
-var getRoasColor = function getRoasColor(roas) {
-  return Number(roas !== null && roas !== void 0 ? roas : 0) >= 2.5 ? "#22C55E" : "#EF4444";
-};
-var 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
-      };
-    })
-  };
-};
-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 PaidSection = function PaidSection() {
   var _useState = useState("Total Spent"),
     _useState2 = _slicedToArray(_useState, 2),
     activeMetric = _useState2[0],
     setActiveMetric = _useState2[1];
-  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 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 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,
-        avatarBg: style.avatarBg,
-        name: item.channel,
-        val1: "$".concat(formatNumber((_item$spend = item.spend) !== null && _item$spend !== void 0 ? _item$spend : 0)),
-        val2: "$".concat(formatNumber((_item$revenue = item.revenue) !== null && _item$revenue !== void 0 ? _item$revenue : 0)),
-        val3: "".concat(roas.toFixed(1), "x"),
-        val4: "$".concat(formatNumber((_item$cpa = item.cpa) !== null && _item$cpa !== void 0 ? _item$cpa : 0)),
-        highlightVal3: true,
-        val3Color: getRoasColor(roas)
-      }, mapChannelTrend(item.trend));
-    });
-  }, [apiData === null || apiData === void 0 ? void 0 : apiData.channelPerformance, hasPaidOverview]);
-  var spendAllocation = 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
-      };
-    });
-    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;
-        return {
-          label: label,
-          val: val,
-          color: color
-        };
-      })
-    };
-  }, [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(MetricCard$1, {
+    return /*#__PURE__*/jsx(DisplayCard, {
       title: title,
       value: metricInfo[title].value,
-      caption: metricInfo[title].subValue,
+      subValue: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
-      error: metricInfo[title].error,
-      active: activeMetric === title,
       onClick: function onClick() {
         return setActiveMetric(title);
       },
-      sx: metricInfo[title].error ? {
-        border: "2px solid #ef4444",
-        bgcolor: "#fffafa",
-        cursor: "pointer"
-      } : {
-        cursor: "pointer"
+      isActive: activeMetric === title,
+      sx: {
+        flex: 1
       }
-    });
+    }, title);
   };
-  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 selectedInfo = metricInfo[activeMetric];
   var mainChart = {
     label: activeMetric,
     value: selectedInfo.value,
     trend: selectedInfo.subValue,
     data: selectedInfo.data,
-    categories: chartCategories,
-    hideControls: true,
-    isAmount: selectedInfo.money
+    categories: categories
   };
-  if (apiLoading) {
-    return /*#__PURE__*/jsx(PaidSectionSkeleton, {});
-  }
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Box, {
       sx: {
-        display: "grid",
-        gridTemplateColumns: {
-          xs: "1fr",
-          sm: "1fr 1fr",
-          md: "1fr 1fr 1fr",
-          lg: "repeat(6, 1fr)"
-        },
-        gap: "6px",
-        mb: 0
+        display: "flex",
+        gap: 2,
+        mb: 1,
+        flexWrap: "wrap"
       },
       children: Object.keys(metricInfo).map(renderCard)
     }), /*#__PURE__*/jsx(Grid, {
       container: true,
       spacing: 3,
       sx: {
-        mt: "12px"
+        mt: 1
       },
       children: /*#__PURE__*/jsx(RenderChartCard, {
         item: mainChart,
@@ -18631,61 +18534,125 @@ var PaidSection = function PaidSection(_ref) {
         md: 12,
         type: "area",
         isPrimary: true,
-        isPremium: true,
-        numberOfDays: numberOfDays,
-        metric: activeMetric === "Conversion Rate" ? "Percent" : activeMetric === "ROAS" ? "ROAS" : selectedInfo.money ? "Revenue" : "Donors"
+        isPremium: true
       })
     }), /*#__PURE__*/jsxs(Grid, {
       container: true,
       spacing: 3,
       sx: {
-        mt: "6px"
+        mt: 3
       },
       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", "Ppend", "Revenue", "ROAS", "CPA", "Trend"],
+          columns: ["channel", "spend", "revenue", "ROAS", "CPA", "trend"],
           gridTemplateColumns: "2.2fr 1fr 1fr 0.8fr 0.8fr 1.2fr",
-          height: "100%",
-          rows: channelRows !== null && channelRows !== void 0 ? channelRows : []
+          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
+          }]
         })
       }), /*#__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: (_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,
+          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
+          }],
           showBottomSummary: false,
           sx: {
-            pb: 3.5,
-            height: "100%"
+            pb: 3.5
           }
         })
       })]
@@ -18693,44 +18660,18 @@ var PaidSection = function PaidSection(_ref) {
       container: true,
       spacing: 3,
       sx: {
-        mt: "6px",
-        alignItems: "stretch"
+        mt: 3
       },
       children: [/*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
         md: 6,
-        sx: {
-          paddingTop: "0px !important",
-          display: "flex"
-        },
-        children: /*#__PURE__*/jsx(Box, {
-          sx: {
-            width: "100%"
-          },
-          children: /*#__PURE__*/jsx(TopPerformingCampaignsCard, {
-            data: topCampaignsData !== null && topCampaignsData !== void 0 ? topCampaignsData : []
-          })
-        })
+        children: /*#__PURE__*/jsx(TopPerformingCampaignsCard, {})
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
         md: 6,
-        sx: {
-          paddingTop: "0px !important",
-          paddingLeft: {
-            xs: "24px !important",
-            md: "6px !important"
-          },
-          marginTop: {
-            xs: "6px",
-            md: "0px"
-          },
-          display: "flex"
-        },
-        children: /*#__PURE__*/jsx(PaidDonorGeographyCard, {
-          donorGeographyData: donorGeographyData
-        })
+        children: /*#__PURE__*/jsx(PaidDonorGeographyCard, {})
       })]
     })]
   });