Diya 🔥 fix(toggle): Fixed Toggles on Weekly Summary Report

[DiyaWadhwani]

Description

Fixes two UI regressions on the Weekly Summaries Report page: the Bio announcement toggle was rendering as raw text "postedrequested" with no interactive control visible, and the Bio Status filter toggle had no visual distinction between its on/off states.

Related PRS (if any):

None

Main changes explained:

• Fix ToggleSwitch.jsx — restored the missing import TriStateToggleSwitch from './TriStateToggleSwitch' component import, which had been incorrectly replaced with a CSS file import, causing the bio toggle to render as invisible empty divs.
• Fix TriStateToggleSwitch.jsx — corrected the CSS module import from a broken side-effect import (import './TriStateToggleSwitch.module.css') to a proper named import (import styles from './TriStateToggleSwitch.module.css'), and updated all className references to use the scoped styles.xxx syntax so CSS module hashing is applied correctly.
• Fix click interactivity in TriStateToggleSwitch.jsx — added zIndex: 1 to the knob-area so click zones are not obscured by the absolutely-positioned knob element. Also added role="button", tabIndex={0}, and onKeyDown handlers to satisfy accessibility (jsx-a11y) requirements. Refactored the three identical clickable divs into a single .map().
• Fix TriStateToggleSwitch.test.jsx — updated all class-based selectors to use data-testid attributes and screen.getByTestId queries, since CSS module hashing breaks plain .className queries.
• Fix SlideToggle.module.scss — updated the default color variant's --checked-bg-color from #6c757d to #adb5bd so the Bio Status, Trophies, and Over Hours filter toggles show a visible lighter gray when active, distinguishable from their off state.

How to test:

1. Check out this branch
2. Run npm install and start the dev server
3. Clear site data/cache
4. Log in as an Administrator or Owner
5. Go to Reports → Weekly Summaries Report
6. Verify that the Bio announcement row shows a tri-state toggle (not the text "postedrequested")
7. Click each of the three toggle zones and verify the knob moves to posted (blue), default (gray), or requested (green)
8. Verify the change persists and the success toast appears
9. Verify the Filter by: Bio Status / Trophies / Over Hours toggles at the top show a lighter gray when toggled on vs. off

Screenshots or videos of changes:

Before:

After:

Note:

The root cause of the bio toggle regression was a bad import that replaced the TriStateToggleSwitch React component import with a CSS file import — likely introduced during a refactor or merge conflict resolution. No backend changes required.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	a15e2f1
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a2b6366acfeae0008e52d5f
😎 Deploy Preview	https://deploy-preview-5339--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]

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