Implement Private Earnings Dashboard

[Benjtalkshow]

Implement Private Earnings Dashboard (/me/earnings)

Goal

Create a comprehensive earnings management page for users to track and claim their income from various activities.

---

Technical Requirements

Route

• app/me/earnings/page.tsx

Navigation

• Add an "Earnings" link in components/app-sidebar.tsx under the "Analytics" section using IconCurrencyDollar or a similar icon.

API Integration

• Use the provided endpoint — expected structure: GET /user/earnings
• Implement the API call in a new file: lib/api/user/earnings.ts
  • Follow the same pattern used in lib/api/hackathons/rewards.ts
• Handle loading and error states using existing skeleton patterns located in components/skeleton

UI Components

Summary Cards

• Display the following three cards:
  • Total Earned
  • Pending Withdrawal
  • Completed Withdrawal

Categorized Breakdown

• Charts or list showing earnings broken down by source:
  • Hackathons
  • Grants
  • Crowdfunding
  • Bounties

Activity Feed

• Detailed section showing specific wins — e.g., "Winner of Stellar Hackathon Q1"

Claim Action

• A functional "Claim" button for each claimable amount
• Must integrate with the withdrawal endpoint

Type Safety

• Define EarningsData and EarningActivity interfaces in lib/api/types.ts
• Strictly no any types

---

⚠️ Caution

This is a production environment — not a sandbox.

• Code must be performant, accessible, and clean
• No dummy data — all implementation MUST use real API endpoints and types
• AI-generated code will be scrutinized; poorly structured or "hallucinated" code will result in immediate issue closure
• Follow the existing design system: shadcn/ui, Tailwind, Framer Motion

---

Testing & Verification

Automated Tests

npm run lint    # Ensure code quality
npm run build   # Verify no breaking changes in routing or types

Manual Verification

• Verify the navigation link in the sidebar correctly highlights when active
• Test "Claim" button interaction — ensure it triggers the correct API call structure
• Confirm that private data is NOT exposed when viewed from an incognito window or a different account
• Provide screen recording of your implementation

[linear]

BOU-101