@ammarkhalidfarooq/dashboard-package 0.4.45 → 0.4.46

package/dist/index.cjs.js

@@ -6294,6 +6294,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 +6340,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,