@ammarkhalidfarooq/dashboard-package 0.6.114 → 0.6.116

package/dist/index.es.js

@@ -6605,65 +6605,100 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref9) {
       value: item.donations !== undefined ? item.donations : item.value || 0
     };
   });
-  return /*#__PURE__*/jsx(CardWrapper, {
-    title: "Paid Donor Geography",
-    subtitle: "Where ad-acquired donors come from",
+  return /*#__PURE__*/jsxs(Card, {
     sx: _objectSpread2({
-      width: "100%"
+      bgcolor: "#fff",
+      borderRadius: 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      p: 3,
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      boxSizing: "border-box"
     }, sx),
-    children: data.length === 0 ? /*#__PURE__*/jsx(Typography, {
+    children: [/*#__PURE__*/jsxs(Box, {
+      sx: {
+        marginBottom: "12px"
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontWeight: 700,
+          fontSize: "18px",
+          color: "#000",
+          textAlign: "left",
+          lineHeight: 1.15
+        },
+        children: "Paid Donor Geography"
+      }), /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: "13px",
+          color: "rgba(0, 0, 0, 0.4)",
+          textAlign: "left",
+          lineHeight: 1.15
+        },
+        children: "Where ad-acquired donors come from"
+      })]
+    }), data.length === 0 ? /*#__PURE__*/jsx(Typography, {
       sx: {
         fontSize: "13px",
         color: "rgba(0, 0, 0, 0.4)",
         py: 2
       },
       children: "No geography data for this period"
-    }) : data.map(function (item, index) {
-      return /*#__PURE__*/jsxs(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 2,
-          py: 0.7
-        },
-        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, {
+    }) : /*#__PURE__*/jsx(Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1
+      },
+      children: data.map(function (item, index) {
+        return /*#__PURE__*/jsxs(Box, {
           sx: {
-            flexGrow: 1
+            display: "flex",
+            alignItems: "center",
+            gap: 2,
+            py: 0.7
           },
-          children: /*#__PURE__*/jsx(LinearProgress, {
-            variant: "determinate",
-            value: item.percentage,
+          children: [/*#__PURE__*/jsx(Typography, {
             sx: {
-              height: 8,
-              borderRadius: 4,
-              bgcolor: "#F3F4F6",
-              "& .MuiLinearProgress-bar": {
+              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: "#6366F1"
+                bgcolor: "#F3F4F6",
+                "& .MuiLinearProgress-bar": {
+                  borderRadius: 4,
+                  bgcolor: "#6366F1"
+                }
               }
-            }
-          })
-        }), /*#__PURE__*/jsxs(Typography, {
-          sx: {
-            fontSize: "13px",
-            fontWeight: 700,
-            color: "#111",
-            minWidth: "60px",
-            textAlign: "right"
-          },
-          children: [item.value, " - ", item.percentage, "%"]
-        })]
-      }, index);
-    })
+            })
+          }), /*#__PURE__*/jsxs(Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#111",
+              minWidth: "60px",
+              textAlign: "right"
+            },
+            children: [item.value, " - ", item.percentage, "%"]
+          })]
+        }, index);
+      })
+    })]
   });
 };
 
@@ -7126,7 +7161,8 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       title: "Active Campaigns",
       subtitle: "Live fundraisers ranked by velocity",
       columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
-      rows: activeCampaignsRows
+      rows: activeCampaignsRows,
+      height: "100%"
     }), /*#__PURE__*/jsx(DonorMixCard, {
       title: "Donor Mix",
       subtitle: "Acquisition vs retention",
@@ -7147,27 +7183,34 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       bottomSummaryValue: "$".concat(formatNumber(avgGift)),
       bottomSummaryTrend: "".concat(donorMixPrev, "% vs pp"),
       sx: {
-        width: "100%"
+        width: "100%",
+        height: "100%"
       }
     })]
   }) : /*#__PURE__*/jsxs(Grid, {
     container: true,
     spacing: GRID_GAP,
     sx: {
-      mt: GRID_GAP
+      mt: GRID_GAP,
+      alignItems: "stretch"
     },
     children: [/*#__PURE__*/jsx(Grid, {
       item: true,
       xs: 12,
       md: 9,
       sx: {
+        display: "flex",
         paddingTop: "0px !important"
       },
       children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
         title: "Active Campaigns",
         subtitle: "Live fundraisers ranked by velocity",
         columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
-        rows: activeCampaignsRows
+        rows: activeCampaignsRows,
+        height: "100%",
+        sx: {
+          width: "100%"
+        }
       })
     }), /*#__PURE__*/jsx(Grid, {
       item: true,
@@ -7201,7 +7244,8 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
         bottomSummaryValue: "$".concat(formatNumber(avgGift)),
         bottomSummaryTrend: "".concat(donorMixPrev, "% vs pp"),
         sx: {
-          width: "100%"
+          width: "100%",
+          height: "100%"
         }
       })
     })]