Add initials fallback for users without profile avatars

[anshika-guleria]

What Changed

• Added a fallback avatar in the dashboard header when a user has not uploaded a profile image.

• Implemented a utility function to generate initials from the user's name.

• Supported different name formats such as:

  • Jane Doe → JD
  • JaneDoe → JD
  • jane doe → JD
  • jane → JA

• Replaced the default person icon with user initials for a more personalized experience.

Why

• Users without profile pictures were seeing a generic placeholder icon.
• Displaying initials provides a better user experience and helps users identify accounts more easily.

How To Test

1. Log in with a user account that does not have a profile image.

2. Open the dashboard.

3. Verify that initials are displayed instead of the default avatar icon.

4. Test with different name formats such as:

   • Jane Doe
   • JaneDoe
   • jane doe
   • jane

Related Issue

Closes #26

Checklist

• I have read CONTRIBUTING.md.
• I kept this pull request focused on one issue.
• I ran the relevant checks locally.
• I added or updated tests where appropriate.

Notes

• This change is frontend-only and affects the dashboard header avatar display.
• Existing avatar functionality remains unchanged.
• AI assistance was used for brainstorming and refining the initials generation logic. All submitted code was reviewed, understood, and tested locally.

Summary by CodeRabbit

Release Notes

• New Features
  • User avatars now display initials on a blue background when profile images are unavailable.

[vercel]

@anshika-guleria is attempting to deploy a commit to the Parv Aggarwal's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

DashboardHeader.jsx gains a local getInitials(name) helper that extracts initials from multi-part, CamelCase, or single-word names. The avatar fallback now renders those initials on a bg-primary background instead of a generic gray icon. The unused Link import is removed and several JSX blocks are reformatted without logic changes.

Changes

Avatar Initials Fallback

Layer / File(s)	Summary
getInitials helper and avatar fallback barterly-frontend/src/components/layout/DashboardHeader.jsx	Adds getInitials(name) (lines 25–55) handling multi-part names, CamelCase, and single-word names. Avatar fallback JSX (lines 276–278) is updated to render the computed initials centered on a bg-primary container, replacing the previous gray icon.
Import cleanup and JSX reformatting barterly-frontend/src/components/layout/DashboardHeader.jsx	Removes unused Link import from react-router-dom, reorders React hook imports, and reformats search input props, notification badge color assignment, date display, and the "Mark all as read" button tag—no behavior changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 No photo? No fret, no fuss!
I'll craft your initials, just for us.
CamelCase or spaces wide,
Two bright letters, full of pride.
On primary blue, they gleam and shine—
Your avatar placeholder, looking fine! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Add initials fallback for users without profile avatars' clearly and specifically describes the main change in the PR.
Linked Issues check	✅ Passed	The PR implements the proposed solution from issue #26 by adding initials-based fallback avatars for users without profile images.
Out of Scope Changes check	✅ Passed	All changes are scoped to the DashboardHeader component and directly address the avatar placeholder requirement; no unrelated changes detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@barterly-frontend/src/components/layout/DashboardHeader.jsx`:
- Around line 29-32: The initials fallback logic does not properly handle
whitespace-only names. After the trim operation that creates the `trimmed`
variable on Line 29, add a guard check to verify that `trimmed` is not an empty
string. If it is empty (meaning the original name contained only whitespace),
return a visible fallback character or string instead of proceeding with the
empty string. This ensures the avatar will display a fallback indicator rather
than blank initials when given whitespace-only input.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d9514117-ba9d-48fd-a3de-4b85ddf95e3f

📥 Commits

Reviewing files that changed from the base of the PR and between 76893a3 and 5b58262.

📒 Files selected for processing (1)

• barterly-frontend/src/components/layout/DashboardHeader.jsx

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Handle whitespace-only names in initials fallback.

On Line 29, name.trim() can become ""; current logic then returns an empty string (Line 52) instead of a visible fallback. Add a post-trim guard so the avatar never renders blank initials.

Proposed fix

 const getInitials = (name) => {
   if (!name) return "?";

   const trimmed = name.trim();
+  if (!trimmed) return "?";

   // Has spaces (Jane Doe, jane doe)
   const parts = trimmed.split(/\s+/);

Also applies to: 51-53

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@barterly-frontend/src/components/layout/DashboardHeader.jsx` around lines 29
- 32, The initials fallback logic does not properly handle whitespace-only
names. After the trim operation that creates the `trimmed` variable on Line 29,
add a guard check to verify that `trimmed` is not an empty string. If it is
empty (meaning the original name contained only whitespace), return a visible
fallback character or string instead of proceeding with the empty string. This
ensures the avatar will display a fallback indicator rather than blank initials
when given whitespace-only input.