Neeraj Created a horizontal bar graph comparing the competitiveness of each role

[Neeraj-Kondaveeti]

Related PRs (if any):

This frontend PR is related to the Backend OneCommunityGlobal/HGNRest#1693 PR.
It builds on earlier work from PR #3724

---

Main changes explained:

• Added a Most Competitive Roles Graph to the dashboard.
• Implemented role-level aggregation of views and applications.
• Integrated dark/light mode styling for consistent UI.
• Added filters for date ranges, roles, and granularity (totals, weekly, monthly, annually).
• Improved responsive design for small screen widths (< 430px).

---

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to http://localhost:5173/job-analytics-competitive-roles
6. verify all features work according to the requirements mentioned in the screenshots above.

Screenshots or Videos of change :

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	f1c090d
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/693cdc3f0537cf000860e1df
😎 Deploy Preview	https://deploy-preview-4010--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[harshavarma29]

I have tested the PR locally using the admin account. The custom dates and date filters are working as expected. However, I noticed the following issues:

1. Application numbers not clearly visible for some filters:

2. Graph is not responsive on smaller screens:
   https://github.com/user-attachments/assets/d23c831b-ad69-4a8c-8091-9a15f2e28c8c

3. Dark mode not working as expected: Background color does not match the recommended palettes given in the Dark Mode Implementation Guide.

Recommended dark palettes given in the Darkmode Implementation Guide:

[Neeraj-Kondaveeti]

I have tested the PR locally using the admin account. The custom dates and date filters are working as expected. However, I noticed the following issues:

1. Application numbers not clearly visible for some filters:

2. Graph is not responsive on smaller screens: https://github.com/user-attachments/assets/d23c831b-ad69-4a8c-8091-9a15f2e28c8c 3. Dark mode not working as expected: Background color does not match the recommended palettes given in the [Dark Mode Implementation Guide](https://docs.google.com/document/d/11OXJfBBedK6vV-XvqWR8A9lOH0BsfnaHx01h1NZZXfI/edit?tab=t.0). Recommended dark palettes given in the Darkmode Implementation Guide:

Hi Harsha , Hope you are doing well . I have made the necessary changes as requested. Can you please have a look once again and let me know if you see any issues with it.

Thank You for your time and effort.

[Aswin20010]

Reviewed PR #4010 (Most Competitive Roles Graph Feature) linked to backend PR #1693. Verified addition of role-level aggregation for views and applications, functional date range and granularity filters, and proper dark/light mode styling. Confirmed graph responsiveness on small screens and accurate data rendering under /job-analytics-competitive-roles. No UI or logic regressions observed — approved the PR.

[IndraAnuraag9]

I have reviewed this PR locally using an admin account. the "Most Competitive Roles" Feature is working as intended in both Light and Dark Mode, and is responsive. The data is rendering correctly for all the filter combinations.

[harshavarma29]

I have reviewed the PR locally using the Admin account, and the new changes are working as expected. The graph is responsive on smaller screens, dark mode is working as expected, and the application numbers are clearly visible.

new_changes_working_fine.mp4

[Anusha-Gali]

Hi Neeraj,

I have reviewed your PR locally and all the main changes work as expected. I want to highlight a small issue of the white space in dark mode as you can see below of the screenshot.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[one-community]

Thank you all, merging!