Skip to content

feat(dashboard): full rewrite with react-query, new pages, and all API coverage#91

Merged
INONONO66 merged 8 commits into
mainfrom
feat/dashboard-rewrite
May 28, 2026
Merged

feat(dashboard): full rewrite with react-query, new pages, and all API coverage#91
INONONO66 merged 8 commits into
mainfrom
feat/dashboard-rewrite

Conversation

@INONONO66
Copy link
Copy Markdown
Owner

@INONONO66 INONONO66 commented May 28, 2026

Summary

Full dashboard rewrite from scratch on shadcn/ui + @tanstack/react-query.

What changed

Infrastructure

  • Replace custom usePolling with @tanstack/react-query (caching, dedup, window-focus refetch, mutations)
  • Remove 34 unused shadcn/ui components and 13 unused npm dependencies
  • Add typed react-query hooks for every admin API endpoint
  • Extract useRoute hook with route param support (#/logs/:id)

New pages

  • OverviewPage (#/) — system health from /ready, today usage summary, quota alerts (>75%), circuit breaker status, all-time stats
  • SystemPage (#/system) — tabbed view of runtime config, providers, pricing cache, circuit breakers with reset

Rewritten pages

  • QuotasPage — react-query, model dimension support for quota snapshots
  • UsagePage — decomposed from 386-line god component into 6 sub-components, shadcn chart wrapper instead of raw recharts, new Account Usage tab consuming /admin/usage/accounts/summary
  • LogsPage — simplified filters (no more draft/applied dual state), log detail sub-route #/logs/:id with structured view + cost-audit trail from /admin/logs/:id/cost-audit
  • ApiKeysPage — react-query mutations for CRUD, dynamic provider list from /admin/providers and account list from /admin/quotas (removed hardcoded arrays)
  • OAuthPage — migrated to react-query, kept SSE hook

Layout

  • New sidebar nav: Overview → Quotas → Usage → Logs → API Keys → OAuth → System
  • Dark mode toggle (localStorage-persisted, no external dependency)

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, /ready

Stats

  • -5,267 lines removed / +2,107 lines added (net -3,160)
  • 54 files changed across 8 atomic commits

Verification

  • bun run typecheck
  • bun run build:dashboard

Summary by cubic

Rewrote the dashboard on @tanstack/react-query with new Overview/System pages and full admin API coverage. Pages load faster with cached/deduped data and a simpler UI.

  • New Features

    • Added Overview (#/) and System (#/system) pages: health/ready, usage summary, quota alerts, breakers, config, providers, pricing cache.
    • Rebuilt Quotas, Usage, Logs, API Keys, OAuth on react-query; added log detail route #/logs/:id with cost-audit, and an Account Usage tab.
    • New sidebar nav and persisted dark mode.
    • Typed hooks for all admin endpoints.
  • Refactors

    • Replaced custom polling with @tanstack/react-query (caching, dedupe, focus refetch, mutations) and a global auth-expiry handler.
    • Added useRoute (hash + params) and shared QueryClient defaults.
    • Removed 34 unused shadcn/ui components 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

    • Added dark mode toggle in dashboard navigation
    • Introduced Overview page displaying system health, quota alerts, and circuit breaker status
    • Added System page for configuration, provider, pricing, and circuit breaker management
  • Improvements

    • Modernized dashboard data fetching with improved performance and responsiveness
    • Reorganized quota and usage pages for better information presentation
    • Enhanced API keys and OAuth account management interfaces
    • Streamlined navigation with active route highlighting

Review Change Stack

INONONO66 added 8 commits May 28, 2026 21:40
- 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
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 28, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e7e7ccd6-bcde-4a64-9c35-6dc326c8f661

📥 Commits

Reviewing files that changed from the base of the PR and between 3b8fef1 and a75153c.

⛔ Files ignored due to path filters (1)
  • bun.lock is excluded by !**/*.lock
📒 Files selected for processing (53)
  • package.json
  • src/dashboard/api.ts
  • src/dashboard/components/AccountQuotaCard.tsx
  • src/dashboard/components/Layout.tsx
  • src/dashboard/components/LogTable.tsx
  • src/dashboard/components/QuotaCard.tsx
  • src/dashboard/components/UsageSummary.tsx
  • src/dashboard/components/ui/accordion.tsx
  • src/dashboard/components/ui/aspect-ratio.tsx
  • src/dashboard/components/ui/avatar.tsx
  • src/dashboard/components/ui/breadcrumb.tsx
  • src/dashboard/components/ui/button-group.tsx
  • src/dashboard/components/ui/calendar.tsx
  • src/dashboard/components/ui/carousel.tsx
  • src/dashboard/components/ui/collapsible.tsx
  • src/dashboard/components/ui/combobox.tsx
  • src/dashboard/components/ui/command.tsx
  • src/dashboard/components/ui/context-menu.tsx
  • src/dashboard/components/ui/direction.tsx
  • src/dashboard/components/ui/drawer.tsx
  • src/dashboard/components/ui/empty.tsx
  • src/dashboard/components/ui/field.tsx
  • src/dashboard/components/ui/form.tsx
  • src/dashboard/components/ui/hover-card.tsx
  • src/dashboard/components/ui/input-group.tsx
  • src/dashboard/components/ui/input-otp.tsx
  • src/dashboard/components/ui/item.tsx
  • src/dashboard/components/ui/kbd.tsx
  • src/dashboard/components/ui/menubar.tsx
  • src/dashboard/components/ui/native-select.tsx
  • src/dashboard/components/ui/navigation-menu.tsx
  • src/dashboard/components/ui/pagination.tsx
  • src/dashboard/components/ui/popover.tsx
  • src/dashboard/components/ui/radio-group.tsx
  • src/dashboard/components/ui/resizable.tsx
  • src/dashboard/components/ui/slider.tsx
  • src/dashboard/components/ui/sonner.tsx
  • src/dashboard/components/ui/switch.tsx
  • src/dashboard/components/ui/textarea.tsx
  • src/dashboard/components/ui/toggle-group.tsx
  • src/dashboard/components/ui/toggle.tsx
  • src/dashboard/hooks/queries.ts
  • src/dashboard/hooks/usePolling.ts
  • src/dashboard/hooks/useRoute.ts
  • src/dashboard/lib/query-client.ts
  • src/dashboard/main.tsx
  • src/dashboard/pages/ApiKeysPage.tsx
  • src/dashboard/pages/LogsPage.tsx
  • src/dashboard/pages/OAuthPage.tsx
  • src/dashboard/pages/OverviewPage.tsx
  • src/dashboard/pages/QuotasPage.tsx
  • src/dashboard/pages/SystemPage.tsx
  • src/dashboard/pages/UsagePage.tsx

📝 Walkthrough

Walkthrough

This 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.

Changes

React Query Migration for Dashboard Data Fetching

Layer / File(s) Summary
Dependencies and React Query Configuration
package.json, src/dashboard/lib/query-client.ts
Add @tanstack/react-query and remove polling/form libraries (cmdk, date-fns, sonner, vaul, zod); configure QueryClient with auth error handling, selective retry logic, and staleTime/refetch settings.
API Contract Extension for New Endpoints
src/dashboard/api.ts
Extend API client with types and functions for providers, pricing, config, cost audits, quota probes, health/ready checks, account usage, quota refresh, and circuit breaker resets.
React Query Hooks for Data Fetching
src/dashboard/hooks/queries.ts
Implement 25+ query and mutation hooks covering quotas, usage, stats, logs, cost audits, breakers, API keys, OAuth, and system endpoints with proper query keys, polling, and conditional enabling.
Hash-Based Routing Infrastructure
src/dashboard/hooks/useRoute.ts
Add RouteInfo type, parseHash parser, useRoute hook listening to hashchange events, and navigate function for client-side navigation.
Layout Navigation and Dark Mode Toggle
src/dashboard/components/Layout.tsx
Expand icon imports, add NAV list reordering, isActive helper for menu state, useDarkMode hook for localStorage persistence, and theme toggle button in sidebar footer.
App Root Provider Composition
src/dashboard/main.tsx
Update Router to use useRoute for page selection; wrap QueryClientProvider outside AuthProvider and Router to establish provider hierarchy.
Overview and Quotas Pages Migration
src/dashboard/pages/OverviewPage.tsx, src/dashboard/pages/QuotasPage.tsx
Create OverviewPage with health, today summary, quota alerts, circuit breaker, and all-time cards; refactor QuotasPage to inline quota logic using useQuotas and useQuotaRefresh hooks.
Logs and System Pages Migration
src/dashboard/pages/LogsPage.tsx, src/dashboard/pages/SystemPage.tsx
Refactor LogsPage with list/detail subcomponents and useLogs/useLogDetail/useCostAudit; create SystemPage with tabbed config, providers, pricing, probes, and breaker sections.
API Keys and OAuth Pages Migration
src/dashboard/pages/ApiKeysPage.tsx, src/dashboard/pages/OAuthPage.tsx
Refactor ApiKeysPage to inline UI components (KeyUsageRow, RestrictionEditor) using useApiKeys mutations; update OAuthPage to use useOAuthAccounts with QueryClient cache invalidation.
Usage Page Migration with Charts and Tabs
src/dashboard/pages/UsagePage.tsx
Refactor to use query hooks with hook-driven subcomponents (TodaySummary, TrendChart, RangeSummary, DailyOverview, ModelBreakdown, ProviderBreakdown, AccountUsage, AllTimeStats) and tabbed layout.
Unused UI Component Removal
src/dashboard/components/ui/kbd.tsx, src/dashboard/components/ui/textarea.tsx
Remove unused UI components (and separate file deletions of LogTable, QuotaCard, UsageSummary, AccountQuotaCard, and 25+ ui/* component modules).

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • INONONO66/agent-cli-proxy#88: Directly related as a follow-up that removes many of the shadcn/ui dashboard components added in that PR and replaces polling/manual data management with React Query across all pages.

Poem

🐰 From polling loops to Query streams so clean,
Dark mode shines, the finest UI's seen!
Hooks dance freely, routing by the hash,
Pages refactored with a graceful splash! ✨

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/dashboard-rewrite

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.


Comment @coderabbitai help to get the list of available commands and usage tips.

@INONONO66 INONONO66 merged commit f194d63 into main May 28, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant