@ammarkhalidfarooq/dashboard-package 0.4.42 → 0.4.44

package/dist/index.cjs.js

@@ -5147,6 +5147,70 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   });
 };
 
+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
+      },
+      minHeight: 108,
+      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: 42,
+          height: 42,
+          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$totalRaisedP, _apiData$netRaisedCar, _apiData$netRaisedPre, _apiData$averageDonat, _apiData$averageDonat2, _apiData$roasCard, _apiData$roasCardPrev, _orderBumpData$prevTr;
   var _ref$apiData = _ref.apiData,
@@ -5209,37 +5273,55 @@ var OverallSection = function OverallSection(_ref) {
       value: "$".concat(formatNumber(apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedCard)) || "$240.9K",
       subValue: "".concat(Number((_apiData$totalRaisedP = apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedPrev) !== null && _apiData$totalRaisedP !== void 0 ? _apiData$totalRaisedP : 0).toFixed(2), "% vs ").concat(dateName || "last month"),
       label: "Total Raised",
-      icon: iconsMaterial.PaidOutlined
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+      money: true,
+      error: false,
+      warning: false
     },
     "Net Raised": {
       value: "$".concat(formatNumber((_apiData$netRaisedCar = apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedCard) !== null && _apiData$netRaisedCar !== void 0 ? _apiData$netRaisedCar : 0)),
       subValue: "".concat(Number((_apiData$netRaisedPre = apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedPrev) !== null && _apiData$netRaisedPre !== void 0 ? _apiData$netRaisedPre : 0).toFixed(2), "% vs ").concat(dateName !== null && dateName !== void 0 ? dateName : "previous period"),
       label: "Net Raised",
-      icon: iconsMaterial.FavoriteOutlined
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.FavoriteOutlined, {}),
+      money: true,
+      error: false,
+      warning: false
     },
     "Total Donors": {
       value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonorsCard) || "215",
       subValue: "".concat(apiData === null || apiData === void 0 ? void 0 : apiData.totalDonorsPrev, " new") || "31 new",
       label: "Total Donors",
-      icon: iconsMaterial.PeopleAltOutlined
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PeopleAltOutlined, {}),
+      money: false,
+      error: false,
+      warning: false
     },
     "Avg donation": {
       value: "$".concat(formatNumber((_apiData$averageDonat = apiData === null || apiData === void 0 ? void 0 : apiData.averageDonationsCard) !== null && _apiData$averageDonat !== void 0 ? _apiData$averageDonat : 0)),
       subValue: "".concat(Number((_apiData$averageDonat2 = apiData === null || apiData === void 0 ? void 0 : apiData.averageDonationsCardPrev) !== null && _apiData$averageDonat2 !== void 0 ? _apiData$averageDonat2 : 0).toFixed(2), "% vs ").concat(dateName !== null && dateName !== void 0 ? dateName : "last month"),
       label: "Average Donation Amount",
-      icon: iconsMaterial.PaidOutlined
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+      money: true,
+      error: false,
+      warning: false
     },
     "ROAS": {
       value: "".concat(formatNumber((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 0), "x"),
       subValue: "".concat(Number((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0).toFixed(2), "x vs ").concat(dateName !== null && dateName !== void 0 ? dateName : "last month"),
       label: "ROAS",
-      icon: iconsMaterial.TrendingUp
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {}),
+      money: false,
+      error: false,
+      warning: false
     },
     "Conversion": {
       value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionCard) || "1.7%",
       subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.conversionSub) || "215 / 12.4K",
       label: "Conversion Rate",
-      icon: iconsMaterial.Adjust
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+      money: false,
+      error: false,
+      warning: false
     }
   };
   var activeCampaignsData = (apiData === null || apiData === void 0 ? void 0 : apiData.activeCampaigns) || [];
@@ -5248,22 +5330,39 @@ var OverallSection = function OverallSection(_ref) {
   var newDonorsPerc = totalDonorsMix > 0 ? Math.round(donorMix.newDonors / totalDonorsMix * 100) : 0;
   var returningDonorsPerc = totalDonorsMix > 0 ? Math.round(donorMix.returningDonors / totalDonorsMix * 100) : 0;
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+    return /*#__PURE__*/jsxRuntime.jsx(MetricCard
+    // key={title}
+    , {
       title: title,
-      value: metricInfo[title].value,
-      subValue: metricInfo[title].subValue,
+      value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
+      caption: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
+      error: metricInfo[title].error,
+      active: activeMetric === title,
       onClick: function onClick() {
         return setActiveMetric(title);
       },
-      isActive: activeMetric === title,
-      sx: {
-        // border:
-        //   activeMetric === title
-        //     ? "1px solid rgb(99, 99, 230)"
-        //     : "2px solid #f0f0f0",
-      }
-    }, title);
+      sx: metricInfo[title].error ? {
+        border: "2px solid #ef4444",
+        bgcolor: "#fffafa"
+      } : {}
+    })
+    // <DisplayCard
+    //   key={title}
+    //   title={title}
+    //   value={metricInfo[title].value}
+    //   subValue={metricInfo[title].subValue}
+    //   icon={metricInfo[title].icon}
+    //   onClick={() => setActiveMetric(title)}
+    //   isActive={activeMetric === title}
+    //   sx={{
+    //     // border:
+    //     //   activeMetric === title
+    //     //     ? "1px solid rgb(99, 99, 230)"
+    //     //     : "2px solid #f0f0f0",
+    //   }}
+    // />
+;
   };
   var extendedCharts = getExtendedCharts();
   var selectedInfo = metricInfo[activeMetric];
@@ -5829,65 +5928,100 @@ var PaidSection = function PaidSection() {
   var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
   var metricInfo = {
     "Total Spent": {
-      value: "$80,313",
+      value: "$".concat(formatNumber(80313)),
       subValue: "12% vs last month",
       chartLabel: "Daily Spend",
       data: [800, 950, 700, 1100, 900, 1200, 1300],
-      icon: iconsMaterial.IndeterminateCheckBoxOutlined
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
+      money: true,
+      error: false,
+      warning: false
     },
     "Revinue Raised": {
-      value: "$240,398",
+      value: "$".concat(formatNumber(240398)),
       subValue: "12% vs last month",
       chartLabel: "Daily Revenue",
       data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
-      icon: iconsMaterial.PaidOutlined
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+      money: true,
+      error: false,
+      warning: false
     },
     ROAS: {
       value: "3.0",
       subValue: "12% vs last month",
       chartLabel: "ROAS Trend",
       data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
-      icon: iconsMaterial.TrendingUp
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {}),
+      money: false,
+      error: false,
+      warning: false
     },
     "Cost per donor": {
-      value: "$373",
+      value: "$".concat(formatNumber(373)),
       subValue: "12% vs last month",
       chartLabel: "CPA Trend",
       data: [350, 380, 360, 410, 390, 370, 373],
-      icon: iconsMaterial.PersonOutlined
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PersonOutlined, {}),
+      money: true,
+      error: false,
+      warning: false
     },
     "Conversion rate": {
       value: "3.1%",
       subValue: "12% vs last month",
       chartLabel: "Conversion Rate",
       data: [2.8, 3.0, 2.9, 3.4, 3.2, 3.1, 3.1],
-      icon: iconsMaterial.Adjust
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+      money: false,
+      error: false,
+      warning: false
     },
     "Avg donation": {
-      value: "$130.58",
+      value: "$".concat(formatNumber(130.58)),
       subValue: "12% vs last month",
       chartLabel: "Average Donation",
       data: [120, 135, 125, 140, 130, 128, 130.58],
-      icon: iconsMaterial.PaidOutlined
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+      money: true,
+      error: false,
+      warning: false
     }
   };
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
+    return /*#__PURE__*/jsxRuntime.jsx(MetricCard
+    // key={title}
+    , {
       title: title,
-      value: metricInfo[title].value,
-      subValue: metricInfo[title].subValue,
+      value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
+      caption: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
+      error: metricInfo[title].error,
+      active: activeMetric === title,
       onClick: function onClick() {
         return setActiveMetric(title);
       },
-      isActive: activeMetric === title,
-      sx: {
-        // border:
-        //   activeMetric === title
-        //     ? "2px solid rgb(99, 99, 230)"
-        //     : "2px solid #f0f0f0",
-      }
-    }, title);
+      sx: metricInfo[title].error ? {
+        border: "2px solid #ef4444",
+        bgcolor: "#fffafa"
+      } : {}
+    })
+    // <DisplayCard
+    //   key={title}
+    //   title={title}
+    //   value={metricInfo[title].value}
+    //   subValue={metricInfo[title].subValue}
+    //   icon={metricInfo[title].icon}
+    //   onClick={() => setActiveMetric(title)}
+    //   isActive={activeMetric === title}
+    //   sx={{
+    //     // border:
+    //     //   activeMetric === title
+    //     //     ? "2px solid rgb(99, 99, 230)"
+    //     //     : "2px solid #f0f0f0",
+    //   }}
+    // />
+;
   };
   var selectedInfo = metricInfo[activeMetric];
   var mainChart = {