@ammarkhalidfarooq/dashboard-package 0.6.105 → 0.6.107

package/dist/index.es.js

@@ -1,5 +1,5 @@
 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 { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, Avatar, LinearProgress, Stack, Dialog, DialogTitle, DialogContent, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Skeleton } from '@mui/material';
 import { MoreHoriz, TrendingDown, TrendingUp, MoreVert, Check, InfoOutlined, Settings, PeopleAltOutlined, PaidOutlined, PersonOutlined, IndeterminateCheckBoxOutlined, FavoriteOutlined, SearchOutlined, HighlightOff, Email } from '@mui/icons-material';
 import { createTheme, useTheme } 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 CloseIcon from '@mui/icons-material/Close';
 
 var theme = createTheme({
   cssVariables: true,
@@ -6593,36 +6594,13 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref9) {
       value: item.donations !== undefined ? item.donations : item.value || 0
     };
   });
-  return /*#__PURE__*/jsxs(Card, {
+  return /*#__PURE__*/jsx(CardWrapper, {
+    title: "Paid Donor Geography",
+    subtitle: "Where ad-acquired donors come from",
     sx: _objectSpread2({
-      bgcolor: "#fff",
-      borderRadius: 4,
-      border: "1px solid #f0f0f0",
-      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
-      p: 3
+      width: "100%"
     }, sx),
-    children: [/*#__PURE__*/jsxs(Box, {
-      sx: {
-        textAlign: "left",
-        marginBottom: "12px"
-      },
-      children: [/*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontWeight: 700,
-          fontSize: "18px",
-          color: "#000",
-          lineHeight: 1.15
-        },
-        children: "Paid Donor Geography"
-      }), /*#__PURE__*/jsx(Typography, {
-        sx: {
-          fontSize: "13px",
-          color: "rgba(0, 0, 0, 0.4)",
-          lineHeight: 1.15
-        },
-        children: "Where ad-acquired donors come from"
-      })]
-    }), data.length === 0 ? /*#__PURE__*/jsx(Typography, {
+    children: data.length === 0 ? /*#__PURE__*/jsx(Typography, {
       sx: {
         fontSize: "13px",
         color: "rgba(0, 0, 0, 0.4)",
@@ -6674,7 +6652,7 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref9) {
           children: [item.value, " - ", item.percentage, "%"]
         })]
       }, index);
-    })]
+    })
   });
 };
 
@@ -7064,6 +7042,154 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   });
 };
 
+var BORDER$1 = "1px solid #e0e0e0";
+var headerCellSx$1 = {
+  fontWeight: 700,
+  fontSize: "0.78rem",
+  color: "#111",
+  bgcolor: "#f3f3f3",
+  borderBottom: BORDER$1,
+  borderRight: BORDER$1,
+  py: "12px",
+  px: "16px",
+  lineHeight: 1.4,
+  textAlign: "left",
+  "&:last-child": {
+    borderRight: 0
+  }
+};
+var cellSx$1 = {
+  fontSize: "0.85rem",
+  color: "#333",
+  borderBottom: BORDER$1,
+  borderRight: BORDER$1,
+  py: "12px",
+  px: "16px",
+  verticalAlign: "middle",
+  textAlign: "left",
+  "&:last-child": {
+    borderRight: 0
+  }
+};
+var MOCK_ROWS = [{
+  date: "Jun 1, 2026",
+  campaignName: "Ramadan 2024 - Global Feed",
+  raised: "$4,520.00"
+}, {
+  date: "Jun 2, 2026",
+  campaignName: "Water for Life - East Africa",
+  raised: "$1,280.00"
+}, {
+  date: "Jun 3, 2026",
+  campaignName: "Orphan Care - Palestine",
+  raised: "$2,850.00"
+}, {
+  date: "Jun 4, 2026",
+  campaignName: "Emergency Relief - Yemen",
+  raised: "$1,540.00"
+}, {
+  date: "Jun 5, 2026",
+  campaignName: "Education Fund - Syria",
+  raised: "$980.00"
+}, {
+  date: "Jun 6, 2026",
+  campaignName: "Medical Aid - Gaza",
+  raised: "$3,120.00"
+}, {
+  date: "Jun 7, 2026",
+  campaignName: "Food Security - Sudan",
+  raised: "$760.00"
+}];
+var OverallDetailModal = function OverallDetailModal(_ref) {
+  var open = _ref.open,
+    title = _ref.title,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/jsxs(Dialog, {
+    open: open,
+    onClose: onClose,
+    maxWidth: "md",
+    fullWidth: true,
+    children: [/*#__PURE__*/jsxs(DialogTitle, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        pr: 1,
+        pb: 1
+      },
+      children: [/*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontWeight: 700,
+            fontSize: "18px",
+            color: "#000"
+          },
+          children: title
+        }), /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: "13px",
+            color: "rgba(0, 0, 0, 0.45)",
+            mt: 0.25
+          },
+          children: "Campaign breakdown"
+        })]
+      }), /*#__PURE__*/jsx(IconButton, {
+        "aria-label": "Close",
+        onClick: onClose,
+        size: "small",
+        children: /*#__PURE__*/jsx(CloseIcon, {})
+      })]
+    }), /*#__PURE__*/jsx(DialogContent, {
+      sx: {
+        pt: 0
+      },
+      children: /*#__PURE__*/jsx(TableContainer, {
+        sx: {
+          border: BORDER$1,
+          borderRadius: "12px",
+          overflow: "hidden"
+        },
+        children: /*#__PURE__*/jsxs(Table, {
+          children: [/*#__PURE__*/jsx(TableHead, {
+            children: /*#__PURE__*/jsxs(TableRow, {
+              children: [/*#__PURE__*/jsx(TableCell, {
+                sx: headerCellSx$1,
+                children: "Date"
+              }), /*#__PURE__*/jsx(TableCell, {
+                sx: headerCellSx$1,
+                children: "Campaign Name"
+              }), /*#__PURE__*/jsx(TableCell, {
+                sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
+                  textAlign: "right"
+                }),
+                children: "Raised"
+              })]
+            })
+          }), /*#__PURE__*/jsx(TableBody, {
+            children: MOCK_ROWS.map(function (row) {
+              return /*#__PURE__*/jsxs(TableRow, {
+                children: [/*#__PURE__*/jsx(TableCell, {
+                  sx: cellSx$1,
+                  children: row.date
+                }), /*#__PURE__*/jsx(TableCell, {
+                  sx: cellSx$1,
+                  children: row.campaignName
+                }), /*#__PURE__*/jsx(TableCell, {
+                  sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
+                    textAlign: "right",
+                    fontWeight: 600
+                  }),
+                  children: row.raised
+                })]
+              }, "".concat(row.date, "-").concat(row.campaignName));
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+
 var CARD_SX = {
   maxHeight: 280
 };
@@ -7111,7 +7237,30 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
     _ref.dateName;
     var _ref$numberOfDays = _ref.numberOfDays,
     numberOfDays = _ref$numberOfDays === void 0 ? 30 : _ref$numberOfDays;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalTitle = _useState2[0],
+    setModalTitle = _useState2[1];
   var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
+  var openDetailModal = function openDetailModal(title) {
+    if (!exportMode) {
+      setModalTitle(title);
+    }
+  };
+  var closeDetailModal = function closeDetailModal() {
+    return setModalTitle(null);
+  };
+  var withCardClick = function withCardClick(title, card) {
+    return exportMode ? card : /*#__PURE__*/jsx(Box, {
+      onClick: function onClick() {
+        return openDetailModal(title);
+      },
+      sx: {
+        height: "100%"
+      },
+      children: card
+    });
+  };
   var _donorMix$newDonors = donorMix.newDonors,
     newDonors = _donorMix$newDonors === void 0 ? 0 : _donorMix$newDonors,
     _donorMix$returningDo = donorMix.returningDonors,
@@ -7174,12 +7323,12 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       sx: {
         paddingTop: "0px !important"
       },
-      children: /*#__PURE__*/jsx(ActiveCampaignsCard, {
+      children: withCardClick("Active Campaigns", /*#__PURE__*/jsx(ActiveCampaignsCard, {
         title: "Active Campaigns",
         subtitle: "Live fundraisers ranked by velocity",
         columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
         rows: activeCampaignsRows
-      })
+      }))
     }), /*#__PURE__*/jsx(Grid, {
       item: true,
       xs: 12,
@@ -7192,7 +7341,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
           md: 0
         }
       },
-      children: /*#__PURE__*/jsx(DonorMixCard, {
+      children: withCardClick("Donor Mix", /*#__PURE__*/jsx(DonorMixCard, {
         title: "Donor Mix",
         subtitle: "Acquisition vs retention",
         series: [newDonors, returningDonors],
@@ -7214,29 +7363,29 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
         sx: {
           width: "100%"
         }
-      })
+      }))
     })]
   });
   var middleCards = /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(DonationTypeBarChart, {
+    children: [withCardClick("Donation Type", /*#__PURE__*/jsx(DonationTypeBarChart, {
       sx: CARD_SX,
       donationTypeData: donationTypeData
-    }), /*#__PURE__*/jsx(PaidDonorGeographyCard, {
+    })), withCardClick("Paid Donor Geography", /*#__PURE__*/jsx(PaidDonorGeographyCard, {
       sx: CARD_SX,
       donorGeographyData: donorGeographyData
-    }), /*#__PURE__*/jsx(RefundsChargebacksCard, {
+    })), withCardClick("Refunds & Chargebacks", /*#__PURE__*/jsx(RefundsChargebacksCard, {
       sx: CARD_SX,
       refundsChargebacksData: refundsChargebacksData,
       numberOfDays: numberOfDays
-    }), /*#__PURE__*/jsx(TrafficSourceCard, {
+    })), withCardClick("Traffic Source", /*#__PURE__*/jsx(TrafficSourceCard, {
       sx: CARD_SX,
       trafficSourceData: (trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.data) || [],
       total: "$".concat(formatNumber((trafficSourceData === null || trafficSourceData === void 0 ? void 0 : trafficSourceData.totalRevenue) || 0)),
       numberOfDays: numberOfDays
-    })]
+    }))]
   });
   var bottomCards = /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(MetricSparklineCard, {
+    children: [withCardClick("Order Bump", /*#__PURE__*/jsx(MetricSparklineCard, {
       title: "Order Bump",
       subtitle: "Revenue trend - last ".concat(daysLabel),
       value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalRevenue) || 0)),
@@ -7261,7 +7410,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       }],
       sx: CARD_SX,
       bottomSection: true
-    }), /*#__PURE__*/jsx(MetricDonutCard, {
+    })), withCardClick("Upsell", /*#__PURE__*/jsx(MetricDonutCard, {
       title: "Upsell",
       subtitle: "Acceptance & raised",
       acceptanceRate: (upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0,
@@ -7270,7 +7419,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       raisedVal: "$".concat(formatNumber((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raised) || 0)),
       raisedTrend: "".concat((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) >= 0 ? "▲" : "▼", " ").concat(Math.abs((upsellData === null || upsellData === void 0 ? void 0 : upsellData.raisedGrowth) || 0).toFixed(1), "%"),
       sx: CARD_SX
-    }), /*#__PURE__*/jsx(MetricDonutCard, {
+    })), withCardClick("Downsell", /*#__PURE__*/jsx(MetricDonutCard, {
       title: "Downsell",
       subtitle: "Acceptance & raised",
       acceptanceRate: (downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0,
@@ -7279,7 +7428,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       raisedVal: "$".concat(formatNumber((downsellData === null || downsellData === void 0 ? void 0 : downsellData.raised) || 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, {
+    })), withCardClick("Referrals", /*#__PURE__*/jsx(MetricSparklineCard, {
       title: "Referrals",
       subtitle: "Revenue trend - last ".concat(daysLabel),
       value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalRevenue) || 0)),
@@ -7303,19 +7452,34 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       }],
       sx: CARD_SX,
       bottomSection: true
-    })]
-  });
-  if (section === "campaigns") return /*#__PURE__*/jsx(Box, {
-    children: campaignsRow
+    }))]
   });
-  if (section === "middle") return /*#__PURE__*/jsx(Box, {
-    sx: fourColGridSx$1(exportMode),
-    children: middleCards
-  });
-  if (section === "bottom") return /*#__PURE__*/jsx(Box, {
-    sx: fourColGridSx$1(exportMode),
-    children: bottomCards
+  var detailModal = /*#__PURE__*/jsx(OverallDetailModal, {
+    open: Boolean(modalTitle),
+    title: modalTitle || "",
+    onClose: closeDetailModal
   });
+  if (section === "campaigns") {
+    return /*#__PURE__*/jsxs(Box, {
+      children: [campaignsRow, detailModal]
+    });
+  }
+  if (section === "middle") {
+    return /*#__PURE__*/jsxs(Box, {
+      children: [/*#__PURE__*/jsx(Box, {
+        sx: fourColGridSx$1(exportMode),
+        children: middleCards
+      }), detailModal]
+    });
+  }
+  if (section === "bottom") {
+    return /*#__PURE__*/jsxs(Box, {
+      children: [/*#__PURE__*/jsx(Box, {
+        sx: fourColGridSx$1(exportMode),
+        children: bottomCards
+      }), detailModal]
+    });
+  }
   return /*#__PURE__*/jsxs(Box, {
     children: [campaignsRow, /*#__PURE__*/jsx(Box, {
       sx: fourColGridSx$1(exportMode),
@@ -7323,7 +7487,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
     }), /*#__PURE__*/jsx(Box, {
       sx: fourColGridSx$1(exportMode),
       children: bottomCards
-    })]
+    }), detailModal]
   });
 };
 
@@ -18722,17 +18886,24 @@ var PaidSection = function PaidSection(_ref) {
       container: true,
       spacing: 3,
       sx: {
-        mt: "6px"
+        mt: "6px",
+        alignItems: "stretch"
       },
       children: [/*#__PURE__*/jsx(Grid, {
         item: true,
         xs: 12,
         md: 6,
         sx: {
-          paddingTop: "0px !important"
+          paddingTop: "0px !important",
+          display: "flex"
         },
-        children: /*#__PURE__*/jsx(TopPerformingCampaignsCard, {
-          data: topCampaignsData !== null && topCampaignsData !== void 0 ? topCampaignsData : hasPaidOverview ? [] : null
+        children: /*#__PURE__*/jsx(Box, {
+          sx: {
+            width: "100%"
+          },
+          children: /*#__PURE__*/jsx(TopPerformingCampaignsCard, {
+            data: topCampaignsData !== null && topCampaignsData !== void 0 ? topCampaignsData : hasPaidOverview ? [] : null
+          })
         })
       }), /*#__PURE__*/jsx(Grid, {
         item: true,
@@ -18747,7 +18918,8 @@ var PaidSection = function PaidSection(_ref) {
           marginTop: {
             xs: "6px",
             md: "0px"
-          }
+          },
+          display: "flex"
         },
         children: /*#__PURE__*/jsx(PaidDonorGeographyCard, {
           donorGeographyData: donorGeographyData