Add Pagination and Search to Pass and Member Tables

[Lakes41]

Difficulty: Hard

Type: Feature

Summary

Add pagination, search, and filtering to pass and member management tables so the dashboard remains usable as mock or live datasets grow.

Current Behaviour

The passes and members pages render all returned records in a single table. There is no built-in search, status filter, role filter, pass status filter, or pagination control. This is acceptable for small mock data but will not scale for larger communities.

Expected Behaviour

Operators should be able to search and filter passes and members, view bounded result sets, and navigate through pages without loading or rendering every record at once.

Suggested Implementation

Add query state for search, status, role, and page controls. Start with client-side filtering for mock mode if needed, but design the route contract so server-side filtering can be used later. Extend /api/passes and /api/members to accept query parameters such as search, status, role, limit, and cursor or page. Return a typed paginated response with items, total, and nextCursor or pagination metadata.

Files or Areas Likely Affected

• apps/dashboard/app/passes/page.tsx
• apps/dashboard/app/members/page.tsx
• apps/dashboard/app/api/passes/route.ts
• apps/dashboard/app/api/members/route.ts
• apps/dashboard/lib/repositories/types.ts
• apps/dashboard/lib/repositories/adapters/mock.ts
• apps/dashboard/components/
• apps/dashboard/test/

Acceptance Criteria

• Passes can be searched by name or description.
• Passes can be filtered by status.
• Members can be searched by name or wallet address.
• Members can be filtered by status and role.
• Tables render bounded pages instead of unbounded full lists.
• API routes support pagination parameters.
• Empty filtered results show a clear empty state.
• Tests cover search, filters, pagination, and empty result cases.

Additional Notes

Keep the first version simple. A cursor-based contract is preferred if live APIs may later return large datasets.

[temisan0x]

Hey team, I'd like to take on this issue. I've gone through the requirements and understand the changes needed. I can start working on it right away if that's okay.

[theFirstCodeManiac]

Please I would love to work on this issue. I have the required experience.

[Agbasimere]

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

[leocagli]

Hi — Leo Cagliero here (Starmaker program, currently building on Cosmos LATAM and Open Stellar).

I went through the dashboard and the cleanest path is to mirror the contract you already ship for activity. lib/activity/query.ts exposes parseActivityQuery(searchParams) + filterActivityEvents(events, query) returning { events, nextCursor, total } with clampLimit / DEFAULT_*_LIMIT / MAX_*_LIMIT, and app/api/activity/route.ts just calls them. I'd replicate that for passes and members so the route contract is consistent:

• New lib/passes/query.ts and lib/members/query.ts with parsePassQuery / filterPasses (search on name/description, status, limit, cursor) and parseMemberQuery / filterMembers (search on name/wallet, status, role, limit, cursor), each returning a typed { items, nextCursor, total }.
• Rewire app/api/passes/route.ts and app/api/members/route.ts GET to parse params and run the filter over getAll() (mock-side filtering first, contract ready for server-side later).
• Update passes/page.tsx / members/page.tsx to hold query state, render search + filter controls and Prev/Next, and show an empty state when items.length === 0.

// app/api/passes/route.ts (GET, mock branch)
const parsed = parsePassQuery(new URL(request.url).searchParams);
if (!parsed.ok) return apiError("Invalid pass query", 400);
const all = await getPassRepository().getAll();
return NextResponse.json(filterPasses(all, parsed.value)); // { items, nextCursor, total }

One note: the pages currently guard on Array.isArray(data), so I'd update that read to unwrap data.items in the same PR. Tests would cover search, each filter, pagination boundaries, and the empty case. Could you assign this to me? I can turn the PR around quickly.

[grantfox-oss]

🦊 GrantFox — @theFirstCodeManiac 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 #83)
2. Your PR will be reviewed by the Adamantine-guild maintainers

Good luck! Track your progress on GrantFox.