Abhishek_Fix: Add Search and Clear buttons to Resource Management page

[Abhi-R0211]

Related PRs: Supersedes #5068

Reason for new branch:

The older branch had drifted significantly from development - it was missing ~6 months of merged features including column sorting, XLSX/CSV export, pagination, lucide-react icons, toast notifications, and PropTypes validation. Rebasing it would have caused major regressions. Instead, this PR implements the same feature (Search + Clear button) cleanly on top of the current development branch, preserving all existing functionality.

What this PR does:

Implements the missing feature from issue (Phase 3 - Resource Management page Search Results Do Not Revert After Clearing Input; Missing Clear Filter Control) at /communityportal/activity/:activityId/resources:

• Adds a Clear button to the SearchBar that resets the search term and returns pagination to page 1
• Adds a Search button alongside the existing live-filter input
• Adds CSS for both buttons with full light and dark mode support
• All existing features preserved — sort toggle, column sorting, XLSX/CSV export, pagination, Add Log modal, form validation, dark mode

How to test:

• Checkout branch fix/resource-management-clear-button
• Start the backend using the development branch
• Run npm install then npm run start:local
• Log in as admin
• Navigate to /communityportal/activity/:activityId/resources
• Verify the following:
  • Typing in the search box filters the list live

• Clearing the input manually restores the full list

• Clicking Clear resets the list and pagination to page 1

• Searching for a term with no matches shows an empty table

• Submitting the Add New Log form empty shows inline validation errors on all fields

• Entering invalid format in Time/Duration and numbers in Facilities shows field-level errors

Note:

The Add Log feature currently stores data in mock state only and does not persist to the backend — no backend endpoint exists in HGNRest for this feature. This is a pre-existing project-wide limitation and is out of scope for this PR. A separate backend PR would be needed to implement persistence.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[Abhi-R0211]

Hi @one-community, this is a quick follow-up to #5360 fixing the SonarQube contrast issue that surfaced after merge. Would appreciate a review when you have a moment. Thanks!

[kzou55]

Hi Abhishek,

I ran and tested the PR locally.

Verified

• Typing in the search box filters the list live
• Clearing the search input restores the full list
• Clicking clear resets the list and sets the pagination to page 1
• Searching for an item that doesn't exist results in an empty table
• The Add New Log form works and validates the inputs
• Dark Mode works

Tests

• Testing in Light Mode

  Recording.2026-07-03.162638.mp4

• Testing in Dark Mode

  Recording.2026-07-03.162803.mp4

[HemanthNidamanuru]

Hi,

I tested this PR locally.

Search filtering, Clear button, pagination reset, no-results state, and Add New Log form validations are all working fine.

Everything looks good.

[DeepighaJ]

Tested the PR and the search and clear functionalities working as expected, and other functionalities like export csv, add new log were working as expected too