@ammarkhalidfarooq/dashboard-package 0.6.1 → 0.6.3

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import React, { Suspense, lazy, useMemo, useState, useRef, useEffect } from 'react';
-import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Stack } from '@mui/material';
+import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, Stack, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
 import { MoreHoriz, TrendingUp, MoreVert, Check, InfoOutlined, Settings, Adjust, PaidOutlined, PeopleAltOutlined, FavoriteOutlined, PersonOutlined, IndeterminateCheckBoxOutlined, SearchOutlined, HighlightOff, NearMe, Email, NotInterested } from '@mui/icons-material';
 import { createTheme, useTheme } from '@mui/material/styles';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -576,31 +576,37 @@ var RenderChartCard = function RenderChartCard(_ref) {
     _ref$md = _ref.md,
     md = _ref$md === void 0 ? 4 : _ref$md,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? "area" : _ref$type;
+    type = _ref$type === void 0 ? "area" : _ref$type,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    _ref$cardSx = _ref.cardSx,
+    cardSx = _ref$cardSx === void 0 ? {} : _ref$cardSx,
+    _ref$contentSx = _ref.contentSx,
+    contentSx = _ref$contentSx === void 0 ? {} : _ref$contentSx;
   return /*#__PURE__*/jsx(Grid, {
     item: true,
     xs: 12,
     md: md,
-    sx: {
+    sx: _objectSpread2({
       display: "flex",
       paddingTop: "0px !important"
-    },
+    }, sx),
     children: /*#__PURE__*/jsx(Card, {
-      sx: {
+      sx: _objectSpread2({
         width: "100%",
         display: "flex",
         flexDirection: "column",
         boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
         borderRadius: 4,
         border: "1px solid #f0f0f0"
-      },
+      }, cardSx),
       children: /*#__PURE__*/jsxs(CardContent, {
-        sx: {
+        sx: _objectSpread2({
           p: item.exportMode ? 2 : 3,
           flexGrow: 1,
           display: "flex",
           flexDirection: "column"
-        },
+        }, contentSx),
         children: [/*#__PURE__*/jsxs(Box, {
           sx: {
             display: "flex",
@@ -903,24 +909,29 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
     gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu,
     height = _ref.height,
     _ref$compact = _ref.compact,
-    compact = _ref$compact === void 0 ? false : _ref$compact;
+    compact = _ref$compact === void 0 ? false : _ref$compact,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    _ref$headerSx = _ref.headerSx,
+    headerSx = _ref$headerSx === void 0 ? {} : _ref$headerSx,
+    _ref$tableSx = _ref.tableSx,
+    tableSx = _ref$tableSx === void 0 ? {} : _ref$tableSx;
   return /*#__PURE__*/jsxs(Box, {
-    sx: {
+    sx: _objectSpread2({
       bgcolor: "#fff",
       borderRadius: compact ? 3 : 4,
       border: "1px solid #f0f0f0",
       boxShadow: compact ? "0 2px 12px rgba(0,0,0,0.05)" : "0 4px 24px rgba(0,0,0,0.06)",
       p: compact ? 1.5 : 3,
       height: height
-      // height: "100%",
-    },
+    }, sx),
     children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
+      sx: _objectSpread2({
         display: "flex",
         justifyContent: "space-between",
         alignItems: "flex-start",
         mb: compact ? 1.25 : 3
-      },
+      }, headerSx),
       children: [/*#__PURE__*/jsxs(Box, {
         children: [/*#__PURE__*/jsx(Typography, {
           sx: {
@@ -948,9 +959,9 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
         children: actionLabel
       })]
     }), /*#__PURE__*/jsx(Box, {
-      sx: {
+      sx: _objectSpread2({
         overflowX: compact ? "hidden" : "auto"
-      },
+      }, tableSx),
       children: /*#__PURE__*/jsxs(Box, {
         sx: {
           minWidth: compact ? 0 : "600px"
@@ -1148,6 +1159,80 @@ 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,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    _ref$titleSx = _ref.titleSx,
+    titleSx = _ref$titleSx === void 0 ? {} : _ref$titleSx,
+    _ref$valueSx = _ref.valueSx,
+    valueSx = _ref$valueSx === void 0 ? {} : _ref$valueSx,
+    _ref$captionSx = _ref.captionSx,
+    captionSx = _ref$captionSx === void 0 ? {} : _ref$captionSx,
+    _ref$avatarSx = _ref.avatarSx,
+    avatarSx = _ref$avatarSx === void 0 ? {} : _ref$avatarSx;
+  return /*#__PURE__*/jsxs(Box, {
+    sx: _objectSpread2({
+      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)"
+    }, sx),
+    onClick: onClick,
+    children: [/*#__PURE__*/jsxs(Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsx(Typography, {
+        sx: _objectSpread2({
+          color: active ? "#818CF8" : "#999EAA",
+          fontSize: 13,
+          fontWeight: 500,
+          letterSpacing: 0
+        }, titleSx),
+        children: title
+      }), /*#__PURE__*/jsx(Avatar, {
+        sx: _objectSpread2({
+          width: 30,
+          height: 30,
+          bgcolor: warning ? "#FFF3CF" : error ? "#fee2e2" : "#EEF2FF",
+          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5"
+        }, avatarSx),
+        children: icon
+      })]
+    }), /*#__PURE__*/jsx(Typography, {
+      sx: _objectSpread2({
+        fontSize: 22,
+        fontWeight: 700,
+        color: active ? "#4F46E5" : "#050509",
+        lineHeight: 1.15
+      }, valueSx),
+      children: value
+    }), /*#__PURE__*/jsx(Typography, {
+      sx: _objectSpread2({
+        fontSize: 12,
+        fontWeight: 500,
+        color: caption !== null && caption !== void 0 && caption.includes("failed") ? "#4F46E5" : error ? "#ef4444" : "#0B8F61"
+      }, captionSx),
+      children: caption
+    })]
+  });
+};
+
 function formatNumber(num) {
   if (num >= 1000000000) {
     return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
@@ -1547,7 +1632,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,
@@ -1671,7 +1756,7 @@ var ReportKpiSection = function ReportKpiSection(_ref3) {
         gap: exportMode ? 1 : 2
       },
       children: metrics.map(function (m) {
-        return /*#__PURE__*/jsx(MetricCard$1, _objectSpread2(_objectSpread2({}, m), {}, {
+        return /*#__PURE__*/jsx(MetricCard, _objectSpread2(_objectSpread2({}, m), {}, {
           exportMode: exportMode
         }), m.title);
       })
@@ -14433,72 +14518,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__*/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
-    })]
-  });
-};
-
 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,
@@ -14541,7 +14560,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
       });
@@ -14569,7 +14588,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Net Raised": {
-      value: "$".concat(formatNumber(apiData === null || apiData === void 0 || (_apiData$overviewStat4 = apiData.overviewStats) === null || _apiData$overviewStat4 === void 0 || (_apiData$overviewStat4 = _apiData$overviewStat4.overview) === null || _apiData$overviewStat4 === void 0 ? void 0 : _apiData$overviewStat4.netRevenue)),
+      value: "$".concat(formatNumber((apiData === null || apiData === void 0 || (_apiData$overviewStat4 = apiData.overviewStats) === null || _apiData$overviewStat4 === void 0 || (_apiData$overviewStat4 = _apiData$overviewStat4.overview) === null || _apiData$overviewStat4 === void 0 ? void 0 : _apiData$overviewStat4.netRevenue).toFixed(2))),
       subValue: "".concat(Number((_apiData$overviewStat5 = apiData === null || apiData === void 0 || (_apiData$overviewStat6 = apiData.overviewStats) === null || _apiData$overviewStat6 === void 0 || (_apiData$overviewStat6 = _apiData$overviewStat6.overview.growthPercentage) === null || _apiData$overviewStat6 === void 0 ? void 0 : _apiData$overviewStat6.netRevenue) !== null && _apiData$overviewStat5 !== void 0 ? _apiData$overviewStat5 : 0).toFixed(2), "% vs ").concat(dateName !== null && dateName !== void 0 ? dateName : "previous period"),
       label: "Net Raised",
       icon: /*#__PURE__*/jsx(FavoriteOutlined, {}),
@@ -14578,7 +14597,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__*/jsx(PeopleAltOutlined, {}),
@@ -14587,7 +14606,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Avg donation": {
-      value: "$".concat(formatNumber(apiData === null || apiData === void 0 || (_apiData$overviewStat0 = apiData.overviewStats) === null || _apiData$overviewStat0 === void 0 || (_apiData$overviewStat0 = _apiData$overviewStat0.overview) === null || _apiData$overviewStat0 === void 0 ? void 0 : _apiData$overviewStat0.overallAVGDonations)),
+      value: "$".concat(formatNumber((apiData === null || apiData === void 0 || (_apiData$overviewStat0 = apiData.overviewStats) === null || _apiData$overviewStat0 === void 0 || (_apiData$overviewStat0 = _apiData$overviewStat0.overview) === null || _apiData$overviewStat0 === void 0 ? void 0 : _apiData$overviewStat0.overallAVGDonations).toFixed(2))),
       subValue: "".concat(Number((_apiData$overviewStat1 = apiData === null || apiData === void 0 || (_apiData$overviewStat10 = apiData.overviewStats) === null || _apiData$overviewStat10 === void 0 || (_apiData$overviewStat10 = _apiData$overviewStat10.overview.growthPercentage) === null || _apiData$overviewStat10 === void 0 ? void 0 : _apiData$overviewStat10.overallAVGDonations) !== null && _apiData$overviewStat1 !== void 0 ? _apiData$overviewStat1 : 0).toFixed(2), "% vs ").concat(dateName !== null && dateName !== void 0 ? dateName : "last month"),
       label: "Average Donation Amount",
       icon: /*#__PURE__*/jsx(PaidOutlined, {}),
@@ -14596,7 +14615,7 @@ var OverallSection = function OverallSection(_ref) {
       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"),
+      value: "".concat(formatNumber(((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 0).toFixed(2)), "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: /*#__PURE__*/jsx(TrendingUp, {}),
@@ -14605,7 +14624,7 @@ var OverallSection = function OverallSection(_ref) {
       warning: false
     },
     "Conversion": {
-      value: "".concat(formatNumber(apiData === null || apiData === void 0 || (_apiData$overviewStat11 = apiData.overviewStats) === null || _apiData$overviewStat11 === void 0 || (_apiData$overviewStat11 = _apiData$overviewStat11.overview) === null || _apiData$overviewStat11 === void 0 ? void 0 : _apiData$overviewStat11.conversionRate), "%") || "0.0%",
+      value: "".concat(formatNumber((apiData === null || apiData === void 0 || (_apiData$overviewStat11 = apiData.overviewStats) === null || _apiData$overviewStat11 === void 0 || (_apiData$overviewStat11 = _apiData$overviewStat11.overview) === null || _apiData$overviewStat11 === void 0 ? void 0 : _apiData$overviewStat11.conversionRate).toFixed(2)), "%") || "0.0%",
       subValue: "".concat(((_apiData$overviewStat12 = apiData === null || apiData === void 0 || (_apiData$overviewStat13 = apiData.overviewStats) === null || _apiData$overviewStat13 === void 0 || (_apiData$overviewStat13 = _apiData$overviewStat13.overview) === null || _apiData$overviewStat13 === void 0 || (_apiData$overviewStat13 = _apiData$overviewStat13.growthPercentage) === null || _apiData$overviewStat13 === void 0 ? void 0 : _apiData$overviewStat13.conversionRate) !== null && _apiData$overviewStat12 !== void 0 ? _apiData$overviewStat12 : 0).toFixed(2), "%") || "0%",
       label: "Conversion Rate",
       icon: /*#__PURE__*/jsx(Adjust, {}),
@@ -14649,7 +14668,7 @@ var OverallSection = function OverallSection(_ref) {
   }
   console.log("DONOR MIX", donorMix);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsx(MetricCard
+    return /*#__PURE__*/jsx(MetricCard$1
     // key={title}
     , {
       title: title,
@@ -15111,7 +15130,7 @@ var PaidSection = function PaidSection() {
     }
   };
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsx(MetricCard
+    return /*#__PURE__*/jsx(MetricCard$1
     // key={title}
     , {
       title: title,
@@ -15610,7 +15629,7 @@ var OrganicSection = function OrganicSection(_ref) {
     };
   }, [apiData === null || apiData === void 0 ? void 0 : apiData.sourceBreakdown, hasOrganicOverview]);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsx(MetricCard, {
+    return /*#__PURE__*/jsx(MetricCard$1, {
       title: title,
       value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
       caption: metricInfo[title].subValue,
@@ -16299,7 +16318,7 @@ var EmailSection = function EmailSection(_ref) {
     });
   }, [apiData === null || apiData === void 0 ? void 0 : apiData.topCampaignsByConversion, hasEmailOverview]);
   var renderCard = function renderCard(title) {
-    return /*#__PURE__*/jsx(MetricCard, {
+    return /*#__PURE__*/jsx(MetricCard$1, {
       title: title,
       value: metricInfo[title].value,
       caption: metricInfo[title].subValue,
@@ -16482,5 +16501,5 @@ var EmailSection$1 = /*#__PURE__*/Object.freeze({
   default: EmailSection
 });
 
-export { AbandonedDonationRecovery, ActiveCampaignsCard, Dashboard, DashboardReport, theme as DashboardTheme, DonorBehavior, MetricSelector, NewOverview, PerformanceSection, RecurringRevenueSection, RenderChartCard, RevenueChart, UTMPerformance, themeColors, themeTypography };
+export { AbandonedDonationRecovery, ActiveCampaignsCard, Dashboard, DashboardReport, theme as DashboardTheme, DonorBehavior, MetricCard$1 as MetricCard, MetricSelector, NewOverview, PerformanceSection, RecurringRevenueSection, RenderChartCard, RevenueChart, UTMPerformance, themeColors, themeTypography };
 //# sourceMappingURL=index.es.js.map