feat: show initials when avatar image is unavailable

[way2nafea]

Summary

This PR implements a fallback for user avatars by displaying user initials whenever the profile image is unavailable, missing, empty, null, or fails to load.

The implementation is integrated into the shared Avatar component, ensuring consistent behavior across the application while preserving the existing UI and functionality.

Closes #140

---

Changes Made

• Added avatar initials fallback for unavailable profile images.
• Added a shared utility for generating user initials.
• Updated the shared Avatar component to handle image load failures.
• Updated Topbar to use the shared avatar fallback.
• Updated Sidebar to use the shared avatar fallback.
• Preserved existing avatar size, border radius, spacing, and layout.
• Improved accessibility by providing a safe fallback label when the image alt text is unavailable.

---

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation

---

Testing

Manually Verified

• ✅ Valid profile image displays normally.
• ✅ Missing profile image displays user initials.
• ✅ Empty avatar URL displays user initials.
• ✅ Invalid avatar URL displays user initials.
• ✅ Image load failure triggers initials fallback.
• ✅ Single-word names generate one initial.
• ✅ Multi-word names generate up to two uppercase initials.
• ✅ Empty or missing names display ?.
• ✅ Avatar size, styling, and layout remain unchanged.

Verified Locations

• Dashboard Top Navigation
• Sidebar
• User Profile Page

Build Verification

• ✅ npm run build completed successfully.
• ✅ Avatar-related files passed formatting and lint checks.

---

Screenshots

After (Profile Image Unavailable → Initials Fallback)

Before (Valid Profile Image)

---

Checklist

• Code follows the project's coding style.
• Existing functionality preserved.
• No unnecessary dependencies added.
• Manual testing completed.
• Build completed successfully.
• Temporary testing changes reverted before submission.

---

[way2nafea]

Hi @nensii21,

I've completed the implementation for Issue #140 and submitted a dedicated Pull Request.

The avatar now gracefully falls back to user initials when the profile image is unavailable, missing, empty, null, or fails to load. I've also manually tested the implementation and included screenshots in the PR.

I'd appreciate it if you could review it when you have time. Thank you!

[nensii21]

Some of the required CI checks is currently failing. Please take a look at the workflow logs, identify the cause, and push a fix. Once all required checks pass, I'll review and proceed with the PR.