Notification UI

[benedictfred]

📌 Notification UI

📋 Description

I built the notification dropdown according the figma design provided. I also set it up for data fetching using the backend API_URL.

🛠 Changes Implemented

• I created a file NotificationDropdown.tsx and wired it up with the bell icon on the Navbar.
• I created api/notificationService.ts file and added getNotification, markAsRead and markAllAsRead utility functions.
• I created the useNotifications and useMarkAllAsRead hooks.

✅ How to Test

1. Setup: Clone the feat/notification branch.
2. Run Tests: Run npm install and npm run dev to start the local dev environment.
3. Expected Output: Navigate to /dashboard and click on the bell icon to see the notifcation dropdown.

🔍 Screenshots (if applicable)

Desktop Screen
Screencast from 2025-08-22 18-44-54.webm

Mobile Screen
Screencast from 2025-08-22 18-47-00.webm

🚀 Checklist

• Code follows project style guidelines.
• Changes are tested and verified.
• Documentation is updated (if needed).

🔗 Related Issues

• Closes Issue: Implement Notifications UI and Data Fetching #47

Additional Information

Currently the dropdown renders a dummy data as notifications. This is because the getNotifications functions requires a userId which is gotten when the user signs in. Apart from that, the utility functions are available and ready to use. All one has to do is just to pass the userId into the hooks and loop over the data variable returned by tanstack query.

@portableDD
Please review. Thanks 🙏.

[portableDD]

Good Work, Fix conflict and we are good to go

[benedictfred]

@portableDD
I have fixed the conflicts.