[UI/UX] Implement User Profile and Notification Settings View

[Queenode]

🟢 Priority: Medium
Difficulty: Medium
Estimated Effort: 2-3 days
Relevant Files: src/app/(dashboard)/profile/page.tsx, src/components/profile/
Labels: enhancement, priority:medium, ui

Requirements

1. Profile Management Form

   • Build out the Profile page to allow users to update their Avatar, Display Name, and Contact details.
   • Handle form states (idle, loading, success toast, error).

2. Notification Preferences

   • Build toggle switches for "Email Notifications", "WhatsApp Alerts", and "In-App Notifications" for events like 'New Contribution' or 'Payout Ready'.
   • Ensure these toggle changes are instantly synchronized with the backend via a React Query mutation.

---

[OluRemiFour]

Hi Maintainer,
Interested in working on this issue. I'll implement the requested changes and ensure everything is properly tested before submission.

[LeoRicch]

With 5+ years of experience building production-ready React/Next.js applications, I specialize in creating intuitive, responsive, and accessible user experiences backed by clean, maintainable code. For this task, I'll build a robust Profile Management page that enables users to update their avatar, display name, and contact details while providing seamless form state handling for loading, success, and error scenarios.

I'll also implement notification preference toggles for Email, WhatsApp, and In-App notifications, integrating them with React Query mutations for instant backend synchronization and an optimistic user experience. The solution will follow the project's architecture and coding standards, include comprehensive tests, ensure WCAG 2.1 AA accessibility and responsive behavior, and be thoroughly documented to make the implementation secure, efficient, and easy to review.