Taariq: Fix filterColor persistence issue on change and refresh for Individual as well as bulk Selected filterColors Frontend.

[TaariqMansurie]

Description

This PR introduces Filter by Special Colors (purple, green, navy) functionality for users in the selected team codes. Users can now be filtered individually by color (single or combination of purple, green, navy), and a new Select All (Visible Users) functionality has been added for bulk assigning a single filter color to all users at once.

Unlike the individual filter where multiple colors can be selected simultaneously, the bulk filter allows assigning only one color at a time for all visible users. This simplifies the workflow for admins by eliminating the need to assign colors individually.

A toast notification has also been added when a bulk filter color is applied.

Related PRS (if any):

This frontend PR is related to the backend PR 1667.
To test this frontend PR you need to checkout the backend PR too.
…

Main changes explained:

1. src/actions/weeklySummaries.js

• Added updateBulkFilterColors action for optimistic updates of filter colors across all users in selected team codes.

2. src/actions/weeklySummariesReport.js

• Implemented timestamp initialization using Date.now() to ensure summaries refresh when fetched.

3. src/components/WeeklySummariesReport/FormattedReport.jsx

• Removed unnecessary code.
• Added stronger safety checks for rendering.

4. src/components/WeeklySummariesReport/WeeklySummariesReport.jsx (Main / Essential File)

• Imported correct reducer and toast from react-toastify.
• Added slideToggle and initialized useDispatch from react-redux.
• Implemented individual filterColor selection (handleSpecialColorDotClick).
• Implemented bulk filterColor selection (handleBulkDotClick).
• Added useEffects to eliminate update delays and ensure smoother UI responsiveness.
• Improved styling and introduced toggling behavior for bulk filter colors.
• Added toast notifications on bulk selection.
• Commented out console logs for debugging clarity.

5. src/components/WeeklySummariesReport/WeeklySummariesReport.module.css

• Added styling for filter container and bulkDot.
• Ensures filter color state stays active until refresh, then resets.

6. src/constants/weeklySummariesReport.js

• Added constant update_bulk_filter_color.
• src/reducers/weeklySummariesReportReducer.js

7. src/reducers/weeklySummariesReportReducer.js

• Integrated bulk filterColor case in the reducer switch to support state updates.
  …

How to test:

1. check into current branch.
2. do npm install and npm run start:local to run this PR locally.
3. Clear site data/cache.
4. log as admin user.
5. go to dashboard → Reports → Weekly Summaries Reports.
6. Verify:

• Selecting individual colors (purple, green, navy) works as expected (can choose single or multiple).
• Using Select All (Visible Users) assigns the chosen filter color to all visible users.
• Toast notification appears on bulk selection.
• Bulk selection stays active until page refresh.

7. verify this new feature works in light mode.

Screenshots or videos of changes:

filterColor.mp4

Note:

Please watch the video at 1.5x or 2.0x. Also the video was shot before, Toast message and also improving the UI was done later. So there will be slight differences while running it on your local system.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	c367f5b
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/697138cebb29550008687ed9
😎 Deploy Preview	https://deploy-preview-3916--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.

[sourabhbagde]

Blocking to Test frontend changes due to backend error
Pulled PR OneCommunityGlobal/HGNRest#1667 for backend

Error: ReferenceError: dashboardMetrics is not defined. at runtime.
Root Cause: dashboardMetrics is referenced in src/startup/routes.js (passed into bmDashboardPrototypeRouter) even though the both src/models/bmdashboard/dashboardMetrics.js and src/routes/bmdashboard/bmDashboardPrototypeRouter.js were removed in this PR and are not defined.

Attaching screenshots - please refer and let me know if I am missing anything here.

[akshith312]

Followed the video and verified all the cases mentioned.
Filters work correctly for single and multiple selections.
Unable to see toast notification on bulk selection.

Color updated and persists on the DB as well.

[TaariqMansurie]

@akshith312 the addition you mentioned should appear at the top right during bulk changes. I included it as a small enhancement, although it wasn’t originally part of the requirements. Thanks for reviewing it.

[RitzzzZ2021]

For some reason, I’m not able to see the Select All (Visible Users) option.

The backend update doesn’t seem to be working, although it works correctly on the frontend. The color filter is also functioning well.

[TaariqMansurie]

For some reason, I’m not able to see the Select All (Visible Users) option.

The backend update doesn’t seem to be working, although it works correctly on the frontend. The color filter is also functioning well.

You need to select multiple team codes for the “Select All (Visible Users)” option to appear. Also, did you check the backend PR as well along with the frontend PR, specifically PR 1667?

[sanjeev29]

Tested the PR changes. Followed the video to test all cases on the UI. The changes work as expected.

[ShradhaMBhadrannavar]

Verified all scenarios - color selection, bulk assign, and toast notification work as expected. Bulk selection stays active until refresh. Everything works fine.

[apoorvajainrp21]

Followed the instruction: The page throws an error after a few seconds:

[tomkkl]

I have tested the PR. Works on my end. I have tried various things like select all filter, filter by bio status, color and team.

[Vinay944924]

Hi Taariq,
I ran the PR locally but it's showing error and I used owner account to login so can you please check once.

[TaariqMansurie]

Hi Taariq, I ran the PR locally but it's showing error and I used owner account to login so can you please check once.

Hey Vinay, Thanks for testing this PR on your local system. However, I tested this pr from both my owner's and admin's accounts, and it works perfectly fine. For your reference, I'm Also Including a few screenshots that I captured while testing it out.
NOTE: Your .env file for the frontend should point to the local backend file, i.e, if you have
REACT_APP_APIENDPOINT="https://api-staging.highestgood.com/api", kindly comment it out and make it as, REACT_APP_APIENDPOINT=http://localhost:4500/api, and restart your application manually.

SCREENSHOTS:
MY account:

JUST AFTER SELECTING THE PURPLE COLOR FOR THIS USER,

My console log after selecting a new color:
`WeeklySummariesReport.jsx:1648 handleSpecialColorDotClick called with:
{userId: '644db73845fccb5b38b13c14', color: 'purple'}
color: "purple"
userId: "644db73845fccb5b38b13c14"
[[Prototype]]: Object

WeeklySummariesReport.jsx:1727 ✅ Successfully updated user on backend:
{_id: '644db73845fccb5b38b13c14', filterColor: Array(3)}
filterColor: (3) ['green', 'navy', 'purple']
_id: "644db73845fccb5b38b13c14"
[[Prototype]]: Object
`

After selecting Bulk Filter Color for one/many team code(s):

After refreshing the page:

[Vinay944924]

Hi Taariq,
I tested the PR locally and i could add the filters for one/many user and everything seems to work perfectly fine. I have provided the screenshots below.

[ManeeshBuddha21]

Tested locally , individual and bulk filter colors work as expected, toast shows correctly, and color state persists after refresh. Looks good.

[TaariqMansurie]

Tested locally , individual and bulk filter colors work as expected, toast shows correctly, and color state persists after refresh. Looks good.

Hi @ManeeshBuddha21, Thanks for thoroughly testing it. Can you please approve the PR?

[TaariqMansurie]

Hi Taariq, I tested the PR locally and i could add the filters for one/many user and everything seems to work perfectly fine. I have provided the screenshots below.

Hi @Vinay944924, Thanks for thoroughly testing it. Can you please approve the PR?

[TaariqMansurie]

I have tested the PR. Works on my end. I have tried various things like select all filter, filter by bio status, color and team.

Hi @tomkkl, Thanks for thoroughly testing it. Can you please approve the PR?

[Sriamshreddy000]

Hi Taariq,

I tested this PR along with related backend PR#1667, logged in as an admin user. In reports -> Weekly summaries report, both of the individual and bulk color filters works as expected.

Verified from the browser console that the filterColor values are updated correctly in API responses, and the UI reflects the changes consistently. Toast notifications also appear on bulk selection, and everything works smoothly in light mode.

I'm attaching screenshots for reference

[Anusha-Gali]

Hi Taariq,

I have reviewed your PR locally, and it works as per the requirement in all test scenarios.

Individual filters

Bulk feature stayed till refresh

Team after bulk feature

After Refresh

[sonarqubecloud]

Quality Gate passed

Issues
49 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[one-community]

Thank you all, merging!

[Vikas-8055]

Tested this PR locally with backend PR #1667. Logged in as admin and navigated to Reports → Weekly Summaries Reports.
Verified: Individual color selection (single/multiple), bulk "Select All" functionality, toast notifications on bulk selection, and filter persistence until refresh. All features work as expected

[Shravan-neelamsetty]

Hi @TaariqMansurie, I have tested this PR locally by checking out the taariq_fixing_angads_filter_branch_frontend branch along with the related backend PR #1667 and navigating to Reports → Weekly Summaries Reports. The filter color functionality works as expected - I can see the individual color dots (purple, green, navy) displayed next to each user in the list, and clicking them successfully updates the filter colors for individual users. I selected multiple team codes to verify the "Select All (Visible Users)" bulk filter feature, which correctly applies the selected color to all visible users and displays the toast notification as intended.

[sonarqubecloud]

Quality Gate passed

Issues
73 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud