Issue #64
[UI/UX] Develop User Dashboard — Wallet, Escrows & Sustainability Impact (Desktop & Mobile)
🔴 Priority: Critical
Difficulty: Hard
Estimated Effort: 4-5 days
Relevant Files: src/app/dashboard/page.tsx, src/components/dashboard/WalletWidget.tsx, src/components/dashboard/EscrowWidget.tsx, src/components/dashboard/ReputationWidget.tsx
Labels: ui, dashboard, priority:critical, figma
Requirements
-
Dashboard Layout
- Implement the User Dashboard screen exactly as defined in Figma.
- Build reusable widgets for: USDC Wallet balance, User Trust Score & Reputation tier, Active escrows and pending actions, Recent transaction history, and User profile quick-access.
- Wire each widget to the backend API using React Query hooks for real live data.
- The layout must use CSS Grid and collapse gracefully from multi-column desktop to single-column scrollable mobile.
-
Screenshot Requirement
- Capture and commit screenshots of the Desktop Dashboard with all widgets populated with realistic data.
- Include a Mobile Dashboard screenshot showing the collapsed single-column layout.
- Place screenshots in
src/components/dashboard/screenshots/.
-
Testing Requirements
- Component test: Render each widget with mocked API data and assert the correct values are displayed.
- Test edge cases: assert the layout remains stable when data is loading (skeleton state) or returns an empty array.
Issue #64
[UI/UX] Develop User Dashboard — Wallet, Escrows & Sustainability Impact (Desktop & Mobile)
🔴 Priority: Critical
Difficulty: Hard
Estimated Effort: 4-5 days
Relevant Files:
src/app/dashboard/page.tsx,src/components/dashboard/WalletWidget.tsx,src/components/dashboard/EscrowWidget.tsx,src/components/dashboard/ReputationWidget.tsxLabels:
ui,dashboard,priority:critical,figmaRequirements
Dashboard Layout
Screenshot Requirement
src/components/dashboard/screenshots/.Testing Requirements