import { Head, Link } from '@inertiajs/react'; import { BriefcaseBusiness, Gauge } from 'lucide-react'; import { AdminSurface, AdminSurfaceBar } from '@/components/admin-surface'; import AdminLayout from '@/layouts/admin-layout'; import { useT } from '@/lib/i18n'; import { dashboard as adminDashboard } from '@/routes/admin'; import { index as adminUsageIndex } from '@/routes/admin/usage'; import { show as adminWorkspaceShow } from '@/routes/admin/workspaces'; type Row = { workspace_id: string; workspace_name: string; plan: string; used: number; limit: number; percent: number; }; type ModelBreakdown = { provider: string; model: string; tokens_in: number; tokens_out: number; calls: number; cost_usd: number; no_catalog_match: boolean; }; type TokenRow = { workspace_id: string; workspace_name: string; tokens_in: number; tokens_out: number; tokens_total: number; calls: number; cost_usd: number; cost_missing?: boolean; breakdown?: ModelBreakdown[]; }; export default function AdminUsage({ rows, tokens = [], }: { rows: Row[]; tokens?: TokenRow[]; }) { const { t } = useT(); return ( {t('Usage this month')} {rows.length === 1 ? t(':count workspace', { count: rows.length.toLocaleString(), }) : t(':count workspaces', { count: rows.length.toLocaleString(), })}
{rows.length === 0 ? ( ) : ( rows.map((row) => ( )) )}
{t('Workspace')} {t('Plan')} {t('Usage')} {t('Health')}

{t('No usage recorded')}

{t( 'No workspace usage has been recorded for this month.', )}

{row.workspace_name}
{row.plan}

{row.used.toLocaleString()}{' '} /{' '} {row.limit > 0 ? row.limit.toLocaleString() : t('Unlimited')}

= 90 ? 'bg-rose-500' : row.percent >= 70 ? 'bg-amber-500' : 'bg-emerald-500' }`} style={{ width: `${Math.min(row.percent, 100)}%`, }} />
= 90 ? 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-300' : row.percent >= 70 ? 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300' : 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300' }`} > {row.percent === 0 && row.used > 0 ? '<1%' : `${row.percent}%`}
{/* C9: token-level usage. Silent feature in v2.0.0 — the tab informs operators of real per-workspace AI spend so they can price future plans against actual cost. No quota enforcement on this surface yet. */} {t('Token usage this month')} {tokens.length === 1 ? t(':count workspace', { count: tokens.length.toLocaleString(), }) : t(':count workspaces', { count: tokens.length.toLocaleString(), })}
{tokens.length === 0 ? ( ) : ( tokens.map((row) => ( )) )}
{t('Workspace')} {t('Tokens in')} {t('Tokens out')} {t('Total')} {t('Calls')} {t('Cost (USD)')}
{t( 'No token usage recorded yet — chat at least once for a row to appear here.', )}
{row.workspace_name} {row.tokens_in.toLocaleString()} {row.tokens_out.toLocaleString()} {row.tokens_total.toLocaleString()} {row.calls.toLocaleString()} 0 ? row.breakdown .map( (b) => `${b.provider}/${b.model}: $${b.cost_usd.toFixed(6)} (${b.calls} calls, ${b.tokens_in + b.tokens_out} tok)${b.no_catalog_match ? ' — no catalog match' : ''}`, ) .join('\n') : undefined } > {row.cost_usd >= 0.0001 ? `$${row.cost_usd.toFixed(4)}` : row.cost_usd > 0 ? `$${row.cost_usd.toFixed(6)}` : '$0.0000'} {row.cost_missing && ( ⚠ )}
); }