11'use client' ;
22
33import { Grid , Card , CardContent , Typography , Box } from '@mui/material' ;
4- import { PeopleAltOutlined , ArticleOutlined , AccountBalanceWalletOutlined , HowToVoteOutlined , PersonOutline , BalanceOutlined } from '@mui/icons-material' ;
4+ import {
5+ PeopleAltOutlined ,
6+ ArticleOutlined ,
7+ AccountBalanceWalletOutlined ,
8+ HowToVoteOutlined ,
9+ PersonOutline ,
10+ BalanceOutlined ,
11+ } from '@mui/icons-material' ;
512import { useTheme } from '@mui/material/styles' ;
613import getGoogleData from '@/lib/api' ;
714import { useEffect , useState } from 'react' ;
815import { Link } from '@/navigation' ;
916
1017function Dashboard ( ) {
11-
1218 const [ stats , setStats ] = useState ( [
1319 // { title: 'Total users', value: 0, Icon: PeopleAltOutlined },
1420 { title : 'Unique users' , value : 0 , Icon : PeopleAltOutlined } ,
15- { title : 'Wallet connections' , value : 0 , Icon : AccountBalanceWalletOutlined } ,
21+ {
22+ title : 'Wallet connections' ,
23+ value : 0 ,
24+ Icon : AccountBalanceWalletOutlined ,
25+ } ,
1626 { title : 'Proposal views' , value : 0 , Icon : ArticleOutlined } ,
1727 { title : 'DRep Registrations' , value : 0 , Icon : PersonOutline } ,
1828 { title : 'Votes submitted' , value : 0 , Icon : HowToVoteOutlined } ,
19- { title : 'Delegations' , value : 0 , Icon : BalanceOutlined }
20- ] )
21-
29+ { title : 'Delegations' , value : 0 , Icon : BalanceOutlined } ,
30+ ] ) ;
2231
2332 const fetchData = async ( ) => {
24- const resp = await getGoogleData ( )
33+ const resp = await getGoogleData ( ) ;
2534 const statMap = resp . reduce ( ( acc , event ) => {
2635 acc [ event . eventName ] = event . eventCount ;
2736 return acc ;
2837 } , { } ) ;
2938
3039 let statsTemplate = [
3140 // { title: 'Total users', value: statMap['user_engagement'], Icon: PeopleAltOutlined },
32- { title : 'Unique users' , value : statMap [ 'first_visit' ] , Icon : PeopleAltOutlined } ,
33- { title : 'Wallet connections' , value : + statMap [ 'Connect wallet' ] + + statMap [ 'Connect your wallet' ] , Icon : AccountBalanceWalletOutlined } ,
34- { title : 'Proposal views' , value : statMap [ 'View proposal details' ] , Icon : ArticleOutlined } ,
35- { title : 'DRep Registrations' , value : statMap [ 'Register' ] , Icon : PersonOutline } ,
36- { title : 'Votes submitted' , value : statMap [ 'Vote' ] , Icon : HowToVoteOutlined } ,
37- { title : 'Delegations' , value : statMap [ 'Delegate' ] , Icon : BalanceOutlined } ,
41+ {
42+ title : 'Unique users' ,
43+ value : statMap [ 'first_visit' ] ,
44+ Icon : PeopleAltOutlined ,
45+ } ,
46+ {
47+ title : 'Wallet connections' ,
48+ value :
49+ + statMap [ 'Connect wallet' ] +
50+ + statMap [ 'Connect your wallet' ] ,
51+ Icon : AccountBalanceWalletOutlined ,
52+ } ,
53+ {
54+ title : 'Proposal views' ,
55+ value : statMap [ 'View proposal details' ] ,
56+ Icon : ArticleOutlined ,
57+ } ,
58+ {
59+ title : 'DRep Registrations' ,
60+ value : statMap [ 'Register' ] ,
61+ Icon : PersonOutline ,
62+ } ,
63+ {
64+ title : 'Votes submitted' ,
65+ value : statMap [ 'Vote' ] ,
66+ Icon : HowToVoteOutlined ,
67+ } ,
68+ {
69+ title : 'Delegations' ,
70+ value : statMap [ 'Delegate' ] ,
71+ Icon : BalanceOutlined ,
72+ } ,
3873 ] ;
39- setStats ( statsTemplate )
40- }
74+ setStats ( statsTemplate ) ;
75+ } ;
4176
4277 useEffect ( ( ) => {
43- fetchData ( )
44- } , [ ] )
45-
46-
78+ fetchData ( ) ;
79+ } , [ ] ) ;
4780
4881 const theme = useTheme ( ) ;
4982
5083 return (
51- < Box display = "flex" flexDirection = "column" alignItems = "center" justifyContent = "space-between" height = "100%" sx = { { color : ( theme ) => theme ?. palette ?. text ?. black } } >
52- < Box display = "flex" flexDirection = "column" alignItems = "start" gap = { 5 } padding = { 5 } >
53- < Box display = "flex" flexDirection = "column" alignItems = "start" gap = { 1 } >
84+ < Box
85+ display = "flex"
86+ flexDirection = "column"
87+ alignItems = "center"
88+ justifyContent = "space-between"
89+ height = "100%"
90+ sx = { { color : ( theme ) => theme ?. palette ?. text ?. black } }
91+ >
92+ < Box
93+ display = "flex"
94+ flexDirection = "column"
95+ alignItems = "start"
96+ gap = { 5 }
97+ padding = { 5 }
98+ >
99+ < Box
100+ display = "flex"
101+ flexDirection = "column"
102+ alignItems = "start"
103+ gap = { 1 }
104+ >
54105 < Typography variant = "h5" component = "h1" >
55106 SanchoNet Govtool
56107 </ Typography >
57108 < Typography variant = "h4" component = "h2" >
58109 Participation Dashboard
59110 </ Typography >
60- < Typography variant = "subtitle1" sx = { { color : ( theme ) => theme ?. palette ?. text ?. gray } } >
61- This dashboard shows the overall participation and usage of SanchoNet Govtool from 1st of December 2023
111+ < Typography
112+ variant = "subtitle1"
113+ sx = { { color : ( theme ) => theme ?. palette ?. text ?. gray } }
114+ >
115+ This dashboard shows the overall participation and usage
116+ of SanchoNet Govtool from 1st of December 2023
62117 </ Typography >
63118 </ Box >
64119
65-
66120 < Grid container spacing = { 4 } >
67121 { stats . map ( ( stat , index ) => (
68122 < Grid item xs = { 12 } sm = { 12 } md = { 6 } key = { index } >
69123 < Card
70- sx = { { background : ( theme ) => theme ?. palette ?. background ?. info , width : '100%' } }
124+ sx = { {
125+ background : ( theme ) =>
126+ theme ?. palette ?. background ?. info ,
127+ width : '100%' ,
128+ } }
71129 >
72- < CardContent sx = { { display : 'flex' , flexDirection : 'column' , alignItems : 'center' , justifyContent : 'center' , height : '100%' } } >
73- < stat . Icon style = { { fontSize : 60 , color : theme ?. palette ?. text ?. black , paddingBottom : 20 } } />
74-
75- < Typography variant = "subtitle1" sx = { { color : ( theme ) => theme ?. palette ?. text ?. gray } } >
130+ < CardContent
131+ sx = { {
132+ display : 'flex' ,
133+ flexDirection : 'column' ,
134+ alignItems : 'center' ,
135+ justifyContent : 'center' ,
136+ height : '100%' ,
137+ } }
138+ >
139+ < stat . Icon
140+ style = { {
141+ fontSize : 60 ,
142+ color : theme ?. palette ?. text ?. black ,
143+ paddingBottom : 20 ,
144+ } }
145+ />
146+
147+ < Typography
148+ variant = "subtitle1"
149+ sx = { {
150+ color : ( theme ) =>
151+ theme ?. palette ?. text ?. gray ,
152+ } }
153+ >
76154 { stat . title }
77155 </ Typography >
78156 < Typography variant = "h4" >
@@ -85,18 +163,28 @@ function Dashboard() {
85163 </ Grid >
86164 </ Box >
87165
88- < Box display = "flex" flexDirection = "column" alignItems = "center" padding = { 2 } >
166+ < Box
167+ display = "flex"
168+ flexDirection = "column"
169+ alignItems = "center"
170+ padding = { 2 }
171+ >
89172 < Typography variant = "caption" display = "block" gutterBottom >
90- © { new Date ( ) . getFullYear ( ) } Intersect MBO
173+ © { new Date ( ) . getFullYear ( ) } GovTool
91174 </ Typography >
92175 < Link href = "https://sanchogov.tools/" >
93- < Typography variant = "caption" display = "block" sx = { { color : ( theme ) => theme ?. palette ?. text ?. primaryBlue } } >
176+ < Typography
177+ variant = "caption"
178+ display = "block"
179+ sx = { {
180+ color : ( theme ) => theme ?. palette ?. text ?. primaryBlue ,
181+ } }
182+ >
94183 Sancho Govtool
95184 </ Typography >
96185 </ Link >
97186 </ Box >
98-
99- </ Box >
187+ </ Box >
100188 ) ;
101189}
102190
0 commit comments