@ammarkhalidfarooq/dashboard-package 0.4.45 → 0.4.47

package/dist/index.cjs.js

@@ -700,99 +700,6 @@ var Dashboard = function Dashboard(_ref) {
   });
 };
 
-var DisplayCard = function DisplayCard(_ref) {
-  var title = _ref.title,
-    value = _ref.value,
-    subValue = _ref.subValue,
-    Icon = _ref.icon,
-    onClick = _ref.onClick,
-    _ref$sx = _ref.sx,
-    sx = _ref$sx === void 0 ? {} : _ref$sx,
-    _ref$isActive = _ref.isActive,
-    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
-  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-    onClick: onClick,
-    sx: _objectSpread2({
-      height: "100px",
-      borderRadius: "24px",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      boxShadow: "rgba(0, 0, 0, 0.06) 0px 4px 15px 0px",
-      // boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      // padding: "16px 16px 16px 18px",
-      py: "10px",
-      px: "16px",
-      cursor: "pointer",
-      bgcolor: "#fff",
-      border: isActive ? "1px solid rgb(99, 99, 230)" : "none",
-      // border: "2px solid #f0f0f0",
-      transition: "all 0.3s ease"
-    }, sx),
-    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 0.5
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-        sx: {
-          fontWeight: "400",
-          color: isActive ? "#c1c1f5" : "#a1a1a8",
-          fontSize: "14px",
-          lineHeight: "16px",
-          textAlign: "left"
-        },
-        children: title
-      }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-        sx: {
-          lineHeight: "1.2",
-          textAlign: "left",
-          color: isActive ? "#6363e6" : "#000",
-          fontSize: "20px",
-          fontWeight: "700",
-          mb: 0.5
-        },
-        children: statusValue(value)
-      }), subValue && /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
-        sx: {
-          fontSize: "11px",
-          color: typeof subValue === "string" && (subValue.includes("%") || subValue.includes("new") || subValue.includes("x")) && !subValue.includes("/") && !subValue.includes("pass-through") ? "#22C55E" : "rgba(0, 0, 0, 0.4)",
-          fontWeight: "500",
-          display: "flex",
-          alignItems: "center",
-          gap: 0.5
-        },
-        children: [typeof subValue === "string" && (subValue.includes("%") || subValue.includes("new") || subValue.includes("x")) && !subValue.includes("/") && !subValue.includes("pass-through") && /*#__PURE__*/jsxRuntime.jsx("span", {
-          style: {
-            fontSize: "14px"
-          },
-          children: "\u25B2"
-        }), subValue]
-      })]
-    }), Icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-      sx: {
-        width: "44px",
-        height: "44px",
-        borderRadius: "50%",
-        backgroundColor: "#f7f7ff",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: "rgb(99, 99, 230)"
-      },
-      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-        sx: {
-          fontSize: "20px"
-        }
-      })
-    })]
-  });
-};
-var statusValue = function statusValue(value) {
-  return _typeof(value) === "object" && value !== null ? value.value !== undefined ? value.value : JSON.stringify(value) : value;
-};
-
 var OverallSection$2 = /*#__PURE__*/React.lazy(function () {
   return Promise.resolve().then(function () { return OverallSection$1; });
 });
@@ -6294,6 +6201,41 @@ var OrganicSection = function OrganicSection(_ref) {
       error: false
     }
   };
+  var renderCard = function renderCard(title) {
+    return /*#__PURE__*/jsxRuntime.jsx(MetricCard
+    // key={title}
+    , {
+      title: title,
+      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);
+      },
+      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 = {
     label: activeMetric,
@@ -6305,47 +6247,17 @@ var OrganicSection = function OrganicSection(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
-        display: "flex",
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "1fr",
+          sm: "1fr 1fr",
+          md: "1fr 1fr 1fr",
+          lg: "repeat(6, 1fr)"
+        },
         gap: 2,
-        mb: 2,
-        flexWrap: "wrap"
+        mb: 1
       },
-      children: Object.keys(metricInfo).map(function (title) {
-        return /*#__PURE__*/jsxRuntime.jsx(MetricCard
-        // key={title}
-        , {
-          title: title,
-          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);
-          },
-          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={{
-        //     flex: 1,
-        //     // border:
-        //     //   activeMetric === title
-        //     //     ? "2px solid rgb(99, 99, 230)"
-        //     //     : "2px solid #f0f0f0",
-        //   }}
-        // />
-;
-      })
+      children: Object.keys(metricInfo).map(renderCard)
     }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
       container: true,
       spacing: 3,
@@ -6622,77 +6534,126 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
 var EmailSection = function EmailSection() {
   var metricInfo = {
     "Total raised": {
-      value: "$48,920",
+      value: "$".concat(formatNumber(48920)),
       subValue: "12% vs last month",
-      icon: iconsMaterial.PaidOutlined,
-      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+      data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
+      money: true,
+      error: false,
+      warning: false
     },
     Donations: {
       value: "62",
       subValue: "12% vs last month",
-      icon: iconsMaterial.FavoriteOutlined,
-      data: [4, 8, 5, 12, 10, 11, 12]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.FavoriteOutlined, {}),
+      data: [4, 8, 5, 12, 10, 11, 12],
+      money: false,
+      error: false,
+      warning: false
     },
     "Conversion rate": {
       value: "3.2%",
       subValue: "12% vs last month",
-      icon: iconsMaterial.Adjust,
-      data: [2.8, 3.1, 2.9, 3.4, 3.2, 3.1, 3.2]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+      data: [2.8, 3.1, 2.9, 3.4, 3.2, 3.1, 3.2],
+      money: false,
+      error: false,
+      warning: false
     },
     CTR: {
       value: "8.1%",
       subValue: "12% vs last month",
-      icon: iconsMaterial.NotInterested,
-      data: [7.2, 8.4, 7.8, 8.9, 8.1, 8.0, 8.1]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NotInterested, {}),
+      data: [7.2, 8.4, 7.8, 8.9, 8.1, 8.0, 8.1],
+      money: false,
+      error: false,
+      warning: false
     },
     "Revenue per email": {
-      value: "$2.45",
+      value: "$".concat(formatNumber(2.45)),
       subValue: "12% vs last month",
-      icon: iconsMaterial.IndeterminateCheckBoxOutlined,
-      data: [2.1, 2.5, 2.3, 2.8, 2.4, 2.4, 2.45]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
+      data: [2.1, 2.5, 2.3, 2.8, 2.4, 2.4, 2.45],
+      money: true,
+      error: false,
+      warning: false
     },
     "Open rate": {
       value: "42.3%",
       subValue: "12% vs last month",
-      icon: iconsMaterial.Email,
-      data: [38, 44, 40, 46, 42, 41, 42.3]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Email, {}),
+      data: [38, 44, 40, 46, 42, 41, 42.3],
+      money: false,
+      error: false,
+      warning: false
     },
     Clicks: {
       value: "1,612",
       subValue: "12% vs last month",
-      icon: iconsMaterial.NearMe,
-      data: [210, 240, 220, 280, 250, 245, 245]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+      data: [210, 240, 220, 280, 250, 245, 245],
+      money: false,
+      error: false,
+      warning: false
     },
     "Unique Clicks": {
-      value: "1,148",
+      value: "".concat(formatNumber(1148)),
       subValue: "12% vs last month",
-      icon: iconsMaterial.NearMe,
-      data: [150, 180, 160, 210, 190, 185, 185]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+      data: [150, 180, 160, 210, 190, 185, 185],
+      money: false,
+      error: false,
+      warning: false
     },
     "Bounce rate": {
       value: "1.8%",
       subValue: "12% vs last month",
-      icon: iconsMaterial.HighlightOff,
-      data: [2.1, 1.9, 1.8, 1.7, 1.8, 1.8, 1.8]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
+      data: [2.1, 1.9, 1.8, 1.7, 1.8, 1.8, 1.8],
+      money: false,
+      error: false,
+      warning: false
     },
     "Revenue per Click": {
-      value: "$30.35",
+      value: "$".concat(formatNumber(30.35)),
       subValue: "12% vs last month",
-      icon: iconsMaterial.HighlightOff,
-      data: [28, 32, 29, 34, 30, 30, 30.35]
+      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
+      data: [28, 32, 29, 34, 30, 30, 30.35],
+      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,
-      icon: metricInfo[title].icon
-      // onClick={() => setActiveMetric(title)}
-      // isActive={activeMetric === title}
-      ,
-      sx: {}
-    }, title);
+      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);
+      },
+      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={{
+    //   }}
+    // />
+;
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {