@ammarkhalidfarooq/dashboard-package 0.2.9 → 0.3.1

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import React, { Suspense, lazy, useState } from 'react';
-import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, LinearProgress, Divider, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
-import { MoreHoriz, InfoOutlined, MoreVert, Check, Settings } from '@mui/icons-material';
+import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, LinearProgress, Divider, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Avatar } from '@mui/material';
+import { MoreHoriz, PeopleAltOutlined, SearchOutlined, FavoriteOutlined, Adjust, PaidOutlined, NotInterested, IndeterminateCheckBoxOutlined, Email, NearMe, HighlightOff, InfoOutlined, MoreVert, Check, Settings, TrendingUp, TrendingDown, PersonOutlined } from '@mui/icons-material';
 import { createTheme, useTheme } from '@mui/material/styles';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import ReactApexChart from 'react-apexcharts';
@@ -404,6 +404,8 @@ var RenderChartCard = function RenderChartCard(_ref) {
     index = _ref.index,
     _ref$isPrimary = _ref.isPrimary,
     isPrimary = _ref$isPrimary === void 0 ? false : _ref$isPrimary,
+    _ref$isPremium = _ref.isPremium,
+    isPremium = _ref$isPremium === void 0 ? false : _ref$isPremium,
     metric = _ref.metric,
     setMetric = _ref.setMetric,
     _ref$md = _ref.md,
@@ -438,9 +440,61 @@ var RenderChartCard = function RenderChartCard(_ref) {
             display: "flex",
             justifyContent: "space-between",
             alignItems: "flex-start",
-            mb: 2
+            mb: isPremium ? 3 : 2
           },
-          children: [/*#__PURE__*/jsxs(Box, {
+          children: [isPremium ? /*#__PURE__*/jsxs(Box, {
+            sx: {
+              textAlign: "left"
+            },
+            children: [/*#__PURE__*/jsx(Typography, {
+              sx: {
+                color: "#000000",
+                fontWeight: 700,
+                fontSize: "18px",
+                mb: 0.2
+              },
+              children: item.label
+            }), /*#__PURE__*/jsx(Typography, {
+              variant: "caption",
+              sx: {
+                color: "rgba(0, 0, 0, 0.4)",
+                fontWeight: 400,
+                display: "block",
+                mb: 1.5
+              },
+              children: item.subtitle || "Last 30 days - daily aggregation"
+            }), /*#__PURE__*/jsxs(Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5
+              },
+              children: [item.value && /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontWeight: 700,
+                  color: "#000000",
+                  fontSize: "28px"
+                },
+                children: _typeof(item.value) === 'object' && item.value !== null ? item.value.value !== undefined ? item.value.value : JSON.stringify(item.value) : item.value
+              }), (item.trend || "18%") && /*#__PURE__*/jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 0.5,
+                  bgcolor: "#8df3be9a",
+                  color: "#054835ff",
+                  px: 1,
+                  py: 0.5,
+                  borderRadius: "100px",
+                  fontSize: "12px",
+                  fontWeight: 600
+                },
+                children: [/*#__PURE__*/jsx("span", {
+                  children: "\u25B2"
+                }), item.trend || "18% vs last month"]
+              })]
+            })]
+          }) : /*#__PURE__*/jsxs(Box, {
             sx: {
               textAlign: "left"
             },
@@ -704,49 +758,97 @@ var Dashboard = function Dashboard(_ref) {
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
     value = _ref.value,
+    subValue = _ref.subValue,
+    Icon = _ref.icon,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? {} : _ref$sx;
-  return /*#__PURE__*/jsx(Box, {
+  return /*#__PURE__*/jsxs(Box, {
     sx: _objectSpread2({
-      height: "80px",
+      height: "100px",
       borderRadius: "24px",
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      boxShadow: "rgba(0, 0, 0, 0.06) 0px 4px 15px 0px",
-      padding: "16px 16px 16px 18px",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      // padding: "16px 16px 16px 18px",
+      py: "10px",
+      px: "16px",
       cursor: "pointer",
-      border: "1px solid rgb(99, 99, 230)"
+      bgcolor: "#fff",
+      border: "2px solid #f0f0f0",
+      transition: "all 0.3s ease",
+      ":hover": {
+        border: "2px solid rgb(99, 99, 230)"
+        // transform: "translateY(-2px)",
+      }
     }, sx),
-    children: /*#__PURE__*/jsxs(Box, {
+    children: [/*#__PURE__*/jsxs(Box, {
       sx: {
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        gap: 0.5
       },
       children: [/*#__PURE__*/jsx(Typography, {
         sx: {
           fontWeight: '400',
-          color: 'rgb(193, 193, 245)',
-          fontSize: '14px',
-          lineHeight: '16px'
+          color: 'rgba(0, 0, 0, 0.4)',
+          fontSize: '12px',
+          lineHeight: '16px',
+          textAlign: 'left'
         },
         children: title
       }), /*#__PURE__*/jsx(Typography, {
         sx: {
-          lineHeight: '1.5',
+          lineHeight: '1.2',
           textAlign: 'left',
-          color: 'rgb(99, 99, 230)',
-          fontSize: '22px',
-          fontWeight: '500'
+          color: '#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(value) === 'object' && value !== null ? value.value !== undefined ? value.value : JSON.stringify(value) : value
+        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: '#dfdbdb95',
+        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 CardWrapper = function CardWrapper(_ref) {
   var title = _ref.title,
+    subtitle = _ref.subtitle,
     children = _ref.children;
   return /*#__PURE__*/jsx(Card, {
     sx: {
@@ -765,14 +867,21 @@ var CardWrapper = function CardWrapper(_ref) {
       children: [/*#__PURE__*/jsx(Typography, {
         variant: "subtitle2",
         sx: {
-          color: "#000000ff",
-          fontWeight: 600,
-          textTransform: "uppercase",
-          letterSpacing: "0.5px",
-          mb: 3,
+          color: "#000000",
+          fontWeight: 700,
+          fontSize: "16px",
+          mb: 0.5,
           textAlign: "left"
         },
         children: title
+      }), subtitle && /*#__PURE__*/jsx(Typography, {
+        sx: {
+          color: "rgba(0, 0, 0, 0.4)",
+          fontSize: "13px",
+          mb: 3,
+          textAlign: "left"
+        },
+        children: subtitle
       }), /*#__PURE__*/jsx(Box, {
         sx: {
           display: "flex",
@@ -992,11 +1101,11 @@ var GeographyCard = function GeographyCard() {
             variant: "determinate",
             value: item.percentage,
             sx: {
-              height: 6,
+              height: 12,
               borderRadius: 3,
               bgcolor: "#F0F0F0",
               "& .MuiLinearProgress-bar": {
-                bgcolor: "#3498DB",
+                bgcolor: "#0275c2ff",
                 borderRadius: 3
               }
             }
@@ -1017,301 +1126,593 @@ var GeographyCard = function GeographyCard() {
 };
 var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
   var data = [{
-    name: "Ramadan Week 3 Appeal",
-    raised: "$1,210 raised",
-    donors: "18 donors",
-    badge: "4.1% CVR",
-    color: "#E8F5E9",
-    textColor: "#2E7D32"
+    id: "RK",
+    name: "Ramadan kickoff",
+    value: "$14,200"
   }, {
-    name: "Zakat Due Reminder",
-    raised: "$740 raised",
-    donors: "8 donors",
-    badge: "3.2% CVR",
-    color: "#E8F5E9",
-    textColor: "#2E7D32"
+    id: "YO",
+    name: "Yemen orphans drive",
+    value: "$11,800"
   }, {
-    name: "Last 10 Nights Giving",
-    raised: "$265 raised",
-    donors: "3 donors",
-    badge: "1.8% CVR",
-    color: "#FFF3E0",
-    textColor: "#ED6C02"
+    id: "GE",
+    name: "Gaza emergency",
+    value: "$9,400"
+  }, {
+    id: "ZR",
+    name: "Zakat reminder",
+    value: "$7,200"
+  }, {
+    id: "EA",
+    name: "Eid appeal",
+    value: "$6,320"
   }];
-  return /*#__PURE__*/jsx(CardWrapper, {
-    title: "Top Campaigns - Total Raised",
-    children: data.map(function (item, index) {
+  return /*#__PURE__*/jsxs(CardWrapper, {
+    title: "Top campaigns by total raised",
+    subtitle: "Email campaigns ranked by donations",
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        pb: 1,
+        borderBottom: "1px solid #f0f0f0"
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500
+        },
+        children: "Campaign"
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500
+        },
+        children: "Raised"
+      })]
+    }), data.map(function (item, index) {
       return /*#__PURE__*/jsxs(Box, {
         sx: {
           display: "flex",
-          flexDirection: "column",
-          gap: 0.5
+          justifyContent: "space-between",
+          py: 1.5,
+          alignItems: "center",
+          borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
         },
-        children: [/*#__PURE__*/jsx(Typography, {
-          variant: "body2",
-          sx: {
-            fontWeight: 600,
-            color: "#333",
-            textAlign: "left"
-          },
-          children: item.name
-        }), /*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
             gap: 1.5
           },
-          children: [/*#__PURE__*/jsx(Typography, {
-            variant: "caption",
+          children: [/*#__PURE__*/jsx(Box, {
             sx: {
-              color: "#606062",
-              fontWeight: 500
+              width: 24,
+              height: 24,
+              borderRadius: "50%",
+              bgcolor: "#ebf2ff",
+              color: "#3431e4",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "10px",
+              fontWeight: 700
             },
-            children: item.raised
+            children: item.id
           }), /*#__PURE__*/jsx(Typography, {
-            variant: "caption",
-            sx: {
-              color: "#606062",
-              fontWeight: 500
-            },
-            children: item.donors
-          }), /*#__PURE__*/jsx(Box, {
             sx: {
-              bgcolor: item.color,
-              color: item.textColor,
-              px: 1,
-              py: 0.2,
-              borderRadius: 1,
-              fontSize: "11px",
-              fontWeight: 600
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#000"
             },
-            children: item.badge
+            children: item.name
           })]
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            color: "#000",
+            fontWeight: 700
+          },
+          children: item.value
         })]
       }, index);
-    })
+    })]
   });
 };
 var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
   var data = [{
-    name: "Ramadan Week 3 Appeal",
-    ctr: "11.2% CTR",
-    clicks: "480 clicks",
-    badge: "34.8% OR",
-    color: "#E8F5E9",
-    textColor: "#2E7D32"
+    id: "RK",
+    name: "Ramadan kickoff",
+    value: "12.4%"
   }, {
-    name: "Last 10 Nights Giving",
-    ctr: "9.8% CTR",
-    clicks: "410 clicks",
-    badge: "38.1% OR",
-    color: "#E8F5E9",
-    textColor: "#2E7D32"
+    id: "EA",
+    name: "Eid appeal",
+    value: "10.8%"
   }, {
-    name: "Zakat Due Reminder",
-    ctr: "6.4% CTR",
-    clicks: "314 clicks",
-    badge: "31.4% OR",
-    color: "#FFF3E0",
-    textColor: "#ED6C02"
+    id: "YO",
+    name: "Yemen orphans drive",
+    value: "9.7%"
+  }, {
+    id: "PF",
+    name: "Pakistan flood relief",
+    value: "8.9%"
+  }, {
+    id: "ZR",
+    name: "Zakat reminder",
+    value: "7.6%"
   }];
-  return /*#__PURE__*/jsx(CardWrapper, {
-    title: "Top Campaigns - CTR",
-    children: data.map(function (item, index) {
+  return /*#__PURE__*/jsxs(CardWrapper, {
+    title: "Top campaigns by CTR",
+    subtitle: "Click-through rate leaders",
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        pb: 1,
+        borderBottom: "1px solid #f0f0f0"
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500
+        },
+        children: "Campaign"
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500
+        },
+        children: "CTR"
+      })]
+    }), data.map(function (item, index) {
       return /*#__PURE__*/jsxs(Box, {
         sx: {
           display: "flex",
-          flexDirection: "column",
-          gap: 0.5
+          justifyContent: "space-between",
+          py: 1.5,
+          alignItems: "center",
+          borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
         },
-        children: [/*#__PURE__*/jsx(Typography, {
-          variant: "body2",
-          sx: {
-            fontWeight: 600,
-            color: "#333",
-            textAlign: "left"
-          },
-          children: item.name
-        }), /*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
             gap: 1.5
           },
-          children: [/*#__PURE__*/jsx(Typography, {
-            variant: "caption",
+          children: [/*#__PURE__*/jsx(Box, {
             sx: {
-              color: "#606062",
-              fontWeight: 500
+              width: 24,
+              height: 24,
+              borderRadius: "50%",
+              bgcolor: "#ebf2ff",
+              color: "#3431e4",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "10px",
+              fontWeight: 700
             },
-            children: item.ctr
+            children: item.id
           }), /*#__PURE__*/jsx(Typography, {
-            variant: "caption",
-            sx: {
-              color: "#606062",
-              fontWeight: 500
-            },
-            children: item.clicks
-          }), /*#__PURE__*/jsx(Box, {
             sx: {
-              bgcolor: item.color,
-              color: item.textColor,
-              px: 1,
-              py: 0.2,
-              borderRadius: 1,
-              fontSize: "11px",
-              fontWeight: 600
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#000"
             },
-            children: item.badge
+            children: item.name
           })]
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            color: "#22C55E",
+            fontWeight: 700
+          },
+          children: item.value
         })]
       }, index);
-    })
+    })]
   });
 };
 var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
   var data = [{
-    name: "Ramadan Week 3 Appeal",
-    cvr: "4.1% CVR",
-    raised: "$1,210 raised",
-    badge: "$2.52 RPC",
-    color: "#E8F5E9",
-    textColor: "#2E7D32"
+    id: "YO",
+    name: "Yemen orphans drive",
+    value: "5.2%"
   }, {
-    name: "Zakat Due Reminder",
-    cvr: "3.2% CVR",
-    raised: "$740 raised",
-    badge: "$2.36 RPC",
-    color: "#E8F5E9",
-    textColor: "#2E7D32"
+    id: "RK",
+    name: "Ramadan kickoff",
+    value: "4.8%"
   }, {
-    name: "Last 10 Nights Giving",
-    cvr: "1.8% CVR",
-    raised: "$265 raised",
-    badge: "$0.65 RPC",
-    color: "#FFF3E0",
-    textColor: "#ED6C02"
+    id: "GE",
+    name: "Gaza emergency",
+    value: "4.1%"
+  }, {
+    id: "PF",
+    name: "Pakistan flood relief",
+    value: "3.9%"
+  }, {
+    id: "EA",
+    name: "Eid appeal",
+    value: "3.4%"
   }];
-  return /*#__PURE__*/jsx(CardWrapper, {
-    title: "Top Campaigns - Conv. Rate",
-    children: data.map(function (item, index) {
+  return /*#__PURE__*/jsxs(CardWrapper, {
+    title: "Top campaigns by conversion",
+    subtitle: "Click-to-donation conversion",
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        pb: 1,
+        borderBottom: "1px solid #f0f0f0"
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500
+        },
+        children: "Campaign"
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500
+        },
+        children: "Conv. rate"
+      })]
+    }), data.map(function (item, index) {
       return /*#__PURE__*/jsxs(Box, {
         sx: {
           display: "flex",
-          flexDirection: "column",
-          gap: 0.5
+          justifyContent: "space-between",
+          py: 1.5,
+          alignItems: "center",
+          borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
         },
-        children: [/*#__PURE__*/jsx(Typography, {
-          variant: "body2",
-          sx: {
-            fontWeight: 600,
-            color: "#333",
-            textAlign: "left"
-          },
-          children: item.name
-        }), /*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
             gap: 1.5
           },
-          children: [/*#__PURE__*/jsx(Typography, {
-            variant: "caption",
+          children: [/*#__PURE__*/jsx(Box, {
             sx: {
-              color: "#606062",
-              fontWeight: 500
+              width: 24,
+              height: 24,
+              borderRadius: "50%",
+              bgcolor: "#ebf2ff",
+              color: "#3431e4",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "10px",
+              fontWeight: 700
             },
-            children: item.cvr
+            children: item.id
           }), /*#__PURE__*/jsx(Typography, {
-            variant: "caption",
-            sx: {
-              color: "#606062",
-              fontWeight: 500
-            },
-            children: item.raised
-          }), /*#__PURE__*/jsx(Box, {
             sx: {
-              bgcolor: item.color,
-              color: item.textColor,
-              px: 1,
-              py: 0.2,
-              borderRadius: 1,
-              fontSize: "11px",
-              fontWeight: 600
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#000"
             },
-            children: item.badge
+            children: item.name
           })]
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            color: "#3431e4",
+            fontWeight: 700
+          },
+          children: item.value
         })]
       }, index);
-    })
+    })]
   });
 };
-
-var OrganicSection = function OrganicSection(_ref) {
-  var _ref$apiData = _ref.apiData,
-    apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
-  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-  var dailyPerformance = {
-    label: "Search Visibility",
-    series: [{
-      name: "Raised",
-      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
-    }, {
-      name: "Spend",
-      data: [800, 950, 700, 1100, 900, 1200, 1300]
-    }],
-    categories: categories
-  };
-  var spendAllocation = {
-    label: "Source Breakdown",
-    data: [4500, 2500, 1500, 700],
-    categories: ["Organic", "Direct", "Refferal", "Social"]
-  };
+var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
+  var data = [{
+    id: "YO",
+    avatarBg: "#c1cfdedb",
+    name: "Yemen Orphans - Meta",
+    spend: "$8,200",
+    revenue: "$31,400",
+    roas: "3.8x"
+  }, {
+    id: "GF",
+    avatarBg: "#c1cfdedb",
+    name: "Gaza Food - Google",
+    spend: "$7,400",
+    revenue: "$25,200",
+    roas: "3.4x"
+  }, {
+    id: "PW",
+    avatarBg: "#c1cfdedb",
+    name: "Pakistan Wells - Meta",
+    spend: "$5,800",
+    revenue: "$18,600",
+    roas: "3.2x"
+  }, {
+    id: "R",
+    avatarBg: "#c1cfdedb",
+    name: "Ramadan - TikTok",
+    spend: "$3,200",
+    revenue: "$8,900",
+    roas: "2.8x"
+  }];
+  return /*#__PURE__*/jsxs(CardWrapper, {
+    title: "Top performing campaigns",
+    subtitle: "Paid campaigns ranked by ROAS",
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: "2.5fr 1fr 1fr 0.8fr",
+        gap: 1,
+        pb: 1,
+        borderBottom: "1px solid #f0f0f0"
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500,
+          textAlign: "left"
+        },
+        children: "Campaign"
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500,
+          textAlign: "left"
+        },
+        children: "Spend"
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500,
+          textAlign: "left"
+        },
+        children: "Revenue"
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          fontWeight: 500,
+          textAlign: "left"
+        },
+        children: "ROAS"
+      })]
+    }), data.map(function (item, index) {
+      return /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "2.5fr 1fr 1fr 0.8fr",
+          gap: 1,
+          py: 1.5,
+          alignItems: "center",
+          borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
+        },
+        children: [/*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5
+          },
+          children: [/*#__PURE__*/jsx(Box, {
+            sx: {
+              width: 24,
+              height: 24,
+              borderRadius: "50%",
+              bgcolor: item.avatarBg,
+              color: "#3431e4ff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "10px",
+              fontWeight: 700
+            },
+            children: item.id
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#000"
+            },
+            children: item.name
+          })]
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            color: "#000",
+            fontWeight: 500,
+            textAlign: "left"
+          },
+          children: item.spend
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            color: "#000",
+            fontWeight: 500,
+            textAlign: "left"
+          },
+          children: item.revenue
+        }), /*#__PURE__*/jsx(Box, {
+          sx: {
+            bgcolor: "#DCFCE7",
+            color: "#22C55E",
+            px: 1,
+            py: 0.5,
+            borderRadius: "100px",
+            fontSize: "11px",
+            fontWeight: 700,
+            textAlign: "center"
+          },
+          children: item.roas
+        })]
+      }, index);
+    })]
+  });
+};
+var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
+  var data = [{
+    country: "United States",
+    value: "78 · 36%",
+    percentage: 36
+  }, {
+    country: "United Kingdom",
+    value: "42 · 20%",
+    percentage: 20
+  }, {
+    country: "Canada",
+    value: "28 · 13%",
+    percentage: 13
+  }, {
+    country: "UAE",
+    value: "24 · 11%",
+    percentage: 11
+  }, {
+    country: "Saudi Arabia",
+    value: "19 · 9%",
+    percentage: 9
+  }, {
+    country: "Other",
+    value: "24 · 11%",
+    percentage: 11
+  }];
+  return /*#__PURE__*/jsx(CardWrapper, {
+    title: "Paid donor geography",
+    subtitle: "Where ad-acquired donors come from",
+    children: data.map(function (item, index) {
+      return /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          py: 0.5
+        },
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            fontWeight: 500,
+            color: "rgba(0, 0, 0, 0.4)",
+            minWidth: "100px",
+            textAlign: "left"
+          },
+          children: item.country
+        }), /*#__PURE__*/jsx(Box, {
+          sx: {
+            flexGrow: 1
+          },
+          children: /*#__PURE__*/jsx(LinearProgress, {
+            variant: "determinate",
+            value: item.percentage,
+            sx: {
+              height: 8,
+              borderRadius: 4,
+              bgcolor: "#F3F4F6",
+              "& .MuiLinearProgress-bar": {
+                borderRadius: 4,
+                bgcolor: "#6366F1"
+              }
+            }
+          })
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            fontWeight: 700,
+            color: "#111",
+            minWidth: "60px",
+            textAlign: "right"
+          },
+          children: item.value
+        })]
+      }, index);
+    })
+  });
+};
+
+var OrganicSection = function OrganicSection(_ref) {
+  var _ref$apiData = _ref.apiData,
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
+  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+  var dailyPerformance = {
+    label: "Search Visibility",
+    series: [{
+      name: "Raised",
+      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
+    }, {
+      name: "Spend",
+      data: [800, 950, 700, 1100, 900, 1200, 1300]
+    }],
+    categories: categories
+  };
+  var spendAllocation = {
+    label: "Source Breakdown",
+    data: [4500, 2500, 1500, 700],
+    categories: ["Organic", "Direct", "Refferal", "Social"]
+  };
   var roasTrend = {
     label: "Traffic Trend",
+    value: "8,420",
     data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
     categories: categories
   };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [" ", /*#__PURE__*/jsxs(Box, {
+    children: [/*#__PURE__*/jsxs(Box, {
       sx: {
-        display: "flex",
+        display: 'flex',
         gap: 2,
         mb: 5
       },
       children: [/*#__PURE__*/jsx(DisplayCard, {
         title: "Organic Users",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.organicUsers) || "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
+        icon: PeopleAltOutlined,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
         title: "Search Clicks",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.searchClicks) || "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
+        icon: SearchOutlined,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
         title: "Donations",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.donations) || "$9,200",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
+        icon: FavoriteOutlined,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Converstion Rate",
-        value: "$9,200",
+        title: "Conversion Rate",
+        value: "$130.58",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
+        icon: Adjust,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Revenue Raised",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.revenueRaised) || "3.0",
+        title: "Revenue raised",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
+        icon: PaidOutlined,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Avg Donation",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "215",
+        title: "Avg donation",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
+        icon: PaidOutlined,
         sx: {
           flex: 1
         }
@@ -1325,44 +1726,42 @@ var OrganicSection = function OrganicSection(_ref) {
       children: [/*#__PURE__*/jsx(RenderChartCard, {
         item: roasTrend,
         index: 2,
-        md: 4,
+        md: 6,
         type: "area",
         metric: "ROAS",
-        isPrimary: true
+        isPrimary: true,
+        isPremium: true
       }), /*#__PURE__*/jsx(RenderChartCard, {
         item: dailyPerformance,
         index: 0,
-        md: 4,
+        md: 6,
         type: "bar",
-        metric: "Revenue"
+        metric: "Revenue",
+        isPremium: true
       }), /*#__PURE__*/jsx(RenderChartCard, {
         item: spendAllocation,
         index: 1,
-        md: 4,
+        md: 6,
         type: "donut",
-        metric: "Revenue"
-      })]
-    }), /*#__PURE__*/jsxs(Grid, {
-      container: true,
-      spacing: 3,
-      sx: {
-        mt: 4
-      },
-      children: [/*#__PURE__*/jsx(Grid, {
+        metric: "Revenue",
+        isPremium: true
+      }), /*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
-        md: 4,
+        md: 6,
         children: /*#__PURE__*/jsx(LandingPagesCard, {})
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
-        md: 4,
+        md: 6,
         children: /*#__PURE__*/jsx(KeywordsCard, {})
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
-        md: 4,
-        children: /*#__PURE__*/jsx(GeographyCard, {})
+        md: 6,
+        children: /*#__PURE__*/jsx(GeographyCard, {
+          subtitle: "Organic traffic source locations"
+        })
       })]
     })]
   });
@@ -1399,32 +1798,42 @@ var EmailSection = function EmailSection() {
         mb: 2
       },
       children: [/*#__PURE__*/jsx(DisplayCard, {
-        title: "Open Rate",
-        value: "32%",
+        title: "Total raised",
+        value: "$48,920",
+        subValue: "12% vs last month",
+        icon: PaidOutlined,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Bounce Rate",
-        value: "1.8%",
+        title: "Donations",
+        value: "62",
+        subValue: "12% vs last month",
+        icon: FavoriteOutlined,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Clicks",
-        value: "1,204",
+        title: "Conversion rate",
+        value: "3.2%",
+        subValue: "12% vs last month",
+        icon: Adjust,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Unique Clicks",
-        value: "987",
+        title: "CTR",
+        value: "8.1%",
+        subValue: "12% vs last month",
+        icon: NotInterested,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "CTR",
-        value: "4.8%",
+        title: "Revenue per email",
+        value: "$2.45",
+        subValue: "12% vs last month",
+        icon: IndeterminateCheckBoxOutlined,
         sx: {
           flex: 1
         }
@@ -1435,32 +1844,42 @@ var EmailSection = function EmailSection() {
         gap: 2
       },
       children: [/*#__PURE__*/jsx(DisplayCard, {
-        title: "Donations",
-        value: "29",
+        title: "Open rate",
+        value: "42.3%",
+        subValue: "12% vs last month",
+        icon: Email,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "CONV.Rate",
-        value: "2.9%",
+        title: "Clicks",
+        value: "1,612",
+        subValue: "12% vs last month",
+        icon: NearMe,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "RPC",
-        value: "$1.84",
+        title: "Unique Clicks",
+        value: "1,148",
+        subValue: "12% vs last month",
+        icon: NearMe,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "TOTAL RAISED (EMAIL)",
-        value: "$2,215",
+        title: "Bounce rate",
+        value: "1.8%",
+        subValue: "12% vs last month",
+        icon: HighlightOff,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "AVG DONATION",
-        value: "$76.4",
+        title: "Revenue per Click",
+        value: "$30.35",
+        subValue: "12% vs last month",
+        icon: HighlightOff,
         sx: {
           flex: 1
         }
@@ -1477,19 +1896,22 @@ var EmailSection = function EmailSection() {
         md: 4,
         type: "area",
         metric: "ROAS",
-        isPrimary: true
+        isPrimary: true,
+        isPremium: true
       }), /*#__PURE__*/jsx(RenderChartCard, {
         item: dailyPerformance,
         index: 0,
         md: 4,
-        type: "bar",
-        metric: "Revenue"
+        type: "area",
+        metric: "Revenue",
+        isPremium: true
       }), /*#__PURE__*/jsx(RenderChartCard, {
         item: spendAllocation,
         index: 1,
         md: 4,
         type: "area",
-        metric: "Revenue"
+        metric: "Revenue",
+        isPremium: true
       })]
     }), /*#__PURE__*/jsxs(Grid, {
       container: true,
@@ -1714,7 +2136,7 @@ var NewOverview = function NewOverview(_ref) {
         gutterBottom: true,
         sx: {
           fontWeight: "bold",
-          color: "primary.main",
+          color: "primary.dark",
           mb: 2,
           mt: 2
         },
@@ -1782,16 +2204,12 @@ var NewOverview = function NewOverview(_ref) {
       }), activeSection === "Paid" && /*#__PURE__*/jsx(PaidSection$2, {
         apiData: apiData
       }), activeSection === "Organic" && /*#__PURE__*/jsx(Box, {
-        sx: {
-          p: 2
-        },
+        sx: {},
         children: /*#__PURE__*/jsx(OrganicSection, {
           apiData: apiData
         })
       }), activeSection === "Email" && /*#__PURE__*/jsx(Box, {
-        sx: {
-          p: 2
-        },
+        sx: {},
         children: /*#__PURE__*/jsx(EmailSection, {})
       })]
     })]
@@ -1915,7 +2333,7 @@ var PerformanceSection = function PerformanceSection(_ref) {
         gutterBottom: true,
         sx: {
           fontWeight: "bold",
-          color: "primary.main",
+          color: "primary.dark",
           mb: 2,
           mt: 2
         },
@@ -2218,7 +2636,7 @@ var RecurringRevenueSection = function RecurringRevenueSection() {
         gutterBottom: true,
         sx: {
           fontWeight: "bold",
-          color: "primary.main",
+          color: "primary.dark",
           mb: 2,
           mt: 2
         },
@@ -2469,7 +2887,7 @@ var UTMPerformance = function UTMPerformance() {
       variant: "h4",
       sx: {
         fontWeight: "bold",
-        color: "primary.main",
+        color: "primary.dark",
         mb: 3,
         textAlign: "left"
       },
@@ -2831,7 +3249,7 @@ var DonorBehavior = function DonorBehavior() {
         gutterBottom: true,
         sx: {
           fontWeight: "bold",
-          color: "primary.main",
+          color: "primary.dark",
           mb: 2,
           mt: 2
         },
@@ -3528,7 +3946,7 @@ var RecurringPlans = function RecurringPlans(_ref) {
         gutterBottom: true,
         sx: {
           fontWeight: "bold",
-          color: "primary.main",
+          color: "primary.dark",
           mb: 2,
           mt: 2
         },
@@ -5580,7 +5998,7 @@ var CountriesPerformance = function CountriesPerformance() {
       variant: "h4",
       sx: {
         fontWeight: "bold",
-        color: "primary.main",
+        color: "primary.dark",
         mb: 3,
         textAlign: "left"
       },
@@ -5884,7 +6302,7 @@ var UpdateEmails = function UpdateEmails() {
         gutterBottom: true,
         sx: {
           fontWeight: "bold",
-          color: "primary.main",
+          color: "primary.dark",
           mb: 2,
           mt: 2
         },
@@ -5980,98 +6398,872 @@ var index = /*#__PURE__*/Object.freeze({
   default: UpdateEmails
 });
 
-var OverallSection = function OverallSection(_ref) {
-  var _ref$apiData = _ref.apiData,
-    apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
-    primaryCharts = _ref.primaryCharts,
-    secondaryCharts = _ref.secondaryCharts,
-    tertiaryCharts = _ref.tertiaryCharts,
-    quaternaryCharts = _ref.quaternaryCharts;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: 'flex',
-        gap: 2,
-        mb: 5
-      },
-      children: [/*#__PURE__*/jsx(DisplayCard, {
-        title: "Total Raised",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$9,200",
-        sx: {
-          flex: 1
-        }
-      }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Net Raised",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$9,200",
-        sx: {
-          flex: 1
-        }
-      }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Total Spent",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalSpent) || "$9,200",
-        sx: {
-          flex: 1
-        }
-      }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Total ROAS",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRoas) || "3.0",
-        sx: {
-          flex: 1
-        }
-      }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Total Donors",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
-        sx: {
-          flex: 1
-        }
-      })]
-    }), /*#__PURE__*/jsx(Grid, {
-      container: true,
-      spacing: 3,
+var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
+  var _ref$title = _ref.title,
+    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,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift", "Status"] : _ref$columns,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? [] : _ref$rows,
+    _ref$gridTemplateColu = _ref.gridTemplateColumns,
+    gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "2.5fr 1fr 1.5fr 0.8fr 1fr 0.8fr" : _ref$gridTemplateColu;
+  return /*#__PURE__*/jsxs(Box, {
+    sx: {
+      bgcolor: "#fff",
+      borderRadius: "24px",
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      p: 3,
+      height: "100%"
+    },
+    children: [/*#__PURE__*/jsx(Box, {
       sx: {
-        mb: 1
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        mb: 3
       },
-      children: primaryCharts.map(function (item, index) {
-        return /*#__PURE__*/jsx(RenderChartCard, {
-          item: item,
-          index: index
-        }, "primary-".concat(index));
+      children: /*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontWeight: 700,
+            fontSize: "18px",
+            color: "#000",
+            textAlign: 'left'
+          },
+          children: title
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            color: "rgba(0, 0, 0, 0.4)",
+            mt: 0.2
+          },
+          children: subtitle
+        })]
       })
-    }), /*#__PURE__*/jsx(Grid, {
-      container: true,
-      spacing: 3,
+    }), /*#__PURE__*/jsx(Box, {
       sx: {
-        mt: 1
+        overflowX: "auto"
       },
-      children: secondaryCharts.map(function (item, index) {
-        return /*#__PURE__*/jsx(RenderChartCard, {
-          item: item,
-          index: index
-        }, "secondary-".concat(index));
+      children: /*#__PURE__*/jsxs(Box, {
+        sx: {
+          minWidth: "600px"
+        },
+        children: [/*#__PURE__*/jsx(Box, {
+          sx: {
+            display: "grid",
+            gridTemplateColumns: gridTemplateColumns,
+            gap: 2,
+            pb: 1.5,
+            borderBottom: "1px solid #f0f0f0"
+          },
+          children: columns.map(function (header) {
+            return /*#__PURE__*/jsx(Typography, {
+              sx: {
+                fontSize: "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) {
+            return /*#__PURE__*/jsxs(Box, {
+              sx: {
+                display: "grid",
+                gridTemplateColumns: gridTemplateColumns,
+                gap: 2,
+                py: 1.8,
+                alignItems: "center",
+                borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
+              },
+              children: [/*#__PURE__*/jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1.5
+                },
+                children: [row.id && /*#__PURE__*/jsx(Avatar, {
+                  sx: {
+                    width: 28,
+                    height: 28,
+                    fontSize: "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, {
+                  sx: {
+                    fontSize: "13px",
+                    fontWeight: 700,
+                    color: "#000"
+                  },
+                  children: row.name
+                })]
+              }), /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "13px",
+                  fontWeight: 600,
+                  color: "#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: {
+                    flexGrow: 1
+                  },
+                  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"
+                  },
+                  children: [row.progress, "%"]
+                })]
+              }) : /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "13px",
+                  fontWeight: 600,
+                  color: "#000",
+                  textAlign: 'left'
+                },
+                children: row.val2
+              }), /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "13px",
+                  fontWeight: row.highlightVal3 ? 700 : 500,
+                  color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
+                  textAlign: 'left'
+                },
+                children: row.val3
+              }), /*#__PURE__*/jsx(Typography, {
+                sx: {
+                  fontSize: "13px",
+                  fontWeight: 500,
+                  color: "#000",
+                  textAlign: 'left'
+                },
+                children: row.val4
+              }), /*#__PURE__*/jsx(Box, {
+                children: row.type === 'trend' ? /*#__PURE__*/jsxs(Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    color: row.trendType === 'up' ? "#22C55E" : "#EF4444",
+                    fontSize: "12px",
+                    fontWeight: 600
+                  },
+                  children: [row.trendType === 'up' ? /*#__PURE__*/jsx(TrendingUp, {
+                    sx: {
+                      fontSize: '14px'
+                    }
+                  }) : /*#__PURE__*/jsx(TrendingDown, {
+                    sx: {
+                      fontSize: '14px'
+                    }
+                  }), row.trendLabel]
+                }) : /*#__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,
+                    textAlign: "center"
+                  },
+                  children: row.status
+                })
+              })]
+            }, idx);
+          })
+        })]
       })
-    }), /*#__PURE__*/jsx(Grid, {
+    })]
+  });
+};
+
+var DonorMixCard = function DonorMixCard(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "Donor mix" : _ref$title,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? "Acquisition vs retention" : _ref$subtitle,
+    _ref$series = _ref.series,
+    series = _ref$series === void 0 ? [68, 32] : _ref$series,
+    _ref$labels = _ref.labels,
+    labels = _ref$labels === void 0 ? ["New donors", "Returning"] : _ref$labels,
+    _ref$colors = _ref.colors,
+    colors = _ref$colors === void 0 ? ["rgb(99, 99, 230)", "#10B981"] : _ref$colors,
+    _ref$centerLabel = _ref.centerLabel,
+    centerLabel = _ref$centerLabel === void 0 ? "donors" : _ref$centerLabel,
+    _ref$centerValue = _ref.centerValue,
+    centerValue = _ref$centerValue === void 0 ? "215" : _ref$centerValue,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [{
+      label: "New donors",
+      val: "146 · 68%",
+      color: "rgb(99, 99, 230)"
+    }, {
+      label: "Returning",
+      val: "69 · 32%",
+      color: "#10B981"
+    }] : _ref$items,
+    _ref$showBottomSummar = _ref.showBottomSummary,
+    showBottomSummary = _ref$showBottomSummar === void 0 ? true : _ref$showBottomSummar,
+    _ref$bottomSummaryVal = _ref.bottomSummaryValue,
+    bottomSummaryValue = _ref$bottomSummaryVal === void 0 ? "$130.58" : _ref$bottomSummaryVal,
+    _ref$bottomSummaryTre = _ref.bottomSummaryTrend,
+    bottomSummaryTrend = _ref$bottomSummaryTre === void 0 ? "8.4% vs last month" : _ref$bottomSummaryTre;
+  var chartOptions = {
+    chart: {
+      type: "donut"
+    },
+    labels: labels,
+    colors: colors,
+    plotOptions: {
+      pie: {
+        donut: {
+          size: "75%",
+          labels: {
+            show: true,
+            name: {
+              show: true,
+              fontSize: '13px',
+              fontWeight: 500,
+              color: 'rgba(0, 0, 0, 0.4)',
+              offsetY: 25
+            },
+            value: {
+              show: true,
+              fontSize: '24px',
+              fontWeight: 700,
+              color: '#000',
+              offsetY: -15,
+              formatter: function formatter(val) {
+                return val;
+              }
+            },
+            total: {
+              show: true,
+              label: centerLabel,
+              fontSize: '13px',
+              fontWeight: 500,
+              color: 'rgba(0, 0, 0, 0.4)',
+              formatter: function formatter() {
+                return centerValue;
+              }
+            }
+          }
+        }
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    legend: {
+      show: false
+    },
+    stroke: {
+      show: false
+    },
+    states: {
+      hover: {
+        filter: {
+          type: "none"
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/jsxs(Box, {
+    sx: {
+      bgcolor: "#fff",
+      borderRadius: "24px",
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      p: 3,
+      height: "100%",
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        mb: 2
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontWeight: 700,
+          fontSize: "18px",
+          color: "#000"
+        },
+        children: title
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "13px",
+          color: "rgba(0, 0, 0, 0.4)",
+          mt: 0.2
+        },
+        children: subtitle
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: {
+        position: "relative",
+        height: "180px",
+        mb: 2,
+        display: "flex",
+        justifyContent: "center"
+      },
+      children: /*#__PURE__*/jsx(ReactApexChart, {
+        options: chartOptions,
+        series: series,
+        type: "donut",
+        width: "240"
+      })
+    }), /*#__PURE__*/jsxs(Box, {
+      sx: {
+        mt: "auto"
+      },
+      children: [items.map(function (item, idx) {
+        return /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            mb: idx === items.length - 1 ? showBottomSummary ? 3 : 0 : 1.5
+          },
+          children: [/*#__PURE__*/jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            },
+            children: [/*#__PURE__*/jsx(Box, {
+              sx: {
+                width: 10,
+                height: 10,
+                bgcolor: item.color,
+                borderRadius: "2px"
+              }
+            }), /*#__PURE__*/jsx(Typography, {
+              sx: {
+                fontSize: "13px",
+                fontWeight: 500,
+                color: "rgba(0, 0, 0, 0.4)"
+              },
+              children: item.label
+            })]
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#111"
+            },
+            children: item.val
+          })]
+        }, idx);
+      }), showBottomSummary && /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          pt: 2,
+          borderTop: "1px solid #f0f0f0"
+        },
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "20px",
+            fontWeight: 700,
+            color: "#000"
+          },
+          children: bottomSummaryValue
+        }), /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5,
+            color: "#22C55E",
+            fontSize: "12px",
+            fontWeight: 600
+          },
+          children: [/*#__PURE__*/jsx("span", {
+            children: "\u25B2"
+          }), bottomSummaryTrend]
+        })]
+      })]
+    })]
+  });
+};
+
+var DonationTypeBarChart = function DonationTypeBarChart() {
+  var chartOptions = {
+    chart: {
+      type: "bar",
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      },
+      fontFamily: "Inter, sans-serif"
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: "45%",
+        borderRadius: 4,
+        dataLabels: {
+          position: "top"
+        }
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function formatter(val) {
+        return "$".concat(val, "K");
+      },
+      offsetY: -20,
+      style: {
+        fontSize: "12px",
+        fontWeight: 700,
+        colors: ["#000"]
+      }
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ["transparent"]
+    },
+    xaxis: {
+      categories: [["Week 1", "Apr 5-11"], ["Week 2", "Apr 12-18"], ["Week 3", "Apr 19-25"], ["Week 4", "Apr 26-May 2"], ["Week 5", "May 3-4"]],
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      },
+      labels: {
+        style: {
+          colors: "rgba(0, 0, 0, 0.4)",
+          fontSize: "12px"
+        }
+      }
+    },
+    yaxis: {
+      min: 0,
+      max: 60,
+      tickAmount: 4,
+      labels: {
+        formatter: function formatter(val) {
+          return "$".concat(val, "K");
+        },
+        style: {
+          colors: "rgba(0, 0, 0, 0.4)",
+          fontSize: "12px"
+        }
+      }
+    },
+    fill: {
+      opacity: 1
+    },
+    colors: ["rgb(99, 99, 230)", "#10B981"],
+    grid: {
+      borderColor: "#f1f1f1",
+      strokeDashArray: 4,
+      yaxis: {
+        lines: {
+          show: true
+        }
+      }
+    },
+    legend: {
+      show: false // Custom legend used
+    },
+    tooltip: {
+      y: {
+        formatter: function formatter(val) {
+          return "$".concat(val, "K");
+        }
+      }
+    }
+  };
+  var series = [{
+    name: "Recurring",
+    data: [9.2, 11.8, 13.4, 15.6, 4.9]
+  }, {
+    name: "One-time",
+    data: [32.4, 41.2, 46.8, 51.3, 14.3]
+  }];
+  return /*#__PURE__*/jsxs(Card, {
+    sx: {
+      bgcolor: "#fff",
+      borderRadius: "24px",
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      p: 3
+      // width: "100%",
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        mb: 4
+      },
+      children: [/*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontWeight: 700,
+            fontSize: "18px",
+            color: "#000"
+          },
+          children: "Recurring vs one-time donations"
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            color: "rgba(0, 0, 0, 0.4)",
+            mt: 0.2
+          },
+          children: "Donation type breakdown - weekly aggregation"
+        })]
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          gap: 6
+        },
+        children: [/*#__PURE__*/jsxs(Box, {
+          sx: {
+            textAlign: "right"
+          },
+          children: [/*#__PURE__*/jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 1,
+              mb: 0.5
+            },
+            children: [/*#__PURE__*/jsx(Box, {
+              sx: {
+                width: 8,
+                height: 8,
+                bgcolor: "rgb(99, 99, 230)",
+                borderRadius: "50%"
+              }
+            }), /*#__PURE__*/jsx(Typography, {
+              sx: {
+                fontSize: "12px",
+                color: "rgba(0, 0, 0, 0.4)",
+                fontWeight: 500
+              },
+              children: "Recurring"
+            })]
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "18px",
+              fontWeight: 700,
+              color: "#000"
+            },
+            children: "$54,937"
+          })]
+        }), /*#__PURE__*/jsxs(Box, {
+          sx: {
+            textAlign: "right"
+          },
+          children: [/*#__PURE__*/jsxs(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 1,
+              mb: 0.5
+            },
+            children: [/*#__PURE__*/jsx(Box, {
+              sx: {
+                width: 8,
+                height: 8,
+                bgcolor: "#10B981",
+                borderRadius: "50%"
+              }
+            }), /*#__PURE__*/jsx(Typography, {
+              sx: {
+                fontSize: "12px",
+                color: "rgba(0, 0, 0, 0.4)",
+                fontWeight: 500
+              },
+              children: "One-time"
+            })]
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "18px",
+              fontWeight: 700,
+              color: "#000"
+            },
+            children: "$186,001"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: {
+        height: 350,
+        width: "100%"
+      },
+      children: /*#__PURE__*/jsx(ReactApexChart, {
+        options: chartOptions,
+        series: series,
+        type: "bar",
+        height: "100%"
+      })
+    })]
+  });
+};
+
+var OverallSection = function OverallSection(_ref) {
+  var _ref$apiData = _ref.apiData,
+    apiData = _ref$apiData === void 0 ? {} : _ref$apiData,
+    primaryCharts = _ref.primaryCharts,
+    secondaryCharts = _ref.secondaryCharts,
+    tertiaryCharts = _ref.tertiaryCharts,
+    quaternaryCharts = _ref.quaternaryCharts;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: 'flex',
+        gap: 2,
+        mb: 5
+      },
+      children: [/*#__PURE__*/jsx(DisplayCard, {
+        title: "Total Raised",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
+        icon: PaidOutlined,
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsx(DisplayCard, {
+        title: "Net Raised",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
+        icon: FavoriteOutlined,
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsx(DisplayCard, {
+        title: "Total Donors",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonorsTrend) || "31 new",
+        icon: PeopleAltOutlined,
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsx(DisplayCard, {
+        title: "Avg donation",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonation) || "$130.58",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
+        icon: PaidOutlined,
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsx(DisplayCard, {
+        title: "ROAS",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
+        icon: TrendingUp,
+        sx: {
+          flex: 1
+        }
+      }), /*#__PURE__*/jsx(DisplayCard, {
+        title: "Conversion",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
+        subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionSub) || "215 / 12.4K",
+        icon: Adjust,
+        sx: {
+          flex: 1
+        }
+      })]
+    }), /*#__PURE__*/jsxs(Grid, {
       container: true,
       spacing: 3,
       sx: {
-        mt: 1
+        mb: 1
       },
-      children: tertiaryCharts.map(function (item, index) {
+      children: [primaryCharts.filter(function (item) {
+        return item.label !== "First installments";
+      }).map(function (item, index) {
+        return /*#__PURE__*/jsx(RenderChartCard, {
+          item: item,
+          index: index,
+          md: item.label === "Total Revenue" ? 12 : 6,
+          isPremium: true
+        }, "primary-".concat(index));
+      }), secondaryCharts.map(function (item, index) {
+        return /*#__PURE__*/jsx(RenderChartCard, {
+          item: item,
+          index: index,
+          md: 6,
+          isPremium: true
+        }, "secondary-".concat(index));
+      }), tertiaryCharts.map(function (item, index) {
         return /*#__PURE__*/jsx(RenderChartCard, {
           item: item,
-          index: index
+          index: index,
+          md: 6,
+          isPremium: true
         }, "tertiary-".concat(index));
-      })
-    }), /*#__PURE__*/jsx(Grid, {
+      }), quaternaryCharts.map(function (item, index) {
+        return /*#__PURE__*/jsx(RenderChartCard, {
+          item: item,
+          index: index,
+          md: 6,
+          isPremium: true
+        }, "quaternary-".concat(index));
+      })]
+    }), /*#__PURE__*/jsxs(Grid, {
       container: true,
       spacing: 3,
       sx: {
         mt: 1
       },
-      children: quaternaryCharts.map(function (item, index) {
-        return /*#__PURE__*/jsx(RenderChartCard, {
-          item: item,
-          index: index
-        }, "quaternary-".concat(index));
+      children: [/*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 8,
+        children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
+          title: "Active campaigns",
+          subtitle: "Live fundraisers ranked by velocity",
+          columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift", "Status"],
+          rows: [{
+            id: "OS",
+            name: "Orphan sponsorship — Yemen",
+            val1: "$78,400",
+            type: "progress",
+            progress: 78,
+            val3: "82",
+            val4: "$956",
+            status: "Active",
+            statusColor: "#22C55E",
+            statusBg: "#DCFCE7"
+          }, {
+            id: "EF",
+            name: "Emergency food — Gaza",
+            val1: "$62,100",
+            type: "progress",
+            progress: 83,
+            val3: "61",
+            val4: "$1,018",
+            status: "Active",
+            statusColor: "#22C55E",
+            statusBg: "#DCFCE7"
+          }, {
+            id: "MB",
+            name: "Masjid build — Somalia",
+            val1: "$38,200",
+            type: "progress",
+            progress: 48,
+            val3: "34",
+            val4: "$1,124",
+            status: "Slow",
+            statusColor: "#B45309",
+            statusBg: "#FEF3C7",
+            progressColor: "#F59E0B"
+          }, {
+            id: "WW",
+            name: "Water wells — Pakistan",
+            val1: "$29,800",
+            type: "progress",
+            progress: 99,
+            val3: "28",
+            val4: "$1,064",
+            status: "Closing",
+            statusColor: "#6366F1",
+            statusBg: "#EEF2FF",
+            progressColor: "#10B981"
+          }, {
+            id: "RP",
+            name: "Ramadan packs — Egypt",
+            val1: "$19,400",
+            type: "progress",
+            progress: 78,
+            val3: "10",
+            val4: "$1,940",
+            status: "Active",
+            statusColor: "#22C55E",
+            statusBg: "#DCFCE7"
+          }]
+        })
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsx(DonorMixCard, {
+          title: "Donor mix",
+          subtitle: "Acquisition vs retention",
+          series: [68, 32],
+          labels: ["New donors", "Returning"],
+          colors: ["rgb(99, 99, 230)", "#10B981"],
+          centerLabel: "donors",
+          centerValue: "215",
+          items: [{
+            label: "New donors",
+            val: "146 · 68%",
+            color: "rgb(99, 99, 230)"
+          }, {
+            label: "Returning",
+            val: "69 · 32%",
+            color: "#10B981"
+          }],
+          bottomSummaryValue: "$130.58",
+          bottomSummaryTrend: "8.4% vs last month"
+        })
+      })]
+    }), /*#__PURE__*/jsx(Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 5
+      },
+      children: /*#__PURE__*/jsx(Grid, {
+        item: true,
+        md: 12,
+        children: /*#__PURE__*/jsx(DonationTypeBarChart, {})
       })
     })]
   });
@@ -6270,22 +7462,6 @@ var CampaignPerformanceTable = function CampaignPerformanceTable() {
 
 var PaidSection = function PaidSection() {
   var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-  var dailyPerformance = {
-    label: "Daily Raised vs Spend",
-    series: [{
-      name: "Raised",
-      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
-    }, {
-      name: "Spend",
-      data: [800, 950, 700, 1100, 900, 1200, 1300]
-    }],
-    categories: categories
-  };
-  var spendAllocation = {
-    label: "Spend Allocation",
-    data: [4500, 2500, 1500, 700],
-    categories: ["Ramadan", "Zakat", "Emergency", "General"]
-  };
   var roasTrend = {
     label: "ROAS Trend",
     data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
@@ -6296,65 +7472,58 @@ var PaidSection = function PaidSection() {
       sx: {
         display: 'flex',
         gap: 2,
-        mb: 5
+        mb: 2
       },
       children: [/*#__PURE__*/jsx(DisplayCard, {
-        title: "Total Raised",
-        value: "$9,200",
+        title: "Total Spent",
+        value: "$80,313",
+        subValue: "12% vs last month",
+        icon: IndeterminateCheckBoxOutlined,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Ad Spend",
-        value: "$9,200",
+        title: "Revinue Raised",
+        value: "$240,398",
+        subValue: "12% vs last month",
+        icon: PaidOutlined,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
         title: "ROAS",
-        value: "$9,200",
+        value: "3.0",
+        subValue: "12% vs last month",
+        icon: TrendingUp,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Net Raised",
-        value: "$9,200",
+        title: "Cost per donor",
+        value: "$373",
+        subValue: "12% vs last month",
+        icon: PersonOutlined,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Cost/Result",
-        value: "3.0",
+        title: "Conversion rate",
+        value: "3.1",
+        subValue: "12% vs last month",
+        icon: Adjust,
         sx: {
           flex: 1
         }
       }), /*#__PURE__*/jsx(DisplayCard, {
-        title: "Avg Donation",
-        value: "215",
+        title: "Avg donation",
+        value: "$130.58",
+        subValue: "12% vs last month",
+        icon: PaidOutlined,
         sx: {
           flex: 1
         }
       })]
-    }), /*#__PURE__*/jsx(CampaignPerformanceTable, {}), /*#__PURE__*/jsxs(Grid, {
-      container: true,
-      spacing: 3,
-      sx: {
-        mt: 4
-      },
-      children: [/*#__PURE__*/jsx(RenderChartCard, {
-        item: dailyPerformance,
-        index: 0,
-        md: 8,
-        type: "bar",
-        metric: "Revenue"
-      }), /*#__PURE__*/jsx(RenderChartCard, {
-        item: spendAllocation,
-        index: 1,
-        md: 4,
-        type: "donut",
-        metric: "Revenue"
-      })]
-    }), /*#__PURE__*/jsx(Grid, {
+    }), /*#__PURE__*/jsx(CampaignPerformanceTable, {}), /*#__PURE__*/jsx(Grid, {
       container: true,
       spacing: 3,
       sx: {
@@ -6366,8 +7535,144 @@ var PaidSection = function PaidSection() {
         md: 12,
         type: "area",
         metric: "ROAS",
-        isPrimary: true
+        isPrimary: true,
+        isPremium: true
       })
+    }), /*#__PURE__*/jsxs(Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 1
+      },
+      children: [/*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 8,
+        children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
+          title: "Channel performance",
+          subtitle: "Ad platforms ranked by ROAS",
+          columns: ["channel", "spend", "revenue", "ROAS", "CPA", "trend"],
+          gridTemplateColumns: "2.2fr 1fr 1fr 0.8fr 0.8fr 1.2fr",
+          rows: [{
+            id: "M",
+            avatarBg: "#4267B2",
+            name: "Meta Ads",
+            val1: "$32,800",
+            val2: "$112,400",
+            val3: "3.4x",
+            val4: "$340",
+            type: "trend",
+            trendType: "up",
+            trendLabel: "Improving",
+            highlightVal3: true,
+            val3Color: "#22C55E"
+          }, {
+            id: "G",
+            avatarBg: "#4285F4",
+            name: "Google Ads",
+            val1: "$28,200",
+            val2: "$78,300",
+            val3: "2.8x",
+            val4: "$385",
+            type: "trend",
+            trendType: "up",
+            trendLabel: "Improving",
+            highlightVal3: true,
+            val3Color: "#22C55E"
+          }, {
+            id: "T",
+            avatarBg: "#000000",
+            name: "TikTok Ads",
+            val1: "$11,400",
+            val2: "$31,200",
+            val3: "2.7x",
+            val4: "$402",
+            type: "trend",
+            trendType: "up",
+            trendLabel: "Improving",
+            highlightVal3: true,
+            val3Color: "#22C55E"
+          }, {
+            id: "Y",
+            avatarBg: "#FF0000",
+            name: "YouTube",
+            val1: "$5,313",
+            val2: "$12,600",
+            val3: "2.4x",
+            val4: "$443",
+            type: "trend",
+            trendType: "down",
+            trendLabel: "Declining",
+            highlightVal3: true,
+            val3Color: "#EF4444"
+          }, {
+            id: "S",
+            avatarBg: "#FFFC00",
+            name: "Snapchat",
+            val1: "$2,600",
+            val2: "$6,438",
+            val3: "2.5x",
+            val4: "$418",
+            type: "trend",
+            trendType: "up",
+            trendLabel: "Improving",
+            highlightVal3: true,
+            val3Color: "#22C55E"
+          }]
+        })
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 4,
+        children: /*#__PURE__*/jsx(DonorMixCard, {
+          title: "Spend allocation",
+          subtitle: "Where $80.3K went this month",
+          series: [40.8, 35.1, 14.2, 6.6, 3.3],
+          labels: ["Meta Ads", "Google Ads", "TikTok", "YouTube", "Snapchat"],
+          colors: ["#4267B2", "#4285F4", "#000000", "#FF0000", "#FFFC00"],
+          centerLabel: "total spend",
+          centerValue: "$80.3K",
+          items: [{
+            label: "Meta Ads",
+            val: "40.8%",
+            color: "#4267B2"
+          }, {
+            label: "Google Ads",
+            val: "35.1%",
+            color: "#4285F4"
+          }, {
+            label: "TikTok",
+            val: "14.2%",
+            color: "#000000"
+          }, {
+            label: "YouTube",
+            val: "6.6%",
+            color: "#FF0000"
+          }, {
+            label: "Snapchat",
+            val: "3.3%",
+            color: "#FFFC00"
+          }],
+          showBottomSummary: false
+        })
+      })]
+    }), /*#__PURE__*/jsxs(Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 8
+      },
+      children: [/*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 7,
+        children: /*#__PURE__*/jsx(TopPerformingCampaignsCard, {})
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 5,
+        children: /*#__PURE__*/jsx(PaidDonorGeographyCard, {})
+      })]
     })]
   });
 };