Senator Roster Page UI

[calebyhan]

Motivation

The senator roster is a key transparency feature — students need to see who represents them. Building this table validates the Shadcn Table setup and sets the pattern for all future admin data tables (which will use TanStack Table).

Deliverables

• Build /senators/roster/page.tsx with a searchable, sortable table
• Table columns: headshot (small thumbnail), full name, district, committee assignments (comma-separated), email
• Add a search input above the table that filters by name (client-side for now)
• Make columns sortable by clicking headers (name, district)
• Clicking a senator row or name navigates to /senators/[id] (stub page is fine for now)
• Wire to getSenators() from the API client
• Responsive: table scrolls horizontally on mobile, or collapses to card view

Important Notes

• Depends on Shadcn Setup + Global Layout Shell + Navbar #7 (Shadcn + layout) and TypeScript Types + API Client #9 (API client + types)
• Use Shadcn Table component for the base table
• Do NOT install TanStack Table yet — that's for the admin dashboard tables in a future sprint; keep this simple with basic client-side sort/filter
• Headshot images should have a fallback (initials or generic avatar) when headshot_url is null
• The committees field on SenatorDTO is a nested list of CommitteeAssignmentDTO — display as "Finance (Member), Rules (Vice Chair)"
• Use mock data if backend is not ready