@@ -50,7 +50,9 @@ const Dashboard = () => {
5050 ? summaryQuery . data . recentActivity
5151 : mockDashboardSummary . recentActivity ;
5252 const solvedRate = summaryQuery . data ?. totalChallenges
53- ? Math . round ( ( summaryQuery . data . solved / summaryQuery . data . totalChallenges ) * 100 )
53+ ? Math . round (
54+ ( summaryQuery . data . solved / summaryQuery . data . totalChallenges ) * 100 ,
55+ )
5456 : 0 ;
5557
5658 const stats = [
@@ -99,6 +101,7 @@ const Dashboard = () => {
99101 subtitle = "Track progress, jump back into your latest work, and command the arena."
100102 />
101103
104+ { /* Featured Hero */ }
102105 < MotionBlock
103106 initial = { { opacity : 0 , y : 20 } }
104107 animate = { { opacity : 1 , y : 0 } }
@@ -258,6 +261,48 @@ const Dashboard = () => {
258261 </ div >
259262 </ div >
260263 </ div >
264+ { /* Pending Tasks Section Preview */ }
265+ < div className = "mt-8 pt-8 border-t border-glass-border/20" >
266+ < div className = "space-y-4" >
267+ < div className = "flex items-center justify-between" >
268+ < h2 className = "text-section-title font-semibold flex items-center gap-2" >
269+ < FiClock className = "text-accent" />
270+ Pending Tasks
271+ < span className = "text-xs bg-accent/10 px-2 py-0.5 rounded-full text-accent font-black tracking-widest" > 3</ span >
272+ </ h2 >
273+ < Link to = "/pending-tasks" className = "text-xs text-accent font-bold hover:underline flex items-center gap-1" >
274+ View All < FiArrowRight />
275+ </ Link >
276+ </ div >
277+
278+ < div className = "grid grid-cols-1 md:grid-cols-3 gap-4" >
279+ { [
280+ { id : 'ch_001' , title : 'Two Sum' , category : 'Logic' , priority : 'High' , due : '2h' } ,
281+ { id : 'ch_002' , title : 'Reverse Link' , category : 'Data Struct' , priority : 'Med' , due : '1d' } ,
282+ { id : 'ch_003' , title : 'Graph Traversal' , category : 'Algorithms' , priority : 'Low' , due : '3d' } ,
283+ ] . map ( ( task ) => (
284+ < div key = { task . id } onClick = { ( ) => navigate ( `/challenge/${ task . id } ` ) } className = "group macos-glass p-5 hover:border-accent transition-all cursor-pointer bg-white/[0.02]" >
285+ < div className = "flex justify-between items-start mb-4" >
286+ < span className = "text-[10px] text-tertiary uppercase font-black tracking-widest" > { task . category } </ span >
287+ < span className = { `text-[8px] px-1.5 py-0.5 rounded uppercase font-black ${ task . priority === 'High' ? 'bg-red-500/20 text-red-500' :
288+ task . priority === 'Med' ? 'bg-yellow-500/20 text-yellow-500' : 'bg-blue-500/20 text-blue-400'
289+ } `} >
290+ { task . priority }
291+ </ span >
292+ </ div >
293+ < h3 className = "font-bold text-lg leading-tight group-hover:text-accent transition-colors mb-4" > { task . title } </ h3 >
294+ < div className = "flex items-center justify-between mt-auto pt-4 border-t border-glass-border/40" >
295+ < div className = "flex items-center gap-2" >
296+ < FiClock size = { 12 } className = "text-accent" />
297+ < span className = "text-[10px] text-secondary font-medium" > Due { task . due } </ span >
298+ </ div >
299+ < button className = "text-[10px] bg-accent/10 text-accent px-3 py-1 rounded-lg font-bold hover:bg-accent/20 transition-colors" > Resume</ button >
300+ </ div >
301+ </ div >
302+ ) ) }
303+ </ div >
304+ </ div >
305+ </ div >
261306 </ div >
262307 ) ;
263308} ;
0 commit comments