@ammarkhalidfarooq/dashboard-package 0.3.30 → 0.3.32

package/dist/index.es.js

@@ -830,7 +830,7 @@ var CardWrapper = function CardWrapper(_ref) {
         sx: {
           display: "flex",
           flexDirection: "column",
-          gap: 2
+          gap: 1
         },
         children: children
       })]
@@ -899,7 +899,7 @@ var LandingPagesCard = function LandingPagesCard() {
           fontSize: "12px",
           color: "rgba(0, 0, 0, 0.4)",
           fontWeight: 500,
-          textAlign: "right"
+          textAlign: "left"
         },
         children: "Visitors"
       }), /*#__PURE__*/jsx(Typography, {
@@ -907,7 +907,7 @@ var LandingPagesCard = function LandingPagesCard() {
           fontSize: "12px",
           color: "rgba(0, 0, 0, 0.4)",
           fontWeight: 500,
-          textAlign: "right"
+          textAlign: "left"
         },
         children: "Donations"
       }), /*#__PURE__*/jsx(Typography, {
@@ -915,7 +915,7 @@ var LandingPagesCard = function LandingPagesCard() {
           fontSize: "12px",
           color: "rgba(0, 0, 0, 0.4)",
           fontWeight: 500,
-          textAlign: "right"
+          textAlign: "left"
         },
         children: "Revenue"
       }), /*#__PURE__*/jsx(Typography, {
@@ -923,7 +923,8 @@ var LandingPagesCard = function LandingPagesCard() {
           fontSize: "12px",
           color: "rgba(0, 0, 0, 0.4)",
           fontWeight: 500,
-          textAlign: "right"
+          textAlign: "left",
+          whiteSpace: "nowrap"
         },
         children: "Conv. rate"
       })]
@@ -950,7 +951,7 @@ var LandingPagesCard = function LandingPagesCard() {
             fontSize: "13px",
             color: "rgba(0, 0, 0, 0.6)",
             fontWeight: 500,
-            textAlign: "right"
+            textAlign: "left"
           },
           children: item.visitors
         }), /*#__PURE__*/jsx(Typography, {
@@ -958,7 +959,7 @@ var LandingPagesCard = function LandingPagesCard() {
             fontSize: "13px",
             color: "rgba(0, 0, 0, 0.6)",
             fontWeight: 500,
-            textAlign: "right"
+            textAlign: "left"
           },
           children: item.donations
         }), /*#__PURE__*/jsx(Typography, {
@@ -966,7 +967,7 @@ var LandingPagesCard = function LandingPagesCard() {
             fontSize: "13px",
             color: "rgba(0, 0, 0, 0.6)",
             fontWeight: 500,
-            textAlign: "right"
+            textAlign: "left"
           },
           children: item.revenue
         }), /*#__PURE__*/jsx(Typography, {
@@ -974,7 +975,7 @@ var LandingPagesCard = function LandingPagesCard() {
             fontSize: "13px",
             color: "#22C55E",
             fontWeight: 700,
-            textAlign: "right"
+            textAlign: "left"
           },
           children: item.cvr
         })]
@@ -1029,7 +1030,8 @@ var KeywordsCard = function KeywordsCard() {
         sx: {
           fontSize: "12px",
           color: "rgba(0, 0, 0, 0.4)",
-          fontWeight: 500
+          fontWeight: 500,
+          textAlign: "left"
         },
         children: "Keyword"
       }), /*#__PURE__*/jsx(Typography, {
@@ -1037,7 +1039,7 @@ var KeywordsCard = function KeywordsCard() {
           fontSize: "12px",
           color: "rgba(0, 0, 0, 0.4)",
           fontWeight: 500,
-          textAlign: "right"
+          textAlign: "left"
         },
         children: "Clicks"
       }), /*#__PURE__*/jsx(Typography, {
@@ -1045,7 +1047,7 @@ var KeywordsCard = function KeywordsCard() {
           fontSize: "12px",
           color: "rgba(0, 0, 0, 0.4)",
           fontWeight: 500,
-          textAlign: "center"
+          textAlign: "left"
         },
         children: "Position"
       }), /*#__PURE__*/jsx(Typography, {
@@ -1053,7 +1055,7 @@ var KeywordsCard = function KeywordsCard() {
           fontSize: "12px",
           color: "rgba(0, 0, 0, 0.4)",
           fontWeight: 500,
-          textAlign: "right"
+          textAlign: "left"
         },
         children: "Trend"
       })]
@@ -1063,7 +1065,7 @@ var KeywordsCard = function KeywordsCard() {
           display: "grid",
           gridTemplateColumns: "2.5fr 1fr 1fr 1fr",
           gap: 2,
-          py: 1.5,
+          // py: 0.5,
           alignItems: "center",
           borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
         },
@@ -1080,20 +1082,21 @@ var KeywordsCard = function KeywordsCard() {
             fontSize: "13px",
             color: "rgba(0, 0, 0, 0.6)",
             fontWeight: 500,
-            textAlign: "right"
+            textAlign: "left"
           },
           children: item.clicks
         }), /*#__PURE__*/jsx(Box, {
           sx: {
-            display: "flex",
-            justifyContent: "center"
+            width: "40px",
+            height: "30px",
+            textAlign: "left"
           },
           children: /*#__PURE__*/jsx(Box, {
             sx: {
-              bgcolor: "#ebf2ff",
+              bgcolor: "#ebf2ffb1",
               color: "#3431e4",
-              px: 1.5,
-              py: 0.5,
+              // px: 0.5,
+              // py: 0.5,
               borderRadius: "100px",
               fontSize: "11px",
               fontWeight: 700,
@@ -1106,13 +1109,13 @@ var KeywordsCard = function KeywordsCard() {
           sx: {
             display: "flex",
             alignItems: "center",
-            justifyContent: "flex-end",
+            justifyContent: "flex-start",
             gap: 0.5
           },
           children: item.trendType === "up" ? /*#__PURE__*/jsxs(Fragment, {
             children: [/*#__PURE__*/jsx(Typography, {
               sx: {
-                fontSize: "10px",
+                fontSize: "14px",
                 color: "#22C55E"
               },
               children: "\u25B2"
@@ -1127,7 +1130,7 @@ var KeywordsCard = function KeywordsCard() {
           }) : /*#__PURE__*/jsxs(Fragment, {
             children: [/*#__PURE__*/jsx(Typography, {
               sx: {
-                fontSize: "10px",
+                fontSize: "14px",
                 color: "#EF4444"
               },
               children: "\u25BC"
@@ -1276,7 +1279,7 @@ var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
         sx: {
           display: "flex",
           justifyContent: "space-between",
-          py: 1.5,
+          // py: 1.5,
           alignItems: "center",
           borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
         },
@@ -1284,7 +1287,8 @@ var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
           sx: {
             display: "flex",
             alignItems: "center",
-            gap: 1.5
+            gap: 1.5,
+            marginBottom: "10px"
           },
           children: [/*#__PURE__*/jsx(Box, {
             sx: {
@@ -1372,7 +1376,7 @@ var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
         sx: {
           display: "flex",
           justifyContent: "space-between",
-          py: 1.5,
+          // py: 1.5,
           alignItems: "center",
           borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
         },
@@ -1380,7 +1384,8 @@ var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
           sx: {
             display: "flex",
             alignItems: "center",
-            gap: 1.5
+            gap: 1.5,
+            marginBottom: "10px"
           },
           children: [/*#__PURE__*/jsx(Box, {
             sx: {
@@ -1468,7 +1473,7 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
         sx: {
           display: "flex",
           justifyContent: "space-between",
-          py: 1.5,
+          // py: 1.5,
           alignItems: "center",
           borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
         },
@@ -1476,7 +1481,8 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
           sx: {
             display: "flex",
             alignItems: "center",
-            gap: 1.5
+            gap: 1.5,
+            marginBottom: "10px"
           },
           children: [/*#__PURE__*/jsx(Box, {
             sx: {
@@ -1515,28 +1521,28 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
 var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
   var data = [{
     id: "YO",
-    avatarBg: "#c1cfdedb",
+    // avatarBg: "#c1cfde70",
     name: "Yemen Orphans - Meta",
     spend: "$8,200",
     revenue: "$31,400",
     roas: "3.8x"
   }, {
     id: "GF",
-    avatarBg: "#c1cfdedb",
+    // avatarBg: "#c1cfdedb",
     name: "Gaza Food - Google",
     spend: "$7,400",
     revenue: "$25,200",
     roas: "3.4x"
   }, {
     id: "PW",
-    avatarBg: "#c1cfdedb",
+    // avatarBg: "#c1cfdedb",
     name: "Pakistan Wells - Meta",
     spend: "$5,800",
     revenue: "$18,600",
     roas: "3.2x"
   }, {
     id: "R",
-    avatarBg: "#c1cfdedb",
+    // avatarBg: "#c1cfdedb",
     name: "Ramadan - TikTok",
     spend: "$3,200",
     revenue: "$8,900",
@@ -1592,7 +1598,7 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
           display: "grid",
           gridTemplateColumns: "2.5fr 1fr 1fr 0.8fr",
           gap: 1,
-          py: 1.5,
+          py: 1,
           alignItems: "center",
           borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
         },
@@ -1607,7 +1613,7 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
               width: 24,
               height: 24,
               borderRadius: "50%",
-              bgcolor: item.avatarBg,
+              bgcolor: "#c1cfde71",
               color: "#3431e4ff",
               display: "flex",
               alignItems: "center",
@@ -1642,10 +1648,12 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
           children: item.revenue
         }), /*#__PURE__*/jsx(Box, {
           sx: {
-            bgcolor: "#DCFCE7",
-            color: "#22C55E",
-            px: 1,
-            py: 0.5,
+            bgcolor: "#48d8d620",
+            color: "#157c3bff",
+            // px: 1,
+            // py: 0.5,
+            width: "40px",
+            height: "25px",
             borderRadius: "100px",
             fontSize: "11px",
             fontWeight: 700,
@@ -1692,7 +1700,7 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
           display: "flex",
           alignItems: "center",
           gap: 2,
-          py: 0.5
+          py: 0.7
         },
         children: [/*#__PURE__*/jsx(Typography, {
           sx: {
@@ -1711,7 +1719,7 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
             variant: "determinate",
             value: item.percentage,
             sx: {
-              height: 15,
+              height: 8,
               borderRadius: 4,
               bgcolor: "#F3F4F6",
               "& .MuiLinearProgress-bar": {
@@ -1831,7 +1839,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
   return /*#__PURE__*/jsxs(Box, {
     sx: _objectSpread2({
       bgcolor: "#fff",
-      borderRadius: "24px",
+      borderRadius: 4,
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       p: 3,
@@ -1841,9 +1849,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
       flexDirection: "column"
     }, sx),
     children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        mb: 2
-      },
+      sx: {},
       children: [/*#__PURE__*/jsx(Typography, {
         sx: {
           fontWeight: 700,
@@ -1856,7 +1862,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
         sx: {
           fontSize: "13px",
           color: "rgba(0, 0, 0, 0.4)",
-          mt: 0.2,
+          // mt: 0.2,
           textAlign: "left"
         },
         children: subtitle
@@ -1865,7 +1871,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
       sx: {
         position: "relative",
         height: "180px",
-        mb: 2,
+        // mb: 1,
         display: "flex",
         justifyContent: "center"
       },
@@ -1873,18 +1879,16 @@ var DonorMixCard = function DonorMixCard(_ref) {
         options: chartOptions,
         series: series,
         type: "donut",
-        width: "240"
+        width: "210"
       })
     }), /*#__PURE__*/jsxs(Box, {
-      sx: {
-        mt: "auto"
-      },
+      sx: {},
       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
+            mb: idx === items.length - 1 ? showBottomSummary ? 1 : 0 : 1
           },
           children: [/*#__PURE__*/jsxs(Box, {
             sx: {
@@ -1918,15 +1922,23 @@ var DonorMixCard = function DonorMixCard(_ref) {
         }, idx);
       }), showBottomSummary && /*#__PURE__*/jsxs(Box, {
         sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
+          // display: "flex",
+          // justifyContent: "space-between",
+          // alignItems: "center",
           pt: 2,
-          borderTop: "1px solid #f0f0f0"
+          borderTop: "1px solid #f0f0f0",
+          textAlign: "left"
         },
         children: [/*#__PURE__*/jsx(Typography, {
           sx: {
-            fontSize: "20px",
+            fontSize: "13px",
+            fontWeight: 500,
+            color: "rgba(0, 0, 0, 0.4)"
+          },
+          children: "Avg gift"
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
             fontWeight: 700,
             color: "#000"
           },
@@ -2077,8 +2089,10 @@ var OrganicSection = function OrganicSection(_ref) {
             val: "3.3%",
             color: "#FFFC00"
           }],
-          showBottomSummary: false
-          // sx={{ width: "100%" }}
+          showBottomSummary: false,
+          sx: {
+            pb: 2
+          }
         })
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
@@ -4057,15 +4071,15 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
     _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,
+    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 ? "2.5fr 1fr 1.5fr 0.8fr 1fr 0.8fr" : _ref$gridTemplateColu;
+    gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu;
   return /*#__PURE__*/jsxs(Box, {
     sx: {
       bgcolor: "#fff",
-      borderRadius: "24px",
+      borderRadius: 4,
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
       p: 3
@@ -4109,7 +4123,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
             display: "grid",
             gridTemplateColumns: gridTemplateColumns,
             gap: 2,
-            pb: 1.5,
+            pb: 2.5,
             borderBottom: "1px solid #f0f0f0"
           },
           children: columns.map(function (header) {
@@ -4133,7 +4147,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 display: "grid",
                 gridTemplateColumns: gridTemplateColumns,
                 gap: 2,
-                py: 1.89,
+                py: 1.2,
                 alignItems: "center",
                 borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
               },
@@ -4166,7 +4180,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   sx: {
-                    fontSize: "13px",
+                    fontSize: "12px",
                     fontWeight: 700,
                     color: "#000"
                   },
@@ -4235,7 +4249,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                   textAlign: "left"
                 },
                 children: row.val4
-              }), /*#__PURE__*/jsx(Box, {
+              }), columns.length > 5 && /*#__PURE__*/jsx(Box, {
                 children: row.type === "trend" ? /*#__PURE__*/jsxs(Box, {
                   sx: {
                     display: "flex",
@@ -4277,221 +4291,804 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
   });
 };
 
-var DonationTypeBarChart = function DonationTypeBarChart() {
-  var chartOptions = {
-    chart: {
-      type: "bar",
-      toolbar: {
-        show: false
-      },
-      zoom: {
-        enabled: false
-      },
-      fontFamily: "Inter, sans-serif"
-    },
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        columnWidth: "100%",
-        borderRadius: 4,
-        dataLabels: {
-          position: "top"
-        }
-      }
-    },
-    dataLabels: {
-      enabled: true,
-      formatter: function formatter(val) {
-        return "$".concat(val, "K");
-      },
-      offsetY: -22,
-      style: {
-        fontSize: "10px",
-        fontWeight: 700,
-        colors: ["#000"]
-      }
-    },
-    stroke: {
-      show: true,
-      width: 2,
-      colors: ["transparent"]
-    },
-    xaxis: {
-      categories: ["Wk 1", "Wk 2", "Wk 3", "Wk 4"],
-      axisBorder: {
-        show: false
-      },
-      axisTicks: {
-        show: false
-      },
-      labels: {
-        style: {
-          colors: "rgba(0, 0, 0, 0.4)",
-          fontSize: "12px"
-        }
-      }
-    },
-    yaxis: {
-      min: 0,
-      max: 60,
-      tickAmount: 3,
-      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
-    },
-    tooltip: {
-      y: {
-        formatter: function formatter(val) {
-          return "$".concat(val, "K");
-        }
-      }
-    }
-  };
-  var series = [{
-    name: "Recurring",
-    data: [9.2, 11.8, 13.4, 15.6]
-  }, {
-    name: "One-time",
-    data: [32.4, 41.2, 46.8, 51.3]
-  }];
+var TrafficSourceCard = function TrafficSourceCard(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "Traffic source" : _ref$title,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? "Revenue by channel · 30 days" : _ref$subtitle,
+    _ref$data = _ref.data,
+    data = _ref$data === void 0 ? [{
+      label: "Paid Ads",
+      revenue: "$98.4K",
+      share: 41,
+      color: "rgb(99, 99, 230)"
+    }, {
+      label: "Organic",
+      revenue: "$62.1K",
+      share: 26,
+      color: "#10B981"
+    }, {
+      label: "Email",
+      revenue: "$38.6K",
+      share: 16,
+      color: "#0EA5E9"
+    }, {
+      label: "Direct",
+      revenue: "$15.5K",
+      share: 6,
+      color: "#94A3B8"
+    }] : _ref$data,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? "$240.9K" : _ref$total;
   return /*#__PURE__*/jsxs(Card, {
     sx: {
-      bgcolor: "#fff",
-      borderRadius: "24px",
+      p: 3,
+      borderRadius: 4,
       border: "1px solid #f0f0f0",
       boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      p: 3
-      // width: "100%",
+      bgcolor: "#fff",
       // height: "100%",
+      display: "flex",
+      flexDirection: "column"
     },
     children: [/*#__PURE__*/jsxs(Box, {
+      sx: {},
+      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.5,
+          mb: 0.5,
+          textAlign: "left"
+        },
+        children: subtitle
+      })]
+    }), /*#__PURE__*/jsxs(Box, {
       sx: {
-        display: "flex",
-        flexDirection: "column",
-        mb: 2
+        display: "grid",
+        gridTemplateColumns: "2.5fr 1.5fr 2fr",
+        gap: 2,
+        mb: 1.5
       },
-      children: [/*#__PURE__*/jsxs(Box, {
+      children: [/*#__PURE__*/jsx(Typography, {
         sx: {
+          fontSize: "12px",
+          fontWeight: 700,
+          color: "rgba(0, 0, 0, 0.3)",
+          letterSpacing: "0.05em",
           textAlign: "left"
         },
-        children: [/*#__PURE__*/jsx(Typography, {
-          sx: {
-            fontWeight: 700,
-            fontSize: "18px",
-            color: "#000"
-          },
-          children: "Recurring vs one-time"
-        }), /*#__PURE__*/jsx(Typography, {
-          sx: {
-            fontSize: "13px",
-            color: "rgba(0, 0, 0, 0.4)",
-            mt: 0.2
-          },
-          children: "Donation type \xB7 weekly"
-        })]
-      }), /*#__PURE__*/jsxs(Box, {
+        children: "SOURCE"
+      }), /*#__PURE__*/jsx(Typography, {
         sx: {
-          display: "flex",
-          gap: 10,
-          mt: 3,
-          mb: 1
+          fontSize: "12px",
+          fontWeight: 700,
+          color: "rgba(0, 0, 0, 0.3)",
+          letterSpacing: "0.05em",
+          textAlign: "left"
         },
-        children: [/*#__PURE__*/jsxs(Box, {
+        children: "REVENUE"
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          fontWeight: 700,
+          color: "rgba(0, 0, 0, 0.3)",
+          letterSpacing: "0.05em",
+          textAlign: "right"
+        },
+        children: "SHARE"
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: {
+        flexGrow: 1
+      },
+      children: data.map(function (item, index) {
+        return /*#__PURE__*/jsxs(Box, {
           sx: {
-            textAlign: "left"
+            display: "grid",
+            gridTemplateColumns: "2.5fr 1.5fr 2fr",
+            gap: 2,
+            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,
-              mb: 0.5
+              gap: 1
             },
             children: [/*#__PURE__*/jsx(Box, {
               sx: {
-                width: 8,
-                height: 8,
-                bgcolor: "rgb(99, 99, 230)",
-                borderRadius: "50%"
+                width: 10,
+                height: 10,
+                bgcolor: item.color,
+                borderRadius: "2px"
               }
             }), /*#__PURE__*/jsx(Typography, {
               sx: {
-                fontSize: "12px",
-                color: "rgba(0, 0, 0, 0.4)",
-                fontWeight: 500
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "rgba(0, 0, 0, 0.7)"
               },
-              children: "Recurring"
+              children: item.label
             })]
           }), /*#__PURE__*/jsx(Typography, {
             sx: {
-              fontSize: "18px",
+              fontSize: "14px",
               fontWeight: 700,
               color: "#000"
             },
-            children: "$54,937"
-          })]
-        }), /*#__PURE__*/jsxs(Box, {
-          sx: {
-            textAlign: "left"
-          },
-          children: [/*#__PURE__*/jsxs(Box, {
+            children: item.revenue
+          }), /*#__PURE__*/jsxs(Box, {
             sx: {
               display: "flex",
               alignItems: "center",
-              gap: 1,
-              mb: 0.5
+              gap: 1.5,
+              justifyContent: "flex-end"
+            },
+            children: [/*#__PURE__*/jsx(Box, {
+              sx: {
+                width: "60px",
+                flexShrink: 0
+              },
+              children: /*#__PURE__*/jsx(LinearProgress, {
+                variant: "determinate",
+                value: item.share,
+                sx: {
+                  height: 6,
+                  borderRadius: 3,
+                  bgcolor: "#F3F4F6",
+                  "& .MuiLinearProgress-bar": {
+                    borderRadius: 3,
+                    bgcolor: item.color
+                  }
+                }
+              })
+            }), /*#__PURE__*/jsxs(Typography, {
+              sx: {
+                fontSize: "14px",
+                fontWeight: 700,
+                color: "#000",
+                minWidth: "30px",
+                textAlign: "right"
+              },
+              children: [item.share, "%"]
+            })]
+          })]
+        }, index);
+      })
+    }), /*#__PURE__*/jsxs(Box, {
+      sx: {
+        mt: 2,
+        pt: 2,
+        // borderTop: "1px solid #f0f0f0",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "14px",
+          fontWeight: 500,
+          color: "rgba(0, 0, 0, 0.4)"
+        },
+        children: "Total"
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "16px",
+          fontWeight: 700,
+          color: "#000"
+        },
+        children: total
+      })]
+    })]
+  });
+};
+
+var MetricSparklineCard = function MetricSparklineCard(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    value = _ref.value,
+    trend = _ref.trend,
+    _ref$trendColor = _ref.trendColor,
+    trendColor = _ref$trendColor === void 0 ? "#22C55E" : _ref$trendColor,
+    _ref$chartData = _ref.chartData,
+    chartData = _ref$chartData === void 0 ? [] : _ref$chartData,
+    _ref$chartColor = _ref.chartColor,
+    chartColor = _ref$chartColor === void 0 ? "rgb(99, 99, 230)" : _ref$chartColor,
+    _ref$footerMetrics = _ref.footerMetrics,
+    footerMetrics = _ref$footerMetrics === void 0 ? [] : _ref$footerMetrics;
+  var chartOptions = {
+    chart: {
+      type: "area",
+      sparkline: {
+        enabled: true
+      },
+      animations: {
+        enabled: true
+      }
+    },
+    stroke: {
+      curve: "smooth",
+      width: 2
+    },
+    fill: {
+      type: "gradient",
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.45,
+        opacityTo: 0.05,
+        stops: [20, 100, 100]
+      }
+    },
+    colors: [chartColor],
+    tooltip: {
+      enabled: false
+    }
+  };
+  var series = [{
+    name: title,
+    data: chartData
+  }];
+  return /*#__PURE__*/jsxs(Card, {
+    sx: {
+      p: 3,
+      borderRadius: 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      bgcolor: "#fff",
+      // height: "100%",
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        mb: 1
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontWeight: 700,
+          fontSize: "16px",
+          color: "#000",
+          textAlign: "left"
+        },
+        children: title
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          mt: 0.2,
+          textAlign: "left"
+        },
+        children: subtitle
+      })]
+    }), /*#__PURE__*/jsxs(Box, {
+      sx: {
+        mt: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start"
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "24px",
+          fontWeight: 700,
+          color: "#000"
+        },
+        children: value
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "11px",
+          fontWeight: 700,
+          color: trendColor,
+          mt: 0.2
+        },
+        children: trend
+      })]
+    }), /*#__PURE__*/jsxs(Box, {
+      sx: {
+        height: 60,
+        mb: 2
+      },
+      children: [/*#__PURE__*/jsx(ReactApexChart, {
+        options: chartOptions,
+        series: series,
+        type: "area",
+        height: "100%"
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          mt: 0.5
+        },
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "10px",
+            color: "rgba(0, 0, 0, 0.3)"
+          },
+          children: "Apr 5"
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "10px",
+            color: "rgba(0, 0, 0, 0.3)"
+          },
+          children: "Apr 17"
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "10px",
+            color: "rgba(0, 0, 0, 0.3)"
+          },
+          children: "May 4"
+        })]
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: {
+        mt: "auto",
+        pt: 3,
+        // borderTop: "1px solid #f0f0f0",
+        display: "flex",
+        justifyContent: "space-between"
+      },
+      children: footerMetrics.map(function (m, idx) {
+        return /*#__PURE__*/jsxs(Box, {
+          sx: {
+            textAlign: "center"
+          },
+          children: [/*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "10px",
+              color: "rgba(0, 0, 0, 0.4)",
+              fontWeight: 500
+            },
+            children: m.label
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "14px",
+              fontWeight: 700,
+              color: "#000"
+            },
+            children: m.value
+          })]
+        }, idx);
+      })
+    })]
+  });
+};
+
+var MetricDonutCard = function MetricDonutCard(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    acceptanceRate = _ref.acceptanceRate,
+    acceptanceVal = _ref.acceptanceVal,
+    acceptanceTrend = _ref.acceptanceTrend,
+    raisedVal = _ref.raisedVal,
+    raisedTrend = _ref.raisedTrend,
+    _ref$chartColors = _ref.chartColors,
+    chartColors = _ref$chartColors === void 0 ? ["rgb(99, 99, 230)", "#88bfd290"] : _ref$chartColors;
+  var chartOptions = {
+    chart: {
+      type: "radialBar",
+      sparkline: {
+        enabled: true
+      }
+    },
+    plotOptions: {
+      radialBar: {
+        hollow: {
+          size: "45%"
+        },
+        track: {
+          background: chartColors[1] || "#f0f0f0",
+          strokeWidth: "100%"
+        },
+        dataLabels: {
+          name: {
+            show: true,
+            fontSize: "11px",
+            fontWeight: 500,
+            color: "rgba(0, 0, 0, 0.4)",
+            offsetY: 15
+          },
+          value: {
+            show: true,
+            fontSize: "18px",
+            fontWeight: 700,
+            color: "#000",
+            offsetY: -15,
+            formatter: function formatter() {
+              return acceptanceRate + "%";
+            }
+          }
+        }
+      }
+    },
+    stroke: {
+      lineCap: "butt"
+    },
+    colors: [chartColors[0]],
+    labels: ["accepted"]
+  };
+  var series = [acceptanceRate];
+  return /*#__PURE__*/jsxs(Card, {
+    sx: {
+      p: 3,
+      borderRadius: 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      bgcolor: "#fff",
+      // height: "100%",
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {},
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontWeight: 700,
+          fontSize: "16px",
+          color: "#000",
+          textAlign: "left"
+        },
+        children: title
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "12px",
+          color: "rgba(0, 0, 0, 0.4)",
+          mt: 0.2,
+          textAlign: "left"
+        },
+        children: subtitle
+      })]
+    }), /*#__PURE__*/jsx(Box, {
+      sx: {
+        height: 160,
+        position: "relative",
+        mt: 1,
+        display: "flex",
+        justifyContent: "center"
+      },
+      children: /*#__PURE__*/jsx(ReactApexChart, {
+        options: chartOptions,
+        series: series,
+        type: "radialBar",
+        width: "100%",
+        height: "100%"
+      })
+    }), /*#__PURE__*/jsxs(Box, {
+      sx: {},
+      children: [/*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1
+          },
+          children: [/*#__PURE__*/jsx(Box, {
+            sx: {
+              width: 10,
+              height: 10,
+              bgcolor: chartColors[0],
+              borderRadius: "2px"
+            }
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              color: "rgba(0, 0, 0, 0.5)",
+              fontWeight: 500
+            },
+            children: "Acceptance"
+          })]
+        }), /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#000"
+            },
+            children: acceptanceVal
+          }), /*#__PURE__*/jsxs(Typography, {
+            sx: {
+              fontSize: "10px",
+              fontWeight: 700,
+              color: "#22C55E",
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [/*#__PURE__*/jsx(TrendingUp, {
+              sx: {
+                fontSize: "12px"
+              }
+            }), " ", acceptanceTrend]
+          })]
+        })]
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1
+          },
+          children: [/*#__PURE__*/jsx(Box, {
+            sx: {
+              width: 10,
+              height: 10,
+              bgcolor: chartColors[1],
+              borderRadius: "2px"
+            }
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              color: "rgba(0, 0, 0, 0.5)",
+              fontWeight: 500
+            },
+            children: "Raised"
+          })]
+        }), /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#000"
+            },
+            children: raisedVal
+          }), /*#__PURE__*/jsxs(Typography, {
+            sx: {
+              fontSize: "10px",
+              fontWeight: 700,
+              color: "#22C55E",
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [/*#__PURE__*/jsx(TrendingUp, {
+              sx: {
+                fontSize: "12px"
+              }
+            }), " ", raisedTrend]
+          })]
+        })]
+      })]
+    })]
+  });
+};
+
+var DonationTypeBarChart = function DonationTypeBarChart() {
+  var chartOptions = {
+    chart: {
+      type: "bar",
+      toolbar: {
+        show: false
+      },
+      zoom: {
+        enabled: false
+      },
+      fontFamily: "Inter, sans-serif"
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: "70%",
+        borderRadius: 4,
+        dataLabels: {
+          position: "top"
+        }
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function formatter(val) {
+        return "$".concat(val, "K");
+      },
+      offsetY: -22,
+      style: {
+        fontSize: "10px",
+        fontWeight: 700,
+        colors: ["#000"]
+      }
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ["transparent"]
+    },
+    xaxis: {
+      categories: ["Wk 1", "Wk 2", "Wk 3", "May 3-4"],
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      },
+      labels: {
+        style: {
+          colors: "rgba(0, 0, 0, 0.4)",
+          fontSize: "11px"
+        }
+      }
+    },
+    yaxis: {
+      min: 0,
+      max: 60,
+      tickAmount: 3,
+      labels: {
+        formatter: function formatter(val) {
+          return val === 40 ? "" : "$".concat(val, "K");
+        },
+        style: {
+          colors: "rgba(0, 0, 0, 0.4)",
+          fontSize: "10px"
+        }
+      }
+    },
+    fill: {
+      opacity: 1
+    },
+    colors: ["rgb(99, 99, 230)", "#10B981"],
+    grid: {
+      borderColor: "#f1f1f1",
+      strokeDashArray: 4,
+      padding: {
+        left: 0,
+        right: 0
+      },
+      yaxis: {
+        lines: {
+          show: true
+        }
+      }
+    },
+    legend: {
+      show: false
+    },
+    tooltip: {
+      y: {
+        formatter: function formatter(val) {
+          return "$".concat(val, "K");
+        }
+      }
+    }
+  };
+  var series = [{
+    name: "Recurring",
+    data: [9.2, 11.8, 13.4, 4.9]
+  }, {
+    name: "One-time",
+    data: [32.4, 41.2, 46.8, 14.3]
+  }];
+  return /*#__PURE__*/jsxs(Card, {
+    sx: {
+      bgcolor: "#fff",
+      borderRadius: 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      p: 3
+      // height: "100%",
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        mb: 1
+      },
+      children: [/*#__PURE__*/jsxs(Box, {
+        sx: {
+          textAlign: "left"
+        },
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontWeight: 700,
+            fontSize: "18px",
+            color: "#000"
+          },
+          children: "Recurring vs one-time"
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            color: "rgba(0, 0, 0, 0.4)",
+            mt: 0
+          },
+          children: "Donation type \xB7 weekly"
+        })]
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: "flex",
+          gap: 1.5,
+          mt: 0.5,
+          mb: 2
+        },
+        children: [/*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/*#__PURE__*/jsx(Box, {
+            sx: {
+              width: 8,
+              height: 8,
+              bgcolor: "rgb(99, 99, 230)",
+              borderRadius: "50%"
+            }
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              color: "rgba(0, 0, 0, 0.5)",
+              fontWeight: 500
             },
-            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"
-            })]
+            children: "Recurring"
           }), /*#__PURE__*/jsx(Typography, {
             sx: {
-              fontSize: "18px",
-              fontWeight: 700,
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "#000"
+            },
+            children: "$54,937"
+          })]
+        }), /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/*#__PURE__*/jsx(Box, {
+            sx: {
+              width: 8,
+              height: 8,
+              bgcolor: "#10B981",
+              borderRadius: "50%"
+            }
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              color: "rgba(0, 0, 0, 0.5)",
+              fontWeight: 500
+            },
+            children: "One-time"
+          }), /*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 600,
               color: "#000"
             },
-            children: "$186,001"
+            children: "$188,001"
           })]
         })]
       })]
     }), /*#__PURE__*/jsx(Box, {
       sx: {
-        height: 350,
-        width: "100%"
+        height: 170,
+        width: "calc(100% + 48px)",
+        ml: -3,
+        mr: -3,
+        mb: 7.5
       },
       children: /*#__PURE__*/jsx(ReactApexChart, {
         options: chartOptions,
@@ -4552,7 +5149,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
     yaxis: {
       min: 0,
       max: 2,
-      tickAmount: 4,
+      tickAmount: 2,
       labels: {
         formatter: function formatter(val) {
           return "".concat(val, "%");
@@ -4624,7 +5221,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
     },
     children: [/*#__PURE__*/jsxs(Box, {
       sx: {
-        mb: 3
+        mb: 0
       },
       children: [/*#__PURE__*/jsx(Typography, {
         sx: {
@@ -4647,14 +5244,14 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
       sx: {
         display: "flex",
         gap: 10,
-        mb: 2
+        mb: 1.5
       },
       children: [/*#__PURE__*/jsxs(Box, {
         children: [/*#__PURE__*/jsx(Typography, {
           sx: {
             fontSize: "10px",
             fontWeight: 700,
-            color: "#F59E0B",
+            color: "#22C55E",
             textTransform: "uppercase"
           },
           children: "Refunds"
@@ -4710,7 +5307,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
       })]
     }), /*#__PURE__*/jsx(Box, {
       sx: {
-        mb: 2
+        mb: 0
       },
       children: /*#__PURE__*/jsx(Typography, {
         sx: {
@@ -4719,13 +5316,13 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
           fontWeight: 500,
           textAlign: "left"
         },
-        children: "$1,927 refunded \xB7 $215 disputed \xB7 10 cases total"
+        children: "$1,927 refunded \xB7 $215 disputed \xB7 0 cases total"
       })
     }), /*#__PURE__*/jsxs(Box, {
       sx: {
         display: "flex",
         gap: 2,
-        mb: 4
+        mb: 0
       },
       children: [/*#__PURE__*/jsxs(Box, {
         sx: {
@@ -4772,7 +5369,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
       })]
     }), /*#__PURE__*/jsx(Box, {
       sx: {
-        height: 250,
+        height: 160,
         width: "100%"
       },
       children: /*#__PURE__*/jsx(ReactApexChart, {
@@ -5041,6 +5638,53 @@ var OverallSection = function OverallSection(_ref) {
       });
     }
   }
+  if (activeMetric === "Avg donation") {
+    var avgData = apiData === null || apiData === void 0 ? void 0 : apiData.averageDonations;
+    var _hasStackedData3 = (avgData === null || avgData === void 0 ? void 0 : avgData.paidAds) || (avgData === null || avgData === void 0 ? void 0 : avgData.email) || (avgData === null || avgData === void 0 ? void 0 : avgData.organic);
+    if (_hasStackedData3) {
+      var _categories3 = ((avgData === null || avgData === void 0 ? void 0 : avgData.organic) || (avgData === null || avgData === void 0 ? void 0 : avgData.paidAds) || (avgData === null || avgData === void 0 ? void 0 : avgData.email) || []).map(function (item) {
+        return item.date;
+      });
+      var _series3 = [{
+        name: "Paid Ads",
+        data: ((avgData === null || avgData === void 0 ? void 0 : avgData.paidAds) || []).map(function (item) {
+          return item.value;
+        })
+      }, {
+        name: "Organic",
+        data: ((avgData === null || avgData === void 0 ? void 0 : avgData.organic) || []).map(function (item) {
+          return item.value;
+        })
+      }, {
+        name: "Email",
+        data: ((avgData === null || avgData === void 0 ? void 0 : avgData.email) || []).map(function (item) {
+          return item.value;
+        })
+      }];
+      mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
+        label: "Average donation trend",
+        data: undefined,
+        series: _series3,
+        categories: _categories3,
+        stacked: true,
+        colors: ["#6366F1", "#10B981", "#06B6D4"],
+        hideControls: true
+      });
+    } else if (Array.isArray(avgData) && avgData.length > 0) {
+      mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
+        label: "Average donation trend",
+        data: avgData.map(function (item) {
+          return item.value;
+        }),
+        categories: avgData.map(function (item) {
+          return item.date;
+        }),
+        series: undefined,
+        stacked: false,
+        hideControls: true
+      });
+    }
+  }
   mainChart = _objectSpread2(_objectSpread2({}, mainChart), {}, {
     label: mainChart.label || activeMetric,
     value: selectedInfo.value,
@@ -5078,11 +5722,13 @@ var OverallSection = function OverallSection(_ref) {
       children: [/*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
-        md: 8,
+        md: 9,
         children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
           title: "Active campaigns",
           subtitle: "Live fundraisers ranked by velocity",
-          columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift", "Status"],
+          columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"
+          // "Status",
+          ],
           rows: [{
             id: "OS",
             name: "Orphan sponsorship — Yemen",
@@ -5090,10 +5736,10 @@ var OverallSection = function OverallSection(_ref) {
             type: "progress",
             progress: 78,
             val3: "82",
-            val4: "$956",
-            status: "Active",
-            statusColor: "#22C55E",
-            statusBg: "#DCFCE7"
+            val4: "$956"
+            // status: "Active",
+            // statusColor: "#22C55E",
+            // statusBg: "#DCFCE7",
           }, {
             id: "EF",
             name: "Emergency food — Gaza",
@@ -5101,10 +5747,10 @@ var OverallSection = function OverallSection(_ref) {
             type: "progress",
             progress: 83,
             val3: "61",
-            val4: "$1,018",
-            status: "Active",
-            statusColor: "#22C55E",
-            statusBg: "#DCFCE7"
+            val4: "$1,018"
+            // status: "Active",
+            // statusColor: "#22C55E",
+            // statusBg: "#DCFCE7",
           }, {
             id: "MB",
             name: "Masjid build — Somalia",
@@ -5112,11 +5758,11 @@ var OverallSection = function OverallSection(_ref) {
             type: "progress",
             progress: 48,
             val3: "34",
-            val4: "$1,124",
-            status: "Slow",
-            statusColor: "#B45309",
-            statusBg: "#FEF3C7",
-            progressColor: "#F59E0B"
+            val4: "$1,124"
+            // status: "Slow",
+            // statusColor: "#B45309",
+            // statusBg: "#FEF3C7",
+            // progressColor: "#F59E0B",
           }, {
             id: "WW",
             name: "Water wells — Pakistan",
@@ -5124,11 +5770,11 @@ var OverallSection = function OverallSection(_ref) {
             type: "progress",
             progress: 99,
             val3: "28",
-            val4: "$1,064",
-            status: "Closing",
-            statusColor: "#6366F1",
-            statusBg: "#EEF2FF",
-            progressColor: "#10B981"
+            val4: "$1,064"
+            // status: "Closing",
+            // statusColor: "#6366F1",
+            // statusBg: "#EEF2FF",
+            // progressColor: "#10B981",
           }, {
             id: "RP",
             name: "Ramadan packs — Egypt",
@@ -5136,16 +5782,16 @@ var OverallSection = function OverallSection(_ref) {
             type: "progress",
             progress: 78,
             val3: "10",
-            val4: "$1,940",
-            status: "Active",
-            statusColor: "#22C55E",
-            statusBg: "#DCFCE7"
+            val4: "$1,940"
+            // status: "Active",
+            // statusColor: "#22C55E",
+            // statusBg: "#DCFCE7",
           }]
         })
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
-        md: 4,
+        md: 3,
         sx: {
           display: "flex"
         },
@@ -5181,16 +5827,100 @@ var OverallSection = function OverallSection(_ref) {
       },
       children: [/*#__PURE__*/jsx(Grid, {
         item: true,
-        md: 4,
+        xs: 12,
+        md: 3,
         children: /*#__PURE__*/jsx(DonationTypeBarChart, {})
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
-        md: 4,
+        xs: 12,
+        md: 3,
         children: /*#__PURE__*/jsx(PaidDonorGeographyCard, {})
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
-        md: 4,
+        xs: 12,
+        md: 3,
         children: /*#__PURE__*/jsx(RefundsChargebacksCard, {})
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 3,
+        children: /*#__PURE__*/jsx(TrafficSourceCard, {})
+      })]
+    }), /*#__PURE__*/jsxs(Grid, {
+      container: true,
+      spacing: 3,
+      sx: {
+        mt: 1,
+        mb: 2
+      },
+      children: [/*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 3,
+        children: /*#__PURE__*/jsx(MetricSparklineCard, {
+          title: "Order Bump",
+          subtitle: "Revenue trend \xB7 last 30 days",
+          value: "$19.2K",
+          trend: "\u25B2 8.7% vs last month",
+          chartData: [1200, 1500, 1300, 1800, 1600, 2100, 1920],
+          footerMetrics: [{
+            label: "Avg/day",
+            value: "$640"
+          }, {
+            label: "Peak day",
+            value: "$1.4K"
+          }, {
+            label: "Orders",
+            value: "84"
+          }]
+        })
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 3,
+        children: /*#__PURE__*/jsx(MetricDonutCard, {
+          title: "Upsell",
+          subtitle: "Acceptance & raised",
+          acceptanceRate: 34,
+          acceptanceVal: "34.2%",
+          acceptanceTrend: "4.1%",
+          raisedVal: "$28.4K",
+          raisedTrend: "11.3%"
+        })
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 3,
+        children: /*#__PURE__*/jsx(MetricDonutCard, {
+          title: "Downsell",
+          subtitle: "Acceptance & raised",
+          acceptanceRate: 19,
+          acceptanceVal: "18.7%",
+          acceptanceTrend: "2.3%",
+          raisedVal: "$11.9K",
+          raisedTrend: "6.8%"
+        })
+      }), /*#__PURE__*/jsx(Grid, {
+        item: true,
+        xs: 12,
+        md: 3,
+        children: /*#__PURE__*/jsx(MetricSparklineCard, {
+          title: "Referrals",
+          subtitle: "Revenue trend \xB7 last 30 days",
+          value: "$22.7K",
+          trend: "\u25B2 9.1% vs last month",
+          chartData: [1500, 1700, 1600, 2200, 1900, 2400, 2270],
+          footerMetrics: [{
+            label: "Referrers",
+            value: "38"
+          }, {
+            label: "Avg gift",
+            value: "$598"
+          }, {
+            label: "Conv. rate",
+            value: "27.5%"
+          }]
+        })
       })]
     })]
   });
@@ -5416,8 +6146,10 @@ var PaidSection = function PaidSection() {
             val: "3.3%",
             color: "#FFFC00"
           }],
-          showBottomSummary: false
-          // sx={{ width: "100%" }}
+          showBottomSummary: false,
+          sx: {
+            pb: 3.5
+          }
         })
       })]
     }), /*#__PURE__*/jsxs(Grid, {