[Feature] Implement Global Search, Table Filtering, and Advanced Data Discovery

[KarenZita01]

Description

The frontend has no search functionality, no filtering, and no sorting for data tables. As the number of meters, streams, and billing records grows, users need efficient ways to find specific data. A dashboard without search/filter becomes unusable past a few dozen records.

Data discovery gaps:

• No global search bar for meters, streams, addresses
• No table column filtering (by status, date range, amount)
• No multi-criteria advanced search
• No saved searches or filter presets
• No search analytics (what users search for most)
• No keyboard shortcuts for search (Cmd/Ctrl + K)
• No debounced search input (real-time results as user types)
• No recent searches or suggestions

Technical Context & Impact

• Affected Components/Files: src/components/search/ (missing), src/components/tables/ (missing)
• Impact: Poor UX for users with many meters or streams; data becomes hard to find

Step-by-Step Implementation Guide

1. Create global search component: src/components/search/GlobalSearch.tsx:
   • Cmd+K trigger for keyboard shortcut
   • Search across: meters (by ID, address, status), streams (by ID, amount), users (by address)
   • Results grouped by category with icons
   • Keyboard navigation through results (Arrow keys, Enter to select)
   • Debounced input (300ms delay)
   • Recent searches saved to localStorage
2. Implement table filtering: Create src/hooks/useTableFilters.ts with:
   • Text search within table columns
   • Filter chips for status, date range, numeric range
   • Multi-select filters (e.g., show Active + Paused streams only)
   • Filter persistence in URL query params (shareable filtered views)
3. Add advanced search page: app/search/page.tsx:
   • Multiple filter criteria combined with AND/OR logic
   • Saved search templates
   • Export filtered results to CSV
4. Create search provider: src/lib/search/SearchContext.tsx providing global search state
5. Add search analytics: Track search queries (anonymized) to identify most-needed filters
6. Implement server-side search: For large datasets, pass search params to API backend for filtered results
7. Add empty search results state: Friendly "no results found" with suggestions

Verification & Testing Steps

1. Open search with Cmd+K -> search box opens -> type "meter-123" -> results appear
2. Search by status: filter "Active" -> table shows only active meters
3. Navigate search results with keyboard: Arrow down, Arrow up, Enter to select
4. Test URL persistence: apply filters -> copy URL -> open in new tab -> filters preserved
5. Test empty state: search for "zzzz" -> "No results found" message with suggestion
6. Run npx tsc --noEmit and verify types