Harshavarma: Created chart for job roles hit and applications

[harshavarma29]

Description

An analytics chart that displays the number of hits and applications for each role, with options to filter by date range and specific roles.

Related PRS (if any):

This frontend PR is related to the 1882 backend PR.

Main changes explained:

Created the following files:

• src/actions/jobAnalytics/JobsHitsApplicationsActions.js: Fetches analytics data from the backend.
• src/constants/jobAnalytics/JobsApplicationsHitsConstants.js: Contains constants for action dispatchers.
• src/reducers/jobAnalytics/JobsHitsApplicationsReducer.js: Updates the state after a fetch, error, or loading action.
• src/reducers/index.js: Configures the reducers.
• src/components/JobAnalytics/JobsHitsApplicationsChart/JobsHitsApplicationsChart.jsx: Provides the UI for the application.
• src/components/JobAnalytics/JobsHitsApplicationsChart/JobsHitsApplicationsChart.module.css: Defines CSS styles for the component.
• src/routes.jsx: Configures the route for the Job Hits and Applications page.
• src/utils/URL.js: Stores the backend endpoint as a constant.

How to test:

1. Check into the current branch
2. Do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. Log in as any user
5. Go to http://localhost:5173/analytics/roles-hits-and-applications
6. By default, the date and role filters should be set to “All”. Verify that the chart renders correctly.
7. Verify the chart behavior when applying date and role filters individually and together.
8. Verify that the page is responsive on smaller screens.
9. Verify that the UI updates correctly in dark mode.
10. Verify negative scenarios such as overlapping dates, invalid URLs, etc.
11. Refer to the sample test video provided below.

Screenshots or videos of changes:

FE_Test_Instructions.mp4

Note:

Let me know your inputs, comments, or suggestions for improvement.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	2574f2a
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69b3c324b557c30008aaa0bf
😎 Deploy Preview	https://deploy-preview-4325--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.

[sonarqubecloud]

Quality Gate passed

Issues
10 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

[Anusha-Gali]

Hi Harsha,

I have reviewed your PR locally and though all the main functionalities work as per requriement and negative cases are handled, there is a small UI issue. As you can see below in both the modes that the names of roles are truncated.

[bhanuanishakkineni]

Hello Harsha,
I have reviewed your PR and tested both frontend and backend. I have tested the charts behavior through selecting different dates and roles. The chart is working as expected and is responsive for all screen sizes. The UI is good in both light and dark modes.
One good thing I observed is that, if user selects an end date < start date, start date is automatically being changed to end date. One enhancement for this can be to alert users to select and end date later than start date.

PR.4325+.1882.testing-1.mp4

Please find comments related to backend in #1882

[sonarqubecloud]

Quality Gate passed

Issues
18 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