Sai Sandeep taking over for Xinyi - fix: project and tool filters

[RitzzzZ2021]

Description

Related PRS (if any):

None.

Main changes explained:

• Update file ItemListView.module.css to refine styling.
• Update file SelectFrom.jsx and SelectItem.jsx to add multi-select and reset functionality to filters.
• Update file ToolItemListView.jsx to support multi-select functionality.

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to http://localhost:5173/bmdashboard/tools
6. verify both “Project” and “Tool” filters are searchable using type-ahead
7. verify multi-select option to view data for multiple projects simultaneously
8. verify filters can be reset using "x" button
9. verify this new feature works in dark mode

Screenshots or videos of changes:

Before:

After:

Video of changes

Screen.Recording.2026-06-15.013939.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	8b63d0e
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6938ba59e2e0220008532052
😎 Deploy Preview	https://deploy-preview-4537--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
12 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 Xinyi,

I have tried to review your PR locally and though the functionality does work as intended, the dropdown text nor the "x" button are visible in dark mode

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[HemanthNidamanuru]

Hi Sandeep,

Tested this PR locally. Everything is working fine, but in light mode the page is not covering the entire space, leaving dark background visible on the sides. Screenshot attached.

[saisandeepkoritala]

Hi Sandeep,

Tested this PR locally. Everything is working fine, but in light mode the page is not covering the entire space, leaving dark background visible on the sides. Screenshot attached.

Thanks for testing out and letting me know the changes that needed to be addressed hemanth, i made changes as requested. Please re test once you have a chance do it

[HemanthNidamanuru]

Hi Sandeep,

Retested this PR locally. The area covered has improved, but the issue is still there: in light mode the page is not covering the entire space, leaving dark background visible on the sides. Screenshot attached.

[saisandeepkoritala]

Hi Sandeep,

Retested this PR locally. The area covered has improved, but the issue is still there: in light mode the page is not covering the entire space, leaving dark background visible on the sides. Screenshot attached.

Thanks for testing hemanth and letting me know the changes that needed to be addressed, i made changes as requested. Please re test once you have a chance do it. Thank you

[kzou55]

Hi Sai Sandeep,

I ran the current branch locally.

I can verify the following works:

• Both the "Project" and "Tool" filters are searchable using type-ahead
• The multi-select option allows users to view data for multiple projects simultaneously
• The "x" button clears the filters
• Functionality works in Dark Mode

Testing in Light Mode

Recording.2026-06-19.181747.mp4

Testing in Dark Mode

Recording.2026-06-19.181918.mp4

Issues:

• Dark Mode layout is still a bit inconsistent compared to Light Mode.
  See in the image below how there's a different color above the tool's title. Meanwhile in Light Mode, it's a clear white.

• Might be out of scope for this PR, but is there a reason why the Project filter is correctly associated with the Project column. But for "Tool", the respective column is referred to as "Name".

[HemanthNidamanuru]

Hi Sandeep,

Retested this PR locally. The area covered has improved, but found the following remaining issues:

• In light mode, when there are fewer rows in the table, the remaining empty space below shows black instead of white
• In dark mode, the remaining empty space below the table also shows black instead of the page's dark background color
• In dark mode, there is also a different background color showing above the Tools title

[DeepighaJ]

• Tested the PR locally.
• The filters are working as expected with muti-select options.
• Filters can be reset using "x" button
• The feature works fine in dark mode.
• Update works fine as well

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[saisandeepkoritala]

Hi Sandeep,

Retested this PR locally. The area covered has improved, but found the following remaining issues:

• In light mode, when there are fewer rows in the table, the remaining empty space below shows black instead of white
• In dark mode, the remaining empty space below the table also shows black instead of the page's dark background color
• In dark mode, there is also a different background color showing above the Tools title

Hi Hemanth addressed all issues. Do re test once you have chance. Should be all good