@ammarkhalidfarooq/dashboard-package 0.6.23 → 0.6.24

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import React, { Suspense, lazy, useState, useRef, useEffect, useMemo } from 'react';
 import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, Stack, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } 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 { MoreHoriz, TrendingDown, 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';
 import Grid$1 from '@mui/material/Grid';
@@ -559,6 +559,51 @@ var RevenueChart = function RevenueChart(_ref) {
   }, "".concat(id, "-").concat(type, "-").concat(chartSeries.length));
 };
 
+var TREND_UP_COLOR = "#22C55E";
+var TREND_DOWN_COLOR = "#EF4444";
+function getTrendDirection(valueOrText) {
+  var text = String(valueOrText !== null && valueOrText !== void 0 ? valueOrText : "").trim();
+  if (text.includes("▼")) return "down";
+  if (text.includes("▲")) return "up";
+  var match = text.match(/-?\d+(\.\d+)?/);
+  if (!match) return "neutral";
+  var n = Number(match[0]);
+  if (n < 0) return "down";
+  if (n > 0) return "up";
+  return "neutral";
+}
+function getTrendColor(valueOrText) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$up = _ref.up,
+    up = _ref$up === void 0 ? TREND_UP_COLOR : _ref$up,
+    _ref$down = _ref.down,
+    down = _ref$down === void 0 ? TREND_DOWN_COLOR : _ref$down,
+    _ref$neutral = _ref.neutral,
+    neutral = _ref$neutral === void 0 ? up : _ref$neutral;
+  var direction = getTrendDirection(valueOrText);
+  if (direction === "down") return down;
+  if (direction === "up") return up;
+  return neutral;
+}
+function getTrendArrow(valueOrText) {
+  var direction = getTrendDirection(valueOrText);
+  if (direction === "down") return "▼";
+  if (direction === "up") return "▲";
+  return "";
+}
+function formatNumber(num) {
+  if (num >= 1000000000) {
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
+  }
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
+  }
+  return (num !== null && num !== void 0 ? num : 0).toString();
+}
+
 var RenderChartCard = function RenderChartCard(_ref) {
   var item = _ref.item,
     index = _ref.index,
@@ -581,6 +626,13 @@ var RenderChartCard = function RenderChartCard(_ref) {
     _ref$contentSx = _ref.contentSx,
     contentSx = _ref$contentSx === void 0 ? {} : _ref$contentSx;
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
+  var trendText = item.trend || "18%";
+  var trendColor = getTrendColor(trendText, {
+    up: "#054835ff",
+    down: "#EF4444"
+  });
+  var trendArrow = getTrendArrow(trendText);
+  var trendBadgeBg = trendColor === "#EF4444" ? "#fee2e2" : "#8df3be9a";
   return /*#__PURE__*/jsx(Grid, {
     item: true,
     xs: 12,
@@ -651,17 +703,17 @@ var RenderChartCard = function RenderChartCard(_ref) {
                   display: "flex",
                   alignItems: "center",
                   gap: 0.5,
-                  bgcolor: "#8df3be9a",
-                  color: "#054835ff",
+                  bgcolor: trendBadgeBg,
+                  color: trendColor,
                   px: 1,
                   py: 0.5,
                   borderRadius: "100px",
                   fontSize: "12px",
                   fontWeight: 600
                 },
-                children: [/*#__PURE__*/jsx("span", {
-                  children: "\u25B2"
-                }), item.trend || "18% vs last month"]
+                children: [trendArrow && /*#__PURE__*/jsx("span", {
+                  children: trendArrow
+                }), trendText === "18%" && !item.trend ? "18% vs last month" : trendText]
               })]
             })]
           }) : /*#__PURE__*/jsxs(Box, {
@@ -1184,12 +1236,13 @@ var MetricCard$1 = function MetricCard(_ref) {
     avatarSx = _ref$avatarSx === void 0 ? {} : _ref$avatarSx;
   var captionText = String(caption !== null && caption !== void 0 ? caption : "");
   var isPercentCaption = captionText.includes("%");
-  var firstNumberMatch = captionText.match(/-?\d+(\.\d+)?/);
-  var trendValue = firstNumberMatch ? Number(firstNumberMatch[0]) : null;
-  var isNegativeTrend = isPercentCaption && trendValue !== null && trendValue < 0;
-  var isPositiveTrend = isPercentCaption && trendValue !== null && trendValue > 0;
-  var trendPrefix = isNegativeTrend ? "▼ " : isPositiveTrend ? "▲ " : "";
-  var captionColor = captionText.includes("failed") ? "#4F46E5" : error || isNegativeTrend ? "#ef4444" : "#0B8F61";
+  var trendDirection = isPercentCaption ? getTrendDirection(captionText) : "neutral";
+  var hasTrendArrow = captionText.includes("▼") || captionText.includes("▲");
+  var trendPrefix = hasTrendArrow || !isPercentCaption ? "" : trendDirection === "down" ? "▼ " : trendDirection === "up" ? "▲ " : "";
+  var captionColor = captionText.includes("failed") ? "#4F46E5" : error ? "#ef4444" : isPercentCaption ? getTrendColor(captionText, {
+    up: "#0B8F61",
+    down: "#ef4444"
+  }) : "#0B8F61";
   return /*#__PURE__*/jsxs(Box, {
     sx: _objectSpread2({
       bgcolor: "#fff",
@@ -1245,19 +1298,6 @@ var MetricCard$1 = function MetricCard(_ref) {
   });
 };
 
-function formatNumber(num) {
-  if (num >= 1000000000) {
-    return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
-  }
-  if (num >= 1000000) {
-    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
-  }
-  if (num >= 1000) {
-    return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
-  }
-  return (num !== null && num !== void 0 ? num : 0).toString();
-}
-
 var PURPLE = "#6363E6";
 var REPORT_COLORS = {
   purple: PURPLE};
@@ -3724,6 +3764,8 @@ var DonorMixCard = function DonorMixCard(_ref) {
     compact = _ref$compact === void 0 ? false : _ref$compact,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? {} : _ref$sx;
+  var trendColor = getTrendColor(bottomSummaryTrend);
+  var trendArrow = getTrendArrow(bottomSummaryTrend);
   var chartOptions = {
     chart: {
       type: "donut"
@@ -3895,12 +3937,12 @@ var DonorMixCard = function DonorMixCard(_ref) {
             display: "flex",
             alignItems: "center",
             gap: 0.5,
-            color: "#22C55E",
+            color: trendColor,
             fontSize: "12px",
             fontWeight: 600
           },
-          children: [/*#__PURE__*/jsx("span", {
-            children: "\u25B2"
+          children: [trendArrow && /*#__PURE__*/jsx("span", {
+            children: trendArrow
           }), bottomSummaryTrend]
         })]
       })]
@@ -4115,8 +4157,7 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
     subtitle = _ref.subtitle,
     value = _ref.value,
     trend = _ref.trend,
-    _ref$trendColor = _ref.trendColor,
-    trendColor = _ref$trendColor === void 0 ? "#22C55E" : _ref$trendColor,
+    trendColor = _ref.trendColor,
     _ref$chartData = _ref.chartData,
     chartData = _ref$chartData === void 0 ? [] : _ref$chartData,
     _ref$chartColor = _ref.chartColor,
@@ -4128,6 +4169,8 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
     bottomSection = _ref$bottomSection === void 0 ? false : _ref$bottomSection,
     _ref$compact = _ref.compact,
     compact = _ref$compact === void 0 ? false : _ref$compact;
+  var resolvedTrendColor = trendColor !== null && trendColor !== void 0 ? trendColor : getTrendColor(trend);
+
   // Extract values for chart series
   var series = [{
     name: title,
@@ -4248,7 +4291,7 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
         sx: {
           fontSize: "11px",
           fontWeight: 700,
-          color: trendColor,
+          color: resolvedTrendColor,
           mt: 0.2
         },
         children: trend
@@ -4322,19 +4365,39 @@ var MetricSparklineCard = function MetricSparklineCard(_ref) {
   });
 };
 
-var MetricDonutCard = function MetricDonutCard(_ref) {
-  var title = _ref.title,
-    subtitle = _ref.subtitle,
-    acceptanceRate = _ref.acceptanceRate,
-    acceptanceVal = _ref.acceptanceVal,
-    acceptanceTrend = _ref.acceptanceTrend,
-    raisedVal = _ref.raisedVal,
-    raisedTrend = _ref.raisedTrend,
-    _ref$chartColors = _ref.chartColors,
-    chartColors = _ref$chartColors === void 0 ? ["rgb(99, 99, 230)", "#88bfd290"] : _ref$chartColors,
-    sx = _ref.sx,
-    _ref$compact = _ref.compact,
-    compact = _ref$compact === void 0 ? false : _ref$compact;
+var TrendValue = function TrendValue(_ref) {
+  var trend = _ref.trend;
+  var direction = getTrendDirection(trend);
+  var color = getTrendColor(trend);
+  var Icon = direction === "down" ? TrendingDown : TrendingUp;
+  return /*#__PURE__*/jsxs(Typography, {
+    sx: {
+      fontSize: "10px",
+      fontWeight: 700,
+      color: color,
+      display: "flex",
+      alignItems: "center"
+    },
+    children: [/*#__PURE__*/jsx(Icon, {
+      sx: {
+        fontSize: "12px"
+      }
+    }), " ", trend]
+  });
+};
+var MetricDonutCard = function MetricDonutCard(_ref2) {
+  var title = _ref2.title,
+    subtitle = _ref2.subtitle,
+    acceptanceRate = _ref2.acceptanceRate,
+    acceptanceVal = _ref2.acceptanceVal,
+    acceptanceTrend = _ref2.acceptanceTrend,
+    raisedVal = _ref2.raisedVal,
+    raisedTrend = _ref2.raisedTrend,
+    _ref2$chartColors = _ref2.chartColors,
+    chartColors = _ref2$chartColors === void 0 ? ["rgb(99, 99, 230)", "#88bfd290"] : _ref2$chartColors,
+    sx = _ref2.sx,
+    _ref2$compact = _ref2.compact,
+    compact = _ref2$compact === void 0 ? false : _ref2$compact;
   var chartOptions = {
     chart: {
       type: "radialBar",
@@ -4475,19 +4538,8 @@ var MetricDonutCard = function MetricDonutCard(_ref) {
               color: "#000"
             },
             children: acceptanceVal
-          }), /*#__PURE__*/jsxs(Typography, {
-            sx: {
-              fontSize: "10px",
-              fontWeight: 700,
-              color: "#22C55E",
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [/*#__PURE__*/jsx(TrendingUp, {
-              sx: {
-                fontSize: "12px"
-              }
-            }), " ", acceptanceTrend]
+          }), /*#__PURE__*/jsx(TrendValue, {
+            trend: acceptanceTrend
           })]
         })]
       }), /*#__PURE__*/jsxs(Box, {
@@ -4530,19 +4582,8 @@ var MetricDonutCard = function MetricDonutCard(_ref) {
               color: "#000"
             },
             children: raisedVal
-          }), /*#__PURE__*/jsxs(Typography, {
-            sx: {
-              fontSize: "10px",
-              fontWeight: 700,
-              color: "#22C55E",
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [/*#__PURE__*/jsx(TrendingUp, {
-              sx: {
-                fontSize: "12px"
-              }
-            }), " ", raisedTrend]
+          }), /*#__PURE__*/jsx(TrendValue, {
+            trend: raisedTrend
           })]
         })]
       })]
@@ -6370,15 +6411,15 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       subtitle: "Acceptance & raised",
       acceptanceRate: (downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0,
       acceptanceVal: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0), "%"),
-      acceptanceTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) || 0), "%"),
+      acceptanceTrend: "".concat((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceGrowth) || 0).toFixed(1), "%"),
       raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raised) || 0)),
-      raisedTrend: "".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) || 0), "%"),
+      raisedTrend: "".concat((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raisedGrowth) || 0).toFixed(1), "%"),
       sx: CARD_SX
     }), /*#__PURE__*/jsx(MetricSparklineCard, {
       title: "Referrals",
       subtitle: "Revenue trend \xB7 last ".concat(daysLabel),
       value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalRevenue) || 0)),
-      trend: "\u25B2 ".concat((referralData === null || referralData === void 0 ? void 0 : referralData.growthPercentage) || 0, "% vs previous period"),
+      trend: "".concat((referralData === null || referralData === void 0 ? void 0 : referralData.growthPercentage) >= 0 ? "▲" : "▼", " ").concat(Math.abs((referralData === null || referralData === void 0 ? void 0 : referralData.growthPercentage) || 0).toFixed(1), "% vs previous period"),
       chartData: (referralData === null || referralData === void 0 || (_referralData$chartDa = referralData.chartData) === null || _referralData$chartDa === void 0 ? void 0 : _referralData$chartDa.map(function (item) {
         return {
           label: item.date,
@@ -17886,6 +17927,12 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
     }
     return series;
   }, [trendData, trendSeries, series]);
+  var trendColor = getTrendColor(trend, {
+    up: "#10b981",
+    down: "#EF4444"
+  });
+  var trendArrow = getTrendArrow(trend);
+  var trendBadgeBg = trendColor === "#EF4444" ? "#fee2e2" : "#ebfcf4";
   var chartOptions = {
     chart: {
       type: "area",
@@ -18045,8 +18092,8 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
         children: value
       }), /*#__PURE__*/jsxs(Box, {
         sx: {
-          bgcolor: "#ebfcf4",
-          color: "#10b981",
+          bgcolor: trendBadgeBg,
+          color: trendColor,
           px: 1,
           py: 0.4,
           borderRadius: "100px",
@@ -18056,11 +18103,11 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
           alignItems: "center",
           gap: 0.3
         },
-        children: [/*#__PURE__*/jsx("span", {
+        children: [trendArrow && /*#__PURE__*/jsx("span", {
           style: {
             fontSize: "10px"
           },
-          children: "\u25B2"
+          children: trendArrow
         }), " ", trend]
       })]
     }), /*#__PURE__*/jsx(Box, {