@ammarkhalidfarooq/dashboard-package 0.3.29 → 0.3.31

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.
Files changed (5) hide show
  1. package/dist/index.cjs.js +957 -272
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +957 -272
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -774,7 +774,7 @@ var DisplayCard = function DisplayCard(_ref) {
774
774
  width: "44px",
775
775
  height: "44px",
776
776
  borderRadius: "50%",
777
- backgroundColor: "#dfdbdb95",
777
+ backgroundColor: "#f7f7ff",
778
778
  display: "flex",
779
779
  alignItems: "center",
780
780
  justifyContent: "center",
@@ -832,7 +832,7 @@ var CardWrapper = function CardWrapper(_ref) {
832
832
  sx: {
833
833
  display: "flex",
834
834
  flexDirection: "column",
835
- gap: 2
835
+ gap: 1
836
836
  },
837
837
  children: children
838
838
  })]
@@ -901,7 +901,7 @@ var LandingPagesCard = function LandingPagesCard() {
901
901
  fontSize: "12px",
902
902
  color: "rgba(0, 0, 0, 0.4)",
903
903
  fontWeight: 500,
904
- textAlign: "right"
904
+ textAlign: "left"
905
905
  },
906
906
  children: "Visitors"
907
907
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -909,7 +909,7 @@ var LandingPagesCard = function LandingPagesCard() {
909
909
  fontSize: "12px",
910
910
  color: "rgba(0, 0, 0, 0.4)",
911
911
  fontWeight: 500,
912
- textAlign: "right"
912
+ textAlign: "left"
913
913
  },
914
914
  children: "Donations"
915
915
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -917,7 +917,7 @@ var LandingPagesCard = function LandingPagesCard() {
917
917
  fontSize: "12px",
918
918
  color: "rgba(0, 0, 0, 0.4)",
919
919
  fontWeight: 500,
920
- textAlign: "right"
920
+ textAlign: "left"
921
921
  },
922
922
  children: "Revenue"
923
923
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -925,7 +925,8 @@ var LandingPagesCard = function LandingPagesCard() {
925
925
  fontSize: "12px",
926
926
  color: "rgba(0, 0, 0, 0.4)",
927
927
  fontWeight: 500,
928
- textAlign: "right"
928
+ textAlign: "left",
929
+ whiteSpace: "nowrap"
929
930
  },
930
931
  children: "Conv. rate"
931
932
  })]
@@ -952,7 +953,7 @@ var LandingPagesCard = function LandingPagesCard() {
952
953
  fontSize: "13px",
953
954
  color: "rgba(0, 0, 0, 0.6)",
954
955
  fontWeight: 500,
955
- textAlign: "right"
956
+ textAlign: "left"
956
957
  },
957
958
  children: item.visitors
958
959
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -960,7 +961,7 @@ var LandingPagesCard = function LandingPagesCard() {
960
961
  fontSize: "13px",
961
962
  color: "rgba(0, 0, 0, 0.6)",
962
963
  fontWeight: 500,
963
- textAlign: "right"
964
+ textAlign: "left"
964
965
  },
965
966
  children: item.donations
966
967
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -968,7 +969,7 @@ var LandingPagesCard = function LandingPagesCard() {
968
969
  fontSize: "13px",
969
970
  color: "rgba(0, 0, 0, 0.6)",
970
971
  fontWeight: 500,
971
- textAlign: "right"
972
+ textAlign: "left"
972
973
  },
973
974
  children: item.revenue
974
975
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -976,7 +977,7 @@ var LandingPagesCard = function LandingPagesCard() {
976
977
  fontSize: "13px",
977
978
  color: "#22C55E",
978
979
  fontWeight: 700,
979
- textAlign: "right"
980
+ textAlign: "left"
980
981
  },
981
982
  children: item.cvr
982
983
  })]
@@ -1031,7 +1032,8 @@ var KeywordsCard = function KeywordsCard() {
1031
1032
  sx: {
1032
1033
  fontSize: "12px",
1033
1034
  color: "rgba(0, 0, 0, 0.4)",
1034
- fontWeight: 500
1035
+ fontWeight: 500,
1036
+ textAlign: "left"
1035
1037
  },
1036
1038
  children: "Keyword"
1037
1039
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -1039,7 +1041,7 @@ var KeywordsCard = function KeywordsCard() {
1039
1041
  fontSize: "12px",
1040
1042
  color: "rgba(0, 0, 0, 0.4)",
1041
1043
  fontWeight: 500,
1042
- textAlign: "right"
1044
+ textAlign: "left"
1043
1045
  },
1044
1046
  children: "Clicks"
1045
1047
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -1047,7 +1049,7 @@ var KeywordsCard = function KeywordsCard() {
1047
1049
  fontSize: "12px",
1048
1050
  color: "rgba(0, 0, 0, 0.4)",
1049
1051
  fontWeight: 500,
1050
- textAlign: "center"
1052
+ textAlign: "left"
1051
1053
  },
1052
1054
  children: "Position"
1053
1055
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
@@ -1055,7 +1057,7 @@ var KeywordsCard = function KeywordsCard() {
1055
1057
  fontSize: "12px",
1056
1058
  color: "rgba(0, 0, 0, 0.4)",
1057
1059
  fontWeight: 500,
1058
- textAlign: "right"
1060
+ textAlign: "left"
1059
1061
  },
1060
1062
  children: "Trend"
1061
1063
  })]
@@ -1065,7 +1067,7 @@ var KeywordsCard = function KeywordsCard() {
1065
1067
  display: "grid",
1066
1068
  gridTemplateColumns: "2.5fr 1fr 1fr 1fr",
1067
1069
  gap: 2,
1068
- py: 1.5,
1070
+ // py: 0.5,
1069
1071
  alignItems: "center",
1070
1072
  borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1071
1073
  },
@@ -1082,20 +1084,21 @@ var KeywordsCard = function KeywordsCard() {
1082
1084
  fontSize: "13px",
1083
1085
  color: "rgba(0, 0, 0, 0.6)",
1084
1086
  fontWeight: 500,
1085
- textAlign: "right"
1087
+ textAlign: "left"
1086
1088
  },
1087
1089
  children: item.clicks
1088
1090
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1089
1091
  sx: {
1090
- display: "flex",
1091
- justifyContent: "center"
1092
+ width: "40px",
1093
+ height: "30px",
1094
+ textAlign: "left"
1092
1095
  },
1093
1096
  children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1094
1097
  sx: {
1095
- bgcolor: "#ebf2ff",
1098
+ bgcolor: "#ebf2ffb1",
1096
1099
  color: "#3431e4",
1097
- px: 1.5,
1098
- py: 0.5,
1100
+ // px: 0.5,
1101
+ // py: 0.5,
1099
1102
  borderRadius: "100px",
1100
1103
  fontSize: "11px",
1101
1104
  fontWeight: 700,
@@ -1108,13 +1111,13 @@ var KeywordsCard = function KeywordsCard() {
1108
1111
  sx: {
1109
1112
  display: "flex",
1110
1113
  alignItems: "center",
1111
- justifyContent: "flex-end",
1114
+ justifyContent: "flex-start",
1112
1115
  gap: 0.5
1113
1116
  },
1114
1117
  children: item.trendType === "up" ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1115
1118
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1116
1119
  sx: {
1117
- fontSize: "10px",
1120
+ fontSize: "14px",
1118
1121
  color: "#22C55E"
1119
1122
  },
1120
1123
  children: "\u25B2"
@@ -1129,7 +1132,7 @@ var KeywordsCard = function KeywordsCard() {
1129
1132
  }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1130
1133
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1131
1134
  sx: {
1132
- fontSize: "10px",
1135
+ fontSize: "14px",
1133
1136
  color: "#EF4444"
1134
1137
  },
1135
1138
  children: "\u25BC"
@@ -1278,7 +1281,7 @@ var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
1278
1281
  sx: {
1279
1282
  display: "flex",
1280
1283
  justifyContent: "space-between",
1281
- py: 1.5,
1284
+ // py: 1.5,
1282
1285
  alignItems: "center",
1283
1286
  borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1284
1287
  },
@@ -1286,7 +1289,8 @@ var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
1286
1289
  sx: {
1287
1290
  display: "flex",
1288
1291
  alignItems: "center",
1289
- gap: 1.5
1292
+ gap: 1.5,
1293
+ marginBottom: "10px"
1290
1294
  },
1291
1295
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1292
1296
  sx: {
@@ -1374,7 +1378,7 @@ var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
1374
1378
  sx: {
1375
1379
  display: "flex",
1376
1380
  justifyContent: "space-between",
1377
- py: 1.5,
1381
+ // py: 1.5,
1378
1382
  alignItems: "center",
1379
1383
  borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1380
1384
  },
@@ -1382,7 +1386,8 @@ var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
1382
1386
  sx: {
1383
1387
  display: "flex",
1384
1388
  alignItems: "center",
1385
- gap: 1.5
1389
+ gap: 1.5,
1390
+ marginBottom: "10px"
1386
1391
  },
1387
1392
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1388
1393
  sx: {
@@ -1470,7 +1475,7 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
1470
1475
  sx: {
1471
1476
  display: "flex",
1472
1477
  justifyContent: "space-between",
1473
- py: 1.5,
1478
+ // py: 1.5,
1474
1479
  alignItems: "center",
1475
1480
  borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1476
1481
  },
@@ -1478,7 +1483,8 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
1478
1483
  sx: {
1479
1484
  display: "flex",
1480
1485
  alignItems: "center",
1481
- gap: 1.5
1486
+ gap: 1.5,
1487
+ marginBottom: "10px"
1482
1488
  },
1483
1489
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
1484
1490
  sx: {
@@ -1517,28 +1523,28 @@ var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
1517
1523
  var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
1518
1524
  var data = [{
1519
1525
  id: "YO",
1520
- avatarBg: "#c1cfdedb",
1526
+ // avatarBg: "#c1cfde70",
1521
1527
  name: "Yemen Orphans - Meta",
1522
1528
  spend: "$8,200",
1523
1529
  revenue: "$31,400",
1524
1530
  roas: "3.8x"
1525
1531
  }, {
1526
1532
  id: "GF",
1527
- avatarBg: "#c1cfdedb",
1533
+ // avatarBg: "#c1cfdedb",
1528
1534
  name: "Gaza Food - Google",
1529
1535
  spend: "$7,400",
1530
1536
  revenue: "$25,200",
1531
1537
  roas: "3.4x"
1532
1538
  }, {
1533
1539
  id: "PW",
1534
- avatarBg: "#c1cfdedb",
1540
+ // avatarBg: "#c1cfdedb",
1535
1541
  name: "Pakistan Wells - Meta",
1536
1542
  spend: "$5,800",
1537
1543
  revenue: "$18,600",
1538
1544
  roas: "3.2x"
1539
1545
  }, {
1540
1546
  id: "R",
1541
- avatarBg: "#c1cfdedb",
1547
+ // avatarBg: "#c1cfdedb",
1542
1548
  name: "Ramadan - TikTok",
1543
1549
  spend: "$3,200",
1544
1550
  revenue: "$8,900",
@@ -1594,7 +1600,7 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
1594
1600
  display: "grid",
1595
1601
  gridTemplateColumns: "2.5fr 1fr 1fr 0.8fr",
1596
1602
  gap: 1,
1597
- py: 1.5,
1603
+ py: 1,
1598
1604
  alignItems: "center",
1599
1605
  borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
1600
1606
  },
@@ -1609,7 +1615,7 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
1609
1615
  width: 24,
1610
1616
  height: 24,
1611
1617
  borderRadius: "50%",
1612
- bgcolor: item.avatarBg,
1618
+ bgcolor: "#c1cfde71",
1613
1619
  color: "#3431e4ff",
1614
1620
  display: "flex",
1615
1621
  alignItems: "center",
@@ -1644,10 +1650,12 @@ var TopPerformingCampaignsCard = function TopPerformingCampaignsCard() {
1644
1650
  children: item.revenue
1645
1651
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
1646
1652
  sx: {
1647
- bgcolor: "#DCFCE7",
1648
- color: "#22C55E",
1649
- px: 1,
1650
- py: 0.5,
1653
+ bgcolor: "#48d8d620",
1654
+ color: "#157c3bff",
1655
+ // px: 1,
1656
+ // py: 0.5,
1657
+ width: "40px",
1658
+ height: "25px",
1651
1659
  borderRadius: "100px",
1652
1660
  fontSize: "11px",
1653
1661
  fontWeight: 700,
@@ -1694,7 +1702,7 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
1694
1702
  display: "flex",
1695
1703
  alignItems: "center",
1696
1704
  gap: 2,
1697
- py: 0.5
1705
+ py: 0.7
1698
1706
  },
1699
1707
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1700
1708
  sx: {
@@ -1713,7 +1721,7 @@ var PaidDonorGeographyCard = function PaidDonorGeographyCard() {
1713
1721
  variant: "determinate",
1714
1722
  value: item.percentage,
1715
1723
  sx: {
1716
- height: 15,
1724
+ height: 8,
1717
1725
  borderRadius: 4,
1718
1726
  bgcolor: "#F3F4F6",
1719
1727
  "& .MuiLinearProgress-bar": {
@@ -1833,7 +1841,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
1833
1841
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1834
1842
  sx: _objectSpread2({
1835
1843
  bgcolor: "#fff",
1836
- borderRadius: "24px",
1844
+ borderRadius: 4,
1837
1845
  border: "1px solid #f0f0f0",
1838
1846
  boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
1839
1847
  p: 3,
@@ -1843,9 +1851,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
1843
1851
  flexDirection: "column"
1844
1852
  }, sx),
1845
1853
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1846
- sx: {
1847
- mb: 2
1848
- },
1854
+ sx: {},
1849
1855
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1850
1856
  sx: {
1851
1857
  fontWeight: 700,
@@ -1858,7 +1864,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
1858
1864
  sx: {
1859
1865
  fontSize: "13px",
1860
1866
  color: "rgba(0, 0, 0, 0.4)",
1861
- mt: 0.2,
1867
+ // mt: 0.2,
1862
1868
  textAlign: "left"
1863
1869
  },
1864
1870
  children: subtitle
@@ -1867,7 +1873,7 @@ var DonorMixCard = function DonorMixCard(_ref) {
1867
1873
  sx: {
1868
1874
  position: "relative",
1869
1875
  height: "180px",
1870
- mb: 2,
1876
+ // mb: 1,
1871
1877
  display: "flex",
1872
1878
  justifyContent: "center"
1873
1879
  },
@@ -1875,18 +1881,16 @@ var DonorMixCard = function DonorMixCard(_ref) {
1875
1881
  options: chartOptions,
1876
1882
  series: series,
1877
1883
  type: "donut",
1878
- width: "240"
1884
+ width: "210"
1879
1885
  })
1880
1886
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1881
- sx: {
1882
- mt: "auto"
1883
- },
1887
+ sx: {},
1884
1888
  children: [items.map(function (item, idx) {
1885
1889
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1886
1890
  sx: {
1887
1891
  display: "flex",
1888
1892
  justifyContent: "space-between",
1889
- mb: idx === items.length - 1 ? showBottomSummary ? 3 : 0 : 1.5
1893
+ mb: idx === items.length - 1 ? showBottomSummary ? 1 : 0 : 1
1890
1894
  },
1891
1895
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1892
1896
  sx: {
@@ -1920,15 +1924,23 @@ var DonorMixCard = function DonorMixCard(_ref) {
1920
1924
  }, idx);
1921
1925
  }), showBottomSummary && /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
1922
1926
  sx: {
1923
- display: "flex",
1924
- justifyContent: "space-between",
1925
- alignItems: "center",
1927
+ // display: "flex",
1928
+ // justifyContent: "space-between",
1929
+ // alignItems: "center",
1926
1930
  pt: 2,
1927
- borderTop: "1px solid #f0f0f0"
1931
+ borderTop: "1px solid #f0f0f0",
1932
+ textAlign: "left"
1928
1933
  },
1929
1934
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1930
1935
  sx: {
1931
- fontSize: "20px",
1936
+ fontSize: "13px",
1937
+ fontWeight: 500,
1938
+ color: "rgba(0, 0, 0, 0.4)"
1939
+ },
1940
+ children: "Avg gift"
1941
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
1942
+ sx: {
1943
+ fontSize: "13px",
1932
1944
  fontWeight: 700,
1933
1945
  color: "#000"
1934
1946
  },
@@ -2079,8 +2091,10 @@ var OrganicSection = function OrganicSection(_ref) {
2079
2091
  val: "3.3%",
2080
2092
  color: "#FFFC00"
2081
2093
  }],
2082
- showBottomSummary: false
2083
- // sx={{ width: "100%" }}
2094
+ showBottomSummary: false,
2095
+ sx: {
2096
+ pb: 2
2097
+ }
2084
2098
  })
2085
2099
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
2086
2100
  item: true,
@@ -4059,15 +4073,15 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
4059
4073
  _ref$subtitle = _ref.subtitle,
4060
4074
  subtitle = _ref$subtitle === void 0 ? "Live fundraisers ranked by velocity" : _ref$subtitle,
4061
4075
  _ref$columns = _ref.columns,
4062
- columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift", "Status"] : _ref$columns,
4076
+ columns = _ref$columns === void 0 ? ["Campaign", "Raised", "Progress", "Donors", "Avg gift"] : _ref$columns,
4063
4077
  _ref$rows = _ref.rows,
4064
4078
  rows = _ref$rows === void 0 ? [] : _ref$rows,
4065
4079
  _ref$gridTemplateColu = _ref.gridTemplateColumns,
4066
- gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "2.5fr 1fr 1.5fr 0.8fr 1fr 0.8fr" : _ref$gridTemplateColu;
4080
+ gridTemplateColumns = _ref$gridTemplateColu === void 0 ? "3fr 1fr 1.5fr 0.8fr 1fr " : _ref$gridTemplateColu;
4067
4081
  return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4068
4082
  sx: {
4069
4083
  bgcolor: "#fff",
4070
- borderRadius: "24px",
4084
+ borderRadius: 4,
4071
4085
  border: "1px solid #f0f0f0",
4072
4086
  boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
4073
4087
  p: 3
@@ -4111,7 +4125,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
4111
4125
  display: "grid",
4112
4126
  gridTemplateColumns: gridTemplateColumns,
4113
4127
  gap: 2,
4114
- pb: 1.5,
4128
+ pb: 2.5,
4115
4129
  borderBottom: "1px solid #f0f0f0"
4116
4130
  },
4117
4131
  children: columns.map(function (header) {
@@ -4135,7 +4149,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
4135
4149
  display: "grid",
4136
4150
  gridTemplateColumns: gridTemplateColumns,
4137
4151
  gap: 2,
4138
- py: 1.89,
4152
+ py: 1.2,
4139
4153
  alignItems: "center",
4140
4154
  borderBottom: idx === rows.length - 1 ? "none" : "1px solid #f5f5f5"
4141
4155
  },
@@ -4168,7 +4182,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
4168
4182
  })
4169
4183
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4170
4184
  sx: {
4171
- fontSize: "13px",
4185
+ fontSize: "12px",
4172
4186
  fontWeight: 700,
4173
4187
  color: "#000"
4174
4188
  },
@@ -4237,7 +4251,7 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
4237
4251
  textAlign: "left"
4238
4252
  },
4239
4253
  children: row.val4
4240
- }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4254
+ }), columns.length > 5 && /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4241
4255
  children: row.type === "trend" ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4242
4256
  sx: {
4243
4257
  display: "flex",
@@ -4279,221 +4293,804 @@ var ActiveCampaignsCard = function ActiveCampaignsCard(_ref) {
4279
4293
  });
4280
4294
  };
4281
4295
 
4282
- var DonationTypeBarChart = function DonationTypeBarChart() {
4283
- var chartOptions = {
4284
- chart: {
4285
- type: "bar",
4286
- toolbar: {
4287
- show: false
4288
- },
4289
- zoom: {
4290
- enabled: false
4291
- },
4292
- fontFamily: "Inter, sans-serif"
4293
- },
4294
- plotOptions: {
4295
- bar: {
4296
- horizontal: false,
4297
- columnWidth: "100%",
4298
- borderRadius: 4,
4299
- dataLabels: {
4300
- position: "top"
4301
- }
4302
- }
4303
- },
4304
- dataLabels: {
4305
- enabled: true,
4306
- formatter: function formatter(val) {
4307
- return "$".concat(val, "K");
4308
- },
4309
- offsetY: -22,
4310
- style: {
4311
- fontSize: "10px",
4312
- fontWeight: 700,
4313
- colors: ["#000"]
4314
- }
4315
- },
4316
- stroke: {
4317
- show: true,
4318
- width: 2,
4319
- colors: ["transparent"]
4320
- },
4321
- xaxis: {
4322
- categories: ["Wk 1", "Wk 2", "Wk 3", "Wk 4"],
4323
- axisBorder: {
4324
- show: false
4325
- },
4326
- axisTicks: {
4327
- show: false
4328
- },
4329
- labels: {
4330
- style: {
4331
- colors: "rgba(0, 0, 0, 0.4)",
4332
- fontSize: "12px"
4333
- }
4334
- }
4335
- },
4336
- yaxis: {
4337
- min: 0,
4338
- max: 60,
4339
- tickAmount: 3,
4340
- labels: {
4341
- formatter: function formatter(val) {
4342
- return "$".concat(val, "K");
4343
- },
4344
- style: {
4345
- colors: "rgba(0, 0, 0, 0.4)",
4346
- fontSize: "12px"
4347
- }
4348
- }
4349
- },
4350
- fill: {
4351
- opacity: 1
4352
- },
4353
- colors: ["rgb(99, 99, 230)", "#10B981"],
4354
- grid: {
4355
- borderColor: "#f1f1f1",
4356
- strokeDashArray: 4,
4357
- yaxis: {
4358
- lines: {
4359
- show: true
4360
- }
4361
- }
4362
- },
4363
- legend: {
4364
- show: false
4365
- },
4366
- tooltip: {
4367
- y: {
4368
- formatter: function formatter(val) {
4369
- return "$".concat(val, "K");
4370
- }
4371
- }
4372
- }
4373
- };
4374
- var series = [{
4375
- name: "Recurring",
4376
- data: [9.2, 11.8, 13.4, 15.6]
4377
- }, {
4378
- name: "One-time",
4379
- data: [32.4, 41.2, 46.8, 51.3]
4380
- }];
4296
+ var TrafficSourceCard = function TrafficSourceCard(_ref) {
4297
+ var _ref$title = _ref.title,
4298
+ title = _ref$title === void 0 ? "Traffic source" : _ref$title,
4299
+ _ref$subtitle = _ref.subtitle,
4300
+ subtitle = _ref$subtitle === void 0 ? "Revenue by channel · 30 days" : _ref$subtitle,
4301
+ _ref$data = _ref.data,
4302
+ data = _ref$data === void 0 ? [{
4303
+ label: "Paid Ads",
4304
+ revenue: "$98.4K",
4305
+ share: 41,
4306
+ color: "rgb(99, 99, 230)"
4307
+ }, {
4308
+ label: "Organic",
4309
+ revenue: "$62.1K",
4310
+ share: 26,
4311
+ color: "#10B981"
4312
+ }, {
4313
+ label: "Email",
4314
+ revenue: "$38.6K",
4315
+ share: 16,
4316
+ color: "#0EA5E9"
4317
+ }, {
4318
+ label: "Direct",
4319
+ revenue: "$15.5K",
4320
+ share: 6,
4321
+ color: "#94A3B8"
4322
+ }] : _ref$data,
4323
+ _ref$total = _ref.total,
4324
+ total = _ref$total === void 0 ? "$240.9K" : _ref$total;
4381
4325
  return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
4382
4326
  sx: {
4383
- bgcolor: "#fff",
4384
- borderRadius: "24px",
4327
+ p: 3,
4328
+ borderRadius: 4,
4385
4329
  border: "1px solid #f0f0f0",
4386
4330
  boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
4387
- p: 3
4388
- // width: "100%",
4331
+ bgcolor: "#fff",
4389
4332
  // height: "100%",
4333
+ display: "flex",
4334
+ flexDirection: "column"
4390
4335
  },
4391
4336
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4337
+ sx: {},
4338
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4339
+ sx: {
4340
+ fontWeight: 700,
4341
+ fontSize: "18px",
4342
+ color: "#000",
4343
+ textAlign: "left"
4344
+ },
4345
+ children: title
4346
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4347
+ sx: {
4348
+ fontSize: "13px",
4349
+ color: "rgba(0, 0, 0, 0.4)",
4350
+ mt: 0.5,
4351
+ mb: 0.5,
4352
+ textAlign: "left"
4353
+ },
4354
+ children: subtitle
4355
+ })]
4356
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4392
4357
  sx: {
4393
- display: "flex",
4394
- flexDirection: "column",
4395
- mb: 2
4358
+ display: "grid",
4359
+ gridTemplateColumns: "2.5fr 1.5fr 2fr",
4360
+ gap: 2,
4361
+ mb: 1.5
4396
4362
  },
4397
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4363
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4398
4364
  sx: {
4365
+ fontSize: "12px",
4366
+ fontWeight: 700,
4367
+ color: "rgba(0, 0, 0, 0.3)",
4368
+ letterSpacing: "0.05em",
4399
4369
  textAlign: "left"
4400
4370
  },
4401
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4402
- sx: {
4403
- fontWeight: 700,
4404
- fontSize: "18px",
4405
- color: "#000"
4406
- },
4407
- children: "Recurring vs one-time"
4408
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4409
- sx: {
4410
- fontSize: "13px",
4411
- color: "rgba(0, 0, 0, 0.4)",
4412
- mt: 0.2
4413
- },
4414
- children: "Donation type \xB7 weekly"
4415
- })]
4416
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4371
+ children: "SOURCE"
4372
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4417
4373
  sx: {
4418
- display: "flex",
4419
- gap: 10,
4420
- mt: 3,
4421
- mb: 1
4374
+ fontSize: "12px",
4375
+ fontWeight: 700,
4376
+ color: "rgba(0, 0, 0, 0.3)",
4377
+ letterSpacing: "0.05em",
4378
+ textAlign: "left"
4422
4379
  },
4423
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4380
+ children: "REVENUE"
4381
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4382
+ sx: {
4383
+ fontSize: "12px",
4384
+ fontWeight: 700,
4385
+ color: "rgba(0, 0, 0, 0.3)",
4386
+ letterSpacing: "0.05em",
4387
+ textAlign: "right"
4388
+ },
4389
+ children: "SHARE"
4390
+ })]
4391
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4392
+ sx: {
4393
+ flexGrow: 1
4394
+ },
4395
+ children: data.map(function (item, index) {
4396
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4424
4397
  sx: {
4425
- textAlign: "left"
4398
+ display: "grid",
4399
+ gridTemplateColumns: "2.5fr 1.5fr 2fr",
4400
+ gap: 2,
4401
+ py: 1.5,
4402
+ alignItems: "center",
4403
+ borderBottom: index === data.length - 1 ? "none" : "1px solid #f5f5f5"
4426
4404
  },
4427
4405
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4428
4406
  sx: {
4429
4407
  display: "flex",
4430
4408
  alignItems: "center",
4431
- gap: 1,
4432
- mb: 0.5
4409
+ gap: 1
4433
4410
  },
4434
4411
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4435
4412
  sx: {
4436
- width: 8,
4437
- height: 8,
4438
- bgcolor: "rgb(99, 99, 230)",
4439
- borderRadius: "50%"
4413
+ width: 10,
4414
+ height: 10,
4415
+ bgcolor: item.color,
4416
+ borderRadius: "2px"
4440
4417
  }
4441
4418
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4442
4419
  sx: {
4443
- fontSize: "12px",
4444
- color: "rgba(0, 0, 0, 0.4)",
4445
- fontWeight: 500
4420
+ fontSize: "14px",
4421
+ fontWeight: 600,
4422
+ color: "rgba(0, 0, 0, 0.7)"
4446
4423
  },
4447
- children: "Recurring"
4424
+ children: item.label
4448
4425
  })]
4449
4426
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4450
4427
  sx: {
4451
- fontSize: "18px",
4428
+ fontSize: "14px",
4452
4429
  fontWeight: 700,
4453
4430
  color: "#000"
4454
4431
  },
4455
- children: "$54,937"
4456
- })]
4457
- }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4458
- sx: {
4459
- textAlign: "left"
4460
- },
4461
- children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4432
+ children: item.revenue
4433
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4462
4434
  sx: {
4463
4435
  display: "flex",
4464
4436
  alignItems: "center",
4465
- gap: 1,
4466
- mb: 0.5
4437
+ gap: 1.5,
4438
+ justifyContent: "flex-end"
4439
+ },
4440
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4441
+ sx: {
4442
+ width: "60px",
4443
+ flexShrink: 0
4444
+ },
4445
+ children: /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
4446
+ variant: "determinate",
4447
+ value: item.share,
4448
+ sx: {
4449
+ height: 6,
4450
+ borderRadius: 3,
4451
+ bgcolor: "#F3F4F6",
4452
+ "& .MuiLinearProgress-bar": {
4453
+ borderRadius: 3,
4454
+ bgcolor: item.color
4455
+ }
4456
+ }
4457
+ })
4458
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
4459
+ sx: {
4460
+ fontSize: "14px",
4461
+ fontWeight: 700,
4462
+ color: "#000",
4463
+ minWidth: "30px",
4464
+ textAlign: "right"
4465
+ },
4466
+ children: [item.share, "%"]
4467
+ })]
4468
+ })]
4469
+ }, index);
4470
+ })
4471
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4472
+ sx: {
4473
+ mt: 2,
4474
+ pt: 2,
4475
+ // borderTop: "1px solid #f0f0f0",
4476
+ display: "flex",
4477
+ justifyContent: "space-between",
4478
+ alignItems: "center"
4479
+ },
4480
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4481
+ sx: {
4482
+ fontSize: "14px",
4483
+ fontWeight: 500,
4484
+ color: "rgba(0, 0, 0, 0.4)"
4485
+ },
4486
+ children: "Total"
4487
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4488
+ sx: {
4489
+ fontSize: "16px",
4490
+ fontWeight: 700,
4491
+ color: "#000"
4492
+ },
4493
+ children: total
4494
+ })]
4495
+ })]
4496
+ });
4497
+ };
4498
+
4499
+ var MetricSparklineCard = function MetricSparklineCard(_ref) {
4500
+ var title = _ref.title,
4501
+ subtitle = _ref.subtitle,
4502
+ value = _ref.value,
4503
+ trend = _ref.trend,
4504
+ _ref$trendColor = _ref.trendColor,
4505
+ trendColor = _ref$trendColor === void 0 ? "#22C55E" : _ref$trendColor,
4506
+ _ref$chartData = _ref.chartData,
4507
+ chartData = _ref$chartData === void 0 ? [] : _ref$chartData,
4508
+ _ref$chartColor = _ref.chartColor,
4509
+ chartColor = _ref$chartColor === void 0 ? "rgb(99, 99, 230)" : _ref$chartColor,
4510
+ _ref$footerMetrics = _ref.footerMetrics,
4511
+ footerMetrics = _ref$footerMetrics === void 0 ? [] : _ref$footerMetrics;
4512
+ var chartOptions = {
4513
+ chart: {
4514
+ type: "area",
4515
+ sparkline: {
4516
+ enabled: true
4517
+ },
4518
+ animations: {
4519
+ enabled: true
4520
+ }
4521
+ },
4522
+ stroke: {
4523
+ curve: "smooth",
4524
+ width: 2
4525
+ },
4526
+ fill: {
4527
+ type: "gradient",
4528
+ gradient: {
4529
+ shadeIntensity: 1,
4530
+ opacityFrom: 0.45,
4531
+ opacityTo: 0.05,
4532
+ stops: [20, 100, 100]
4533
+ }
4534
+ },
4535
+ colors: [chartColor],
4536
+ tooltip: {
4537
+ enabled: false
4538
+ }
4539
+ };
4540
+ var series = [{
4541
+ name: title,
4542
+ data: chartData
4543
+ }];
4544
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
4545
+ sx: {
4546
+ p: 3,
4547
+ borderRadius: 4,
4548
+ border: "1px solid #f0f0f0",
4549
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
4550
+ bgcolor: "#fff",
4551
+ // height: "100%",
4552
+ display: "flex",
4553
+ flexDirection: "column"
4554
+ },
4555
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4556
+ sx: {
4557
+ mb: 1
4558
+ },
4559
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4560
+ sx: {
4561
+ fontWeight: 700,
4562
+ fontSize: "16px",
4563
+ color: "#000",
4564
+ textAlign: "left"
4565
+ },
4566
+ children: title
4567
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4568
+ sx: {
4569
+ fontSize: "12px",
4570
+ color: "rgba(0, 0, 0, 0.4)",
4571
+ mt: 0.2,
4572
+ textAlign: "left"
4573
+ },
4574
+ children: subtitle
4575
+ })]
4576
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4577
+ sx: {
4578
+ mt: 1,
4579
+ display: "flex",
4580
+ flexDirection: "column",
4581
+ alignItems: "flex-start"
4582
+ },
4583
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4584
+ sx: {
4585
+ fontSize: "24px",
4586
+ fontWeight: 700,
4587
+ color: "#000"
4588
+ },
4589
+ children: value
4590
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4591
+ sx: {
4592
+ fontSize: "11px",
4593
+ fontWeight: 700,
4594
+ color: trendColor,
4595
+ mt: 0.2
4596
+ },
4597
+ children: trend
4598
+ })]
4599
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4600
+ sx: {
4601
+ height: 60,
4602
+ mb: 2
4603
+ },
4604
+ children: [/*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
4605
+ options: chartOptions,
4606
+ series: series,
4607
+ type: "area",
4608
+ height: "100%"
4609
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4610
+ sx: {
4611
+ display: "flex",
4612
+ justifyContent: "space-between",
4613
+ mt: 0.5
4614
+ },
4615
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4616
+ sx: {
4617
+ fontSize: "10px",
4618
+ color: "rgba(0, 0, 0, 0.3)"
4619
+ },
4620
+ children: "Apr 5"
4621
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4622
+ sx: {
4623
+ fontSize: "10px",
4624
+ color: "rgba(0, 0, 0, 0.3)"
4625
+ },
4626
+ children: "Apr 17"
4627
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4628
+ sx: {
4629
+ fontSize: "10px",
4630
+ color: "rgba(0, 0, 0, 0.3)"
4631
+ },
4632
+ children: "May 4"
4633
+ })]
4634
+ })]
4635
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4636
+ sx: {
4637
+ mt: "auto",
4638
+ pt: 3,
4639
+ // borderTop: "1px solid #f0f0f0",
4640
+ display: "flex",
4641
+ justifyContent: "space-between"
4642
+ },
4643
+ children: footerMetrics.map(function (m, idx) {
4644
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4645
+ sx: {
4646
+ textAlign: "center"
4647
+ },
4648
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4649
+ sx: {
4650
+ fontSize: "10px",
4651
+ color: "rgba(0, 0, 0, 0.4)",
4652
+ fontWeight: 500
4653
+ },
4654
+ children: m.label
4655
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4656
+ sx: {
4657
+ fontSize: "14px",
4658
+ fontWeight: 700,
4659
+ color: "#000"
4660
+ },
4661
+ children: m.value
4662
+ })]
4663
+ }, idx);
4664
+ })
4665
+ })]
4666
+ });
4667
+ };
4668
+
4669
+ var MetricDonutCard = function MetricDonutCard(_ref) {
4670
+ var title = _ref.title,
4671
+ subtitle = _ref.subtitle,
4672
+ acceptanceRate = _ref.acceptanceRate,
4673
+ acceptanceVal = _ref.acceptanceVal,
4674
+ acceptanceTrend = _ref.acceptanceTrend,
4675
+ raisedVal = _ref.raisedVal,
4676
+ raisedTrend = _ref.raisedTrend,
4677
+ _ref$chartColors = _ref.chartColors,
4678
+ chartColors = _ref$chartColors === void 0 ? ["rgb(99, 99, 230)", "#88bfd290"] : _ref$chartColors;
4679
+ var chartOptions = {
4680
+ chart: {
4681
+ type: "radialBar",
4682
+ sparkline: {
4683
+ enabled: true
4684
+ }
4685
+ },
4686
+ plotOptions: {
4687
+ radialBar: {
4688
+ hollow: {
4689
+ size: "45%"
4690
+ },
4691
+ track: {
4692
+ background: chartColors[1] || "#f0f0f0",
4693
+ strokeWidth: "100%"
4694
+ },
4695
+ dataLabels: {
4696
+ name: {
4697
+ show: true,
4698
+ fontSize: "11px",
4699
+ fontWeight: 500,
4700
+ color: "rgba(0, 0, 0, 0.4)",
4701
+ offsetY: 15
4702
+ },
4703
+ value: {
4704
+ show: true,
4705
+ fontSize: "18px",
4706
+ fontWeight: 700,
4707
+ color: "#000",
4708
+ offsetY: -15,
4709
+ formatter: function formatter() {
4710
+ return acceptanceRate + "%";
4711
+ }
4712
+ }
4713
+ }
4714
+ }
4715
+ },
4716
+ stroke: {
4717
+ lineCap: "butt"
4718
+ },
4719
+ colors: [chartColors[0]],
4720
+ labels: ["accepted"]
4721
+ };
4722
+ var series = [acceptanceRate];
4723
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
4724
+ sx: {
4725
+ p: 3,
4726
+ borderRadius: 4,
4727
+ border: "1px solid #f0f0f0",
4728
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
4729
+ bgcolor: "#fff",
4730
+ // height: "100%",
4731
+ display: "flex",
4732
+ flexDirection: "column"
4733
+ },
4734
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4735
+ sx: {},
4736
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4737
+ sx: {
4738
+ fontWeight: 700,
4739
+ fontSize: "16px",
4740
+ color: "#000",
4741
+ textAlign: "left"
4742
+ },
4743
+ children: title
4744
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4745
+ sx: {
4746
+ fontSize: "12px",
4747
+ color: "rgba(0, 0, 0, 0.4)",
4748
+ mt: 0.2,
4749
+ textAlign: "left"
4750
+ },
4751
+ children: subtitle
4752
+ })]
4753
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4754
+ sx: {
4755
+ height: 160,
4756
+ position: "relative",
4757
+ mt: 1,
4758
+ display: "flex",
4759
+ justifyContent: "center"
4760
+ },
4761
+ children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
4762
+ options: chartOptions,
4763
+ series: series,
4764
+ type: "radialBar",
4765
+ width: "100%",
4766
+ height: "100%"
4767
+ })
4768
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4769
+ sx: {},
4770
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4771
+ sx: {
4772
+ display: "flex",
4773
+ justifyContent: "space-between",
4774
+ alignItems: "center"
4775
+ },
4776
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4777
+ sx: {
4778
+ display: "flex",
4779
+ alignItems: "center",
4780
+ gap: 1
4781
+ },
4782
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4783
+ sx: {
4784
+ width: 10,
4785
+ height: 10,
4786
+ bgcolor: chartColors[0],
4787
+ borderRadius: "2px"
4788
+ }
4789
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4790
+ sx: {
4791
+ fontSize: "13px",
4792
+ color: "rgba(0, 0, 0, 0.5)",
4793
+ fontWeight: 500
4794
+ },
4795
+ children: "Acceptance"
4796
+ })]
4797
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4798
+ sx: {
4799
+ display: "flex",
4800
+ alignItems: "center",
4801
+ gap: 0.5
4802
+ },
4803
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4804
+ sx: {
4805
+ fontSize: "13px",
4806
+ fontWeight: 700,
4807
+ color: "#000"
4808
+ },
4809
+ children: acceptanceVal
4810
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
4811
+ sx: {
4812
+ fontSize: "10px",
4813
+ fontWeight: 700,
4814
+ color: "#22C55E",
4815
+ display: "flex",
4816
+ alignItems: "center"
4817
+ },
4818
+ children: [/*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {
4819
+ sx: {
4820
+ fontSize: "12px"
4821
+ }
4822
+ }), " ", acceptanceTrend]
4823
+ })]
4824
+ })]
4825
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4826
+ sx: {
4827
+ display: "flex",
4828
+ justifyContent: "space-between",
4829
+ alignItems: "center"
4830
+ },
4831
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4832
+ sx: {
4833
+ display: "flex",
4834
+ alignItems: "center",
4835
+ gap: 1
4836
+ },
4837
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4838
+ sx: {
4839
+ width: 10,
4840
+ height: 10,
4841
+ bgcolor: chartColors[1],
4842
+ borderRadius: "2px"
4843
+ }
4844
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4845
+ sx: {
4846
+ fontSize: "13px",
4847
+ color: "rgba(0, 0, 0, 0.5)",
4848
+ fontWeight: 500
4467
4849
  },
4468
- children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
4850
+ children: "Raised"
4851
+ })]
4852
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4853
+ sx: {
4854
+ display: "flex",
4855
+ alignItems: "center",
4856
+ gap: 0.5
4857
+ },
4858
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4859
+ sx: {
4860
+ fontSize: "13px",
4861
+ fontWeight: 700,
4862
+ color: "#000"
4863
+ },
4864
+ children: raisedVal
4865
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
4866
+ sx: {
4867
+ fontSize: "10px",
4868
+ fontWeight: 700,
4869
+ color: "#22C55E",
4870
+ display: "flex",
4871
+ alignItems: "center"
4872
+ },
4873
+ children: [/*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {
4469
4874
  sx: {
4470
- width: 8,
4471
- height: 8,
4472
- bgcolor: "#10B981",
4473
- borderRadius: "50%"
4875
+ fontSize: "12px"
4474
4876
  }
4475
- }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4476
- sx: {
4477
- fontSize: "12px",
4478
- color: "rgba(0, 0, 0, 0.4)",
4479
- fontWeight: 500
4480
- },
4481
- children: "One-time"
4482
- })]
4877
+ }), " ", raisedTrend]
4878
+ })]
4879
+ })]
4880
+ })]
4881
+ })]
4882
+ });
4883
+ };
4884
+
4885
+ var DonationTypeBarChart = function DonationTypeBarChart() {
4886
+ var chartOptions = {
4887
+ chart: {
4888
+ type: "bar",
4889
+ toolbar: {
4890
+ show: false
4891
+ },
4892
+ zoom: {
4893
+ enabled: false
4894
+ },
4895
+ fontFamily: "Inter, sans-serif"
4896
+ },
4897
+ plotOptions: {
4898
+ bar: {
4899
+ horizontal: false,
4900
+ columnWidth: "70%",
4901
+ borderRadius: 4,
4902
+ dataLabels: {
4903
+ position: "top"
4904
+ }
4905
+ }
4906
+ },
4907
+ dataLabels: {
4908
+ enabled: true,
4909
+ formatter: function formatter(val) {
4910
+ return "$".concat(val, "K");
4911
+ },
4912
+ offsetY: -22,
4913
+ style: {
4914
+ fontSize: "10px",
4915
+ fontWeight: 700,
4916
+ colors: ["#000"]
4917
+ }
4918
+ },
4919
+ stroke: {
4920
+ show: true,
4921
+ width: 2,
4922
+ colors: ["transparent"]
4923
+ },
4924
+ xaxis: {
4925
+ categories: ["Wk 1", "Wk 2", "Wk 3", "May 3-4"],
4926
+ axisBorder: {
4927
+ show: false
4928
+ },
4929
+ axisTicks: {
4930
+ show: false
4931
+ },
4932
+ labels: {
4933
+ style: {
4934
+ colors: "rgba(0, 0, 0, 0.4)",
4935
+ fontSize: "11px"
4936
+ }
4937
+ }
4938
+ },
4939
+ yaxis: {
4940
+ min: 0,
4941
+ max: 60,
4942
+ tickAmount: 3,
4943
+ labels: {
4944
+ formatter: function formatter(val) {
4945
+ return val === 40 ? "" : "$".concat(val, "K");
4946
+ },
4947
+ style: {
4948
+ colors: "rgba(0, 0, 0, 0.4)",
4949
+ fontSize: "10px"
4950
+ }
4951
+ }
4952
+ },
4953
+ fill: {
4954
+ opacity: 1
4955
+ },
4956
+ colors: ["rgb(99, 99, 230)", "#10B981"],
4957
+ grid: {
4958
+ borderColor: "#f1f1f1",
4959
+ strokeDashArray: 4,
4960
+ padding: {
4961
+ left: 0,
4962
+ right: 0
4963
+ },
4964
+ yaxis: {
4965
+ lines: {
4966
+ show: true
4967
+ }
4968
+ }
4969
+ },
4970
+ legend: {
4971
+ show: false
4972
+ },
4973
+ tooltip: {
4974
+ y: {
4975
+ formatter: function formatter(val) {
4976
+ return "$".concat(val, "K");
4977
+ }
4978
+ }
4979
+ }
4980
+ };
4981
+ var series = [{
4982
+ name: "Recurring",
4983
+ data: [9.2, 11.8, 13.4, 4.9]
4984
+ }, {
4985
+ name: "One-time",
4986
+ data: [32.4, 41.2, 46.8, 14.3]
4987
+ }];
4988
+ return /*#__PURE__*/jsxRuntime.jsxs(material.Card, {
4989
+ sx: {
4990
+ bgcolor: "#fff",
4991
+ borderRadius: 4,
4992
+ border: "1px solid #f0f0f0",
4993
+ boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
4994
+ p: 3
4995
+ // height: "100%",
4996
+ },
4997
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4998
+ sx: {
4999
+ display: "flex",
5000
+ flexDirection: "column",
5001
+ mb: 1
5002
+ },
5003
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5004
+ sx: {
5005
+ textAlign: "left"
5006
+ },
5007
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5008
+ sx: {
5009
+ fontWeight: 700,
5010
+ fontSize: "18px",
5011
+ color: "#000"
5012
+ },
5013
+ children: "Recurring vs one-time"
5014
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5015
+ sx: {
5016
+ fontSize: "13px",
5017
+ color: "rgba(0, 0, 0, 0.4)",
5018
+ mt: 0
5019
+ },
5020
+ children: "Donation type \xB7 weekly"
5021
+ })]
5022
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5023
+ sx: {
5024
+ display: "flex",
5025
+ gap: 1.5,
5026
+ mt: 0.5,
5027
+ mb: 2
5028
+ },
5029
+ children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5030
+ sx: {
5031
+ display: "flex",
5032
+ alignItems: "center",
5033
+ gap: 0.5
5034
+ },
5035
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
5036
+ sx: {
5037
+ width: 8,
5038
+ height: 8,
5039
+ bgcolor: "rgb(99, 99, 230)",
5040
+ borderRadius: "50%"
5041
+ }
4483
5042
  }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4484
5043
  sx: {
4485
- fontSize: "18px",
4486
- fontWeight: 700,
5044
+ fontSize: "13px",
5045
+ color: "rgba(0, 0, 0, 0.5)",
5046
+ fontWeight: 500
5047
+ },
5048
+ children: "Recurring"
5049
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5050
+ sx: {
5051
+ fontSize: "13px",
5052
+ fontWeight: 600,
5053
+ color: "#000"
5054
+ },
5055
+ children: "$54,937"
5056
+ })]
5057
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
5058
+ sx: {
5059
+ display: "flex",
5060
+ alignItems: "center",
5061
+ gap: 0.5
5062
+ },
5063
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
5064
+ sx: {
5065
+ width: 8,
5066
+ height: 8,
5067
+ bgcolor: "#10B981",
5068
+ borderRadius: "50%"
5069
+ }
5070
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5071
+ sx: {
5072
+ fontSize: "13px",
5073
+ color: "rgba(0, 0, 0, 0.5)",
5074
+ fontWeight: 500
5075
+ },
5076
+ children: "One-time"
5077
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
5078
+ sx: {
5079
+ fontSize: "13px",
5080
+ fontWeight: 600,
4487
5081
  color: "#000"
4488
5082
  },
4489
- children: "$186,001"
5083
+ children: "$188,001"
4490
5084
  })]
4491
5085
  })]
4492
5086
  })]
4493
5087
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4494
5088
  sx: {
4495
- height: 350,
4496
- width: "100%"
5089
+ height: 170,
5090
+ width: "calc(100% + 48px)",
5091
+ ml: -3,
5092
+ mr: -3,
5093
+ mb: 7.5
4497
5094
  },
4498
5095
  children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
4499
5096
  options: chartOptions,
@@ -4554,7 +5151,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
4554
5151
  yaxis: {
4555
5152
  min: 0,
4556
5153
  max: 2,
4557
- tickAmount: 4,
5154
+ tickAmount: 2,
4558
5155
  labels: {
4559
5156
  formatter: function formatter(val) {
4560
5157
  return "".concat(val, "%");
@@ -4626,7 +5223,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
4626
5223
  },
4627
5224
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4628
5225
  sx: {
4629
- mb: 3
5226
+ mb: 0
4630
5227
  },
4631
5228
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4632
5229
  sx: {
@@ -4649,14 +5246,14 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
4649
5246
  sx: {
4650
5247
  display: "flex",
4651
5248
  gap: 10,
4652
- mb: 2
5249
+ mb: 1.5
4653
5250
  },
4654
5251
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4655
5252
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4656
5253
  sx: {
4657
5254
  fontSize: "10px",
4658
5255
  fontWeight: 700,
4659
- color: "#F59E0B",
5256
+ color: "#22C55E",
4660
5257
  textTransform: "uppercase"
4661
5258
  },
4662
5259
  children: "Refunds"
@@ -4712,7 +5309,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
4712
5309
  })]
4713
5310
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4714
5311
  sx: {
4715
- mb: 2
5312
+ mb: 0
4716
5313
  },
4717
5314
  children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
4718
5315
  sx: {
@@ -4721,13 +5318,13 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
4721
5318
  fontWeight: 500,
4722
5319
  textAlign: "left"
4723
5320
  },
4724
- children: "$1,927 refunded \xB7 $215 disputed \xB7 10 cases total"
5321
+ children: "$1,927 refunded \xB7 $215 disputed \xB7 0 cases total"
4725
5322
  })
4726
5323
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4727
5324
  sx: {
4728
5325
  display: "flex",
4729
5326
  gap: 2,
4730
- mb: 4
5327
+ mb: 0
4731
5328
  },
4732
5329
  children: [/*#__PURE__*/jsxRuntime.jsxs(material.Box, {
4733
5330
  sx: {
@@ -4774,7 +5371,7 @@ var RefundsChargebacksCard = function RefundsChargebacksCard() {
4774
5371
  })]
4775
5372
  }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
4776
5373
  sx: {
4777
- height: 250,
5374
+ height: 160,
4778
5375
  width: "100%"
4779
5376
  },
4780
5377
  children: /*#__PURE__*/jsxRuntime.jsx(ReactApexChart, {
@@ -5080,11 +5677,13 @@ var OverallSection = function OverallSection(_ref) {
5080
5677
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5081
5678
  item: true,
5082
5679
  xs: 12,
5083
- md: 8,
5680
+ md: 9,
5084
5681
  children: /*#__PURE__*/jsxRuntime.jsx(ActiveCampaignsCard, {
5085
5682
  title: "Active campaigns",
5086
5683
  subtitle: "Live fundraisers ranked by velocity",
5087
- columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift", "Status"],
5684
+ columns: ["Campaign", "Raised", "Progress", "Donors", "Avg gift"
5685
+ // "Status",
5686
+ ],
5088
5687
  rows: [{
5089
5688
  id: "OS",
5090
5689
  name: "Orphan sponsorship — Yemen",
@@ -5092,10 +5691,10 @@ var OverallSection = function OverallSection(_ref) {
5092
5691
  type: "progress",
5093
5692
  progress: 78,
5094
5693
  val3: "82",
5095
- val4: "$956",
5096
- status: "Active",
5097
- statusColor: "#22C55E",
5098
- statusBg: "#DCFCE7"
5694
+ val4: "$956"
5695
+ // status: "Active",
5696
+ // statusColor: "#22C55E",
5697
+ // statusBg: "#DCFCE7",
5099
5698
  }, {
5100
5699
  id: "EF",
5101
5700
  name: "Emergency food — Gaza",
@@ -5103,10 +5702,10 @@ var OverallSection = function OverallSection(_ref) {
5103
5702
  type: "progress",
5104
5703
  progress: 83,
5105
5704
  val3: "61",
5106
- val4: "$1,018",
5107
- status: "Active",
5108
- statusColor: "#22C55E",
5109
- statusBg: "#DCFCE7"
5705
+ val4: "$1,018"
5706
+ // status: "Active",
5707
+ // statusColor: "#22C55E",
5708
+ // statusBg: "#DCFCE7",
5110
5709
  }, {
5111
5710
  id: "MB",
5112
5711
  name: "Masjid build — Somalia",
@@ -5114,11 +5713,11 @@ var OverallSection = function OverallSection(_ref) {
5114
5713
  type: "progress",
5115
5714
  progress: 48,
5116
5715
  val3: "34",
5117
- val4: "$1,124",
5118
- status: "Slow",
5119
- statusColor: "#B45309",
5120
- statusBg: "#FEF3C7",
5121
- progressColor: "#F59E0B"
5716
+ val4: "$1,124"
5717
+ // status: "Slow",
5718
+ // statusColor: "#B45309",
5719
+ // statusBg: "#FEF3C7",
5720
+ // progressColor: "#F59E0B",
5122
5721
  }, {
5123
5722
  id: "WW",
5124
5723
  name: "Water wells — Pakistan",
@@ -5126,11 +5725,11 @@ var OverallSection = function OverallSection(_ref) {
5126
5725
  type: "progress",
5127
5726
  progress: 99,
5128
5727
  val3: "28",
5129
- val4: "$1,064",
5130
- status: "Closing",
5131
- statusColor: "#6366F1",
5132
- statusBg: "#EEF2FF",
5133
- progressColor: "#10B981"
5728
+ val4: "$1,064"
5729
+ // status: "Closing",
5730
+ // statusColor: "#6366F1",
5731
+ // statusBg: "#EEF2FF",
5732
+ // progressColor: "#10B981",
5134
5733
  }, {
5135
5734
  id: "RP",
5136
5735
  name: "Ramadan packs — Egypt",
@@ -5138,16 +5737,16 @@ var OverallSection = function OverallSection(_ref) {
5138
5737
  type: "progress",
5139
5738
  progress: 78,
5140
5739
  val3: "10",
5141
- val4: "$1,940",
5142
- status: "Active",
5143
- statusColor: "#22C55E",
5144
- statusBg: "#DCFCE7"
5740
+ val4: "$1,940"
5741
+ // status: "Active",
5742
+ // statusColor: "#22C55E",
5743
+ // statusBg: "#DCFCE7",
5145
5744
  }]
5146
5745
  })
5147
5746
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5148
5747
  item: true,
5149
5748
  xs: 12,
5150
- md: 4,
5749
+ md: 3,
5151
5750
  sx: {
5152
5751
  display: "flex"
5153
5752
  },
@@ -5183,16 +5782,100 @@ var OverallSection = function OverallSection(_ref) {
5183
5782
  },
5184
5783
  children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5185
5784
  item: true,
5186
- md: 4,
5785
+ xs: 12,
5786
+ md: 3,
5187
5787
  children: /*#__PURE__*/jsxRuntime.jsx(DonationTypeBarChart, {})
5188
5788
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5189
5789
  item: true,
5190
- md: 4,
5790
+ xs: 12,
5791
+ md: 3,
5191
5792
  children: /*#__PURE__*/jsxRuntime.jsx(PaidDonorGeographyCard, {})
5192
5793
  }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5193
5794
  item: true,
5194
- md: 4,
5795
+ xs: 12,
5796
+ md: 3,
5195
5797
  children: /*#__PURE__*/jsxRuntime.jsx(RefundsChargebacksCard, {})
5798
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5799
+ item: true,
5800
+ xs: 12,
5801
+ md: 3,
5802
+ children: /*#__PURE__*/jsxRuntime.jsx(TrafficSourceCard, {})
5803
+ })]
5804
+ }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
5805
+ container: true,
5806
+ spacing: 3,
5807
+ sx: {
5808
+ mt: 1,
5809
+ mb: 2
5810
+ },
5811
+ children: [/*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5812
+ item: true,
5813
+ xs: 12,
5814
+ md: 3,
5815
+ children: /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
5816
+ title: "Order Bump",
5817
+ subtitle: "Revenue trend \xB7 last 30 days",
5818
+ value: "$19.2K",
5819
+ trend: "\u25B2 8.7% vs last month",
5820
+ chartData: [1200, 1500, 1300, 1800, 1600, 2100, 1920],
5821
+ footerMetrics: [{
5822
+ label: "Avg/day",
5823
+ value: "$640"
5824
+ }, {
5825
+ label: "Peak day",
5826
+ value: "$1.4K"
5827
+ }, {
5828
+ label: "Orders",
5829
+ value: "84"
5830
+ }]
5831
+ })
5832
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5833
+ item: true,
5834
+ xs: 12,
5835
+ md: 3,
5836
+ children: /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
5837
+ title: "Upsell",
5838
+ subtitle: "Acceptance & raised",
5839
+ acceptanceRate: 34,
5840
+ acceptanceVal: "34.2%",
5841
+ acceptanceTrend: "4.1%",
5842
+ raisedVal: "$28.4K",
5843
+ raisedTrend: "11.3%"
5844
+ })
5845
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5846
+ item: true,
5847
+ xs: 12,
5848
+ md: 3,
5849
+ children: /*#__PURE__*/jsxRuntime.jsx(MetricDonutCard, {
5850
+ title: "Downsell",
5851
+ subtitle: "Acceptance & raised",
5852
+ acceptanceRate: 19,
5853
+ acceptanceVal: "18.7%",
5854
+ acceptanceTrend: "2.3%",
5855
+ raisedVal: "$11.9K",
5856
+ raisedTrend: "6.8%"
5857
+ })
5858
+ }), /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
5859
+ item: true,
5860
+ xs: 12,
5861
+ md: 3,
5862
+ children: /*#__PURE__*/jsxRuntime.jsx(MetricSparklineCard, {
5863
+ title: "Referrals",
5864
+ subtitle: "Revenue trend \xB7 last 30 days",
5865
+ value: "$22.7K",
5866
+ trend: "\u25B2 9.1% vs last month",
5867
+ chartData: [1500, 1700, 1600, 2200, 1900, 2400, 2270],
5868
+ footerMetrics: [{
5869
+ label: "Referrers",
5870
+ value: "38"
5871
+ }, {
5872
+ label: "Avg gift",
5873
+ value: "$598"
5874
+ }, {
5875
+ label: "Conv. rate",
5876
+ value: "27.5%"
5877
+ }]
5878
+ })
5196
5879
  })]
5197
5880
  })]
5198
5881
  });
@@ -5418,8 +6101,10 @@ var PaidSection = function PaidSection() {
5418
6101
  val: "3.3%",
5419
6102
  color: "#FFFC00"
5420
6103
  }],
5421
- showBottomSummary: false
5422
- // sx={{ width: "100%" }}
6104
+ showBottomSummary: false,
6105
+ sx: {
6106
+ pb: 3.5
6107
+ }
5423
6108
  })
5424
6109
  })]
5425
6110
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {