@ammarkhalidfarooq/dashboard-package 0.6.114 → 0.6.115

package/dist/index.cjs.js

@@ -6607,65 +6607,100 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref9) {
       value: item.donations !== undefined ? item.donations : item.value || 0
     };
   });
-  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
-    title: "Paid Donor Geography",
-    subtitle: "Where ad-acquired donors come from",
+  return /*#__PURE__*/jsxRuntime.jsxs(material.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__*/jsxRuntime.jsx(material.Typography, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        marginBottom: "12px"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          fontWeight: 700,
+          fontSize: "18px",
+          color: "#000",
+          textAlign: "left",
+          lineHeight: 1.15
+        },
+        children: "Paid Donor Geography"
+      }), /*#__PURE__*/jsxRuntime.jsx(material.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__*/jsxRuntime.jsx(material.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__*/jsxRuntime.jsxs(material.Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 2,
-          py: 0.7
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-          sx: {
-            fontSize: "13px",
-            fontWeight: 500,
-            color: "rgba(0, 0, 0, 0.4)",
-            minWidth: "100px",
-            textAlign: "left"
-          },
-          children: item.country
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1
+      },
+      children: data.map(function (item, index) {
+        return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
           sx: {
-            flexGrow: 1
+            display: "flex",
+            alignItems: "center",
+            gap: 2,
+            py: 0.7
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
-            variant: "determinate",
-            value: item.percentage,
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.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__*/jsxRuntime.jsx(material.Box, {
+            sx: {
+              flexGrow: 1
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
+              variant: "determinate",
+              value: item.percentage,
+              sx: {
+                height: 8,
                 borderRadius: 4,
-                bgcolor: "#6366F1"
+                bgcolor: "#F3F4F6",
+                "& .MuiLinearProgress-bar": {
+                  borderRadius: 4,
+                  bgcolor: "#6366F1"
+                }
               }
-            }
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
-          sx: {
-            fontSize: "13px",
-            fontWeight: 700,
-            color: "#111",
-            minWidth: "60px",
-            textAlign: "right"
-          },
-          children: [item.value, " - ", item.percentage, "%"]
-        })]
-      }, index);
-    })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#111",
+              minWidth: "60px",
+              textAlign: "right"
+            },
+            children: [item.value, " - ", item.percentage, "%"]
+          })]
+        }, index);
+      })
+    })]
   });
 };