[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.

[guptakumarranjeet150]

Hi everyone,

I can tackle [UI/UX] Implement User Profile and Notification Settings View. Proposed implementation roadmap:

• Analysis: Inspect current behavior and edge cases in Kolo-Org/Frontend
• Implementation: Build [UI/UX] Implement User Profile and Notification Settings View with clean React/Next.js components, responsive styling, and proper loading/error boundaries.
• Testing: Add component unit tests and ensure zero TypeScript/ESLint warnings.
• PR: Atomic commit with clean git hygiene and passing CI

Ready to deliver a clean, tested PR within 12–24 hours. Please assign!

[ranjeet150]

Hi everyone,

I can tackle [UI/UX] Implement User Profile and Notification Settings View. Proposed implementation roadmap:

• Analysis: Inspect current behavior and edge cases in Kolo-Org/Frontend
• Implementation: Build [UI/UX] Implement User Profile and Notification Settings View with clean React/Next.js components, responsive styling, and proper loading/error boundaries.
• Testing: Add component unit tests and ensure zero TypeScript/ESLint warnings.
• PR: Atomic commit with clean git hygiene and passing CI

I am ready to start immediately—please assign this to me!

[shobhamerabacha-star]

Hello! I'd like to work on this issue.

I would like to resolve this issue. Here is my proposed execution plan:

• Implementation: Build [UI/UX] Implement User Profile and Notification Settings View with clean React/Next.js components, responsive styling, and proper loading/error boundaries.
• Testing & Verification: Add component unit tests and ensure zero TypeScript/ESLint warnings.
• Delivery: Ready to ship a thoroughly tested PR within 12–24 hours with passing CI.

Happy to pick this up today—please assign to me!