[UI/UX] Implement Server-Side Filtering and Pagination for Dashboard Events

[Osuochasam]

Context: As the translation registry grows, the dashboard will quickly become overwhelmed with events. Loading all live and historical events simultaneously will degrade performance. We need a robust server-side filtering mechanism (by Contract ID and Event Topic) and pagination using URL search parameters.

Tasks:

Implement pagination logic using React Server Components or SWR for continuous fetching.

Add filtering dropdowns (using shadcn/ui Select components) for network (Testnet/Mainnet), Contract ID, and specific topics.

[Killerjunior]

Hi maintainer, I have read and understood the issue requirements and checked the necessary documentation. I’m confident I can work on this task effectively and deliver a proper solution.

[Glam26]

Hi, I'd like to work on this.

I've reviewed the requirements and can implement a scalable event browsing experience with server-side filtering and pagination to prevent the dashboard from loading large event datasets at once.

My approach would include:

URL-driven pagination (page, limit, cursors where applicable) to support deep linking and navigation
Server-side filtering by network, Contract ID, and event topic
shadcn/ui Select components synchronized with URL search params
React Server Components (or SWR where continuous fetching is preferred) for efficient data loading
Preserving filter state across refreshes and shared links
Loading, empty, and error states for a smooth UX
Query optimization to avoid unnecessary requests and improve dashboard performance as the registry grows

I'll ensure the solution is extensible so additional filters can be added without major refactoring.

I can start immediately and provide a clean, well-tested PR.

[Agbasimere]

Hi there, I'll like to work on this issue.

[Tobi-8]

Filtering and pagination??
I'm sat...
allow me to work on this

[grantfox-oss]

🦊 GrantFox — @Killerjunior has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #78)
2. Your PR will be reviewed by the Open-audit-foundation maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Killerjunior's PR #240 was approved and merged by @Osuochasam.

🏆 @Killerjunior: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,151 total points). Track your full progress on GrantFox.

👏 Great work, @Killerjunior! Keep contributing to Open-audit-foundation.