Feat: Profile Completeness Indicator UI (FE-005)

[jotel-dev]

closes #198

• Feat: Profile Completeness Indicator UI (FE-005)

📚 Description

• This PR integrates the Profile Completeness indicator widget into the profile page and adds role-based visibility logic. The widget calculates and displays the profile completion percentage along with actionable missing fields, helping freelancers finish their profiles. It automatically hides once the profile is 100% complete or if the logged-in user is not a freelancer.

Changes applied

• Restricted Visibility to Sellers/Freelancers: Updated src/components/profile/ProfileCompleteness.tsx to read the user's role from the auth store and render null if the user is not a SELLER or BOTH.
• Integrated Component on Profile Page: Mounted the ProfileCompleteness component in src/app/app/profile/page.tsx within a <Suspense> wrapper for a smooth loading experience.
• Actionable Steps Display: Set up progress animation and logic to render actionable missing fields to help users complete their registration.

🔍 Evidence/Media (screenshots/videos)

@Josue19-08 I am done

[jotel-dev]

kindly review and merge @Josue19-08

[jotel-dev]

@Josue19-08 pls kindly merge

[Josue19-08]

Hi @jotel-dev, thanks for the contribution. The PR description is too minimal to be reviewed properly — it's just 4 bullet points copied from the commit message, with no explanation of what changed, why, or how to verify it. Please rewrite the description using the repository's PR template (.github/PULL_REQUEST_TEMPLATE.md) or provide a detailed description that covers: what files were changed and why, how the role-based visibility works, and how to test it.

[jotel-dev]

Okay
I am coming I would work on that

[jotel-dev]

Summary

This PR adds a Profile Completeness widget to the profile page to help users identify missing profile information and improve profile completion rates.

Changes Made

1. Added ProfileCompleteness Widget

• Integrated the "ProfileCompleteness" component into the profile page.
• The widget displays the user's profile completion percentage.
• Missing required fields are listed with actionable guidance so users can complete their profiles.

2. Role-Based Visibility

• The widget is only displayed for users with the "SELLER" or "BOTH" roles.
• Users with other roles will not see the widget.
• This ensures the feature is only shown to users who benefit from completing seller-related profile information.

3. Auto-Hide on Completion

• The widget is automatically hidden when the profile completion reaches 100%.
• This prevents unnecessary UI clutter once all required information has been provided.

Files Changed

• Updated the profile page to include the "ProfileCompleteness" component.
• Added role-based rendering logic to control widget visibility.
• Updated completion state handling to hide the widget when the profile is fully completed.

How to Test

1. Log in as a user with the "SELLER" role.
2. Navigate to the Profile page.
3. Verify that the Profile Completeness widget is displayed.
4. Confirm that the completion percentage and missing fields are shown correctly.
5. Update profile information until completion reaches 100%.
6. Verify that the widget is no longer displayed.

Role Verification

1. Log in as a user with the "BUYER" role.

2. Navigate to the Profile page.

3. Verify that the Profile Completeness widget is not displayed.

4. Log in as a user with the "BOTH" role.

5. Navigate to the Profile page.

6. Verify that the Profile Completeness widget is displayed and behaves as expected.

@Josue19-08 This is a detailed explanation of what I did

[jotel-dev]

Done 👍

[jotel-dev]

hello @Josue19-08

[Josue19-08]

Hi @jotel-dev, there have been no updates to this PR since the previous review on May 31 — no new commits and the description has not been updated. The request remains the same: the PR description consists of 4 bullet points copied from the commit message and does not follow the repository PR template (.github/PULL_REQUEST_TEMPLATE.md). Please rewrite it using the template sections: Title, Issue (Closes #198), Description (explain what changed and why), Changes applied, Evidence/Media. Screenshots are also required — the two screenshots in the current description appear to be cut off. If there is no update soon this PR will be closed.

[jotel-dev]

coming @Josue19-08