@@ -134,7 +134,16 @@ export const DashboardHome: React.FC = () => {
134134 return ( ) => clearInterval ( interval ) ;
135135 } , [ ] ) ;
136136
137- const showWelcome = ! userProfile ?. user ?. onboarding_completed ; // Logic from redesign
137+ const [ isBannerDismissed , setIsBannerDismissed ] = useState ( ( ) => {
138+ return localStorage . getItem ( 'welcome_banner_dismissed' ) === 'true' ;
139+ } ) ;
140+
141+ const dismissBanner = ( ) => {
142+ setIsBannerDismissed ( true ) ;
143+ localStorage . setItem ( 'welcome_banner_dismissed' , 'true' ) ;
144+ } ;
145+
146+ const showWelcome = ! userProfile ?. user ?. onboarding_completed && ! isBannerDismissed ;
138147
139148 return (
140149 < div className = "min-h-screen bg-[#020617] text-white selection:bg-gold-500/30 overflow-x-hidden font-sans relative" >
@@ -155,6 +164,14 @@ export const DashboardHome: React.FC = () => {
155164 < div className = "relative glass-card rounded-2xl p-6 lg:p-8 border border-white/10 bg-[#0f172a]/80 overflow-hidden shadow-2xl" >
156165 < div className = "absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-brand-500/10 to-transparent pointer-events-none" />
157166
167+ { /* Close Button */ }
168+ < button
169+ onClick = { dismissBanner }
170+ className = "absolute top-4 right-4 p-2 rounded-lg hover:bg-white/10 text-slate-400 hover:text-white transition-colors z-20"
171+ >
172+ < ArrowDownRight className = "rotate-45" size = { 20 } />
173+ </ button >
174+
158175 < div className = "relative z-10" >
159176 < div className = "flex items-center gap-3 mb-4" >
160177 < div className = "bg-brand-500 text-white p-2.5 rounded-xl shadow-[0_0_20px_rgba(99,102,241,0.4)]" >
@@ -212,9 +229,20 @@ export const DashboardHome: React.FC = () => {
212229 loading = { loading }
213230 />
214231
232+ < KPICard
233+ title = "Win Rate"
234+ value = { loading ? "—" : `${ stats . win_rate ?? 0 } %` }
235+ sub = "Last 24h"
236+ trend = { ( stats . win_rate ?? 0 ) >= 70 ? "up" : "down" }
237+ icon = { < Target size = { 32 } /> }
238+ color = "from-emerald-500/20 to-emerald-600/10"
239+ iconColor = "text-emerald-400"
240+ loading = { loading }
241+ />
242+
215243 < KPICard
216244 title = "Active Signals"
217- value = { loading ? "—" : stats . active_fleet } // Using active_fleet as active signals count proxy
245+ value = { loading ? "—" : ( stats . active_fleet ?? 0 ) } // Using active_fleet as active signals count proxy
218246 sub = "Open Positions"
219247 icon = { < Layers size = { 32 } /> }
220248 color = "from-brand-500/20 to-brand-600/10"
@@ -234,12 +262,12 @@ export const DashboardHome: React.FC = () => {
234262
235263 < KPICard
236264 title = "Est. PnL"
237- value = { loading ? "—" : `${ stats . pnl_7d > 0 ? "+" : "" } ${ stats . pnl_7d } R` }
265+ value = { loading ? "—" : `${ ( stats . pnl_7d ?? 0 ) > 0 ? "+" : "" } ${ ( stats . pnl_7d ?? 0 ) } R` }
238266 sub = "7-Day Return"
239- trend = { stats . pnl_7d >= 0 ? "up" : "down" }
267+ trend = { ( stats . pnl_7d ?? 0 ) >= 0 ? "up" : "down" }
240268 icon = { < TrendingUp size = { 32 } /> }
241- color = { stats . pnl_7d >= 0 ? "from-gold-500/20 to-orange-600/10" : "from-rose-500/20 to-rose-600/10" }
242- iconColor = { stats . pnl_7d >= 0 ? "text-gold-400" : "text-rose-400" }
269+ color = { ( stats . pnl_7d ?? 0 ) >= 0 ? "from-gold-500/20 to-orange-600/10" : "from-rose-500/20 to-rose-600/10" }
270+ iconColor = { ( stats . pnl_7d ?? 0 ) >= 0 ? "text-gold-400" : "text-rose-400" }
243271 loading = { loading }
244272 />
245273 </ div >
0 commit comments