Linh - Improve Materials Table Usability (Search, Sort, Pagination, Sticky Header)

[linh2020]

Description

This PR improves the usability of the Materials table in the BM Dashboard.
Previously, the materials list was long and only scrollable, making it difficult for admins to locate specific materials or review large datasets efficiently.

This update adds search, sorting, pagination, and layout improvements to make the table easier to navigate and use.

Implements # (WBS: Improve Materials Table Usability – Search, Sort, Pagination)

Related PRS (if any):

N/A – frontend-only changes.

Main changes explained:

• Added a global search input to filter materials by Project, Name, PID, and Measurement.
• Enabled column sorting for key fields:
  • Project
  • Name
  • Bought
  • Used
  • Available
  • Wasted
  • Hold
• Implemented pagination with configurable page sizes (25 / 50 / 100) and clear navigation controls.
• Made the table header sticky so column titles remain visible while scrolling.
• Improved the layout alignment of Time / Project / Material filters for better visual consistency.

How to test:

1. Check out this branch:
   linh_materials_table_usability_search_sort_pagination_v2
2. Run npm install (or yarn install) and start the frontend locally.
3. Clear browser cache / site data if needed.
4. Log in as an admin user.
5. Navigate to the Materials page:
   • From the UI via URL: /bmdashboard/materials
6. Verify:
   • Global search filters by Project, Name, PID, and Measurement.
   • Clicking sortable column headers updates the sort order correctly.
   • Pagination works with 25 / 50 / 100 rows per page.
   • Table header remains visible while scrolling.

Screenshots or videos of changes:

Note:

This PR focuses on frontend usability improvements only and does not introduce backend or data model changes.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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