@@ -8,6 +8,8 @@ import { DauChart, DauDataPoint } from './dau-chart'
88import { AuthMechChart , AuthMechDataPoint } from './auth-mech-chart'
99import { DailySignupsChart , DailySignupsDataPoint } from './daily-signups-chart'
1010import { DailyLoginFailsChart , DailyLoginFailsDataPoint } from './daily-login-fails-chart'
11+ import { DateRangePicker , DateRange } from '@/components/ui/date-range-picker'
12+ import { startOfDay , endOfDay } from 'date-fns'
1113
1214interface ConversionData {
1315 new_signups : number
@@ -20,129 +22,183 @@ interface SummaryMetrics {
2022 total_applications : number
2123 total_apis : number
2224 total_connections : number
25+ monthly_signups : number
26+ monthly_active_users : number
27+ conversion_rate : number
2328}
2429
2530interface UsersResult {
26- data : {
27- total_users : number
28- total_signups : number
29- total_active_users : number
30- total_failed_users : number
31- first_seen : string
32- last_seen : string
33- } [ ]
31+ data : { total_users : number } [ ]
32+ }
33+
34+ interface ApplicationsResult {
35+ data : { total_applications : number } [ ]
36+ }
37+
38+ interface ApisResult {
39+ data : { total_apis : number } [ ]
40+ }
41+
42+ interface ConnectionsResult {
43+ data : { total_connections : number } [ ]
44+ }
45+
46+ interface MonthlySignupsResult {
47+ data : { monthly_signups : number } [ ]
48+ }
49+
50+ interface MonthlyActiveUsersResult {
51+ data : { active : number } [ ]
52+ }
53+
54+ interface ConversionRateResult {
55+ data : { conversion_rate : number } [ ]
3456}
3557
3658export default function Auth0Dashboard ( ) {
3759 const [ token ] = useQueryState ( 'token' )
60+ const [ dateRange , setDateRange ] = useState < DateRange > ( {
61+ from : startOfDay ( new Date ( new Date ( ) . setDate ( new Date ( ) . getDate ( ) - 7 ) ) ) ,
62+ to : endOfDay ( new Date ( ) )
63+ } )
3864 const [ summaryMetrics , setSummaryMetrics ] = useState < SummaryMetrics > ( {
3965 total_users : 0 ,
4066 total_applications : 0 ,
4167 total_apis : 0 ,
42- total_connections : 0
68+ total_connections : 0 ,
69+ monthly_signups : 0 ,
70+ monthly_active_users : 0 ,
71+ conversion_rate : 0
4372 } )
44- const [ monthlySignUps , setMonthlySignUps ] = useState < number > ( 0 )
45- const [ monthlyMau , setMonthlyMau ] = useState < number > ( 0 )
46- const [ conversionRate , setConversionRate ] = useState < number > ( 0 )
4773 const [ dauData , setDauData ] = useState < DauDataPoint [ ] > ( [ ] )
4874 const [ authMechData , setAuthMechData ] = useState < AuthMechDataPoint [ ] > ( [ ] )
4975 const [ dailySignupsData , setDailySignupsData ] = useState < DailySignupsDataPoint [ ] > ( [ ] )
5076 const [ dailyLoginFailsData , setDailyLoginFailsData ] = useState < DailyLoginFailsDataPoint [ ] > ( [ ] )
5177
52-
5378 useEffect ( ( ) => {
5479 async function fetchMetrics ( ) {
5580 if ( ! token ) return
5681
82+ const fromDate = dateRange . from . toISOString ( )
83+ const toDate = dateRange . to . toISOString ( )
84+ const thirtyDaysAgo = new Date ( Date . now ( ) - 30 * 24 * 60 * 60 * 1000 ) . toISOString ( )
85+
5786 try {
5887 const [
5988 usersResult ,
6089 applicationsResult ,
6190 apisResult ,
6291 connectionsResult ,
63- monthlySignUpsResult ,
64- monthlyMauResult ,
92+ monthlySignupsResult ,
93+ monthlyActiveUsersResult ,
94+ conversionRateResult ,
6595 dauResult ,
6696 authMechResult ,
67- conversionResult ,
6897 dailySignupsResult ,
6998 dailyLoginFailsResult
7099 ] = await Promise . all ( [
71100 pipe < UsersResult > ( token , 'auth0_users_total' ) ,
72101 pipe ( token , 'auth0_applications' ) ,
73102 pipe ( token , 'auth0_apis' ) ,
74103 pipe ( token , 'auth0_connections' ) ,
75- pipe ( token , 'auth0_signups' ) ,
76- pipe ( token , 'auth0_mau' ) ,
77- pipe < { data : DauDataPoint [ ] } > ( token , 'auth0_dau_ts' ) ,
78- pipe < { data : AuthMechDataPoint [ ] } > ( token , 'auth0_mech_usage' ) ,
79- pipe < { data : ConversionData [ ] } > ( token , 'auth0_conversion_rate' ) ,
80- pipe < { data : DailySignupsDataPoint [ ] } > ( token , 'auth0_daily_signups' ) ,
81- pipe < { data : DailyLoginFailsDataPoint [ ] } > ( token , 'auth0_daily_login_fails' )
104+ pipe ( token , 'auth0_signups' , {
105+ date_from : thirtyDaysAgo
106+ } ) ,
107+ pipe ( token , 'auth0_mau' , {
108+ date_from : thirtyDaysAgo
109+ } ) ,
110+ pipe < ConversionRateResult > ( token , 'auth0_conversion_rate' , {
111+ date_from : thirtyDaysAgo
112+ } ) ,
113+ pipe < { data : DauDataPoint [ ] } > ( token , 'auth0_dau_ts' , {
114+ date_from : fromDate ,
115+ date_to : toDate
116+ } ) ,
117+ pipe < { data : AuthMechDataPoint [ ] } > ( token , 'auth0_mech_usage' , {
118+ date_from : fromDate ,
119+ date_to : toDate
120+ } ) ,
121+ pipe < { data : DailySignupsDataPoint [ ] } > ( token , 'auth0_daily_signups' , {
122+ date_from : fromDate ,
123+ date_to : toDate
124+ } ) ,
125+ pipe < { data : DailyLoginFailsDataPoint [ ] } > ( token , 'auth0_daily_login_fails' , {
126+ date_from : fromDate ,
127+ date_to : toDate
128+ } )
82129 ] )
83130
84131 setSummaryMetrics ( {
85- total_users : usersResult ?. data ?. [ 0 ] ?. total_users || 0 ,
86- total_applications : applicationsResult ?. data ?. length || 0 ,
87- total_apis : apisResult ?. data ?. length || 0 ,
88- total_connections : connectionsResult ?. data ?. length || 0
132+ total_users : usersResult ?. data ?. [ 0 ] ?. total_users ?? 0 ,
133+ total_applications : applicationsResult ?. data ?. length ?? 0 ,
134+ total_apis : apisResult ?. data ?. length ?? 0 ,
135+ total_connections : connectionsResult ?. data ?. length ?? 0 ,
136+ monthly_signups : monthlySignupsResult ?. data ?. [ 0 ] ?. total ?? 0 ,
137+ monthly_active_users : monthlyActiveUsersResult ?. data ?. [ 0 ] ?. active ?? 0 ,
138+ conversion_rate : conversionRateResult ?. data ?. [ 0 ] ?. conversion_rate ?? 0
89139 } )
90- setMonthlySignUps ( monthlySignUpsResult . data [ 0 ] ?. total || 0 )
91- setMonthlyMau ( monthlyMauResult . data [ 0 ] ?. active || 0 )
92- setConversionRate ( conversionResult . data [ 0 ] ?. conversion_rate || 0 )
93- setDauData ( dauResult . data )
94- setAuthMechData ( authMechResult . data )
95- setDailySignupsData ( dailySignupsResult . data )
96- setDailyLoginFailsData ( dailyLoginFailsResult . data )
140+
141+ setDauData ( dauResult ?. data ?? [ ] )
142+ setAuthMechData ( authMechResult ?. data ?? [ ] )
143+ setDailySignupsData ( dailySignupsResult ?. data ?? [ ] )
144+ setDailyLoginFailsData ( dailyLoginFailsResult ?. data ?? [ ] )
97145 } catch ( error ) {
98146 console . error ( 'Failed to fetch metrics:' , error )
99147 }
100148 }
101149
102150 fetchMetrics ( )
103- } , [ token ] )
151+ } , [ token , dateRange ] )
104152
105153 return (
106154 < div className = "space-y-8" >
107- { /* Summary Card */ }
108- < div className = "grid grid-cols-4 gap-4 p-6 rounded-lg border bg-card text-card-foreground shadow-sm " >
109- < div >
110- < p className = "text-sm font-medium text-muted-foreground" > Total Users</ p >
111- < p className = "text-2xl font-bold" > { summaryMetrics . total_users . toLocaleString ( ) } </ p >
112- </ div >
113- < div >
114- < p className = "text-sm font-medium text-muted-foreground" > Applications</ p >
115- < p className = "text-2xl font-bold" > { summaryMetrics . total_applications . toLocaleString ( ) } </ p >
116- </ div >
117- < div >
118- < p className = "text-sm font-medium text-muted-foreground" > APIs</ p >
119- < p className = "text-2xl font-bold" > { summaryMetrics . total_apis . toLocaleString ( ) } </ p >
120- </ div >
121- < div >
122- < p className = "text-sm font-medium text-muted-foreground" > Connections</ p >
123- < p className = "text-2xl font-bold" > { summaryMetrics . total_connections . toLocaleString ( ) } </ p >
124- </ div >
155+ { /* Top row - Total metrics */ }
156+ < div className = "grid gap-4 md:grid-cols-2 lg:grid-cols-4 " >
157+ < MetricCard
158+ title = " Total Users"
159+ value = { summaryMetrics . total_users }
160+ / >
161+ < MetricCard
162+ title = " Applications"
163+ value = { summaryMetrics . total_applications }
164+ / >
165+ < MetricCard
166+ title = " APIs"
167+ value = { summaryMetrics . total_apis }
168+ / >
169+ < MetricCard
170+ title = " Connections"
171+ value = { summaryMetrics . total_connections }
172+ / >
125173 </ div >
126174
127- { /* Metrics Row */ }
128- < div className = "grid gap-4 md:grid-cols-3" >
175+ { /* Second row - Monthly metrics */ }
176+ < div className = "grid gap-4 md:grid-cols-2 lg:grid-cols- 3" >
129177 < MetricCard
130178 title = "Monthly Sign Ups"
131- value = { monthlySignUps . toLocaleString ( ) }
179+ value = { summaryMetrics . monthly_signups }
132180 description = "New users signed up in the last 30 days"
133181 />
134182 < MetricCard
135183 title = "Monthly Active Users"
136- value = { monthlyMau . toLocaleString ( ) }
184+ value = { summaryMetrics . monthly_active_users }
137185 description = "Users active in the last 30 days"
138186 />
139187 < MetricCard
140188 title = "Conversion Rate"
141- value = { `${ conversionRate } }
189+ value = { `${ summaryMetrics . conversion_rate } }
142190 description = "New users who became active in the last 30 days"
143191 />
144192 </ div >
145193
194+ { /* Date Range Picker */ }
195+ < div className = "flex justify-end" >
196+ < DateRangePicker
197+ initialDateRange = { dateRange }
198+ onChange = { ( newRange ) => setDateRange ( newRange ) }
199+ />
200+ </ div >
201+
146202 { /* Charts Grid */ }
147203 < div className = "grid gap-4 grid-cols-1" >
148204 < DauChart data = { dauData } />
0 commit comments