feat: Add Dashboard Overview and Contributor Leaderboard

[Manak-hash]

Summary

• ✅ Implemented comprehensive dashboard overview with real-time metrics
• ✅ Added contributor leaderboard with pagination and ranking system
• ✅ Created 4 reusable UI components (Card, Button, Badge, Avatar)
• ✅ Integrated with StreamForge API endpoints
• ✅ Implemented loading, empty, and error states for all components
• ✅ Added responsive design for mobile and desktop

Dashboard Features

Project Summary Card

• Displays key metrics: total contributors, rewards paid, contributions count, active contributors
• Real-time data from API
• Grid layout with metric cards

Activity Feed

• Recent contribution events (PR merges, commits, reviews, reward claims)
• Event type badges with color coding
• Relative timestamps
• 10 most recent events

Top Contributors

• Top 5 contributors ranked by score
• Medal indicators (🥇🥈🥉) for top 3
• Avatar, username, score, and contribution count

Pending Rewards

• Contributors with unclaimed rewards
• Claim button (UI ready for backend implementation)
• Total pending amount display
• Warning badges for pending status

Contributor Leaderboard

• Full leaderboard with pagination (Load More)
• Top 3 distinguished with gold/silver/bronze badges
• Desktop: table view, Mobile: card view
• Sortable by score, contributions, and rewards

Technical Implementation

API Integration

• Type-safe API client using TypeScript interfaces
• Fetch-based API client with error handling
• No hardcoded values - all data from real API endpoints
• Endpoint integration:
  • /api/project/summary - Project metrics
  • /api/contributors/leaderboard - Leaderboard data
  • /api/activity/feed - Activity events
  • /api/contributors/pending-rewards - Pending rewards
  • /api/contributors/top - Top contributors

Component Architecture

• UI primitives: src/components/ui/
• Feature components: src/components/dashboard/
• Dashboard route: src/app/dashboard/page.tsx

State Management

• React hooks (useState, useEffect)
• Client-side data fetching with loading/error states
• Optimized re-renders with proper memoization

Styling

• Tailwind CSS v4 for styling
• System fonts for better performance
• Dark mode support via Tailwind's native dark: prefix
• Responsive design with mobile-first approach

Route

• /dashboard - Main dashboard page

Resolves

• Closes Build maintainer dashboard UI #3 - Dashboard Overview
• Closes Add contributor leaderboard component to dashboard #4 - Contributor Leaderboard

Testing

• Build passes: npm run build
• Lint passes: npm run lint (0 errors, 0 warnings)
• All components handle API errors gracefully
• Empty states display correctly when no data
• Loading states with skeleton screens