feat(dashboard): full rewrite with react-query, new pages, and all API coverage#91
Conversation
- Remove 34 unused shadcn/ui components and 13 unused npm deps - Add @tanstack/react-query with QueryClient and global auth error handler - Add API functions for all unconsumed admin endpoints - Create react-query hooks for every endpoint - Rewrite Layout with new nav (Overview, System pages) and dark mode toggle - Extract useRoute hook with route param support - Add stub OverviewPage and SystemPage
… charts, and account usage tabs
…and cost-audit trail
…ynamic provider/account lists
…e with config, providers, pricing, breakers
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (53)
📝 WalkthroughWalkthroughThis PR completes a migration from polling-based data fetching to React Query, restructures the dashboard app composition to use QueryClientProvider, introduces hash-based routing via a dedicated useRoute hook, adds dark mode toggling, and extends the backend API client with new endpoint types and functions for providers, pricing, health checks, cost auditing, and account usage. Several dashboard pages are refactored to use query hooks with inlined UI logic replacing removed components. ChangesReact Query Migration for Dashboard Data Fetching
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Comment |
Summary
Full dashboard rewrite from scratch on shadcn/ui + @tanstack/react-query.
What changed
Infrastructure
usePollingwith@tanstack/react-query(caching, dedup, window-focus refetch, mutations)useRoutehook with route param support (#/logs/:id)New pages
#/) — system health from/ready, today usage summary, quota alerts (>75%), circuit breaker status, all-time stats#/system) — tabbed view of runtime config, providers, pricing cache, circuit breakers with resetRewritten pages
/admin/usage/accounts/summary#/logs/:idwith structured view + cost-audit trail from/admin/logs/:id/cost-audit/admin/providersand account list from/admin/quotas(removed hardcoded arrays)Layout
API coverage
All 12 previously unconsumed admin endpoints now have typed functions + react-query hooks:
/admin/providers,/admin/pricing,/admin/config,/admin/logs/:id/cost-audit,/admin/quotas/probes,/admin/usage/accounts,/admin/usage/accounts/range,/admin/usage/accounts/summary,/admin/breakers,/admin/breakers/:id/reset,/health,/readyStats
Verification
bun run typecheck✅bun run build:dashboard✅Summary by cubic
Rewrote the dashboard on
@tanstack/react-querywith new Overview/System pages and full admin API coverage. Pages load faster with cached/deduped data and a simpler UI.New Features
#/) and System (#/system) pages: health/ready, usage summary, quota alerts, breakers, config, providers, pricing cache.react-query; added log detail route#/logs/:idwith cost-audit, and an Account Usage tab.Refactors
@tanstack/react-query(caching, dedupe, focus refetch, mutations) and a global auth-expiry handler.useRoute(hash + params) and sharedQueryClientdefaults.shadcn/uicomponents and 13 deps; net -3,160 LOC.Written for commit a75153c. Summary will update on new commits.
Review in cubic
Summary by CodeRabbit
New Features
Improvements