[UI/UX] Build Comprehensive User Dashboard aligned with Figma

[Queenode]

🔴 Priority: Critical
Difficulty: Hard
Estimated Effort: 4-5 days
Relevant Files: src/app/(dashboard)/dashboard/page.tsx, src/components/dashboard/
Labels: enhancement, priority:critical, ui

Requirements

1. Dashboard Layout

   • Implement the User Dashboard screen exactly as defined in Figma.
   • Build reusable widgets for: Wallet balance, Total savings, Active savings groups, Contribution statistics, Recent transactions, and Quick actions.

2. Data Integration

   • Wire the static UI up to the backend API/React Query hooks to display real user data.
   • Ensure the layout remains intact when data is missing, loading, or in an error state.

3. Responsive Grid

   • The dashboard must use CSS Grid to gracefully collapse from a multi-column desktop layout into a single-column scrollable mobile view.

4. Testing

   • Component testing for each dashboard widget with mocked API data.

---

[web3nova]

Hi Maintainer,

I'd like to work on this issue. I have experience with backend pagination, React performance optimization, and can submit a clean PR within 48 hours.