feat(dashboard): add AI usage page (#978) by ayushmk7 · Pull Request #1083 · InsForge/InsForge

ayushmk7 · Apr 10, 2026

Summary

Closes #978. Surfaces existing AI usage data in the admin UI — no new backend endpoints or schema changes.

New page at /dashboard/ai/usage with:
- Date range selector (this week / this month / all time) mapped to the startDate / endDate params the existing API already accepts
- Summary cards for total requests, input tokens, output tokens, and images generated — sourced from useAIUsageSummary
- Paginated records table (time, model, provider, input tokens, output tokens, images) — sourced from useAIUsageRecords with limit / offset
- Loading and error states consistent with the rest of the AI feature
Route path="usage" added as a nested child under the existing /dashboard/ai + AILayout in AppRoutes.tsx
Entry point: "View usage" button added to AIPage header linking to the new route

What was not changed

No new backend routes, services, or schema — only existing hooks (useAIUsageSummary, useAIUsageRecords) and the aiService methods are used
No invented aggregates; only fields actually returned by the API are rendered

Verification

cd packages/dashboard && npm run typecheck   # exit 0
cd packages/dashboard && npm run build       # exit 0, 2808 modules transformed
eslint packages/dashboard/src/features/ai/pages/AIUsagePage.tsx \
      packages/dashboard/src/features/ai/pages/AIPage.tsx \
      packages/dashboard/src/router/AppRoutes.tsx  # exit 0

Note

Add AI usage page with period filtering, aggregate metrics, and paginated records

Adds a new AIUsagePage at /dashboard/ai/usage showing total requests, input/output tokens, and images generated for a selected time period (this week, this month, or all time).
Displays a per-model breakdown table and a paginated detailed records table with request type derived from output modalities.
Adds a 'View usage' button to the existing AIPage header linking to the new page.
Registers the new route in AppRoutes.tsx as a nested route under the AILayout group.

^{Macroscope summarized 9b80eb8.}

Summary by CodeRabbit

New Features
- Added a "View usage" link on the AI settings page.
- New AI Usage page with date-range filtering (This Week / This Month / All Time).
- Summary cards showing total requests, input/output tokens, and image counts.
- "Usage by model" aggregation table and a paginated "Usage records" table with timestamps, model/provider, type, and counts.
- Loading and error states; pagination resets when changing the date range.

…le (InsForge#978) Surfaces existing AI usage data in the admin UI at /dashboard/ai/usage. - New AIUsagePage at /dashboard/ai/usage: date range filter (this week / this month / all time), summary cards (requests, input tokens, output tokens, images), and a paginated records table (time, model, provider, token counts, images) — all driven by the existing useAIUsageSummary and useAIUsageRecords hooks with no new backend changes. - Wires a nested route path="usage" under the /dashboard/ai AILayout. - Adds a "View usage" button on AIPage linking to the new route.

coderabbitai · Apr 10, 2026

Walkthrough

Adds a new AI Usage dashboard page component with date-range filtering and paginated records, a "View usage" link on the existing AI page, and a new route at /dashboard/ai/usage. No data-model or backend changes.

Changes

Cohort / File(s)	Summary
AI Page Navigation `packages/dashboard/src/features/ai/pages/AIPage.tsx`	Imported `Link` and replaced the single secondary button with a horizontal container containing a new "View usage" link (`/dashboard/ai/usage`) alongside the existing "Gateway credentials" button.
AI Usage Dashboard Page `packages/dashboard/src/features/ai/pages/AIUsagePage.tsx`	Added new `AIUsagePage` component: client-side date-range state (`thisWeek`/`thisMonth`/`allTime`), pagination, derived ISO `startDate`/`endDate`, calls to `useAIUsageSummary` and two `useAIUsageRecords` queries (aggregate and paged), grouping logic for per-model aggregation, UI for summary cards, "Usage by model" table, detailed records table, loading/error handling, and conditional pagination.
Route Registration `packages/dashboard/src/router/AppRoutes.tsx`	Imported and registered `AIUsagePage` as a child route at relative path `usage` under the existing `/dashboard/ai` route.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

fix(ai): soft-disable configurations with is_active #804 — Modifies the same AI page (packages/.../AIPage.tsx) to add/remove wording and layout; related at the file/UX change level.

Suggested reviewers

tonychang04
Fermionic-Lyu

Poem

🐰 I hopped through code and found a page,
A link to usage, charts engage,
Cards and tables, rows aligned,
Tokens counted, models signed,
A tiny dashboard—metrics sage.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 11.11% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title 'feat(dashboard): add AI usage page' directly and clearly describes the main change—adding a new AI usage page to the dashboard.
Linked Issues check	✅ Passed	The PR implements all core objectives from issue `#978`: new AIUsagePage with summary cards, per-model breakdown, paginated records table, date range filtering, and route registration with View Usage button.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue `#978` requirements. The three files modified (AIPage.tsx, AIUsagePage.tsx, AppRoutes.tsx) contain only scope-relevant implementations—no unrelated refactoring or unscoped additions.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/dashboard/src/features/ai/pages/AIUsagePage.tsx`:
- Around line 13-15: The page is missing the per-model breakdown and a
request-type column in the detailed table; update the UI and data usage so the
per-model counts/costs are shown and each record displays its request type.
Specifically: ensure useAIUsageSummary or AIUsageSummarySchema returns a
perModel map (model name -> {count,cost,usage}) or compute it from
useAIUsageRecords results, render that breakdown in AIUsagePage (e.g., a summary
card/list using the existing formatTime helper for timestamps), and add a new
column in the detailed table that reads the request type from
AIUsageRecordSchema (e.g., record.requestType or record.type) and shows one of
"chat"/"image"/"embedding"; also update useAIUsageRecords/AIUsageRecordSchema to
include and type this requestType field if missing.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d44d0dfa-3c35-4c95-a7a2-79714fdc914f

📥 Commits

Reviewing files that changed from the base of the PR and between 269b504 and 3481370.

📒 Files selected for processing (3)

packages/dashboard/src/features/ai/pages/AIPage.tsx
packages/dashboard/src/features/ai/pages/AIUsagePage.tsx
packages/dashboard/src/router/AppRoutes.tsx

… page - Per-model breakdown table derived by grouping a high-limit records fetch (200 records) by model name, showing requests, input tokens, and output tokens per model. - Type column in the records table derived from outputModality (image → Image, audio → Audio, text → Text); no requestType field exists on AIUsageRecordSchema yet (tracked in InsForge#979).

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/dashboard/src/features/ai/pages/AIUsagePage.tsx`:
- Around line 169-174: The aggregate useAIUsageRecords call is missing error
handling: destructure error as aggregateError from the hook call where
aggregateData and aggregateLoading are defined, then include aggregateError in
the combined error check (e.g., replace summaryError ?? recordsError with
summaryError ?? recordsError ?? aggregateError) so failures from the aggregate
fetch are surfaced to the UI; update any UI/error rendering logic that uses
those combined errors (references: useAIUsageRecords, aggregateData,
aggregateLoading, aggregateError, summaryError, recordsError).
- Around line 129-154: RecordRow passes createdAt to formatTime using
String(record.createdAt), which can produce locale-dependent strings that
parseISO can't handle; update the conversion so createdAt is sent as an ISO 8601
string (e.g., use record.createdAt.toISOString() when record.createdAt is a
Date, falling back to String(record.createdAt) otherwise) before calling
formatTime to ensure parseISO in formatTime receives a valid ISO string.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cbec24d0-9117-46e7-8237-3564359f4ec9

📥 Commits

Reviewing files that changed from the base of the PR and between 3481370 and 2c96a55.

📒 Files selected for processing (1)

packages/dashboard/src/features/ai/pages/AIUsagePage.tsx

…ch errors - Use toISOString() when createdAt is a Date (z.date() schema) so formatTime's parseISO receives a valid ISO 8601 string instead of locale-dependent output - Destructure and propagate aggregateError from the per-model breakdown fetch so failures are surfaced to users rather than silently ignored Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

coderabbitai Bot reviewed Apr 10, 2026

View reviewed changes

Comment thread packages/dashboard/src/features/ai/pages/AIUsagePage.tsx Outdated

coderabbitai Bot reviewed Apr 10, 2026

View reviewed changes

Comment thread packages/dashboard/src/features/ai/pages/AIUsagePage.tsx

Comment thread packages/dashboard/src/features/ai/pages/AIUsagePage.tsx Outdated

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(dashboard): add AI usage page (#978)#1083

feat(dashboard): add AI usage page (#978)#1083
ayushmk7 wants to merge 3 commits intoInsForge:mainInsForge/InsForge:mainfrom
ayushmk7:feat/ai-usage-dashboard-978ayushmk7/Ayush-s-InsForge:feat/ai-usage-dashboard-978Copy head branch name to clipboard

ayushmk7 commented Apr 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 10, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Search code, repositories, users, issues, pull requests...

Uh oh!

Conversation

ayushmk7 commented Apr 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What was not changed

Verification

Add AI usage page with period filtering, aggregate metrics, and paginated records

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

ayushmk7 commented Apr 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 10, 2026 •

edited

Loading