@ammarkhalidfarooq/dashboard-package 0.6.0 → 0.6.2

package/README.md

@@ -225,6 +225,58 @@ export default App;
 }
 ```
 
+### MetricCard (tree-shakeable)
+
+A compact KPI card with icon, value, and caption — used for selectable overview metrics.
+
+```jsx
+import MetricCard from "@ammarkhalidfarooq/dashboard-package/MetricCard";
+```
+
+Or import from the main entry:
+
+```jsx
+import { MetricCard } from "@ammarkhalidfarooq/dashboard-package";
+```
+
+**Example:**
+
+```jsx
+import { useState } from "react";
+import { PaidOutlined as DollarIcon } from "@mui/icons-material";
+import MetricCard from "@ammarkhalidfarooq/dashboard-package/MetricCard";
+
+const App = () => {
+  const [active, setActive] = useState("Total Raised");
+
+  return (
+    <MetricCard
+      title="Total Raised"
+      value="$124,500"
+      caption="12.4% vs last month"
+      icon={<DollarIcon />}
+      active={active === "Total Raised"}
+      onClick={() => setActive("Total Raised")}
+    />
+  );
+};
+
+export default App;
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | — | Card label |
+| `value` | `string` | — | Main metric value |
+| `caption` | `string` | — | Subtitle / trend text below the value |
+| `icon` | `ReactNode` | — | Icon shown in the top-right avatar |
+| `active` | `boolean` | `false` | Highlights the card as selected |
+| `warning` | `boolean` | `false` | Warning border and icon styling |
+| `error` | `boolean` | `false` | Error border and caption styling |
+| `onClick` | `function` | — | Click handler (e.g. select metric) |
+
 ## Development
 
 To preview the component locally:
@@ -239,4 +291,4 @@ To build the package:
 npm run build
 ```
 
-The build outputs ESM and CommonJS bundles in the `dist` folder, including separate `RenderChartCard` and `ActiveCampaignsCard` bundles for tree-shaking.
+The build outputs ESM and CommonJS bundles in the `dist` folder, including separate `RenderChartCard`, `ActiveCampaignsCard`, and `MetricCard` bundles for tree-shaking.

package/dist/MetricCard.cjs.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var material = require('@mui/material');
+var jsxRuntime = require('react/jsx-runtime');
+
+var MetricCard = function MetricCard(_ref) {
+  var title = _ref.title,
+    value = _ref.value,
+    caption = _ref.caption,
+    icon = _ref.icon,
+    active = _ref.active,
+    warning = _ref.warning,
+    error = _ref.error,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: {
+      bgcolor: "#fff",
+      border: "1.5px solid ".concat(active ? "#4F46E5" : warning ? "#F3B33D" : error ? "#ef4444" : "#F1F1F5"),
+      borderRadius: "16px",
+      p: {
+        xs: 1.75,
+        md: 2
+      },
+      paddingTop: "10px !important",
+      paddingBottom: "10px !important",
+      height: 92,
+      boxShadow: "0 14px 30px rgba(21, 26, 45, 0.06)"
+    },
+    onClick: onClick,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          color: active ? "#818CF8" : "#999EAA",
+          fontSize: 13,
+          fontWeight: 500,
+          letterSpacing: 0
+        },
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
+        sx: {
+          width: 30,
+          height: 30,
+          bgcolor: warning ? "#FFF3CF" : error ? "#fee2e2" : "#EEF2FF",
+          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5"
+        },
+        children: icon
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      sx: {
+        // mt: 0.3,
+        fontSize: 22,
+        fontWeight: 700,
+        color: active ? "#4F46E5" : "#050509",
+        lineHeight: 1.15
+      },
+      children: value
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      sx: {
+        // mt: 1.05,
+        fontSize: 12,
+        fontWeight: 500,
+        color: caption.includes("failed") ? "#4F46E5" : error ? "#ef4444" : "#0B8F61"
+      },
+      children: caption
+    })]
+  });
+};
+
+module.exports = MetricCard;
+//# sourceMappingURL=MetricCard.cjs.js.map

package/dist/MetricCard.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.cjs.js","sources":["../src/components/advanced/MetricCard/index.jsx"],"sourcesContent":["import { Avatar, Box, Stack, Typography } from \"@mui/material\";\r\n\r\n\r\nconst MetricCard = ({\r\n  title,\r\n  value,\r\n  caption,\r\n  icon,\r\n  active,\r\n  warning,\r\n  error,\r\n  onClick\r\n}) => (\r\n  <Box\r\n    sx={{\r\n      bgcolor: \"#fff\",\r\n      border: `1.5px solid ${active ? \"#4F46E5\" : warning ? \"#F3B33D\" : error ? \"#ef4444\" : \"#F1F1F5\"}`,\r\n      borderRadius: \"16px\",\r\n      p: { xs: 1.75, md: 2 },\r\n      paddingTop: \"10px !important\", paddingBottom: \"10px !important\",\r\n      height: 92,\r\n      boxShadow: \"0 14px 30px rgba(21, 26, 45, 0.06)\",\r\n    }}\r\n    onClick={onClick}\r\n  >\r\n    <Stack\r\n      direction=\"row\"\r\n      justifyContent=\"space-between\"\r\n      alignItems=\"center\"\r\n    >\r\n      <Typography\r\n        sx={{\r\n          color: active ? \"#818CF8\" : \"#999EAA\",\r\n          fontSize: 13,\r\n          fontWeight: 500,\r\n          letterSpacing: 0,\r\n        }}\r\n      >\r\n        {title}\r\n      </Typography>\r\n      <Avatar\r\n        sx={{\r\n          width: 30,\r\n          height: 30,\r\n          bgcolor: warning ? \"#FFF3CF\" : error ? \"#fee2e2\" : \"#EEF2FF\",\r\n          color: warning ? \"#B45309\" : error ? \"#ef4444\" : \"#4F46E5\",\r\n        }}\r\n      >\r\n        {icon}\r\n      </Avatar>\r\n    </Stack>\r\n    <Typography\r\n      sx={{\r\n        // mt: 0.3,\r\n        fontSize: 22,\r\n        fontWeight: 700,\r\n        color: active ? \"#4F46E5\" : \"#050509\",\r\n        lineHeight: 1.15,\r\n      }}\r\n    >\r\n      {value}\r\n    </Typography>\r\n    <Typography\r\n      sx={{\r\n        // mt: 1.05,\r\n        fontSize: 12,\r\n        fontWeight: 500,\r\n        color: caption.includes(\"failed\")\r\n          ? \"#4F46E5\"\r\n          : error\r\n            ? \"#ef4444\"\r\n            : \"#0B8F61\",\r\n      }}\r\n    >\r\n      {caption}\r\n    </Typography>\r\n  </Box>\r\n);\r\n\r\nexport default MetricCard;\r\n"],"names":["MetricCard","_ref","title","value","caption","icon","active","warning","error","onClick","_jsxs","Box","sx","bgcolor","border","concat","borderRadius","p","xs","md","paddingTop","paddingBottom","height","boxShadow","children","Stack","direction","justifyContent","alignItems","_jsx","Typography","color","fontSize","fontWeight","letterSpacing","Avatar","width","lineHeight","includes"],"mappings":";;;;;AAGA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAA;AAAA,EAAA,IACdC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,MAAM,GAAAL,IAAA,CAANK,MAAM;IACNC,OAAO,GAAAN,IAAA,CAAPM,OAAO;IACPC,KAAK,GAAAP,IAAA,CAALO,KAAK;IACLC,OAAO,GAAAR,IAAA,CAAPQ,OAAO;EAAA,oBAEPC,eAAA,CAACC,YAAG,EAAA;AACFC,IAAAA,EAAE,EAAE;AACFC,MAAAA,OAAO,EAAE,MAAM;AACfC,MAAAA,MAAM,iBAAAC,MAAA,CAAiBT,MAAM,GAAG,SAAS,GAAGC,OAAO,GAAG,SAAS,GAAGC,KAAK,GAAG,SAAS,GAAG,SAAS,CAAE;AACjGQ,MAAAA,YAAY,EAAE,MAAM;AACpBC,MAAAA,CAAC,EAAE;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE;OAAG;AACtBC,MAAAA,UAAU,EAAE,iBAAiB;AAAEC,MAAAA,aAAa,EAAE,iBAAiB;AAC/DC,MAAAA,MAAM,EAAE,EAAE;AACVC,MAAAA,SAAS,EAAE;KACX;AACFd,IAAAA,OAAO,EAAEA,OAAQ;IAAAe,QAAA,EAAA,cAEjBd,eAAA,CAACe,cAAK,EAAA;AACJC,MAAAA,SAAS,EAAC,KAAK;AACfC,MAAAA,cAAc,EAAC,eAAe;AAC9BC,MAAAA,UAAU,EAAC,QAAQ;MAAAJ,QAAA,EAAA,cAEnBK,cAAA,CAACC,mBAAU,EAAA;AACTlB,QAAAA,EAAE,EAAE;AACFmB,UAAAA,KAAK,EAAEzB,MAAM,GAAG,SAAS,GAAG,SAAS;AACrC0B,UAAAA,QAAQ,EAAE,EAAE;AACZC,UAAAA,UAAU,EAAE,GAAG;AACfC,UAAAA,aAAa,EAAE;SACf;AAAAV,QAAAA,QAAA,EAEDtB;AAAK,OACI,CAAC,eACb2B,cAAA,CAACM,eAAM,EAAA;AACLvB,QAAAA,EAAE,EAAE;AACFwB,UAAAA,KAAK,EAAE,EAAE;AACTd,UAAAA,MAAM,EAAE,EAAE;UACVT,OAAO,EAAEN,OAAO,GAAG,SAAS,GAAGC,KAAK,GAAG,SAAS,GAAG,SAAS;UAC5DuB,KAAK,EAAExB,OAAO,GAAG,SAAS,GAAGC,KAAK,GAAG,SAAS,GAAG;SACjD;AAAAgB,QAAAA,QAAA,EAEDnB;AAAI,OACC,CAAC;AAAA,KACJ,CAAC,eACRwB,cAAA,CAACC,mBAAU,EAAA;AACTlB,MAAAA,EAAE,EAAE;AACF;AACAoB,QAAAA,QAAQ,EAAE,EAAE;AACZC,QAAAA,UAAU,EAAE,GAAG;AACfF,QAAAA,KAAK,EAAEzB,MAAM,GAAG,SAAS,GAAG,SAAS;AACrC+B,QAAAA,UAAU,EAAE;OACZ;AAAAb,MAAAA,QAAA,EAEDrB;AAAK,KACI,CAAC,eACb0B,cAAA,CAACC,mBAAU,EAAA;AACTlB,MAAAA,EAAE,EAAE;AACF;AACAoB,QAAAA,QAAQ,EAAE,EAAE;AACZC,QAAAA,UAAU,EAAE,GAAG;AACfF,QAAAA,KAAK,EAAE3B,OAAO,CAACkC,QAAQ,CAAC,QAAQ,CAAC,GAC7B,SAAS,GACT9B,KAAK,GACH,SAAS,GACT;OACN;AAAAgB,MAAAA,QAAA,EAEDpB;AAAO,KACE,CAAC;AAAA,GACV,CAAC;AAAA;;;;"}

package/dist/MetricCard.es.js

@@ -0,0 +1,71 @@
+import { Box, Stack, Typography, Avatar } from '@mui/material';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MetricCard = function MetricCard(_ref) {
+  var title = _ref.title,
+    value = _ref.value,
+    caption = _ref.caption,
+    icon = _ref.icon,
+    active = _ref.active,
+    warning = _ref.warning,
+    error = _ref.error,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxs(Box, {
+    sx: {
+      bgcolor: "#fff",
+      border: "1.5px solid ".concat(active ? "#4F46E5" : warning ? "#F3B33D" : error ? "#ef4444" : "#F1F1F5"),
+      borderRadius: "16px",
+      p: {
+        xs: 1.75,
+        md: 2
+      },
+      paddingTop: "10px !important",
+      paddingBottom: "10px !important",
+      height: 92,
+      boxShadow: "0 14px 30px rgba(21, 26, 45, 0.06)"
+    },
+    onClick: onClick,
+    children: [/*#__PURE__*/jsxs(Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: {
+          color: active ? "#818CF8" : "#999EAA",
+          fontSize: 13,
+          fontWeight: 500,
+          letterSpacing: 0
+        },
+        children: title
+      }), /*#__PURE__*/jsx(Avatar, {
+        sx: {
+          width: 30,
+          height: 30,
+          bgcolor: warning ? "#FFF3CF" : error ? "#fee2e2" : "#EEF2FF",
+          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5"
+        },
+        children: icon
+      })]
+    }), /*#__PURE__*/jsx(Typography, {
+      sx: {
+        // mt: 0.3,
+        fontSize: 22,
+        fontWeight: 700,
+        color: active ? "#4F46E5" : "#050509",
+        lineHeight: 1.15
+      },
+      children: value
+    }), /*#__PURE__*/jsx(Typography, {
+      sx: {
+        // mt: 1.05,
+        fontSize: 12,
+        fontWeight: 500,
+        color: caption.includes("failed") ? "#4F46E5" : error ? "#ef4444" : "#0B8F61"
+      },
+      children: caption
+    })]
+  });
+};
+
+export { MetricCard as default };
+//# sourceMappingURL=MetricCard.es.js.map

package/dist/MetricCard.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.es.js","sources":["../src/components/advanced/MetricCard/index.jsx"],"sourcesContent":["import { Avatar, Box, Stack, Typography } from \"@mui/material\";\r\n\r\n\r\nconst MetricCard = ({\r\n  title,\r\n  value,\r\n  caption,\r\n  icon,\r\n  active,\r\n  warning,\r\n  error,\r\n  onClick\r\n}) => (\r\n  <Box\r\n    sx={{\r\n      bgcolor: \"#fff\",\r\n      border: `1.5px solid ${active ? \"#4F46E5\" : warning ? \"#F3B33D\" : error ? \"#ef4444\" : \"#F1F1F5\"}`,\r\n      borderRadius: \"16px\",\r\n      p: { xs: 1.75, md: 2 },\r\n      paddingTop: \"10px !important\", paddingBottom: \"10px !important\",\r\n      height: 92,\r\n      boxShadow: \"0 14px 30px rgba(21, 26, 45, 0.06)\",\r\n    }}\r\n    onClick={onClick}\r\n  >\r\n    <Stack\r\n      direction=\"row\"\r\n      justifyContent=\"space-between\"\r\n      alignItems=\"center\"\r\n    >\r\n      <Typography\r\n        sx={{\r\n          color: active ? \"#818CF8\" : \"#999EAA\",\r\n          fontSize: 13,\r\n          fontWeight: 500,\r\n          letterSpacing: 0,\r\n        }}\r\n      >\r\n        {title}\r\n      </Typography>\r\n      <Avatar\r\n        sx={{\r\n          width: 30,\r\n          height: 30,\r\n          bgcolor: warning ? \"#FFF3CF\" : error ? \"#fee2e2\" : \"#EEF2FF\",\r\n          color: warning ? \"#B45309\" : error ? \"#ef4444\" : \"#4F46E5\",\r\n        }}\r\n      >\r\n        {icon}\r\n      </Avatar>\r\n    </Stack>\r\n    <Typography\r\n      sx={{\r\n        // mt: 0.3,\r\n        fontSize: 22,\r\n        fontWeight: 700,\r\n        color: active ? \"#4F46E5\" : \"#050509\",\r\n        lineHeight: 1.15,\r\n      }}\r\n    >\r\n      {value}\r\n    </Typography>\r\n    <Typography\r\n      sx={{\r\n        // mt: 1.05,\r\n        fontSize: 12,\r\n        fontWeight: 500,\r\n        color: caption.includes(\"failed\")\r\n          ? \"#4F46E5\"\r\n          : error\r\n            ? \"#ef4444\"\r\n            : \"#0B8F61\",\r\n      }}\r\n    >\r\n      {caption}\r\n    </Typography>\r\n  </Box>\r\n);\r\n\r\nexport default MetricCard;\r\n"],"names":["MetricCard","_ref","title","value","caption","icon","active","warning","error","onClick","_jsxs","Box","sx","bgcolor","border","concat","borderRadius","p","xs","md","paddingTop","paddingBottom","height","boxShadow","children","Stack","direction","justifyContent","alignItems","_jsx","Typography","color","fontSize","fontWeight","letterSpacing","Avatar","width","lineHeight","includes"],"mappings":";;;AAGA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAA;AAAA,EAAA,IACdC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,MAAM,GAAAL,IAAA,CAANK,MAAM;IACNC,OAAO,GAAAN,IAAA,CAAPM,OAAO;IACPC,KAAK,GAAAP,IAAA,CAALO,KAAK;IACLC,OAAO,GAAAR,IAAA,CAAPQ,OAAO;EAAA,oBAEPC,IAAA,CAACC,GAAG,EAAA;AACFC,IAAAA,EAAE,EAAE;AACFC,MAAAA,OAAO,EAAE,MAAM;AACfC,MAAAA,MAAM,iBAAAC,MAAA,CAAiBT,MAAM,GAAG,SAAS,GAAGC,OAAO,GAAG,SAAS,GAAGC,KAAK,GAAG,SAAS,GAAG,SAAS,CAAE;AACjGQ,MAAAA,YAAY,EAAE,MAAM;AACpBC,MAAAA,CAAC,EAAE;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE;OAAG;AACtBC,MAAAA,UAAU,EAAE,iBAAiB;AAAEC,MAAAA,aAAa,EAAE,iBAAiB;AAC/DC,MAAAA,MAAM,EAAE,EAAE;AACVC,MAAAA,SAAS,EAAE;KACX;AACFd,IAAAA,OAAO,EAAEA,OAAQ;IAAAe,QAAA,EAAA,cAEjBd,IAAA,CAACe,KAAK,EAAA;AACJC,MAAAA,SAAS,EAAC,KAAK;AACfC,MAAAA,cAAc,EAAC,eAAe;AAC9BC,MAAAA,UAAU,EAAC,QAAQ;MAAAJ,QAAA,EAAA,cAEnBK,GAAA,CAACC,UAAU,EAAA;AACTlB,QAAAA,EAAE,EAAE;AACFmB,UAAAA,KAAK,EAAEzB,MAAM,GAAG,SAAS,GAAG,SAAS;AACrC0B,UAAAA,QAAQ,EAAE,EAAE;AACZC,UAAAA,UAAU,EAAE,GAAG;AACfC,UAAAA,aAAa,EAAE;SACf;AAAAV,QAAAA,QAAA,EAEDtB;AAAK,OACI,CAAC,eACb2B,GAAA,CAACM,MAAM,EAAA;AACLvB,QAAAA,EAAE,EAAE;AACFwB,UAAAA,KAAK,EAAE,EAAE;AACTd,UAAAA,MAAM,EAAE,EAAE;UACVT,OAAO,EAAEN,OAAO,GAAG,SAAS,GAAGC,KAAK,GAAG,SAAS,GAAG,SAAS;UAC5DuB,KAAK,EAAExB,OAAO,GAAG,SAAS,GAAGC,KAAK,GAAG,SAAS,GAAG;SACjD;AAAAgB,QAAAA,QAAA,EAEDnB;AAAI,OACC,CAAC;AAAA,KACJ,CAAC,eACRwB,GAAA,CAACC,UAAU,EAAA;AACTlB,MAAAA,EAAE,EAAE;AACF;AACAoB,QAAAA,QAAQ,EAAE,EAAE;AACZC,QAAAA,UAAU,EAAE,GAAG;AACfF,QAAAA,KAAK,EAAEzB,MAAM,GAAG,SAAS,GAAG,SAAS;AACrC+B,QAAAA,UAAU,EAAE;OACZ;AAAAb,MAAAA,QAAA,EAEDrB;AAAK,KACI,CAAC,eACb0B,GAAA,CAACC,UAAU,EAAA;AACTlB,MAAAA,EAAE,EAAE;AACF;AACAoB,QAAAA,QAAQ,EAAE,EAAE;AACZC,QAAAA,UAAU,EAAE,GAAG;AACfF,QAAAA,KAAK,EAAE3B,OAAO,CAACkC,QAAQ,CAAC,QAAQ,CAAC,GAC7B,SAAS,GACT9B,KAAK,GACH,SAAS,GACT;OACN;AAAAgB,MAAAA,QAAA,EAEDpB;AAAO,KACE,CAAC;AAAA,GACV,CAAC;AAAA;;;;"}

package/dist/index.cjs.js

@@ -1150,6 +1150,72 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
   });
 };
 
+var MetricCard$1 = function MetricCard(_ref) {
+  var title = _ref.title,
+    value = _ref.value,
+    caption = _ref.caption,
+    icon = _ref.icon,
+    active = _ref.active,
+    warning = _ref.warning,
+    error = _ref.error,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    sx: {
+      bgcolor: "#fff",
+      border: "1.5px solid ".concat(active ? "#4F46E5" : warning ? "#F3B33D" : error ? "#ef4444" : "#F1F1F5"),
+      borderRadius: "16px",
+      p: {
+        xs: 1.75,
+        md: 2
+      },
+      paddingTop: "10px !important",
+      paddingBottom: "10px !important",
+      height: 92,
+      boxShadow: "0 14px 30px rgba(21, 26, 45, 0.06)"
+    },
+    onClick: onClick,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          color: active ? "#818CF8" : "#999EAA",
+          fontSize: 13,
+          fontWeight: 500,
+          letterSpacing: 0
+        },
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
+        sx: {
+          width: 30,
+          height: 30,
+          bgcolor: warning ? "#FFF3CF" : error ? "#fee2e2" : "#EEF2FF",
+          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5"
+        },
+        children: icon
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      sx: {
+        // mt: 0.3,
+        fontSize: 22,
+        fontWeight: 700,
+        color: active ? "#4F46E5" : "#050509",
+        lineHeight: 1.15
+      },
+      children: value
+    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      sx: {
+        // mt: 1.05,
+        fontSize: 12,
+        fontWeight: 500,
+        color: caption.includes("failed") ? "#4F46E5" : error ? "#ef4444" : "#0B8F61"
+      },
+      children: caption
+    })]
+  });
+};
+
 function formatNumber(num) {
   if (num >= 1000000000) {
     return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
@@ -1549,7 +1615,7 @@ var TrendPill = function TrendPill(_ref) {
     children: value
   });
 };
-var MetricCard$1 = function MetricCard(_ref2) {
+var MetricCard = function MetricCard(_ref2) {
   var title = _ref2.title,
     value = _ref2.value,
     trend = _ref2.trend,
@@ -1673,7 +1739,7 @@ var ReportKpiSection = function ReportKpiSection(_ref3) {
         gap: exportMode ? 1 : 2
       },
       children: metrics.map(function (m) {
-        return /*#__PURE__*/jsxRuntime.jsx(MetricCard$1, _objectSpread2(_objectSpread2({}, m), {}, {
+        return /*#__PURE__*/jsxRuntime.jsx(MetricCard, _objectSpread2(_objectSpread2({}, m), {}, {
           exportMode: exportMode
         }), m.title);
       })
@@ -4146,7 +4212,7 @@ var fourColGridSx = function fourColGridSx(exportMode) {
     gridTemplateColumns: exportMode ? "repeat(4, 1fr)" : {
       xs: "1fr",
       sm: "repeat(2, 1fr)",
-      md: "repeat(3, 1fr)",
+      md: "repeat(2, 1fr)",
       xl: "repeat(4, 1fr)"
     },
     gap: GRID_GAP,
@@ -14435,72 +14501,6 @@ var html2canvas_esm = /*#__PURE__*/Object.freeze({
   default: html2canvas
 });
 
-var MetricCard = function MetricCard(_ref) {
-  var title = _ref.title,
-    value = _ref.value,
-    caption = _ref.caption,
-    icon = _ref.icon,
-    active = _ref.active,
-    warning = _ref.warning,
-    error = _ref.error,
-    onClick = _ref.onClick;
-  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    sx: {
-      bgcolor: "#fff",
-      border: "1.5px solid ".concat(active ? "#4F46E5" : warning ? "#F3B33D" : error ? "#ef4444" : "#F1F1F5"),
-      borderRadius: "16px",
-      p: {
-        xs: 1.75,
-        md: 2
-      },
-      paddingTop: "10px !important",
-      paddingBottom: "10px !important",
-      height: 92,
-      boxShadow: "0 14px 30px rgba(21, 26, 45, 0.06)"
-    },
-    onClick: onClick,
-    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Stack, {
-      direction: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-        sx: {
-          color: active ? "#818CF8" : "#999EAA",
-          fontSize: 13,
-          fontWeight: 500,
-          letterSpacing: 0
-        },
-        children: title
-      }), /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
-        sx: {
-          width: 30,
-          height: 30,
-          bgcolor: warning ? "#FFF3CF" : error ? "#fee2e2" : "#EEF2FF",
-          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5"
-        },
-        children: icon
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-      sx: {
-        // mt: 0.3,
-        fontSize: 22,
-        fontWeight: 700,
-        color: active ? "#4F46E5" : "#050509",
-        lineHeight: 1.15
-      },
-      children: value
-    }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-      sx: {
-        // mt: 1.05,
-        fontSize: 12,
-        fontWeight: 500,
-        color: caption.includes("failed") ? "#4F46E5" : error ? "#ef4444" : "#0B8F61"
-      },
-      children: caption
-    })]
-  });
-};
-
 var OverallSection = function OverallSection(_ref) {
   var _apiData$overviewStat, _apiData$overviewStat2, _apiData$overviewStat3, _apiData$overviewStat4, _apiData$overviewStat5, _apiData$overviewStat6, _apiData$overviewStat7, _apiData$overviewStat8, _apiData$overviewStat9, _apiData$overviewStat0, _apiData$overviewStat1, _apiData$overviewStat10, _apiData$roasCard, _apiData$roasCardPrev, _apiData$overviewStat11, _apiData$overviewStat12, _apiData$overviewStat13;
   var _ref$apiData = _ref.apiData,
@@ -14543,7 +14543,7 @@ var OverallSection = function OverallSection(_ref) {
     })) {
       charts.push({
         label: "Total Donors",
-        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
+        value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "0",
         data: (apiData === null || apiData === void 0 ? void 0 : apiData.donationsData) || [15, 22, 18, 30, 25, 35, 42, 45, 28],
         categories: categories
       });
@@ -14580,7 +14580,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Total Donors": {
-      value: (apiData === null || apiData === void 0 || (_apiData$overviewStat7 = apiData.overviewStats) === null || _apiData$overviewStat7 === void 0 || (_apiData$overviewStat7 = _apiData$overviewStat7.overview) === null || _apiData$overviewStat7 === void 0 ? void 0 : _apiData$overviewStat7.totalDonations) || "215",
+      value: (apiData === null || apiData === void 0 || (_apiData$overviewStat7 = apiData.overviewStats) === null || _apiData$overviewStat7 === void 0 || (_apiData$overviewStat7 = _apiData$overviewStat7.overview) === null || _apiData$overviewStat7 === void 0 ? void 0 : _apiData$overviewStat7.totalDonations) || "0",
       subValue: "".concat(Number((_apiData$overviewStat8 = apiData === null || apiData === void 0 || (_apiData$overviewStat9 = apiData.overviewStats) === null || _apiData$overviewStat9 === void 0 || (_apiData$overviewStat9 = _apiData$overviewStat9.overview.growthPercentage) === null || _apiData$overviewStat9 === void 0 ? void 0 : _apiData$overviewStat9.totalDonations) !== null && _apiData$overviewStat8 !== void 0 ? _apiData$overviewStat8 : 0).toFixed(2), "%") || "0 new",
       label: "Total Donors",
       icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PeopleAltOutlined, {}),
@@ -14651,7 +14651,7 @@ var OverallSection = function OverallSection(_ref) {
   }
   console.log("DONOR MIX", donorMix);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsxRuntime.jsx(MetricCard
+    return /*#__PURE__*/jsxRuntime.jsx(MetricCard$1
     // key={title}
     , {
       title: title,
@@ -15113,7 +15113,7 @@ var PaidSection = function PaidSection() {
     }
   };
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsxRuntime.jsx(MetricCard
+    return /*#__PURE__*/jsxRuntime.jsx(MetricCard$1
     // key={title}
     , {
       title: title,
@@ -15612,7 +15612,7 @@ var OrganicSection = function OrganicSection(_ref) {
     };
   }, [apiData === null || apiData === void 0 ? void 0 : apiData.sourceBreakdown, hasOrganicOverview]);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsxRuntime.jsx(MetricCard, {
+    return /*#__PURE__*/jsxRuntime.jsx(MetricCard$1, {
       title: title,
       value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
       caption: metricInfo[title].subValue,
@@ -16301,7 +16301,7 @@ var EmailSection = function EmailSection(_ref) {
     });
   }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByConversion, hasEmailOverview]);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsxRuntime.jsx(MetricCard, {
+    return /*#__PURE__*/jsxRuntime.jsx(MetricCard$1, {
       title: title,
       value: metricInfo[title].value,
       caption: metricInfo[title].subValue,
@@ -16490,6 +16490,7 @@ exports.Dashboard = Dashboard;
 exports.DashboardReport = DashboardReport;
 exports.DashboardTheme = theme;
 exports.DonorBehavior = DonorBehavior;
+exports.MetricCard = MetricCard$1;
 exports.MetricSelector = MetricSelector;
 exports.NewOverview = NewOverview;
 exports.PerformanceSection = PerformanceSection;