@ammarkhalidfarooq/dashboard-package 0.4.43 → 0.4.45

package/dist/index.es.js

@@ -5926,65 +5926,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: IndeterminateCheckBoxOutlined
+      icon: /*#__PURE__*/jsx(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: PaidOutlined
+      icon: /*#__PURE__*/jsx(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: TrendingUp
+      icon: /*#__PURE__*/jsx(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: PersonOutlined
+      icon: /*#__PURE__*/jsx(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: Adjust
+      icon: /*#__PURE__*/jsx(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: PaidOutlined
+      icon: /*#__PURE__*/jsx(PaidOutlined, {}),
+      money: true,
+      error: false,
+      warning: false
     }
   };
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsx(DisplayCard, {
+    return /*#__PURE__*/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 = {
@@ -6203,40 +6238,58 @@ var OrganicSection = function OrganicSection(_ref) {
   var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
   var metricInfo = {
     "Organic Users": {
-      value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
+      value: "".concat(formatNumber(8420)),
       subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
       data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
-      icon: PeopleAltOutlined
+      icon: /*#__PURE__*/jsx(PeopleAltOutlined, {}),
+      money: false,
+      warning: false,
+      error: false
     },
     "Search Clicks": {
-      value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
+      value: "".concat(formatNumber(5842)),
       subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
       data: [1500, 1800, 1600, 2200, 2000, 2400, 2800],
-      icon: SearchOutlined
+      icon: /*#__PURE__*/jsx(SearchOutlined, {}),
+      money: false,
+      warning: false,
+      error: false
     },
     Donations: {
-      value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
+      value: "".concat(formatNumber(420)),
       subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
       data: [15, 22, 18, 30, 25, 35, 42],
-      icon: FavoriteOutlined
+      icon: /*#__PURE__*/jsx(FavoriteOutlined, {}),
+      money: false,
+      warning: false,
+      error: false
     },
     "Conversion Rate": {
       value: "3.1%",
       subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
       data: [2.5, 2.7, 2.6, 3.1, 3.0, 2.9, 3.1],
-      icon: Adjust
+      icon: /*#__PURE__*/jsx(Adjust, {}),
+      money: false,
+      warning: false,
+      error: false
     },
     "Revenue raised": {
-      value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
+      value: "$".concat(formatNumber(240398)),
       subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
       data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
-      icon: PaidOutlined
+      icon: /*#__PURE__*/jsx(PaidOutlined, {}),
+      money: true,
+      warning: false,
+      error: false
     },
     "Avg donation": {
-      value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
+      value: "$".concat(formatNumber(130.58)),
       subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
       data: [110, 125, 120, 135, 130, 128, 130.58],
-      icon: PaidOutlined
+      icon: /*#__PURE__*/jsx(PaidOutlined, {}),
+      money: true,
+      warning: false,
+      error: false
     }
   };
   var selectedInfo = metricInfo[activeMetric];
@@ -6256,23 +6309,40 @@ var OrganicSection = function OrganicSection(_ref) {
         flexWrap: "wrap"
       },
       children: Object.keys(metricInfo).map(function (title) {
-        return /*#__PURE__*/jsx(DisplayCard, {
+        return /*#__PURE__*/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: {
-            flex: 1
-            // 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={{
+        //     flex: 1,
+        //     // border:
+        //     //   activeMetric === title
+        //     //     ? "2px solid rgb(99, 99, 230)"
+        //     //     : "2px solid #f0f0f0",
+        //   }}
+        // />
+;
       })
     }), /*#__PURE__*/jsxs(Grid, {
       container: true,