@ammarkhalidfarooq/dashboard-package 0.2.3 → 0.2.5
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 +692 -13
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +693 -14
- package/dist/index.es.js.map +1 -1
- package/package.json +61 -61
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { Suspense, lazy, useState } from 'react';
|
|
2
|
-
import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress,
|
|
2
|
+
import { Box, Button, Menu, MenuItem, Grid, Card, CardContent, Typography, IconButton, ThemeProvider, CircularProgress, LinearProgress, Divider, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
|
|
3
3
|
import { MoreHoriz, InfoOutlined, MoreVert, Check, Settings } from '@mui/icons-material';
|
|
4
4
|
import { createTheme, useTheme } from '@mui/material/styles';
|
|
5
5
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
@@ -742,6 +742,508 @@ var DisplayCard = function DisplayCard(_ref) {
|
|
|
742
742
|
});
|
|
743
743
|
};
|
|
744
744
|
|
|
745
|
+
var CardWrapper = function CardWrapper(_ref) {
|
|
746
|
+
var title = _ref.title,
|
|
747
|
+
children = _ref.children;
|
|
748
|
+
return /*#__PURE__*/jsx(Card, {
|
|
749
|
+
sx: {
|
|
750
|
+
width: "100%",
|
|
751
|
+
display: "flex",
|
|
752
|
+
flexDirection: "column",
|
|
753
|
+
boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
|
|
754
|
+
borderRadius: 4,
|
|
755
|
+
border: "1px solid #f0f0f0",
|
|
756
|
+
height: "100%"
|
|
757
|
+
},
|
|
758
|
+
children: /*#__PURE__*/jsxs(CardContent, {
|
|
759
|
+
sx: {
|
|
760
|
+
p: 3
|
|
761
|
+
},
|
|
762
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
763
|
+
variant: "subtitle2",
|
|
764
|
+
sx: {
|
|
765
|
+
color: "#000000ff",
|
|
766
|
+
fontWeight: 600,
|
|
767
|
+
textTransform: "uppercase",
|
|
768
|
+
letterSpacing: "0.5px",
|
|
769
|
+
mb: 3,
|
|
770
|
+
textAlign: "left"
|
|
771
|
+
},
|
|
772
|
+
children: title
|
|
773
|
+
}), /*#__PURE__*/jsx(Box, {
|
|
774
|
+
sx: {
|
|
775
|
+
display: "flex",
|
|
776
|
+
flexDirection: "column",
|
|
777
|
+
gap: 2
|
|
778
|
+
},
|
|
779
|
+
children: children
|
|
780
|
+
})]
|
|
781
|
+
})
|
|
782
|
+
});
|
|
783
|
+
};
|
|
784
|
+
var LandingPagesCard = function LandingPagesCard() {
|
|
785
|
+
var data = [{
|
|
786
|
+
page: "/zakat",
|
|
787
|
+
users: "612 users",
|
|
788
|
+
cvr: "1.3% CVR",
|
|
789
|
+
color: "#2E7D32"
|
|
790
|
+
}, {
|
|
791
|
+
page: "/ramadan",
|
|
792
|
+
users: "488 users",
|
|
793
|
+
cvr: "1.1% CVR",
|
|
794
|
+
color: "#2E7D32"
|
|
795
|
+
}, {
|
|
796
|
+
page: "/donate",
|
|
797
|
+
users: "421 users",
|
|
798
|
+
cvr: "0.7% CVR",
|
|
799
|
+
color: "#ED6C02"
|
|
800
|
+
}, {
|
|
801
|
+
page: "/campaigns",
|
|
802
|
+
users: "380 users",
|
|
803
|
+
cvr: "0.5% CVR",
|
|
804
|
+
color: "#ED6C02"
|
|
805
|
+
}, {
|
|
806
|
+
page: "/sadaqah",
|
|
807
|
+
users: "290 users",
|
|
808
|
+
cvr: "0.9% CVR",
|
|
809
|
+
color: "#2E7D32"
|
|
810
|
+
}];
|
|
811
|
+
return /*#__PURE__*/jsx(CardWrapper, {
|
|
812
|
+
title: "Top Landing Pages",
|
|
813
|
+
children: data.map(function (item, index) {
|
|
814
|
+
return /*#__PURE__*/jsxs(Box, {
|
|
815
|
+
sx: {
|
|
816
|
+
display: "flex",
|
|
817
|
+
justifyContent: "space-between",
|
|
818
|
+
alignItems: "center"
|
|
819
|
+
},
|
|
820
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
821
|
+
variant: "body2",
|
|
822
|
+
sx: {
|
|
823
|
+
fontWeight: 500,
|
|
824
|
+
color: "#333"
|
|
825
|
+
},
|
|
826
|
+
children: item.page
|
|
827
|
+
}), /*#__PURE__*/jsxs(Box, {
|
|
828
|
+
sx: {
|
|
829
|
+
display: "flex",
|
|
830
|
+
gap: 2,
|
|
831
|
+
alignItems: "center"
|
|
832
|
+
},
|
|
833
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
834
|
+
variant: "body2",
|
|
835
|
+
sx: {
|
|
836
|
+
color: "#606062",
|
|
837
|
+
fontWeight: 500
|
|
838
|
+
},
|
|
839
|
+
children: item.users
|
|
840
|
+
}), /*#__PURE__*/jsx(Typography, {
|
|
841
|
+
variant: "body2",
|
|
842
|
+
sx: {
|
|
843
|
+
color: item.color,
|
|
844
|
+
fontWeight: 600,
|
|
845
|
+
minWidth: "70px",
|
|
846
|
+
textAlign: "right"
|
|
847
|
+
},
|
|
848
|
+
children: item.cvr
|
|
849
|
+
})]
|
|
850
|
+
})]
|
|
851
|
+
}, index);
|
|
852
|
+
})
|
|
853
|
+
});
|
|
854
|
+
};
|
|
855
|
+
var KeywordsCard = function KeywordsCard() {
|
|
856
|
+
var data = [{
|
|
857
|
+
keyword: "zakat calculator",
|
|
858
|
+
volume: "320",
|
|
859
|
+
rank: "#3",
|
|
860
|
+
color: "#E8F5E9",
|
|
861
|
+
textColor: "#2E7D32"
|
|
862
|
+
}, {
|
|
863
|
+
keyword: "donate to ramadan",
|
|
864
|
+
volume: "214",
|
|
865
|
+
rank: "#5",
|
|
866
|
+
color: "#E8F5E9",
|
|
867
|
+
textColor: "#2E7D32"
|
|
868
|
+
}, {
|
|
869
|
+
keyword: "islamic charity uk",
|
|
870
|
+
volume: "198",
|
|
871
|
+
rank: "#11",
|
|
872
|
+
color: "#FFF3E0",
|
|
873
|
+
textColor: "#ED6C02"
|
|
874
|
+
}, {
|
|
875
|
+
keyword: "madinah fundraising",
|
|
876
|
+
volume: "176",
|
|
877
|
+
rank: "#1",
|
|
878
|
+
color: "#E8F5E9",
|
|
879
|
+
textColor: "#2E7D32"
|
|
880
|
+
}, {
|
|
881
|
+
keyword: "online sadaqah",
|
|
882
|
+
volume: "142",
|
|
883
|
+
rank: "#8",
|
|
884
|
+
color: "#FFF3E0",
|
|
885
|
+
textColor: "#ED6C02"
|
|
886
|
+
}];
|
|
887
|
+
return /*#__PURE__*/jsx(CardWrapper, {
|
|
888
|
+
title: "Top Keywords",
|
|
889
|
+
children: data.map(function (item, index) {
|
|
890
|
+
return /*#__PURE__*/jsxs(Box, {
|
|
891
|
+
sx: {
|
|
892
|
+
display: "flex",
|
|
893
|
+
justifyContent: "space-between",
|
|
894
|
+
alignItems: "center"
|
|
895
|
+
},
|
|
896
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
897
|
+
variant: "body2",
|
|
898
|
+
sx: {
|
|
899
|
+
fontWeight: 500,
|
|
900
|
+
color: "#333"
|
|
901
|
+
},
|
|
902
|
+
children: item.keyword
|
|
903
|
+
}), /*#__PURE__*/jsxs(Box, {
|
|
904
|
+
sx: {
|
|
905
|
+
display: "flex",
|
|
906
|
+
gap: 2,
|
|
907
|
+
alignItems: "center"
|
|
908
|
+
},
|
|
909
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
910
|
+
variant: "body2",
|
|
911
|
+
sx: {
|
|
912
|
+
color: "#606062",
|
|
913
|
+
fontWeight: 500
|
|
914
|
+
},
|
|
915
|
+
children: item.volume
|
|
916
|
+
}), /*#__PURE__*/jsx(Box, {
|
|
917
|
+
sx: {
|
|
918
|
+
bgcolor: item.color,
|
|
919
|
+
color: item.textColor,
|
|
920
|
+
px: 1,
|
|
921
|
+
py: 0.2,
|
|
922
|
+
borderRadius: 1,
|
|
923
|
+
fontSize: "12px",
|
|
924
|
+
fontWeight: 600,
|
|
925
|
+
minWidth: "30px",
|
|
926
|
+
textAlign: "center"
|
|
927
|
+
},
|
|
928
|
+
children: item.rank
|
|
929
|
+
})]
|
|
930
|
+
})]
|
|
931
|
+
}, index);
|
|
932
|
+
})
|
|
933
|
+
});
|
|
934
|
+
};
|
|
935
|
+
var GeographyCard = function GeographyCard() {
|
|
936
|
+
var data = [{
|
|
937
|
+
code: "GB",
|
|
938
|
+
country: "United Kingdom",
|
|
939
|
+
percentage: 60
|
|
940
|
+
}, {
|
|
941
|
+
code: "US",
|
|
942
|
+
country: "United States",
|
|
943
|
+
percentage: 14
|
|
944
|
+
}, {
|
|
945
|
+
code: "AU",
|
|
946
|
+
country: "Australia",
|
|
947
|
+
percentage: 8
|
|
948
|
+
}, {
|
|
949
|
+
code: "CA",
|
|
950
|
+
country: "Canada",
|
|
951
|
+
percentage: 6
|
|
952
|
+
}, {
|
|
953
|
+
code: "AE",
|
|
954
|
+
country: "UAE",
|
|
955
|
+
percentage: 4
|
|
956
|
+
}];
|
|
957
|
+
return /*#__PURE__*/jsx(CardWrapper, {
|
|
958
|
+
title: "Geography Insights",
|
|
959
|
+
children: data.map(function (item, index) {
|
|
960
|
+
return /*#__PURE__*/jsxs(Box, {
|
|
961
|
+
sx: {
|
|
962
|
+
display: "flex",
|
|
963
|
+
alignItems: "center",
|
|
964
|
+
gap: 2
|
|
965
|
+
},
|
|
966
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
967
|
+
variant: "body2",
|
|
968
|
+
sx: {
|
|
969
|
+
fontWeight: 600,
|
|
970
|
+
color: "#606062",
|
|
971
|
+
minWidth: "25px"
|
|
972
|
+
},
|
|
973
|
+
children: item.code
|
|
974
|
+
}), /*#__PURE__*/jsx(Typography, {
|
|
975
|
+
variant: "body2",
|
|
976
|
+
sx: {
|
|
977
|
+
fontWeight: 500,
|
|
978
|
+
color: "#333",
|
|
979
|
+
minWidth: "120px",
|
|
980
|
+
textAlign: "left"
|
|
981
|
+
},
|
|
982
|
+
children: item.country
|
|
983
|
+
}), /*#__PURE__*/jsx(Box, {
|
|
984
|
+
sx: {
|
|
985
|
+
flexGrow: 1,
|
|
986
|
+
mx: 2
|
|
987
|
+
},
|
|
988
|
+
children: /*#__PURE__*/jsx(LinearProgress, {
|
|
989
|
+
variant: "determinate",
|
|
990
|
+
value: item.percentage,
|
|
991
|
+
sx: {
|
|
992
|
+
height: 6,
|
|
993
|
+
borderRadius: 3,
|
|
994
|
+
bgcolor: "#F0F0F0",
|
|
995
|
+
"& .MuiLinearProgress-bar": {
|
|
996
|
+
bgcolor: "#3498DB",
|
|
997
|
+
borderRadius: 3
|
|
998
|
+
}
|
|
999
|
+
}
|
|
1000
|
+
})
|
|
1001
|
+
}), /*#__PURE__*/jsxs(Typography, {
|
|
1002
|
+
variant: "body2",
|
|
1003
|
+
sx: {
|
|
1004
|
+
fontWeight: 600,
|
|
1005
|
+
color: "#333",
|
|
1006
|
+
minWidth: "35px",
|
|
1007
|
+
textAlign: "right"
|
|
1008
|
+
},
|
|
1009
|
+
children: [item.percentage, "%"]
|
|
1010
|
+
})]
|
|
1011
|
+
}, index);
|
|
1012
|
+
})
|
|
1013
|
+
});
|
|
1014
|
+
};
|
|
1015
|
+
var TopCampaignsRaisedCard = function TopCampaignsRaisedCard() {
|
|
1016
|
+
var data = [{
|
|
1017
|
+
name: "Ramadan Week 3 Appeal",
|
|
1018
|
+
raised: "$1,210 raised",
|
|
1019
|
+
donors: "18 donors",
|
|
1020
|
+
badge: "4.1% CVR",
|
|
1021
|
+
color: "#E8F5E9",
|
|
1022
|
+
textColor: "#2E7D32"
|
|
1023
|
+
}, {
|
|
1024
|
+
name: "Zakat Due Reminder",
|
|
1025
|
+
raised: "$740 raised",
|
|
1026
|
+
donors: "8 donors",
|
|
1027
|
+
badge: "3.2% CVR",
|
|
1028
|
+
color: "#E8F5E9",
|
|
1029
|
+
textColor: "#2E7D32"
|
|
1030
|
+
}, {
|
|
1031
|
+
name: "Last 10 Nights Giving",
|
|
1032
|
+
raised: "$265 raised",
|
|
1033
|
+
donors: "3 donors",
|
|
1034
|
+
badge: "1.8% CVR",
|
|
1035
|
+
color: "#FFF3E0",
|
|
1036
|
+
textColor: "#ED6C02"
|
|
1037
|
+
}];
|
|
1038
|
+
return /*#__PURE__*/jsx(CardWrapper, {
|
|
1039
|
+
title: "Top Campaigns - Total Raised",
|
|
1040
|
+
children: data.map(function (item, index) {
|
|
1041
|
+
return /*#__PURE__*/jsxs(Box, {
|
|
1042
|
+
sx: {
|
|
1043
|
+
display: "flex",
|
|
1044
|
+
flexDirection: "column",
|
|
1045
|
+
gap: 0.5
|
|
1046
|
+
},
|
|
1047
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
1048
|
+
variant: "body2",
|
|
1049
|
+
sx: {
|
|
1050
|
+
fontWeight: 600,
|
|
1051
|
+
color: "#333",
|
|
1052
|
+
textAlign: "left"
|
|
1053
|
+
},
|
|
1054
|
+
children: item.name
|
|
1055
|
+
}), /*#__PURE__*/jsxs(Box, {
|
|
1056
|
+
sx: {
|
|
1057
|
+
display: "flex",
|
|
1058
|
+
alignItems: "center",
|
|
1059
|
+
gap: 1.5
|
|
1060
|
+
},
|
|
1061
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
1062
|
+
variant: "caption",
|
|
1063
|
+
sx: {
|
|
1064
|
+
color: "#606062",
|
|
1065
|
+
fontWeight: 500
|
|
1066
|
+
},
|
|
1067
|
+
children: item.raised
|
|
1068
|
+
}), /*#__PURE__*/jsx(Typography, {
|
|
1069
|
+
variant: "caption",
|
|
1070
|
+
sx: {
|
|
1071
|
+
color: "#606062",
|
|
1072
|
+
fontWeight: 500
|
|
1073
|
+
},
|
|
1074
|
+
children: item.donors
|
|
1075
|
+
}), /*#__PURE__*/jsx(Box, {
|
|
1076
|
+
sx: {
|
|
1077
|
+
bgcolor: item.color,
|
|
1078
|
+
color: item.textColor,
|
|
1079
|
+
px: 1,
|
|
1080
|
+
py: 0.2,
|
|
1081
|
+
borderRadius: 1,
|
|
1082
|
+
fontSize: "11px",
|
|
1083
|
+
fontWeight: 600
|
|
1084
|
+
},
|
|
1085
|
+
children: item.badge
|
|
1086
|
+
})]
|
|
1087
|
+
})]
|
|
1088
|
+
}, index);
|
|
1089
|
+
})
|
|
1090
|
+
});
|
|
1091
|
+
};
|
|
1092
|
+
var TopCampaignsCTRCard = function TopCampaignsCTRCard() {
|
|
1093
|
+
var data = [{
|
|
1094
|
+
name: "Ramadan Week 3 Appeal",
|
|
1095
|
+
ctr: "11.2% CTR",
|
|
1096
|
+
clicks: "480 clicks",
|
|
1097
|
+
badge: "34.8% OR",
|
|
1098
|
+
color: "#E8F5E9",
|
|
1099
|
+
textColor: "#2E7D32"
|
|
1100
|
+
}, {
|
|
1101
|
+
name: "Last 10 Nights Giving",
|
|
1102
|
+
ctr: "9.8% CTR",
|
|
1103
|
+
clicks: "410 clicks",
|
|
1104
|
+
badge: "38.1% OR",
|
|
1105
|
+
color: "#E8F5E9",
|
|
1106
|
+
textColor: "#2E7D32"
|
|
1107
|
+
}, {
|
|
1108
|
+
name: "Zakat Due Reminder",
|
|
1109
|
+
ctr: "6.4% CTR",
|
|
1110
|
+
clicks: "314 clicks",
|
|
1111
|
+
badge: "31.4% OR",
|
|
1112
|
+
color: "#FFF3E0",
|
|
1113
|
+
textColor: "#ED6C02"
|
|
1114
|
+
}];
|
|
1115
|
+
return /*#__PURE__*/jsx(CardWrapper, {
|
|
1116
|
+
title: "Top Campaigns - CTR",
|
|
1117
|
+
children: data.map(function (item, index) {
|
|
1118
|
+
return /*#__PURE__*/jsxs(Box, {
|
|
1119
|
+
sx: {
|
|
1120
|
+
display: "flex",
|
|
1121
|
+
flexDirection: "column",
|
|
1122
|
+
gap: 0.5
|
|
1123
|
+
},
|
|
1124
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
1125
|
+
variant: "body2",
|
|
1126
|
+
sx: {
|
|
1127
|
+
fontWeight: 600,
|
|
1128
|
+
color: "#333",
|
|
1129
|
+
textAlign: "left"
|
|
1130
|
+
},
|
|
1131
|
+
children: item.name
|
|
1132
|
+
}), /*#__PURE__*/jsxs(Box, {
|
|
1133
|
+
sx: {
|
|
1134
|
+
display: "flex",
|
|
1135
|
+
alignItems: "center",
|
|
1136
|
+
gap: 1.5
|
|
1137
|
+
},
|
|
1138
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
1139
|
+
variant: "caption",
|
|
1140
|
+
sx: {
|
|
1141
|
+
color: "#606062",
|
|
1142
|
+
fontWeight: 500
|
|
1143
|
+
},
|
|
1144
|
+
children: item.ctr
|
|
1145
|
+
}), /*#__PURE__*/jsx(Typography, {
|
|
1146
|
+
variant: "caption",
|
|
1147
|
+
sx: {
|
|
1148
|
+
color: "#606062",
|
|
1149
|
+
fontWeight: 500
|
|
1150
|
+
},
|
|
1151
|
+
children: item.clicks
|
|
1152
|
+
}), /*#__PURE__*/jsx(Box, {
|
|
1153
|
+
sx: {
|
|
1154
|
+
bgcolor: item.color,
|
|
1155
|
+
color: item.textColor,
|
|
1156
|
+
px: 1,
|
|
1157
|
+
py: 0.2,
|
|
1158
|
+
borderRadius: 1,
|
|
1159
|
+
fontSize: "11px",
|
|
1160
|
+
fontWeight: 600
|
|
1161
|
+
},
|
|
1162
|
+
children: item.badge
|
|
1163
|
+
})]
|
|
1164
|
+
})]
|
|
1165
|
+
}, index);
|
|
1166
|
+
})
|
|
1167
|
+
});
|
|
1168
|
+
};
|
|
1169
|
+
var TopCampaignsConvRateCard = function TopCampaignsConvRateCard() {
|
|
1170
|
+
var data = [{
|
|
1171
|
+
name: "Ramadan Week 3 Appeal",
|
|
1172
|
+
cvr: "4.1% CVR",
|
|
1173
|
+
raised: "$1,210 raised",
|
|
1174
|
+
badge: "$2.52 RPC",
|
|
1175
|
+
color: "#E8F5E9",
|
|
1176
|
+
textColor: "#2E7D32"
|
|
1177
|
+
}, {
|
|
1178
|
+
name: "Zakat Due Reminder",
|
|
1179
|
+
cvr: "3.2% CVR",
|
|
1180
|
+
raised: "$740 raised",
|
|
1181
|
+
badge: "$2.36 RPC",
|
|
1182
|
+
color: "#E8F5E9",
|
|
1183
|
+
textColor: "#2E7D32"
|
|
1184
|
+
}, {
|
|
1185
|
+
name: "Last 10 Nights Giving",
|
|
1186
|
+
cvr: "1.8% CVR",
|
|
1187
|
+
raised: "$265 raised",
|
|
1188
|
+
badge: "$0.65 RPC",
|
|
1189
|
+
color: "#FFF3E0",
|
|
1190
|
+
textColor: "#ED6C02"
|
|
1191
|
+
}];
|
|
1192
|
+
return /*#__PURE__*/jsx(CardWrapper, {
|
|
1193
|
+
title: "Top Campaigns - Conv. Rate",
|
|
1194
|
+
children: data.map(function (item, index) {
|
|
1195
|
+
return /*#__PURE__*/jsxs(Box, {
|
|
1196
|
+
sx: {
|
|
1197
|
+
display: "flex",
|
|
1198
|
+
flexDirection: "column",
|
|
1199
|
+
gap: 0.5
|
|
1200
|
+
},
|
|
1201
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
1202
|
+
variant: "body2",
|
|
1203
|
+
sx: {
|
|
1204
|
+
fontWeight: 600,
|
|
1205
|
+
color: "#333",
|
|
1206
|
+
textAlign: "left"
|
|
1207
|
+
},
|
|
1208
|
+
children: item.name
|
|
1209
|
+
}), /*#__PURE__*/jsxs(Box, {
|
|
1210
|
+
sx: {
|
|
1211
|
+
display: "flex",
|
|
1212
|
+
alignItems: "center",
|
|
1213
|
+
gap: 1.5
|
|
1214
|
+
},
|
|
1215
|
+
children: [/*#__PURE__*/jsx(Typography, {
|
|
1216
|
+
variant: "caption",
|
|
1217
|
+
sx: {
|
|
1218
|
+
color: "#606062",
|
|
1219
|
+
fontWeight: 500
|
|
1220
|
+
},
|
|
1221
|
+
children: item.cvr
|
|
1222
|
+
}), /*#__PURE__*/jsx(Typography, {
|
|
1223
|
+
variant: "caption",
|
|
1224
|
+
sx: {
|
|
1225
|
+
color: "#606062",
|
|
1226
|
+
fontWeight: 500
|
|
1227
|
+
},
|
|
1228
|
+
children: item.raised
|
|
1229
|
+
}), /*#__PURE__*/jsx(Box, {
|
|
1230
|
+
sx: {
|
|
1231
|
+
bgcolor: item.color,
|
|
1232
|
+
color: item.textColor,
|
|
1233
|
+
px: 1,
|
|
1234
|
+
py: 0.2,
|
|
1235
|
+
borderRadius: 1,
|
|
1236
|
+
fontSize: "11px",
|
|
1237
|
+
fontWeight: 600
|
|
1238
|
+
},
|
|
1239
|
+
children: item.badge
|
|
1240
|
+
})]
|
|
1241
|
+
})]
|
|
1242
|
+
}, index);
|
|
1243
|
+
})
|
|
1244
|
+
});
|
|
1245
|
+
};
|
|
1246
|
+
|
|
745
1247
|
var OrganicSection = function OrganicSection(_ref) {
|
|
746
1248
|
var _ref$apiData = _ref.apiData,
|
|
747
1249
|
apiData = _ref$apiData === void 0 ? {} : _ref$apiData;
|
|
@@ -768,9 +1270,9 @@ var OrganicSection = function OrganicSection(_ref) {
|
|
|
768
1270
|
categories: categories
|
|
769
1271
|
};
|
|
770
1272
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
771
|
-
children: ["
|
|
1273
|
+
children: [" ", /*#__PURE__*/jsxs(Box, {
|
|
772
1274
|
sx: {
|
|
773
|
-
display:
|
|
1275
|
+
display: "flex",
|
|
774
1276
|
gap: 2,
|
|
775
1277
|
mb: 5
|
|
776
1278
|
},
|
|
@@ -837,6 +1339,177 @@ var OrganicSection = function OrganicSection(_ref) {
|
|
|
837
1339
|
type: "donut",
|
|
838
1340
|
metric: "Revenue"
|
|
839
1341
|
})]
|
|
1342
|
+
}), /*#__PURE__*/jsxs(Grid, {
|
|
1343
|
+
container: true,
|
|
1344
|
+
spacing: 3,
|
|
1345
|
+
sx: {
|
|
1346
|
+
mt: 4
|
|
1347
|
+
},
|
|
1348
|
+
children: [/*#__PURE__*/jsx(Grid, {
|
|
1349
|
+
item: true,
|
|
1350
|
+
xs: 12,
|
|
1351
|
+
md: 4,
|
|
1352
|
+
children: /*#__PURE__*/jsx(LandingPagesCard, {})
|
|
1353
|
+
}), /*#__PURE__*/jsx(Grid, {
|
|
1354
|
+
item: true,
|
|
1355
|
+
xs: 12,
|
|
1356
|
+
md: 4,
|
|
1357
|
+
children: /*#__PURE__*/jsx(KeywordsCard, {})
|
|
1358
|
+
}), /*#__PURE__*/jsx(Grid, {
|
|
1359
|
+
item: true,
|
|
1360
|
+
xs: 12,
|
|
1361
|
+
md: 4,
|
|
1362
|
+
children: /*#__PURE__*/jsx(GeographyCard, {})
|
|
1363
|
+
})]
|
|
1364
|
+
})]
|
|
1365
|
+
});
|
|
1366
|
+
};
|
|
1367
|
+
|
|
1368
|
+
var EmailSection = function EmailSection() {
|
|
1369
|
+
var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
1370
|
+
var dailyPerformance = {
|
|
1371
|
+
label: "Clicks & Unique Clicks Trend",
|
|
1372
|
+
series: [{
|
|
1373
|
+
name: "Clicks",
|
|
1374
|
+
data: [3200, 4100, 2800, 5600, 4200, 6100, 7500]
|
|
1375
|
+
}, {
|
|
1376
|
+
name: "Unique Clicks",
|
|
1377
|
+
data: [800, 950, 700, 1100, 900, 1200, 1300]
|
|
1378
|
+
}],
|
|
1379
|
+
categories: categories
|
|
1380
|
+
};
|
|
1381
|
+
var spendAllocation = {
|
|
1382
|
+
label: "Bounce Rate Trend",
|
|
1383
|
+
data: [20, 25, 30, 35, 40, 45, 50],
|
|
1384
|
+
categories: categories
|
|
1385
|
+
};
|
|
1386
|
+
var roasTrend = {
|
|
1387
|
+
label: "Open Rate Trend",
|
|
1388
|
+
data: [20, 25, 30, 35, 40, 45, 50],
|
|
1389
|
+
categories: categories
|
|
1390
|
+
};
|
|
1391
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
1392
|
+
children: [/*#__PURE__*/jsxs(Box, {
|
|
1393
|
+
sx: {
|
|
1394
|
+
display: "flex",
|
|
1395
|
+
gap: 2,
|
|
1396
|
+
mb: 2
|
|
1397
|
+
},
|
|
1398
|
+
children: [/*#__PURE__*/jsx(DisplayCard, {
|
|
1399
|
+
title: "Open Rate",
|
|
1400
|
+
value: "32%",
|
|
1401
|
+
sx: {
|
|
1402
|
+
flex: 1
|
|
1403
|
+
}
|
|
1404
|
+
}), /*#__PURE__*/jsx(DisplayCard, {
|
|
1405
|
+
title: "Bounce Rate",
|
|
1406
|
+
value: "1.8%",
|
|
1407
|
+
sx: {
|
|
1408
|
+
flex: 1
|
|
1409
|
+
}
|
|
1410
|
+
}), /*#__PURE__*/jsx(DisplayCard, {
|
|
1411
|
+
title: "Clicks",
|
|
1412
|
+
value: "1,204",
|
|
1413
|
+
sx: {
|
|
1414
|
+
flex: 1
|
|
1415
|
+
}
|
|
1416
|
+
}), /*#__PURE__*/jsx(DisplayCard, {
|
|
1417
|
+
title: "Unique Clicks",
|
|
1418
|
+
value: "987",
|
|
1419
|
+
sx: {
|
|
1420
|
+
flex: 1
|
|
1421
|
+
}
|
|
1422
|
+
}), /*#__PURE__*/jsx(DisplayCard, {
|
|
1423
|
+
title: "CTR",
|
|
1424
|
+
value: "4.8%",
|
|
1425
|
+
sx: {
|
|
1426
|
+
flex: 1
|
|
1427
|
+
}
|
|
1428
|
+
})]
|
|
1429
|
+
}), /*#__PURE__*/jsxs(Box, {
|
|
1430
|
+
sx: {
|
|
1431
|
+
display: "flex",
|
|
1432
|
+
gap: 2
|
|
1433
|
+
},
|
|
1434
|
+
children: [/*#__PURE__*/jsx(DisplayCard, {
|
|
1435
|
+
title: "Donations",
|
|
1436
|
+
value: "29",
|
|
1437
|
+
sx: {
|
|
1438
|
+
flex: 1
|
|
1439
|
+
}
|
|
1440
|
+
}), /*#__PURE__*/jsx(DisplayCard, {
|
|
1441
|
+
title: "CONV.Rate",
|
|
1442
|
+
value: "2.9%",
|
|
1443
|
+
sx: {
|
|
1444
|
+
flex: 1
|
|
1445
|
+
}
|
|
1446
|
+
}), /*#__PURE__*/jsx(DisplayCard, {
|
|
1447
|
+
title: "RPC",
|
|
1448
|
+
value: "$1.84",
|
|
1449
|
+
sx: {
|
|
1450
|
+
flex: 1
|
|
1451
|
+
}
|
|
1452
|
+
}), /*#__PURE__*/jsx(DisplayCard, {
|
|
1453
|
+
title: "TOTAL RAISED (EMAIL)",
|
|
1454
|
+
value: "$2,215",
|
|
1455
|
+
sx: {
|
|
1456
|
+
flex: 1
|
|
1457
|
+
}
|
|
1458
|
+
}), /*#__PURE__*/jsx(DisplayCard, {
|
|
1459
|
+
title: "AVG DONATION",
|
|
1460
|
+
value: "$76.4",
|
|
1461
|
+
sx: {
|
|
1462
|
+
flex: 1
|
|
1463
|
+
}
|
|
1464
|
+
})]
|
|
1465
|
+
}), /*#__PURE__*/jsxs(Grid, {
|
|
1466
|
+
container: true,
|
|
1467
|
+
spacing: 3,
|
|
1468
|
+
sx: {
|
|
1469
|
+
mt: 4
|
|
1470
|
+
},
|
|
1471
|
+
children: [/*#__PURE__*/jsx(RenderChartCard, {
|
|
1472
|
+
item: roasTrend,
|
|
1473
|
+
index: 2,
|
|
1474
|
+
md: 4,
|
|
1475
|
+
type: "area",
|
|
1476
|
+
metric: "ROAS",
|
|
1477
|
+
isPrimary: true
|
|
1478
|
+
}), /*#__PURE__*/jsx(RenderChartCard, {
|
|
1479
|
+
item: dailyPerformance,
|
|
1480
|
+
index: 0,
|
|
1481
|
+
md: 4,
|
|
1482
|
+
type: "bar",
|
|
1483
|
+
metric: "Revenue"
|
|
1484
|
+
}), /*#__PURE__*/jsx(RenderChartCard, {
|
|
1485
|
+
item: spendAllocation,
|
|
1486
|
+
index: 1,
|
|
1487
|
+
md: 4,
|
|
1488
|
+
type: "area",
|
|
1489
|
+
metric: "Revenue"
|
|
1490
|
+
})]
|
|
1491
|
+
}), /*#__PURE__*/jsxs(Grid, {
|
|
1492
|
+
container: true,
|
|
1493
|
+
spacing: 3,
|
|
1494
|
+
sx: {
|
|
1495
|
+
mt: 4
|
|
1496
|
+
},
|
|
1497
|
+
children: [/*#__PURE__*/jsx(Grid, {
|
|
1498
|
+
item: true,
|
|
1499
|
+
xs: 12,
|
|
1500
|
+
md: 4,
|
|
1501
|
+
children: /*#__PURE__*/jsx(TopCampaignsRaisedCard, {})
|
|
1502
|
+
}), /*#__PURE__*/jsx(Grid, {
|
|
1503
|
+
item: true,
|
|
1504
|
+
xs: 12,
|
|
1505
|
+
md: 4,
|
|
1506
|
+
children: /*#__PURE__*/jsx(TopCampaignsCTRCard, {})
|
|
1507
|
+
}), /*#__PURE__*/jsx(Grid, {
|
|
1508
|
+
item: true,
|
|
1509
|
+
xs: 12,
|
|
1510
|
+
md: 4,
|
|
1511
|
+
children: /*#__PURE__*/jsx(TopCampaignsConvRateCard, {})
|
|
1512
|
+
})]
|
|
840
1513
|
})]
|
|
841
1514
|
});
|
|
842
1515
|
};
|
|
@@ -940,7 +1613,7 @@ var NewOverview = function NewOverview(_ref) {
|
|
|
940
1613
|
}) : categories;
|
|
941
1614
|
var primaryCharts = [{
|
|
942
1615
|
label: "Total Revenue",
|
|
943
|
-
value: totalRevData.length > 0 ? "$".concat(totalRevTotal.toLocaleString()) : typeof (apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue) ===
|
|
1616
|
+
value: totalRevData.length > 0 ? "$".concat(totalRevTotal.toLocaleString()) : typeof (apiData === null || apiData === void 0 ? void 0 : apiData.totalRevenue) === "string" ? apiData.totalRevenue : "$9,200.00",
|
|
944
1617
|
subValue: "Total Donations: ".concat((apiData === null || apiData === void 0 ? void 0 : apiData.totalDonations) || 215),
|
|
945
1618
|
data: totalRevValues,
|
|
946
1619
|
categories: totalRevCategories,
|
|
@@ -1039,7 +1712,8 @@ var NewOverview = function NewOverview(_ref) {
|
|
|
1039
1712
|
sx: {
|
|
1040
1713
|
fontWeight: "bold",
|
|
1041
1714
|
color: "primary.main",
|
|
1042
|
-
mb:
|
|
1715
|
+
mb: 2,
|
|
1716
|
+
mt: 2
|
|
1043
1717
|
},
|
|
1044
1718
|
children: "Overview"
|
|
1045
1719
|
}), /*#__PURE__*/jsxs(Box, {
|
|
@@ -1087,9 +1761,9 @@ var NewOverview = function NewOverview(_ref) {
|
|
|
1087
1761
|
}), /*#__PURE__*/jsxs(Suspense, {
|
|
1088
1762
|
fallback: /*#__PURE__*/jsx(Box, {
|
|
1089
1763
|
sx: {
|
|
1090
|
-
display:
|
|
1091
|
-
justifyContent:
|
|
1092
|
-
alignItems:
|
|
1764
|
+
display: "flex",
|
|
1765
|
+
justifyContent: "center",
|
|
1766
|
+
alignItems: "center",
|
|
1093
1767
|
py: 10
|
|
1094
1768
|
},
|
|
1095
1769
|
children: /*#__PURE__*/jsx(CircularProgress, {
|
|
@@ -1115,7 +1789,7 @@ var NewOverview = function NewOverview(_ref) {
|
|
|
1115
1789
|
sx: {
|
|
1116
1790
|
p: 2
|
|
1117
1791
|
},
|
|
1118
|
-
children:
|
|
1792
|
+
children: /*#__PURE__*/jsx(EmailSection, {})
|
|
1119
1793
|
})]
|
|
1120
1794
|
})]
|
|
1121
1795
|
});
|
|
@@ -1187,7 +1861,8 @@ var PerformanceSection = function PerformanceSection(_ref) {
|
|
|
1187
1861
|
sx: {
|
|
1188
1862
|
fontWeight: "bold",
|
|
1189
1863
|
color: "primary.main",
|
|
1190
|
-
mb:
|
|
1864
|
+
mb: 2,
|
|
1865
|
+
mt: 2
|
|
1191
1866
|
},
|
|
1192
1867
|
children: "Performance"
|
|
1193
1868
|
})
|
|
@@ -1489,7 +2164,8 @@ var RecurringRevenueSection = function RecurringRevenueSection() {
|
|
|
1489
2164
|
sx: {
|
|
1490
2165
|
fontWeight: "bold",
|
|
1491
2166
|
color: "primary.main",
|
|
1492
|
-
mb:
|
|
2167
|
+
mb: 2,
|
|
2168
|
+
mt: 2
|
|
1493
2169
|
},
|
|
1494
2170
|
children: "Recurring revenue"
|
|
1495
2171
|
})
|
|
@@ -2101,7 +2777,8 @@ var DonorBehavior = function DonorBehavior() {
|
|
|
2101
2777
|
sx: {
|
|
2102
2778
|
fontWeight: "bold",
|
|
2103
2779
|
color: "primary.main",
|
|
2104
|
-
mb:
|
|
2780
|
+
mb: 2,
|
|
2781
|
+
mt: 2
|
|
2105
2782
|
},
|
|
2106
2783
|
children: "Donor Behavior"
|
|
2107
2784
|
})
|
|
@@ -2797,7 +3474,8 @@ var RecurringPlans = function RecurringPlans(_ref) {
|
|
|
2797
3474
|
sx: {
|
|
2798
3475
|
fontWeight: "bold",
|
|
2799
3476
|
color: "primary.main",
|
|
2800
|
-
mb:
|
|
3477
|
+
mb: 2,
|
|
3478
|
+
mt: 2
|
|
2801
3479
|
},
|
|
2802
3480
|
children: "Recurring Plans"
|
|
2803
3481
|
})
|
|
@@ -5152,7 +5830,8 @@ var UpdateEmails = function UpdateEmails() {
|
|
|
5152
5830
|
sx: {
|
|
5153
5831
|
fontWeight: "bold",
|
|
5154
5832
|
color: "primary.main",
|
|
5155
|
-
mb:
|
|
5833
|
+
mb: 2,
|
|
5834
|
+
mt: 2
|
|
5156
5835
|
},
|
|
5157
5836
|
children: "Update Emails"
|
|
5158
5837
|
})
|