Implement Public Earnings Section in Profile

[Benjtalkshow]

Implement Public Earnings Section in Profile (/profile/[username])

Goal

Add a minimal, structured earnings summary to the public profile that highlights a user's achievements without exposing private financial status.

---

Technical Requirements

Route

• Modify app/(landing)/profile/[username]/page.tsx — specifically the ProfileData component

Logical Separation

• Reuse the same GET /user/earnings endpoint logic, but filter visibility:

Data Point	Visibility
Pending withdrawals	❌ HIDDEN
"Claim" buttons	❌ HIDDEN
Sensitive status tracking	❌ HIDDEN
Total earnings (publicly visible subset)	✅ SHOWN
Categorized achievements	✅ SHOWN
Verified activity history	✅ SHOWN

Design

• Maintain the "Premium" aesthetic of the existing profile page
• Use existing ProfileDataClient patterns located in components/profile/

Constraint

• The public view must be read-only and optimized for community trust

---

⚠️ 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

• Open the public profile from an incognito window or a different account
• Confirm that pending withdrawals, Claim buttons, and sensitive financial data are NOT visible
• Verify that total earnings, categorized achievements, and verified activity history display correctly
• Provide video evidence

[linear]

BOU-102