[adit24dhaya]

Description

Original task request

Original task in Google Docs

Complete task captured directly from the original document; the requested wording is unchanged.

Implement the medium-priority Jae/Divanshu: Enhanced Smart Search + UX Improvements for the Members Working on Site Today table task.

Add unique suggestions for First Name, Last Name, Role and Team, literal matching-text highlights, a Clear All Filters button, 350ms debounced filtering, and scoped light/dark styles.

Related PRS (if any)

Frontend only; no paired backend PR or API changes.

Main changes explained

• Add reusable column-search controls with keyboard, mouse and touch selection. Arrow keys navigate; Enter accepts; Escape/blur dismiss without changing the typed query.
• Filter all eight existing columns with combined, case-insensitive substring matching. Suggestions appear immediately; table filtering waits350ms, while selection/reset applies immediately.
• Memoize the table body and options, cancel stale debounce work and handle empty results, zero hours and refreshed records.
• Render highlights as text/React elements, never user-supplied HTML or regular expressions.
• Use scoped CSS Modules and pass the existing parent theme into the table.
• Add 23 regression tests covering search, reset races, accessibility semantics and literal input handling.

How to test

1. Check out feat/site-members-smart-search and use Node20 with the repository's existing dependencies.
2. Run npx vitest run src/components/BMDashboard/Projects/ProjectDetails/__tests__ (24 tests including the existing ProjectDetails test).
3. Start the frontend using the documented local setup. As an account with BM project access, open Projects → an existing Project Details page (/bmdashboard/projects/<projectId>).
4. In Members working on site today, type a partial name/role/team. Check suggestions and matching highlights after the debounce delay.
5. Combine filters; use arrows/Enter to select, and Escape/Tab to dismiss. Clear All Filters should immediately restore every row, even while typing is pending.
6. Check no-match results, narrow screens and both themes. The table scrolls horizontally; dropdowns stay outside its scroll container.

Validation already performed

• 24 tests passed; 200 browser assertions across 320/390/768/1280px and both themes, including computed highlight/dropdown contrast and debounce/reset checks.
• Additional actual mouse/touch selection passed. A 5,000-member synthetic dataset retained the table unchanged while a controlled debounce was pending and filtered to 417 rows on application; not a production performance benchmark.
• Production build, changed-file ESLint, new CSS Stylelint and whitespace checks passed.
• All validation used isolated synthetic data; no shared database writes.

Screenshots or videos of changes

Nine code/UI screenshots and a short compressed walkthrough are staged in the developer's Week5 media folder. They are not attached to this PR yet.

Note

The task listed /bmdashboard/tools/day, but that URL resolves to the tool-detail route in current development. Aditya confirmed using the existing Project Details member table instead; this PR does not change routing.

The existing table currently displays sample rows. Those are preserved; the new optional members prop supports supplied records, but this PR does not introduce live on-site worker-data integration or claim authenticated end-to-end API testing. No task/issue number was supplied, so no unrelated GitHub issue is auto-closed.

Documentation cleanup: screenshots are attached directly to this description and removed from the PR commit range. Application and test files are byte-for-byte unchanged. Previously tested head 102f0ef700 corresponds to cleaned head d503a9bf7b; all fresh GitHub test, preview and Sonar checks pass.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[rahulrubugunday]

I have reviewed your PR locally (102f0ef, backend on development) and it works as per requirement.

1. Typing "team" in Team shows the "Team A" suggestion, filters to 2 of 3 members and highlights the matching text.
2. Filters combine, and Arrow Down + Enter picks a suggestion (First Name "ca" then Cailin shows 1 of 3). Escape closes the suggestions.
3. A search with no match shows "No members match these filters."
4. Clear All Filters empties every search and restores all rows right away, even while typing is pending.
5. At 375px the table scrolls sideways without the page overflowing. Checked in both light and dark mode, and all 24 tests in the ProjectDetails test folder pass.

[AaditTrivedi]

Reviewed by Aadit Trivedi.

Checked out the PR (no conflicts with development) and ran its tests: 23/23 passing. Adds smart search to the on-site member table, with the new search logic covered by tests.

Approving.

[iAbhi001]

I tested frontend PR #5718 locally at commit 102f0ef paired with the backend on development in both light and dark mode. Navigating to the Project Details page (/bmdashboard/projects/) confirms the enhanced smart search and UX improvements on the "Members working on site today" table function cleanly. All 24 Vitest tests in ProjectDetails/tests pass without regressions. Tested column search filtering across First Name, Role, and Team, confirming that substring matches highlight properly and table filtering responds cleanly after the 350ms debounce. Keyboard navigation via ArrowDown and Enter selects suggestions, while Escape and blur dismiss the menu without clearing the typed input. Combining filters narrows rows accurately, and searching non-existent terms triggers the "No members match these filters" empty state. The Clear All Filters button immediately restores the full table. Tested responsive behavior at 375px width and verified horizontal scrolling without page overflow, with clear legibility and contrast across both themes. Approving these changes.

[sonarqubecloud]

Quality Gate passed

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

[adit24dhaya]

Moved all three pictures to direct attachments in the PR description and removed them from the PR commits. I verified that the attachments render and match the originals. Application and test files are byte-for-byte unchanged from the previously tested head. Fresh GitHub tests, preview and Sonar pass. The history cleanup reset the earlier approvals, so I requested renewed reviews.

[one-community]

Thank you all, merging!