@ammarkhalidfarooq/dashboard-package 0.5.40 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -891,6 +891,265 @@ var Dashboard = function Dashboard(_ref) {
891
891
  });
892
892
  };
893
893
 
894
+ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
895
+ var _ref$title = _ref.title,
896
+ title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
897
+ _ref$subtitle = _ref.subtitle,
898
+ subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
899
+ actionLabel = _ref.actionLabel,
900
+ _ref$columns = _ref.columns,
901
+ columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift"] : _ref$columns,
902
+ _ref$rows = _ref.rows,
903
+ rows = _ref$rows === void 0 ? [] : _ref$rows,
904
+ _ref$gridTemplateColu = _ref.gridTemplateColumns,
905
+ gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu,
906
+ height = _ref.height,
907
+ _ref$compact = _ref.compact,
908
+ compact = _ref$compact === void 0 ? false : _ref$compact;
909
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
910
+ sx: {
911
+ bgcolor: "#fff",
912
+ borderRadius: compact ? 3 : 4,
913
+ border: "1px solid #f0f0f0",
914
+ boxShadow: compact ? "0 2px 12px rgba(0,0,0,0.05)" : "0 4px 24px rgba(0,0,0,0.06)",
915
+ p: compact ? 1.5 : 3,
916
+ height: height
917
+ // height: "100%",
918
+ },
919
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
920
+ sx: {
921
+ display: "flex",
922
+ justifyContent: "space-between",
923
+ alignItems: "flex-start",
924
+ mb: compact ? 1.25 : 3
925
+ },
926
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
927
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
928
+ sx: {
929
+ fontWeight: 700,
930
+ fontSize: compact ? "14px" : "18px",
931
+ color: "#000",
932
+ textAlign: "left"
933
+ },
934
+ children: title
935
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
936
+ sx: {
937
+ fontSize: compact ? "10px" : "13px",
938
+ color: "rgba(0, 0, 0, 0.4)",
939
+ mt: 0.2
940
+ },
941
+ children: subtitle
942
+ })]
943
+ }), actionLabel && /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
944
+ sx: {
945
+ fontSize: compact ? "10px" : "13px",
946
+ fontWeight: 600,
947
+ color: "rgb(99, 99, 230)",
948
+ cursor: "pointer"
949
+ },
950
+ children: actionLabel
951
+ })]
952
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
953
+ sx: {
954
+ overflowX: compact ? "hidden" : "auto"
955
+ },
956
+ children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
957
+ sx: {
958
+ minWidth: compact ? 0 : "600px"
959
+ },
960
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
961
+ sx: {
962
+ display: "grid",
963
+ gridTemplateColumns: gridTemplateColumns,
964
+ gap: compact ? 1 : 2,
965
+ pb: compact ? 1 : 2.5,
966
+ borderBottom: "1px solid #f0f0f0"
967
+ },
968
+ children: columns.map(function (header) {
969
+ return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
970
+ sx: {
971
+ fontSize: compact ? "9px" : "12px",
972
+ color: "rgba(0, 0, 0, 0.4)",
973
+ fontWeight: 500,
974
+ textAlign: "left"
975
+ },
976
+ children: header
977
+ }, header);
978
+ })
979
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
980
+ sx: {
981
+ mt: 1
982
+ },
983
+ children: rows.map(function (row, idx) {
984
+ var _row$progress;
985
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
986
+ sx: {
987
+ display: "grid",
988
+ gridTemplateColumns: gridTemplateColumns,
989
+ gap: compact ? 1 : 2,
990
+ py: compact ? 0.5 : 1.2,
991
+ alignItems: "center",
992
+ borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
993
+ },
994
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
995
+ sx: {
996
+ display: "flex",
997
+ alignItems: "center",
998
+ gap: 1.5
999
+ },
1000
+ children: [row.id && /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
1001
+ sx: {
1002
+ width: compact ? 22 : 28,
1003
+ height: compact ? 22 : 28,
1004
+ fontSize: compact ? "8px" : "10px",
1005
+ fontWeight: 700,
1006
+ bgcolor: row.avatarBg || "#F3F4F6",
1007
+ color: "rgb(99, 99, 230)"
1008
+ },
1009
+ children: row.id
1010
+ }), row.icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1011
+ sx: {
1012
+ color: row.iconColor || "inherit",
1013
+ display: "flex",
1014
+ alignItems: "center"
1015
+ },
1016
+ children: /*#__PURE__*/jsxRuntime.jsx(row.icon, {
1017
+ sx: {
1018
+ fontSize: "18px"
1019
+ }
1020
+ })
1021
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1022
+ sx: {
1023
+ fontSize: compact ? "10px" : "12px",
1024
+ fontWeight: 700,
1025
+ color: "#000"
1026
+ },
1027
+ children: row.name
1028
+ })]
1029
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1030
+ sx: {
1031
+ fontSize: compact ? "10px" : "13px",
1032
+ fontWeight: 600,
1033
+ color: "#000",
1034
+ textAlign: "left"
1035
+ },
1036
+ children: row.val1
1037
+ }), row.type === "progress" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1038
+ sx: {
1039
+ display: "flex",
1040
+ alignItems: "center",
1041
+ gap: 1.5
1042
+ },
1043
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1044
+ sx: {
1045
+ flexGrow: 1
1046
+ },
1047
+ children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
1048
+ variant: "determinate",
1049
+ value: Math.min(100, Math.max(0, (_row$progress = row.progress) !== null && _row$progress !== void 0 ? _row$progress : 0)),
1050
+ sx: {
1051
+ height: compact ? 6 : 8,
1052
+ borderRadius: 4,
1053
+ bgcolor: "#F3F4F6",
1054
+ "& .MuiLinearProgress-bar": {
1055
+ borderRadius: 4,
1056
+ bgcolor: row.progressColor || "rgb(99, 99, 230)"
1057
+ }
1058
+ }
1059
+ })
1060
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
1061
+ sx: {
1062
+ fontSize: compact ? "9px" : "11px",
1063
+ color: "rgba(0, 0, 0, 0.4)",
1064
+ minWidth: "30px"
1065
+ },
1066
+ children: [row.progress, "%"]
1067
+ })]
1068
+ }) : /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1069
+ sx: {
1070
+ fontSize: "13px",
1071
+ fontWeight: 600,
1072
+ color: "#000",
1073
+ textAlign: "left"
1074
+ },
1075
+ children: row.val2
1076
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1077
+ sx: {
1078
+ fontSize: compact ? "10px" : "13px",
1079
+ fontWeight: row.highlightVal3 ? 700 : 500,
1080
+ color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
1081
+ textAlign: "left"
1082
+ },
1083
+ children: row.val3
1084
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1085
+ sx: {
1086
+ fontSize: "13px",
1087
+ fontWeight: 500,
1088
+ color: "#000",
1089
+ textAlign: "left"
1090
+ },
1091
+ children: row.val4
1092
+ }), columns.length > 5 && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1093
+ children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1094
+ sx: {
1095
+ display: "flex",
1096
+ alignItems: "center",
1097
+ gap: 0.5
1098
+ },
1099
+ children: row.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1100
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1101
+ sx: {
1102
+ fontSize: "14px",
1103
+ color: "#22C55E"
1104
+ },
1105
+ children: "\u25B2"
1106
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1107
+ sx: {
1108
+ fontSize: "12px",
1109
+ color: "#22C55E",
1110
+ fontWeight: 700
1111
+ },
1112
+ children: row.trendLabel
1113
+ })]
1114
+ }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1115
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1116
+ sx: {
1117
+ fontSize: "14px",
1118
+ color: "#EF4444"
1119
+ },
1120
+ children: "\u25BC"
1121
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1122
+ sx: {
1123
+ fontSize: "12px",
1124
+ color: "#EF4444",
1125
+ fontWeight: 700
1126
+ },
1127
+ children: row.trendLabel
1128
+ })]
1129
+ })
1130
+ }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1131
+ sx: {
1132
+ display: "inline-block",
1133
+ px: compact ? 1 : 1.5,
1134
+ py: compact ? 0.25 : 0.5,
1135
+ borderRadius: "100px",
1136
+ bgcolor: row.statusBg,
1137
+ color: row.statusColor,
1138
+ fontSize: compact ? "9px" : "11px",
1139
+ fontWeight: 700,
1140
+ textAlign: "center"
1141
+ },
1142
+ children: row.status
1143
+ })
1144
+ })]
1145
+ }, idx);
1146
+ })
1147
+ })]
1148
+ })
1149
+ })]
1150
+ });
1151
+ };
1152
+
894
1153
  function formatNumber(num) {
895
1154
  if (num >= 1000000000) {
896
1155
  return (num / 1000000000).toFixed(1).replace(/\.0$/, "") + "B";
@@ -1362,320 +1621,61 @@ var ReportKpiSection = function ReportKpiSection(_ref3) {
1362
1621
  border: "1px solid #E8EAFF",
1363
1622
  borderLeft: "5px solid ".concat(REPORT_COLORS.purple),
1364
1623
  p: exportMode ? 2 : 3,
1365
- mb: exportMode ? 1.25 : 2,
1366
- boxShadow: "0 4px 24px rgba(99,99,230,0.06)"
1367
- },
1368
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1369
- sx: {
1370
- fontSize: 11,
1371
- fontWeight: 700,
1372
- letterSpacing: "0.8px",
1373
- color: REPORT_COLORS.purple,
1374
- textTransform: "uppercase",
1375
- mb: 1
1376
- },
1377
- children: "Total Raised"
1378
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1379
- sx: {
1380
- display: "flex",
1381
- alignItems: "center",
1382
- flexWrap: "wrap",
1383
- gap: 1.5,
1384
- mb: exportMode ? 0.75 : 1.5
1385
- },
1386
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1387
- sx: {
1388
- fontSize: exportMode ? 30 : {
1389
- xs: 32,
1390
- md: 40
1391
- },
1392
- fontWeight: 800,
1393
- color: "#111827",
1394
- lineHeight: 1
1395
- },
1396
- children: hero.value
1397
- }), /*#__PURE__*/jsxRuntime.jsx(TrendPill, {
1398
- value: hero.trend
1399
- })]
1400
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1401
- sx: {
1402
- fontSize: exportMode ? 11 : 13,
1403
- color: "#9CA3AF"
1404
- },
1405
- children: hero.detail
1406
- })]
1407
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1408
- sx: {
1409
- display: "grid",
1410
- gridTemplateColumns: exportMode ? "repeat(3, 1fr)" : {
1411
- xs: "1fr 1fr",
1412
- md: "repeat(3, 1fr)"
1413
- },
1414
- gap: exportMode ? 1 : 2
1415
- },
1416
- children: metrics.map(function (m) {
1417
- return /*#__PURE__*/jsxRuntime.jsx(MetricCard$1, _objectSpread2(_objectSpread2({}, m), {}, {
1418
- exportMode: exportMode
1419
- }), m.title);
1420
- })
1421
- })]
1422
- });
1423
- };
1424
-
1425
- var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
1426
- var _ref$title = _ref.title,
1427
- title = _ref$title === void 0 ? "Active campaigns" : _ref$title,
1428
- _ref$subtitle = _ref.subtitle,
1429
- subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
1430
- actionLabel = _ref.actionLabel,
1431
- _ref$columns = _ref.columns,
1432
- columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift"] : _ref$columns,
1433
- _ref$rows = _ref.rows,
1434
- rows = _ref$rows === void 0 ? [] : _ref$rows,
1435
- _ref$gridTemplateColu = _ref.gridTemplateColumns,
1436
- gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu,
1437
- height = _ref.height,
1438
- _ref$compact = _ref.compact,
1439
- compact = _ref$compact === void 0 ? false : _ref$compact;
1440
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1441
- sx: {
1442
- bgcolor: "#fff",
1443
- borderRadius: compact ? 3 : 4,
1444
- border: "1px solid #f0f0f0",
1445
- boxShadow: compact ? "0 2px 12px rgba(0,0,0,0.05)" : "0 4px 24px rgba(0,0,0,0.06)",
1446
- p: compact ? 1.5 : 3,
1447
- height: height
1448
- // height: "100%",
1449
- },
1450
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1451
- sx: {
1452
- display: "flex",
1453
- justifyContent: "space-between",
1454
- alignItems: "flex-start",
1455
- mb: compact ? 1.25 : 3
1624
+ mb: exportMode ? 1.25 : 2,
1625
+ boxShadow: "0 4px 24px rgba(99,99,230,0.06)"
1456
1626
  },
1457
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1627
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1628
+ sx: {
1629
+ fontSize: 11,
1630
+ fontWeight: 700,
1631
+ letterSpacing: "0.8px",
1632
+ color: REPORT_COLORS.purple,
1633
+ textTransform: "uppercase",
1634
+ mb: 1
1635
+ },
1636
+ children: "Total Raised"
1637
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1638
+ sx: {
1639
+ display: "flex",
1640
+ alignItems: "center",
1641
+ flexWrap: "wrap",
1642
+ gap: 1.5,
1643
+ mb: exportMode ? 0.75 : 1.5
1644
+ },
1458
1645
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1459
1646
  sx: {
1460
- fontWeight: 700,
1461
- fontSize: compact ? "14px" : "18px",
1462
- color: "#000",
1463
- textAlign: "left"
1464
- },
1465
- children: title
1466
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1467
- sx: {
1468
- fontSize: compact ? "10px" : "13px",
1469
- color: "rgba(0, 0, 0, 0.4)",
1470
- mt: 0.2
1647
+ fontSize: exportMode ? 30 : {
1648
+ xs: 32,
1649
+ md: 40
1650
+ },
1651
+ fontWeight: 800,
1652
+ color: "#111827",
1653
+ lineHeight: 1
1471
1654
  },
1472
- children: subtitle
1655
+ children: hero.value
1656
+ }), /*#__PURE__*/jsxRuntime.jsx(TrendPill, {
1657
+ value: hero.trend
1473
1658
  })]
1474
- }), actionLabel && /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1659
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1475
1660
  sx: {
1476
- fontSize: compact ? "10px" : "13px",
1477
- fontWeight: 600,
1478
- color: "rgb(99, 99, 230)",
1479
- cursor: "pointer"
1661
+ fontSize: exportMode ? 11 : 13,
1662
+ color: "#9CA3AF"
1480
1663
  },
1481
- children: actionLabel
1664
+ children: hero.detail
1482
1665
  })]
1483
1666
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1484
1667
  sx: {
1485
- overflowX: compact ? "hidden" : "auto"
1486
- },
1487
- children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1488
- sx: {
1489
- minWidth: compact ? 0 : "600px"
1668
+ display: "grid",
1669
+ gridTemplateColumns: exportMode ? "repeat(3, 1fr)" : {
1670
+ xs: "1fr 1fr",
1671
+ md: "repeat(3, 1fr)"
1490
1672
  },
1491
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1492
- sx: {
1493
- display: "grid",
1494
- gridTemplateColumns: gridTemplateColumns,
1495
- gap: compact ? 1 : 2,
1496
- pb: compact ? 1 : 2.5,
1497
- borderBottom: "1px solid #f0f0f0"
1498
- },
1499
- children: columns.map(function (header) {
1500
- return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1501
- sx: {
1502
- fontSize: compact ? "9px" : "12px",
1503
- color: "rgba(0, 0, 0, 0.4)",
1504
- fontWeight: 500,
1505
- textAlign: "left"
1506
- },
1507
- children: header
1508
- }, header);
1509
- })
1510
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1511
- sx: {
1512
- mt: 1
1513
- },
1514
- children: rows.map(function (row, idx) {
1515
- var _row$progress;
1516
- return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1517
- sx: {
1518
- display: "grid",
1519
- gridTemplateColumns: gridTemplateColumns,
1520
- gap: compact ? 1 : 2,
1521
- py: compact ? 0.5 : 1.2,
1522
- alignItems: "center",
1523
- borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
1524
- },
1525
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1526
- sx: {
1527
- display: "flex",
1528
- alignItems: "center",
1529
- gap: 1.5
1530
- },
1531
- children: [row.id && /*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
1532
- sx: {
1533
- width: compact ? 22 : 28,
1534
- height: compact ? 22 : 28,
1535
- fontSize: compact ? "8px" : "10px",
1536
- fontWeight: 700,
1537
- bgcolor: row.avatarBg || "#F3F4F6",
1538
- color: "rgb(99, 99, 230)"
1539
- },
1540
- children: row.id
1541
- }), row.icon && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1542
- sx: {
1543
- color: row.iconColor || "inherit",
1544
- display: "flex",
1545
- alignItems: "center"
1546
- },
1547
- children: /*#__PURE__*/jsxRuntime.jsx(row.icon, {
1548
- sx: {
1549
- fontSize: "18px"
1550
- }
1551
- })
1552
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1553
- sx: {
1554
- fontSize: compact ? "10px" : "12px",
1555
- fontWeight: 700,
1556
- color: "#000"
1557
- },
1558
- children: row.name
1559
- })]
1560
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1561
- sx: {
1562
- fontSize: compact ? "10px" : "13px",
1563
- fontWeight: 600,
1564
- color: "#000",
1565
- textAlign: "left"
1566
- },
1567
- children: row.val1
1568
- }), row.type === "progress" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1569
- sx: {
1570
- display: "flex",
1571
- alignItems: "center",
1572
- gap: 1.5
1573
- },
1574
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1575
- sx: {
1576
- flexGrow: 1
1577
- },
1578
- children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
1579
- variant: "determinate",
1580
- value: Math.min(100, Math.max(0, (_row$progress = row.progress) !== null && _row$progress !== void 0 ? _row$progress : 0)),
1581
- sx: {
1582
- height: compact ? 6 : 8,
1583
- borderRadius: 4,
1584
- bgcolor: "#F3F4F6",
1585
- "& .MuiLinearProgress-bar": {
1586
- borderRadius: 4,
1587
- bgcolor: row.progressColor || "rgb(99, 99, 230)"
1588
- }
1589
- }
1590
- })
1591
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
1592
- sx: {
1593
- fontSize: compact ? "9px" : "11px",
1594
- color: "rgba(0, 0, 0, 0.4)",
1595
- minWidth: "30px"
1596
- },
1597
- children: [row.progress, "%"]
1598
- })]
1599
- }) : /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1600
- sx: {
1601
- fontSize: "13px",
1602
- fontWeight: 600,
1603
- color: "#000",
1604
- textAlign: "left"
1605
- },
1606
- children: row.val2
1607
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1608
- sx: {
1609
- fontSize: compact ? "10px" : "13px",
1610
- fontWeight: row.highlightVal3 ? 700 : 500,
1611
- color: row.highlightVal3 ? row.val3Color || "#22C55E" : "#000",
1612
- textAlign: "left"
1613
- },
1614
- children: row.val3
1615
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1616
- sx: {
1617
- fontSize: "13px",
1618
- fontWeight: 500,
1619
- color: "#000",
1620
- textAlign: "left"
1621
- },
1622
- children: row.val4
1623
- }), columns.length > 5 && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1624
- children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1625
- sx: {
1626
- display: "flex",
1627
- alignItems: "center",
1628
- gap: 0.5
1629
- },
1630
- children: row.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1631
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1632
- sx: {
1633
- fontSize: "14px",
1634
- color: "#22C55E"
1635
- },
1636
- children: "\u25B2"
1637
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1638
- sx: {
1639
- fontSize: "12px",
1640
- color: "#22C55E",
1641
- fontWeight: 700
1642
- },
1643
- children: row.trendLabel
1644
- })]
1645
- }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1646
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1647
- sx: {
1648
- fontSize: "14px",
1649
- color: "#EF4444"
1650
- },
1651
- children: "\u25BC"
1652
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1653
- sx: {
1654
- fontSize: "12px",
1655
- color: "#EF4444",
1656
- fontWeight: 700
1657
- },
1658
- children: row.trendLabel
1659
- })]
1660
- })
1661
- }) : /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1662
- sx: {
1663
- display: "inline-block",
1664
- px: compact ? 1 : 1.5,
1665
- py: compact ? 0.25 : 0.5,
1666
- borderRadius: "100px",
1667
- bgcolor: row.statusBg,
1668
- color: row.statusColor,
1669
- fontSize: compact ? "9px" : "11px",
1670
- fontWeight: 700,
1671
- textAlign: "center"
1672
- },
1673
- children: row.status
1674
- })
1675
- })]
1676
- }, idx);
1677
- })
1678
- })]
1673
+ gap: exportMode ? 1 : 2
1674
+ },
1675
+ children: metrics.map(function (m) {
1676
+ return /*#__PURE__*/jsxRuntime.jsx(MetricCard$1, _objectSpread2(_objectSpread2({}, m), {}, {
1677
+ exportMode: exportMode
1678
+ }), m.title);
1679
1679
  })
1680
1680
  })]
1681
1681
  });
@@ -4146,7 +4146,8 @@ var fourColGridSx = function fourColGridSx(exportMode) {
4146
4146
  gridTemplateColumns: exportMode ? "repeat(4, 1fr)" : {
4147
4147
  xs: "1fr",
4148
4148
  sm: "repeat(2, 1fr)",
4149
- md: "repeat(4, 1fr)"
4149
+ md: "repeat(3, 1fr)",
4150
+ xl: "repeat(4, 1fr)"
4150
4151
  },
4151
4152
  gap: GRID_GAP,
4152
4153
  mt: GRID_GAP,
@@ -16484,6 +16485,7 @@ var EmailSection$1 = /*#__PURE__*/Object.freeze({
16484
16485
  });
16485
16486
 
16486
16487
  exports.AbandonedDonationRecovery = AbandonedDonationRecovery;
16488
+ exports.ActiveCampaignsCard = ActiveCampaignsCard;
16487
16489
  exports.Dashboard = Dashboard;
16488
16490
  exports.DashboardReport = DashboardReport;
16489
16491
  exports.DashboardTheme = theme;