Alisha - feature : implementation of BMDashboard grouped bar-graph showing Issues created vs Resolved of projects frontend by alishawalunj · Pull Request #4272 · OneCommunityGlobal/HighestGoodNetworkApp

alishawalunj · 2025-10-25T01:28:48Z

Description

Related PRS (if any):

This frontend PR is related to the #1853 backend PR.

Main changes explained

Designed and implemented the IssueGraph page to display filters, tiles, and the chart.
Configured Redux reducer and actions for the IssueGraph.

How to test

Check out the current branch.
Run npm install and start the application locally.
Clear site data/cache in your browser.
Log in as an admin user.
Navigate to: http://localhost:5173/bmdashboard/issueGraph.
Verify that by default, the graph and tiles display data for the last 8 weeks.
Change the filter values and verify that the tiles and graph update accordingly.
Start Date: Ensure it can be selected only within a 12-week range from today; other dates should be disabled.
End Date: Ensure it cannot be later than today; future dates should be disabled.
Verify the style and display of the page match the requirements mentioned in the description
Verify that this feature works correctly in dark mode.

Screenshots or videos of changes:

REC-20251024212017.mp4

netlify · 2025-10-25T01:28:53Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`417a14d`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69f590ef30e2fe0008c4e18e
😎 Deploy Preview	https://deploy-preview-4272--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

sonarqubecloud · 2025-10-25T01:29:41Z

Quality Gate passed

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

akshith312

Tested PR locally.
Logged in as Admin user.
Navigated to bmdashboard. Chart renders as expected, filters work as expected and doesn't allow to choose a date more than 12 weeks from current day.
Works in dark mode as well.

No Option to select prior to 12 weeks from today.

Date Filtering:

apoorvajainrp21 · 2025-10-26T06:10:38Z

Tested the PR as explained. Iencountered the error as shown below, please suggest any changes in testing if required:

Aswin20010

IssueGraph page functions as expected — filters, tiles, and chart update dynamically. Date range validation works correctly, and the layout aligns with design requirements in both light and dark modes. Implementation is stable and meets feature specifications.

beblicarl · 2025-11-21T11:10:05Z

This functionality works as intended and the code is great

sonarqubecloud · 2025-12-27T05:15:34Z

Quality Gate passed

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

sayali-2308

Checked out branch: alisha/feature/issues-bar-graph
Backend branch: alisha/feature/issue-analytics-grouped-bar-graph
Tested on: Windows, Chrome browser
Both servers running locally (Backend: 4500, Frontend: 5173)

⚠️ Issue Found:
Bug: End Date doesn't auto-populate when selecting weeks from dropdown
Steps to reproduce:

Select "Last 8 Weeks" or "Last 12 Weeks" from Weeks dropdown
Click "Go" button
Expected: End Date auto-populates to today's date (January 30, 2026)
Actual: End Date remains empty (dd-mm-yyyy placeholder)
Workaround: Manually selecting a Start Date causes End Date to update
Note: Start Date correctly auto-populates based on weeks selected. Only End Date has this issue.

Functionality Tested:

Navigated to /bmdashboard/issueGraph - page loads correctly
Default display shows "Last 8 Weeks" filter
All 4 KPI tiles display correctly (Total Issues, New Issues This Week, Resolved Issues, Avg. Resolution Time)
Chart title "Issues Created vs. Resolved" displays correctly
Start Date validation works - cannot select dates more than 12 weeks ago (tested October 2025, correctly disabled)
End Date validation works - cannot select future dates (tested dates after January 30, 2026, correctly disabled)
Weeks dropdown works with options: Last 4 Weeks, Last 8 Weeks, Last 12 Weeks
Filter changes update the page when "Go" button is clicked
Dark mode styling works correctly - proper contrast, readable text, tiles styled appropriately
Backend APIs tested in Postman:
- GET /api/issues/summary - returns correct JSON structure
- GET /api/issues/trends - returns correct JSON structure with metadata
No console errors observed (normal browser warnings only)

The End Date auto-population logic should be reviewed to ensure it updates when the "Weeks" dropdown is changed and "Go" is clicked, similar to how Start Date updates.

alishawalunj · 2026-02-01T00:14:23Z

4. dd-mm-yyyy

* Checked out branch: `alisha/feature/issues-bar-graph` * Backend branch: `alisha/feature/issue-analytics-grouped-bar-graph` * Tested on: Windows, Chrome browser * Both servers running locally (Backend: 4500, Frontend: 5173)
⚠️ Issue Found: Bug: End Date doesn't auto-populate when selecting weeks from dropdown Steps to reproduce:

Select "Last 8 Weeks" or "Last 12 Weeks" from Weeks dropdown

Click "Go" button

Expected: End Date auto-populates to today's date (January 30, 2026)

Actual: End Date remains empty (dd-mm-yyyy placeholder)

Workaround: Manually selecting a Start Date causes End Date to update
Note: Start Date correctly auto-populates based on weeks selected. Only End Date has this issue.

Functionality Tested:

Navigated to /bmdashboard/issueGraph - page loads correctly

Default display shows "Last 8 Weeks" filter

All 4 KPI tiles display correctly (Total Issues, New Issues This Week, Resolved Issues, Avg. Resolution Time)

Chart title "Issues Created vs. Resolved" displays correctly

Start Date validation works - cannot select dates more than 12 weeks ago (tested October 2025, correctly disabled)

End Date validation works - cannot select future dates (tested dates after January 30, 2026, correctly disabled)

Weeks dropdown works with options: Last 4 Weeks, Last 8 Weeks, Last 12 Weeks

Filter changes update the page when "Go" button is clicked

Dark mode styling works correctly - proper contrast, readable text, tiles styled appropriately

Backend APIs tested in Postman:

GET /api/issues/summary - returns correct JSON structure

GET /api/issues/trends - returns correct JSON structure with metadata

No console errors observed (normal browser warnings only)

The End Date auto-population logic should be reviewed to ensure it updates when the "Weeks" dropdown is changed and "Go" is clicked, similar to how Start Date updates.

@sayali-2308
Please read the steps in the description and the requirements carefully.
Why is the “Go” button being clicked after selecting an option from the Weeks dropdown?
The “Go” button is meant to be used only when custom start and end dates are selected.
The Weeks dropdown works on its own and triggers the backend query immediately when an option is selected.
These are two separate and intentional ways to fetch data, not a bug.
The date placeholder behavior depends on the browser:

In Chrome, it shows dd/mm/yyyy
In Safari, today’s date is shown by default

This is standard browser behavior and cannot be controlled by the application.
The dropdown was added for quick timeline selection.
This is a misunderstanding of the requirements and incorrect use of the UI, not an issue with the implementation.

sonarqubecloud · 2026-02-01T06:02:45Z

Quality Gate passed

Issues
4 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 Alisha,

I have reviewed your PR locally and the chart does not load. I am assuming it is because there is no data for the past 4,8,12 weeks. However in backed when selecting dates such as the one's you mentioned, i do get the KPI values in postman but unfortunately i am unable to select those values in frontend since those dates are blocked in the calendar.

…d bar graph

…tions file

…nent

sonarqubecloud · 2026-05-02T05:52:25Z

Quality Gate passed

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

alishawalunj · 2026-05-02T05:59:15Z

Resolved the data issue by updating the dates and fixed labelList dark mode issue.

REC-20260502015554.mp4

alishawalunj added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Oct 25, 2025

alishawalunj mentioned this pull request Oct 25, 2025

Alisha - feature : implementation of BMDashboard grouped bar-graph showing Issues created vs Resolved of projects backend OneCommunityGlobal/HGNRest#1853

Open

akshith312 previously approved these changes Oct 25, 2025

View reviewed changes

Aswin20010 previously approved these changes Oct 27, 2025

View reviewed changes

beblicarl self-requested a review November 21, 2025 11:10

beblicarl previously approved these changes Nov 21, 2025

View reviewed changes

alishawalunj dismissed stale reviews from beblicarl, Aswin20010, and akshith312 via e3f8d98 December 27, 2025 05:14

alishawalunj force-pushed the alisha/feature/issues-bar-graph branch from e83b92f to e3f8d98 Compare December 27, 2025 05:14

sayali-2308 requested changes Jan 30, 2026

View reviewed changes

Anusha-Gali suggested changes Feb 3, 2026

View reviewed changes

alishawalunj added 6 commits May 2, 2026 01:16

Configured routing and implemented layout of page

f5ee627

Updated graph display with mock data to fix the design and implemente…

e6f392d

…d bar graph

Fix: date validation and configured routes, reducer, constants and ac…

684160a

…tions file

Integrated backend endpoints and removed mock data

e9ec691

feat(ui): add dark mode support for filters, tiles, and chart

ff0f25d

fix: resolve missing issueGraph.module.css import in IssueGraph compo…

443e795

…nent

alishawalunj force-pushed the alisha/feature/issues-bar-graph branch from 21f8488 to 443e795 Compare May 2, 2026 05:18

fix: updated css styling for dark mode for labelList

417a14d

alishawalunj requested a review from sayali-2308 May 2, 2026 05:59

alishawalunj requested a review from Anusha-Gali May 2, 2026 05:59

Uh oh!

Conversation

alishawalunj commented Oct 25, 2025

Description

Related PRS (if any):

Main changes explained

How to test

Screenshots or videos of changes:

Uh oh!

netlify Bot commented Oct 25, 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!

sonarqubecloud Bot commented Oct 25, 2025

Quality Gate passed

Uh oh!

akshith312 left a comment

Choose a reason for hiding this comment

Uh oh!

apoorvajainrp21 commented Oct 26, 2025

Uh oh!

Aswin20010 left a comment

Choose a reason for hiding this comment

Uh oh!

beblicarl commented Nov 21, 2025

Uh oh!

sonarqubecloud Bot commented Dec 27, 2025

Quality Gate passed

Uh oh!

sayali-2308 left a comment

Choose a reason for hiding this comment

Uh oh!

alishawalunj commented Feb 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud Bot commented Feb 1, 2026

Quality Gate passed

Uh oh!

Anusha-Gali left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented May 2, 2026

Quality Gate passed

Uh oh!

alishawalunj commented May 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

netlify Bot commented Oct 25, 2025 •

edited

Loading

alishawalunj commented Feb 1, 2026 •

edited

Loading

Anusha-Gali left a comment •

edited

Loading