@ammarkhalidfarooq/dashboard-package 0.6.113 → 0.6.115

package/dist/index.cjs.js

@@ -9,7 +9,6 @@ var Grid = require('@mui/material/Grid');
 var Box = require('@mui/material/Box');
 var Typography = require('@mui/material/Typography');
 var ReactApexChart = require('react-apexcharts');
-var CloseIcon = require('@mui/icons-material/Close');
 
 var theme = styles.createTheme({
   cssVariables: true,
@@ -6608,65 +6607,100 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard(_ref9) {
       value: item.donations !== undefined ? item.donations : item.value || 0
     };
   });
-  return /*#__PURE__*/jsxRuntime.jsx(CardWrapper, {
-    title: "Paid Donor Geography",
-    subtitle: "Where ad-acquired donors come from",
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
     sx: _objectSpread2({
-      width: "100%"
+      bgcolor: "#fff",
+      borderRadius: 4,
+      border: "1px solid #f0f0f0",
+      boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
+      p: 3,
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      boxSizing: "border-box"
     }, sx),
-    children: data.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+      sx: {
+        marginBottom: "12px"
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          fontWeight: 700,
+          fontSize: "18px",
+          color: "#000",
+          textAlign: "left",
+          lineHeight: 1.15
+        },
+        children: "Paid Donor Geography"
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+        sx: {
+          fontSize: "13px",
+          color: "rgba(0, 0, 0, 0.4)",
+          textAlign: "left",
+          lineHeight: 1.15
+        },
+        children: "Where ad-acquired donors come from"
+      })]
+    }), data.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
       sx: {
         fontSize: "13px",
         color: "rgba(0, 0, 0, 0.4)",
         py: 2
       },
       children: "No geography data for this period"
-    }) : data.map(function (item, index) {
-      return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 2,
-          py: 0.7
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-          sx: {
-            fontSize: "13px",
-            fontWeight: 500,
-            color: "rgba(0, 0, 0, 0.4)",
-            minWidth: "100px",
-            textAlign: "left"
-          },
-          children: item.country
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1
+      },
+      children: data.map(function (item, index) {
+        return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
           sx: {
-            flexGrow: 1
+            display: "flex",
+            alignItems: "center",
+            gap: 2,
+            py: 0.7
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
-            variant: "determinate",
-            value: item.percentage,
+          children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
             sx: {
-              height: 8,
-              borderRadius: 4,
-              bgcolor: "#F3F4F6",
-              "& .MuiLinearProgress-bar": {
+              fontSize: "13px",
+              fontWeight: 500,
+              color: "rgba(0, 0, 0, 0.4)",
+              minWidth: "100px",
+              textAlign: "left"
+            },
+            children: item.country
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+            sx: {
+              flexGrow: 1
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
+              variant: "determinate",
+              value: item.percentage,
+              sx: {
+                height: 8,
                 borderRadius: 4,
-                bgcolor: "#6366F1"
+                bgcolor: "#F3F4F6",
+                "& .MuiLinearProgress-bar": {
+                  borderRadius: 4,
+                  bgcolor: "#6366F1"
+                }
               }
-            }
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
-          sx: {
-            fontSize: "13px",
-            fontWeight: 700,
-            color: "#111",
-            minWidth: "60px",
-            textAlign: "right"
-          },
-          children: [item.value, " - ", item.percentage, "%"]
-        })]
-      }, index);
-    })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+            sx: {
+              fontSize: "13px",
+              fontWeight: 700,
+              color: "#111",
+              minWidth: "60px",
+              textAlign: "right"
+            },
+            children: [item.value, " - ", item.percentage, "%"]
+          })]
+        }, index);
+      })
+    })]
   });
 };
 
@@ -7056,316 +7090,6 @@ var RefundsChargebacksCard = function RefundsChargebacksCard(_ref) {
   });
 };
 
-var BORDER$1 = "1px solid #e0e0e0";
-var ROWS_PER_PAGE = 10;
-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",
-  donorType: "New Donor",
-  raised: "$4,520.00"
-}, {
-  date: "Jun 2, 2026",
-  campaignName: "Water for Life - East Africa",
-  donorType: "Returning",
-  raised: "$1,280.00"
-}, {
-  date: "Jun 3, 2026",
-  campaignName: "Orphan Care - Palestine",
-  donorType: "New Donor",
-  raised: "$2,850.00"
-}, {
-  date: "Jun 4, 2026",
-  campaignName: "Emergency Relief - Yemen",
-  donorType: "Returning",
-  raised: "$1,540.00"
-}, {
-  date: "Jun 5, 2026",
-  campaignName: "Education Fund - Syria",
-  donorType: "New Donor",
-  raised: "$980.00"
-}, {
-  date: "Jun 6, 2026",
-  campaignName: "Medical Aid - Gaza",
-  donorType: "Returning",
-  raised: "$3,120.00"
-}, {
-  date: "Jun 7, 2026",
-  campaignName: "Food Security - Sudan",
-  donorType: "New Donor",
-  raised: "$760.00"
-}, {
-  date: "Jun 8, 2026",
-  campaignName: "Winter Relief - Afghanistan",
-  donorType: "Returning",
-  raised: "$2,140.00"
-}, {
-  date: "Jun 9, 2026",
-  campaignName: "Clean Water - Bangladesh",
-  donorType: "New Donor",
-  raised: "$890.00"
-}, {
-  date: "Jun 10, 2026",
-  campaignName: "Shelter Fund - Lebanon",
-  donorType: "Returning",
-  raised: "$1,675.00"
-}, {
-  date: "Jun 11, 2026",
-  campaignName: "Qurbani 2026 - Global",
-  donorType: "New Donor",
-  raised: "$5,230.00"
-}, {
-  date: "Jun 12, 2026",
-  campaignName: "Maternal Health - Somalia",
-  donorType: "Returning",
-  raised: "$1,120.00"
-}, {
-  date: "Jun 13, 2026",
-  campaignName: "School Supplies - Pakistan",
-  donorType: "New Donor",
-  raised: "$640.00"
-}, {
-  date: "Jun 14, 2026",
-  campaignName: "Disaster Response - Turkey",
-  donorType: "Returning",
-  raised: "$3,890.00"
-}, {
-  date: "Jun 15, 2026",
-  campaignName: "Zakat Distribution - UK",
-  donorType: "New Donor",
-  raised: "$2,450.00"
-}, {
-  date: "Jun 16, 2026",
-  campaignName: "Eye Care - Morocco",
-  donorType: "Returning",
-  raised: "$780.00"
-}, {
-  date: "Jun 17, 2026",
-  campaignName: "Livelihood Support - Iraq",
-  donorType: "New Donor",
-  raised: "$1,960.00"
-}, {
-  date: "Jun 18, 2026",
-  campaignName: "Ramadan Iftar - Jordan",
-  donorType: "Returning",
-  raised: "$2,310.00"
-}, {
-  date: "Jun 19, 2026",
-  campaignName: "Children's Fund - Nigeria",
-  donorType: "New Donor",
-  raised: "$1,430.00"
-}, {
-  date: "Jun 20, 2026",
-  campaignName: "Housing Rebuild - Libya",
-  donorType: "Returning",
-  raised: "$3,050.00"
-}];
-var OverallDetailModal = function OverallDetailModal(_ref) {
-  var open = _ref.open,
-    title = _ref.title,
-    onClose = _ref.onClose;
-  var _useState = React.useState(1),
-    _useState2 = _slicedToArray(_useState, 2),
-    page = _useState2[0],
-    setPage = _useState2[1];
-  var totalPages = Math.ceil(MOCK_ROWS.length / ROWS_PER_PAGE);
-  React.useEffect(function () {
-    if (open) {
-      setPage(1);
-    }
-  }, [open, title]);
-  var paginatedRows = MOCK_ROWS.slice((page - 1) * ROWS_PER_PAGE, page * ROWS_PER_PAGE);
-  return /*#__PURE__*/jsxRuntime.jsxs(material.Dialog, {
-    open: open,
-    onClose: onClose,
-    maxWidth: "md",
-    fullWidth: true,
-    children: [/*#__PURE__*/jsxRuntime.jsxs(material.DialogTitle, {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        pr: 1,
-        pb: 1
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-          sx: {
-            fontWeight: 700,
-            fontSize: "18px",
-            color: "#000"
-          },
-          children: title
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
-          sx: {
-            fontSize: "13px",
-            color: "rgba(0, 0, 0, 0.45)",
-            mt: 0.25
-          },
-          children: "Campaign breakdown"
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
-        "aria-label": "Close",
-        onClick: onClose,
-        size: "small",
-        children: /*#__PURE__*/jsxRuntime.jsx(CloseIcon, {})
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(material.DialogContent, {
-      sx: {
-        pt: 0
-      },
-      children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-        sx: {
-          border: BORDER$1,
-          borderRadius: "12px",
-          overflow: "hidden"
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx(material.TableContainer, {
-          children: /*#__PURE__*/jsxRuntime.jsxs(material.Table, {
-            children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
-              children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
-                children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-                  sx: headerCellSx$1,
-                  children: "Date"
-                }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-                  sx: headerCellSx$1,
-                  children: "Campaign Name"
-                }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-                  sx: headerCellSx$1,
-                  children: "Donor Type"
-                }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-                  sx: _objectSpread2(_objectSpread2({}, headerCellSx$1), {}, {
-                    textAlign: "right"
-                  }),
-                  children: "Raised"
-                })]
-              })
-            }), /*#__PURE__*/jsxRuntime.jsx(material.TableBody, {
-              children: paginatedRows.map(function (row) {
-                return /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
-                  children: [/*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-                    sx: cellSx$1,
-                    children: row.date
-                  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-                    sx: cellSx$1,
-                    children: row.campaignName
-                  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-                    sx: cellSx$1,
-                    children: row.donorType
-                  }), /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-                    sx: _objectSpread2(_objectSpread2({}, cellSx$1), {}, {
-                      textAlign: "right",
-                      fontWeight: 600
-                    }),
-                    children: row.raised
-                  })]
-                }, "".concat(row.date, "-").concat(row.campaignName));
-              })
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            px: 2,
-            py: 1.5,
-            borderTop: BORDER$1
-          },
-          children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-            sx: {
-              display: "flex",
-              gap: 0.5
-            },
-            children: [Array.from({
-              length: totalPages
-            }, function (_, index) {
-              return index + 1;
-            }).map(function (pageNumber) {
-              return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-                onClick: function onClick() {
-                  return setPage(pageNumber);
-                },
-                sx: {
-                  width: 32,
-                  height: 32,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontSize: "13px",
-                  fontWeight: page === pageNumber ? 700 : 400,
-                  bgcolor: page === pageNumber ? "primary.main" : "transparent",
-                  color: page === pageNumber ? "#fff" : "#333",
-                  border: page === pageNumber ? "none" : "1px solid ".concat(BORDER$1),
-                  "&:hover": {
-                    bgcolor: page === pageNumber ? "primary.main" : "#f5f5f5"
-                  }
-                },
-                children: pageNumber
-              }, pageNumber);
-            }), page < totalPages && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-              onClick: function onClick() {
-                return setPage(function (current) {
-                  return Math.min(current + 1, totalPages);
-                });
-              },
-              sx: {
-                px: 1.5,
-                height: 32,
-                display: "flex",
-                alignItems: "center",
-                gap: 0.5,
-                borderRadius: "6px",
-                cursor: "pointer",
-                fontSize: "13px",
-                color: "#333",
-                border: "1px solid ".concat(BORDER$1),
-                "&:hover": {
-                  bgcolor: "#f5f5f5"
-                }
-              },
-              children: "Next \u203A"
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
-            variant: "caption",
-            color: "text.secondary",
-            children: [MOCK_ROWS.length, " records"]
-          })]
-        })]
-      })
-    })]
-  });
-};
-
 var CARD_SX = {
   maxHeight: 280
 };
@@ -7413,30 +7137,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
     _ref.dateName;
     var _ref$numberOfDays = _ref.numberOfDays,
     numberOfDays = _ref$numberOfDays === void 0 ? 30 : _ref$numberOfDays;
-  var _useState = React.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__*/jsxRuntime.jsx(material.Box, {
-      onClick: function onClick() {
-        return openDetailModal(title);
-      },
-      sx: {
-        display: "contents"
-      },
-      children: card
-    });
-  };
   var _donorMix$newDonors = donorMix.newDonors,
     newDonors = _donorMix$newDonors === void 0 ? 0 : _donorMix$newDonors,
     _donorMix$returningDo = donorMix.returningDonors,
@@ -7499,12 +7200,12 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       sx: {
         paddingTop: "0px !important"
       },
-      children: withCardClick("Active Campaigns", /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
+      children: /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
         title: "Active Campaigns",
         subtitle: "Live fundraisers ranked by velocity",
         columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"],
         rows: activeCampaignsRows
-      }))
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
       item: true,
       xs: 12,
@@ -7517,7 +7218,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
           md: 0
         }
       },
-      children: withCardClick("Donor Mix", /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
+      children: /*#__PURE__*/jsxRuntime.jsx(DonorMixCard, {
         title: "Donor Mix",
         subtitle: "Acquisition vs retention",
         series: [newDonors, returningDonors],
@@ -7539,29 +7240,29 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
         sx: {
           width: "100%"
         }
-      }))
+      })
     })]
   });
   var middleCards = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [withCardClick("Donation Type", /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {
       sx: CARD_SX,
       donationTypeData: donationTypeData
-    })), withCardClick("Paid Donor Geography", /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
+    }), /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {
       sx: CARD_SX,
       donorGeographyData: donorGeographyData
-    })), withCardClick("Refunds & Chargebacks", /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {
+    }), /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {
       sx: CARD_SX,
       refundsChargebacksData: refundsChargebacksData,
       numberOfDays: numberOfDays
-    })), withCardClick("Traffic Source", /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [withCardClick("Order Bump", /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
       title: "Order Bump",
       subtitle: "Revenue trend - last ".concat(daysLabel),
       value: "$".concat(formatNumber((orderBumpData === null || orderBumpData === void 0 ? void 0 : orderBumpData.totalRevenue) || 0)),
@@ -7586,7 +7287,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       }],
       sx: CARD_SX,
       bottomSection: true
-    })), withCardClick("Upsell", /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
+    }), /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
       title: "Upsell",
       subtitle: "Acceptance & raised",
       acceptanceRate: (upsellData === null || upsellData === void 0 ? void 0 : upsellData.acceptanceRate) || 0,
@@ -7595,7 +7296,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
-    })), withCardClick("Downsell", /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
+    }), /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
       title: "Downsell",
       subtitle: "Acceptance & raised",
       acceptanceRate: (downsellData === null || downsellData === void 0 ? void 0 : downsellData.acceptanceRate) || 0,
@@ -7604,7 +7305,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
-    })), withCardClick("Referrals", /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
+    }), /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
       title: "Referrals",
       subtitle: "Revenue trend - last ".concat(daysLabel),
       value: "$".concat(formatNumber((referralData === null || referralData === void 0 ? void 0 : referralData.totalRevenue) || 0)),
@@ -7628,32 +7329,27 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
       }],
       sx: CARD_SX,
       bottomSection: true
-    }))]
-  });
-  var detailModal = /*#__PURE__*/jsxRuntime.jsx(OverallDetailModal, {
-    open: Boolean(modalTitle),
-    title: modalTitle || "",
-    onClose: closeDetailModal
+    })]
   });
   if (section === "campaigns") {
-    return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-      children: [campaignsRow, detailModal]
+    return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      children: campaignsRow
     });
   }
   if (section === "middle") {
-    return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: fourColGridSx$1(exportMode),
         children: middleCards
-      }), detailModal]
+      })
     });
   }
   if (section === "bottom") {
-    return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+    return /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
         sx: fourColGridSx$1(exportMode),
         children: bottomCards
-      }), detailModal]
+      })
     });
   }
   return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
@@ -7663,7 +7359,7 @@ var OverallDetailsGrid = function OverallDetailsGrid(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: fourColGridSx$1(exportMode),
       children: bottomCards
-    }), detailModal]
+    })]
   });
 };