feat(credits): admin Credits page with rollup + drilldown

Merged
SW
6mo ago
+738-1

Summary

New `/credits` route in the admin app showing per-account credit usage with the existing period selector (all/daily/weekly/monthly). Each rollup row expands inline to reveal the underlying `usage_events` for that account, paginated independently.

Wires the two admin API endpoints that landed in api#574:

  • `GET /api/admins/credits/rollup` → main table
  • `GET /api/admins/credits/events` → expanded subtable (lazy-loaded on row expand)

Design highlights

  • Period state lives on the page as `useState` (matches PrivyLoginsPage convention — no URL state)
  • Pagination is page-based with prev/next + "Showing N–M of T" range, default 100/page
  • Expandable rows is the first row-expand pattern in this codebase. Uses a leading column with a chevron toggle; clicking renders a <TableRow colSpan> with the events subtable underneath
  • Subtable is independently paginated (also 100/page)
  • Changing period resets the rollup to page 1; expanded rows refetch their own events automatically (React Query keys include period)
  • Nav button added on the home dashboard right after "View Sandboxes"

File map

  • `app/credits/page.tsx` — server wrapper with metadata
  • `components/Credits/CreditsPage.tsx` — owns period + page state
  • `components/Credits/CreditsTableContainer.tsx` — loading / error / data
  • `components/Credits/CreditsTable.tsx` — react-table + expandable rows
  • `components/Credits/CreditsRowEvents.tsx` — drilldown wrapper (calls useCreditsEvents)
  • `components/Credits/CreditsEventsTable.tsx` + `creditsEventsColumns.tsx` — events subtable
  • `components/Credits/creditsColumns.tsx` + `ExpandToggleCell.tsx` — rollup columns
  • `components/Credits/PaginationControls.tsx` — shared prev/next pager (used by both tables)
  • `hooks/useCreditsRollup.ts` + `hooks/useCreditsEvents.ts` — React Query hooks
  • `lib/recoup/fetchCreditsRollup.ts` + `fetchCreditsEvents.ts` — Bearer-token fetch wrappers
  • `types/credits.ts` — response shapes (hand-maintained, matches existing pattern)

Test plan

  • `pnpm exec tsc --noEmit` clean
  • `pnpm lint` clean (only pre-existing warnings in other files)
  • Test on Vercel preview deployment (sign in via Privy → /credits → flip periods → expand rows → paginate both tables)

🤖 Generated with Claude Code

Summary by cubic

Adds an admin Credits page at /credits for per-account credit usage with inline event drilldowns. Integrates rollup and events admin APIs and adds a "View Credits" button to the admin dashboard.

  • New Features

    • Rollup: fetch all (up to 500) with client-side sorting (default by total credits desc).
    • Drilldown: expandable rows with lazy, paginated events subtable.
    • Period selector (all/daily/weekly/monthly).
    • Email column respects the Hide sensitive info toggle.

  • Refactors

    • Promoted shared EmailCell to components/Admin/ and reused in Credits and Privy Logins.

Summary by CodeRabbit

Release Notes

  • New Features
    • Added Credits section to the admin dashboard for viewing credits usage by account
    • View detailed credit usage events for each account
    • Filter credits data by period (monthly, etc.)
    • Expandable rows to display individual credit usage events
    • Pagination controls for navigating through results

Review Change Stack