@ammarkhalidfarooq/dashboard-package 0.6.127 → 0.6.129

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import React, { Suspense, lazy, useState, useRef, useEffect, useMemo } from 'react';
-import { Box, Button, Menu, MenuItem, useTheme, useMediaQuery, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, Stack, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } from '@mui/material';
+import { Box, Button, Menu, MenuItem, useTheme, useMediaQuery, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, LinearProgress, Stack, Avatar, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } from '@mui/material';
 import { MoreHoriz, TrendingDown, TrendingUp, MoreVert, Check, InfoOutlined, Settings, PeopleAltOutlined, RequestQuoteOutlined, PaidOutlined, PersonOutlined, IndeterminateCheckBoxOutlined, FavoriteOutlined, SearchOutlined, HighlightOff, Email } from '@mui/icons-material';
 import { createTheme } from '@mui/material/styles';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -7,6 +7,7 @@ import Grid$1 from '@mui/material/Grid';
 import Box$1 from '@mui/material/Box';
 import Typography$1 from '@mui/material/Typography';
 import ReactApexChart from 'react-apexcharts';
+import { SiSnapchat, SiYoutube, SiTiktok, SiGoogleads, SiMeta } from 'react-icons/si';
 
 var theme = createTheme({
   cssVariables: true,
@@ -1127,32 +1128,37 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                   alignItems: "center",
                   gap: 1.5
                 },
-                children: [row.id && /*#__PURE__*/jsx(Avatar, {
+                children: [(row.icon || row.id) && /*#__PURE__*/jsx(Box, {
                   sx: {
-                    width: compact ? 22 : 28,
-                    height: compact ? 22 : 28,
-                    fontSize: compact ? "8px" : "10px",
-                    fontWeight: 700,
-                    bgcolor: row.avatarBg || "#F3F4F6",
-                    color: "rgb(99, 99, 230)"
-                  },
-                  children: row.id
-                }), row.icon && /*#__PURE__*/jsx(Box, {
-                  sx: {
-                    color: row.iconColor || "inherit",
+                    width: compact ? 22 : 32,
+                    height: compact ? 22 : 32,
+                    borderRadius: "50%",
+                    bgcolor: "#fff",
+                    border: "2px solid ".concat(row.avatarBorder || row.avatarBg || "#E5E7EB"),
                     display: "flex",
-                    alignItems: "center"
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0,
+                    boxSizing: "border-box",
+                    filter: row.comingSoon ? "grayscale(1)" : "none",
+                    opacity: row.comingSoon ? 0.55 : 1
                   },
-                  children: /*#__PURE__*/jsx(row.icon, {
+                  children: row.icon ? /*#__PURE__*/jsx(row.icon, {
+                    size: compact ? 12 : 16,
+                    color: row.iconColor || row.avatarBorder || row.avatarBg
+                  }) : /*#__PURE__*/jsx(Typography, {
                     sx: {
-                      fontSize: "18px"
-                    }
+                      fontSize: compact ? "8px" : "10px",
+                      fontWeight: 700,
+                      color: row.avatarColor || "#111"
+                    },
+                    children: row.id
                   })
                 }), /*#__PURE__*/jsx(Typography, {
                   sx: {
                     fontSize: compact ? "10px" : "12px",
                     fontWeight: 700,
-                    color: "#000"
+                    color: row.comingSoon ? "#9CA3AF" : "#000"
                   },
                   children: row.name
                 })]
@@ -1160,7 +1166,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 sx: {
                   fontSize: compact ? "10px" : "13px",
                   fontWeight: 600,
-                  color: "#000",
+                  color: row.comingSoon ? "#9CA3AF" : "#000",
                   textAlign: "left"
                 },
                 children: row.val1
@@ -1199,7 +1205,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 sx: {
                   fontSize: "13px",
                   fontWeight: 600,
-                  color: "#000",
+                  color: row.comingSoon ? "#9CA3AF" : "#000",
                   textAlign: "left"
                 },
                 children: row.val2
@@ -1207,7 +1213,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 sx: {
                   fontSize: compact ? "10px" : "13px",
                   fontWeight: row.highlightVal3 ? 700 : 500,
-                  color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
+                  color: row.comingSoon ? "#9CA3AF" : row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
                   textAlign: "left"
                 },
                 children: row.val3
@@ -1215,12 +1221,26 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
                 sx: {
                   fontSize: "13px",
                   fontWeight: 500,
-                  color: "#000",
+                  color: row.comingSoon ? "#9CA3AF" : "#000",
                   textAlign: "left"
                 },
                 children: row.val4
               }), columns.length > 5 && /*#__PURE__*/jsx(Box, {
-                children: row.type === "trend" ? /*#__PURE__*/jsx(Box, {
+                children: row.comingSoon ? /*#__PURE__*/jsx(Box, {
+                  sx: {
+                    display: "inline-block",
+                    px: compact ? 1 : 1.5,
+                    py: compact ? 0.25 : 0.5,
+                    borderRadius: "100px",
+                    bgcolor: "#F3F4F6",
+                    color: "#9CA3AF",
+                    fontSize: compact ? "9px" : "11px",
+                    fontWeight: 700,
+                    textAlign: "center",
+                    whiteSpace: "nowrap"
+                  },
+                  children: "Coming Soon"
+                }) : row.type === "trend" ? /*#__PURE__*/jsx(Box, {
                   sx: {
                     display: "flex",
                     alignItems: "center",
@@ -3756,9 +3776,9 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref34, ref) {
 });
 ExportPdfLayout.displayName = "ExportPdfLayout";
 
-/**
- * Captures [data-export-page] elements and saves a multi-page PDF.
- * Each page uses a custom size matching the captured content so nothing is cropped.
+/**
+ * Captures [data-export-page] elements and saves a multi-page PDF.
+ * Each page uses a custom size matching the captured content so nothing is cropped.
  */
 function exportReportPdf(_x, _x2) {
   return _exportReportPdf.apply(this, arguments);
@@ -4649,6 +4669,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
           sx: {
             display: "flex",
             justifyContent: "space-between",
+            alignItems: "center",
             mb: idx === items.length - 1 ? showBottomSummary ? compact ? 0.5 : 0 : 0 : compact ? 0.5 : 0
           },
           children: [/*#__PURE__*/jsxs(Box, {
@@ -4661,18 +4682,32 @@ var DonorMixCard = function DonorMixCard(_ref) {
               sx: {
                 width: 10,
                 height: 10,
-                bgcolor: item.color,
+                bgcolor: item.comingSoon ? "#D1D5DB" : item.color,
                 borderRadius: "2px"
               }
             }), /*#__PURE__*/jsx(Typography, {
               sx: {
                 fontSize: compact ? "10px" : "13px",
                 fontWeight: 500,
-                color: "rgba(0, 0, 0, 0.4)"
+                color: item.comingSoon ? "#9CA3AF" : "rgba(0, 0, 0, 0.4)"
               },
               children: item.label
             })]
-          }), /*#__PURE__*/jsx(Typography, {
+          }), item.comingSoon ? /*#__PURE__*/jsx(Box, {
+            sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              px: 1,
+              py: 0.2,
+              borderRadius: "100px",
+              bgcolor: "#F3F4F6",
+              color: "#9CA3AF",
+              fontSize: "10px",
+              fontWeight: 700,
+              whiteSpace: "nowrap"
+            },
+            children: "Coming Soon"
+          }) : /*#__PURE__*/jsx(Typography, {
             sx: {
               fontSize: compact ? "10px" : "13px",
               fontWeight: 700,
@@ -6463,11 +6498,14 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard(_ref7) {
 };
 var getCampaignInitials$2 = function getCampaignInitials() {
   var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var words = name.trim().split(/\s+/).filter(Boolean);
+  var words = name.match(/[A-Za-z]+/g) || [];
   if (words.length >= 2) {
     return (words[0][0] + words[1][0]).toUpperCase();
   }
-  return name.slice(0, 2).toUpperCase() || "—";
+  if (words.length === 1) {
+    return words[0].slice(0, 2).toUpperCase();
+  }
+  return "—";
 };
 var TopPerformingCampaignsCard = function TopPerformingCampaignsCard(_ref8) {
   var _ref8$data = _ref8.data,
@@ -6561,16 +6599,23 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard(_ref8) {
             alignItems: "center",
             gap: 1.5
           },
-          children: [/*#__PURE__*/jsx(Box, {
+          children: [/*#__PURE__*/jsx(Avatar, {
+            src: item.image || item.avatar || item.logo || item.thumbnail || item.campaignImage || undefined,
+            alt: item.name,
+            imgProps: {
+              style: {
+                width: "100%",
+                height: "100%",
+                objectFit: "cover"
+              }
+            },
             sx: {
               width: 24,
               height: 24,
+              flexShrink: 0,
               borderRadius: "50%",
               bgcolor: "#c1cfde71",
               color: "#3431e4ff",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
               fontSize: "10px",
               fontWeight: 700
             },
@@ -9090,14 +9135,14 @@ var AbandonedDonationRecovery = function AbandonedDonationRecovery() {
   });
 };
 
-/**
- * Theme colors for server components
- *
- * These are plain JavaScript objects that can be safely imported
- * in both server and client components without triggering
- * client-only code in server components.
- *
- * For client components, use the full theme from @/config/customTheme
+/**
+ * Theme colors for server components
+ *
+ * These are plain JavaScript objects that can be safely imported
+ * in both server and client components without triggering
+ * client-only code in server components.
+ *
+ * For client components, use the full theme from @/config/customTheme
  */
 
 var themeColors = {
@@ -18191,28 +18236,44 @@ var formatKpi$2 = function formatKpi(value) {
 var CHANNEL_STYLES = {
   "Meta Ads": {
     id: "M",
-    avatarBg: "#4267B2",
-    color: "#4267B2"
+    icon: SiMeta,
+    avatarBg: "#1877F2",
+    avatarBorder: "#1877F2",
+    color: "#1877F2",
+    comingSoon: false
   },
   "Google Ads": {
     id: "G",
+    icon: SiGoogleads,
     avatarBg: "#4285F4",
-    color: "#4285F4"
+    avatarBorder: "#4285F4",
+    color: "#4285F4",
+    comingSoon: true
   },
   "TikTok Ads": {
     id: "T",
+    icon: SiTiktok,
     avatarBg: "#000000",
-    color: "#cd249dff"
+    avatarBorder: "#000000",
+    color: "#000000",
+    comingSoon: true
   },
   YouTube: {
     id: "Y",
+    icon: SiYoutube,
     avatarBg: "#FF0000",
-    color: "#FF0000"
+    avatarBorder: "#FF0000",
+    color: "#FF0000",
+    comingSoon: true
   },
   Snapchat: {
     id: "S",
+    icon: SiSnapchat,
     avatarBg: "#FFFC00",
-    color: "#FFFC00"
+    avatarBorder: "#FFFC00",
+    iconColor: "#8A6D00",
+    color: "#FFFC00",
+    comingSoon: true
   }
 };
 var formatGrowth$2 = function formatGrowth(value) {
@@ -18240,7 +18301,8 @@ var getChannelStyle = function getChannelStyle() {
   return CHANNEL_STYLES[channel] || {
     id: channel.slice(0, 1).toUpperCase() || "?",
     avatarBg: "#F3F4F6",
-    color: "#6366F1"
+    color: "#6366F1",
+    comingSoon: true
   };
 };
 var mapChannelTrend = function mapChannelTrend(trend) {
@@ -18294,7 +18356,8 @@ var buildEmptySpendAllocation = function buildEmptySpendAllocation() {
       return {
         label: channel,
         val: "0.0%",
-        color: CHANNEL_STYLES[channel].color
+        color: CHANNEL_STYLES[channel].color,
+        comingSoon: CHANNEL_STYLES[channel].comingSoon
       };
     })
   };
@@ -18493,7 +18556,11 @@ var PaidSection = function PaidSection(_ref) {
       var roas = Number((_item$roas = item.roas) !== null && _item$roas !== void 0 ? _item$roas : 0);
       return _objectSpread2({
         id: style.id,
+        icon: style.icon,
         avatarBg: style.avatarBg,
+        avatarBorder: style.avatarBorder,
+        iconColor: style.iconColor || style.avatarBorder,
+        comingSoon: style.comingSoon,
         name: item.channel,
         val1: "$".concat(formatNumber((_item$spend = item.spend) !== null && _item$spend !== void 0 ? _item$spend : 0)),
         val2: "$".concat(formatNumber((_item$revenue = item.revenue) !== null && _item$revenue !== void 0 ? _item$revenue : 0)),
@@ -18519,7 +18586,8 @@ var PaidSection = function PaidSection(_ref) {
         val: "".concat(Number((_item$percentage = item.percentage) !== null && _item$percentage !== void 0 ? _item$percentage : 0).toFixed(1), "%"),
         color: style.color,
         spend: (_item$spend2 = item.spend) !== null && _item$spend2 !== void 0 ? _item$spend2 : 0,
-        percentage: (_item$percentage2 = item.percentage) !== null && _item$percentage2 !== void 0 ? _item$percentage2 : 0
+        percentage: (_item$percentage2 = item.percentage) !== null && _item$percentage2 !== void 0 ? _item$percentage2 : 0,
+        comingSoon: style.comingSoon
       };
     });
     return {
@@ -18538,11 +18606,13 @@ var PaidSection = function PaidSection(_ref) {
       items: items.map(function (_ref1) {
         var label = _ref1.label,
           val = _ref1.val,
-          color = _ref1.color;
+          color = _ref1.color,
+          comingSoon = _ref1.comingSoon;
         return {
           label: label,
           val: val,
-          color: color
+          color: color,
+          comingSoon: comingSoon
         };
       })
     };