diff --git a/frontend/src/components/profile/ProfileStatsDashboard.tsx b/frontend/src/components/profile/ProfileStatsDashboard.tsx new file mode 100644 index 000000000..3a068199a --- /dev/null +++ b/frontend/src/components/profile/ProfileStatsDashboard.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { GitPullRequest, DollarSign, Trophy, Zap, Target, TrendingUp } from 'lucide-react'; + +interface ProfileStats { + totalBounties: number; + completedBounties: number; + totalEarned: string; + rank: number; + streak: number; + avgReviewScore: number; + successRate: number; + skills: { name: string; count: number }[]; + recentActivity: { type: string; description: string; date: string }[]; +} + +interface StatCardProps { + icon: React.ReactNode; + label: string; + value: string | number; + color: string; +} + +function StatCard({ icon, label, value, color }: StatCardProps) { + return ( + +
+
{icon}
+
+

{label}

+

{value}

+
+
+
+ ); +} + +export function ProfileStatsDashboard({ stats }: { stats: ProfileStats }) { + return ( +
+ {/* Overview Stats Grid */} +
+ } label="Completed" value={stats.completedBounties} color="bg-emerald/10 text-emerald" /> + } label="Earned" value={stats.totalEarned} color="bg-purple/10 text-purple" /> + } label="Rank" value={'#' + stats.rank} color="bg-magenta/10 text-magenta" /> + } label="Streak" value={stats.streak + ' days'} color="bg-status-warning/10 text-status-warning" /> + } label="Success" value={stats.successRate + '%'} color="bg-status-info/10 text-status-info" /> + } label="Avg Score" value={stats.avgReviewScore} color="bg-emerald/10 text-emerald" /> +
+ + {/* Skills */} +
+

Skills & Contributions

+
+ {stats.skills.map(s => ( + + {s.name} + ({s.count}) + + ))} +
+
+
+ ); +} \ No newline at end of file