Namitha - fix(JobAnalytics): prevent invalid date range render + react to dark by Namitha7070 · Pull Request #3994 · OneCommunityGlobal/HighestGoodNetworkApp

Namitha7070 · 2025-08-30T06:29:59Z

Description

Page: Job Posting Page Analytics
Goal: Create a grouped/stacked horizontal bar chart showing Hits vs Applications per role, and address reviewer feedback.

Fixes (PRIORITY HIGH):
Overlap on small screens: Chart and date controls now reflow without colliding.
Dark mode not updating: UI and chart adopt the active theme correctly.
Dates UX: Replaced single dropdown with two date inputs (Start, End).
Overflow: Graph no longer spills outside its container.

Related PRS (if any):

…

Main changes explained:

Dates UX (range-first)**

Replaced the single Dates dropdown with two inputs: Start date / End date.
Filtering applies date range first, then role filter.
Added a Clear action to reset both dates and results quickly.

Invalid-range handling**

If Start > End, show an inline warning banner and skip filtering/fetching.
Chart data is cleared in this state; banner auto-clears once dates become valid.

Chart restoration (Recharts, horizontal)**

Restored the original visual spec: gridlines, axes, end-of-bar value labels.
Sorted roles least → most popular for quick scanning.
Preserved tooltips/labels; long role names truncate with a title/tooltip.

Overflow & responsiveness**

Clamped bar widths and contained the chart so it stays inside the card.
Adopted a stable flex layout for chart vs. filters to prevent overlap on small screens.
Reserved axis/label space to avoid clipping; no horizontal scroll.

Dark mode**

Introduced theme CSS variables and supported common selectors: html.dark, [data-theme="dark"], body.dark.
Updated bar, grid, axis, and text colors to switch with the theme.
Set chart title to a light blue in dark mode for contrast.

Title & typography**

Updated page title to “Least popular roles” and aligned typography/spacing with the spec.

Data prep & state**

Refactored with useMemo for roles list, grouped counts, and max calculations.
Removed dead dropdown logic and simplified state for reliability.

How to test:

check into current branch: git checkout fix/analytics-date-warning-darkmode
do npm install and ... to run this PR locally
Clear site data/cache
log as admin user
go to (http://localhost:5173/applicant-analytics)
Verify the below functions:
Dark mode: Toggle light↔dark
Invalid range: Set Start > End → warning shows
Valid range: Fix dates → warning clears; data renders.
Role filter: Clear all roles → chart clears; no errors.
Minimize the window size to check if the chart is collapsing or not on smaller screens.

Screenshots or videos of changes:

Week.4.mp4

…theme

netlify · 2025-08-30T06:30:05Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`2368038`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68b29a6aff540a00081b1021
😎 Deploy Preview	https://deploy-preview-3994--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.

SudheeshTD · 2025-09-01T18:51:44Z

I checked into the branch and run npm install and started frontend. I logged in using admin account, I cannot see the page. Should I do any changes?

sohamsharma08

Tested the PR using an admin account. The graph, warnings, and data is portraying as expected and everything is working fine. Relevant screenshots are attached below:

vivekchandrabs

I checked all the functionality and everything is working as expected.

@Namitha7070 Please document the PR properly. The frontend URL is /application-analytics

ezreal2020

Verified n tested, everything worked as expected.

munishpatel

I am getting Page Not Found in the link, should I change any thing locally to review this pull request?

beblicarl · 2025-10-09T20:12:34Z

This feature works as intended and the code is great

https://www.loom.com/share/a7dcd7a6680f45d093c8283a5799ccb2?sid=9305d921-9823-4b3a-a0bf-65105a389932

Anusha-Gali

Hi Namitha,

I have reviewed your PR locally and though it works as per requirement. Below are the UI issues:

The calendar is in light mode when the application is in dark mode
The clear button is not within the browser in desktop as well as mobile

HemanthNidamanuru

Hi Namitha,
I have reviewed your PR locally and the functionality works as per requirement, however I noticed a few issues:

The calendar is in light mode when the application is in dark mode
The clear button is not visible in the desktop version but is visible in mobile
I am able to select future dates

netlify · 2026-03-20T21:32:54Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`251762d`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69d00dfe7681ad0008270abf
😎 Deploy Preview	https://deploy-preview-3994--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.

…cs-date-warning-darkmode # Conflicts: # src/components/ApplicationAnalytics/index.jsx # src/components/ApplicationAnalytics/jobAnalytics.jsx # src/components/ApplicationAnalytics/jobAnalytics.module.css

Namitha7070 · 2026-03-21T00:39:55Z

Hi Namitha,

I have reviewed your PR locally and though it works as per requirement. Below are the UI issues:

The calendar is in light mode when the application is in dark mode

The clear button is not within the browser in desktop as well as mobile

The Clear button only pops up when a Date is selected, which is why you are unable to see it. But I have fixed the Calendar in Dark Mode and verified that the Date filter is working as usual.

Recording.2026-03-20.142006.mp4

rohanrastogi311

Hi Namitha,

Well done with this implementation.

Anusha-Gali

Hi Namitha,

Thank you for fixing the dark mode issues and the clear button however i think the mobile responsiveness got disturbed as you can see it does collapse bit goes out of the layout and the x axis points combine to form a numerical number series. Also if you could increase the brightness of the warning message it would be great.

Issues

…nalytics

Namitha7070 · 2026-04-03T19:12:03Z

Hi Namitha,

Thank you for fixing the dark mode issues and the clear button however i think the mobile responsiveness got disturbed as you can see it does collapse bit goes out of the layout and the x axis points combine to form a numerical number series. Also if you could increase the brightness of the warning message it would be great.
**Issues**

sonarqubecloud · 2026-04-03T19:13:23Z

Quality Gate passed

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

Namitha7070 · 2026-04-03T19:14:31Z

Hi Anusha, I have fixed the mobile responsiveness of the page and fixed the x-axis and also the "No data for the selected filters." message is brighter, more visible.

Anusha-Gali

Hi Namitha,

Thank you so much for proactively fixing the issues. Everything appears to be as per requirement.

one-community · 2026-04-09T17:37:49Z

Thank you all, merging!

fix(JobAnalytics): prevent invalid date range render + react to dark …

2368038

…theme

sohamsharma08 approved these changes Sep 4, 2025

View reviewed changes

vivekchandrabs previously approved these changes Sep 4, 2025

View reviewed changes

ezreal2020 approved these changes Sep 7, 2025

View reviewed changes

munishpatel reviewed Sep 14, 2025

View reviewed changes

beblicarl self-requested a review October 9, 2025 20:12

beblicarl previously approved these changes Oct 9, 2025

View reviewed changes

Namitha7070 changed the title ~~fix(JobAnalytics): prevent invalid date range render + react to dark~~ Namitha fixed(JobAnalytics): prevent invalid date range render + react to dark Jan 23, 2026

Namitha7070 changed the title ~~Namitha fixed(JobAnalytics): prevent invalid date range render + react to dark~~ Namitha - fix(JobAnalytics): prevent invalid date range render + react to dark Jan 23, 2026

Anusha-Gali suggested changes Mar 19, 2026

View reviewed changes

HemanthNidamanuru requested changes Mar 20, 2026

View reviewed changes

fix: dark mode calendar and Clear button layout in applicant analytics

0855417

Namitha7070 dismissed stale reviews from beblicarl and vivekchandrabs via 0855417 March 20, 2026 21:32

Namitha7070 added 2 commits March 20, 2026 14:39

fix: dark mode calendar and Clear button layout in applicant analytics

1b0e8d5

Merge remote-tracking branch 'origin/development' into fix/Jobanalyti…

41abbb7

…cs-date-warning-darkmode # Conflicts: # src/components/ApplicationAnalytics/index.jsx # src/components/ApplicationAnalytics/jobAnalytics.jsx # src/components/ApplicationAnalytics/jobAnalytics.module.css

rohanrastogi311 previously approved these changes Mar 21, 2026

View reviewed changes

Anusha-Gali suggested changes Mar 24, 2026

View reviewed changes

fix: improve mobile responsiveness and dark mode visibility for job a…

251762d

…nalytics

Namitha7070 dismissed rohanrastogi311’s stale review via 251762d April 3, 2026 18:59

Namitha7070 closed this Apr 3, 2026

Namitha7070 reopened this Apr 3, 2026

one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Apr 3, 2026

Anusha-Gali approved these changes Apr 8, 2026

View reviewed changes

one-community merged commit d0d9999 into development Apr 9, 2026
13 checks passed

one-community mentioned this pull request Apr 16, 2026

Frontend Release to Main [4.85] #5160

Merged

Uh oh!

Conversation

Namitha7070 commented Aug 30, 2025

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Uh oh!

netlify bot commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

SudheeshTD commented Sep 1, 2025

Uh oh!

sohamsharma08 left a comment

Choose a reason for hiding this comment

Uh oh!

vivekchandrabs left a comment

Choose a reason for hiding this comment

Uh oh!

ezreal2020 left a comment

Choose a reason for hiding this comment

Uh oh!

munishpatel left a comment

Choose a reason for hiding this comment

Uh oh!

beblicarl commented Oct 9, 2025

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

HemanthNidamanuru left a comment

Choose a reason for hiding this comment

Uh oh!

netlify bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

Namitha7070 commented Mar 21, 2026

Uh oh!

rohanrastogi311 left a comment

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

Namitha7070 commented Apr 3, 2026

Uh oh!

sonarqubecloud bot commented Apr 3, 2026

Quality Gate passed

Uh oh!

Namitha7070 commented Apr 3, 2026

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

one-community commented Apr 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

netlify bot commented Aug 30, 2025 •

edited

Loading

netlify bot commented Mar 20, 2026 •

edited

Loading