import { Head, router } from '@inertiajs/react'; import { Activity, CircleAlert, Coins, Database, Hash } from 'lucide-react'; import type { LucideIcon } from 'lucide-react'; import type { FormEvent } from 'react'; import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts'; import Heading from '@/components/heading'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { ChartContainer, ChartTooltipContent } from '@/components/ui/chart'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { index as aiUsage } from '@/routes/admin/ai-usage'; type UsageLog = { id: number; request_type: string; agent: string; provider: string | null; model: string | null; prompt: string; prompt_tokens: number | null; completion_tokens: number | null; total_tokens: number | null; cost: string | null; currency: string | null; status: string; error: string | null; created_at: string; user?: { name: string } | null; company?: { name: string } | null; }; type Props = { filters: { from: string; to: string; request_type: string }; summary: { requests: number; completed: number; failed: number; tokens: number; cost: string; }; daily: Array<{ date: string; requests: number; cost: number }>; providers: Array<{ provider: string; requests: number; cost: number }>; logs: { data: UsageLog[]; links: Array<{ url: string | null; label: string; active: boolean }>; }; }; const chartConfig = { requests: { label: 'Requests', color: 'var(--chart-1)' }, cost: { label: 'Cost', color: 'var(--chart-2)' }, }; const summaryCards: Array<{ label: string; icon: LucideIcon }> = [ { label: 'Requests', icon: Hash }, { label: 'Completed', icon: Activity }, { label: 'Failed', icon: CircleAlert }, { label: 'Tokens', icon: Database }, { label: 'Estimated cost', icon: Coins }, ]; function formatCost(value: number | string | null, currency = 'USD'): string { if (value === null) { return '—'; } return new Intl.NumberFormat(undefined, { style: 'currency', currency, maximumFractionDigits: 6, }).format(Number(value)); } function requestLabel(value: string): string { return value === 'growth_iq_chat' ? 'Growth IQ chat' : 'Growth Score advisor'; } export default function AiUsagePage({ filters, summary, daily, providers, logs, }: Props) { function applyFilters(event: FormEvent) { event.preventDefault(); const formData = new FormData(event.currentTarget); router.get( aiUsage(), { from: formData.get('from') || undefined, to: formData.get('to') || undefined, request_type: formData.get('request_type') || undefined, }, { preserveState: true, replace: true }, ); } return ( <>
{summaryCards.map(({ label, icon: Icon }, index) => { const values = [ summary.requests, summary.completed, summary.failed, summary.tokens.toLocaleString(), formatCost(summary.cost), ]; return (

{label}

{values[index]}

); })}
Usage over time {daily.length === 0 ? (
No usage recorded for this period.
) : ( Number( value, ).toLocaleString() } /> } /> )} Provider breakdown {providers.length === 0 ? (

No provider usage recorded.

) : ( providers.map((provider) => (

{provider.provider}

{provider.requests} requests

{formatCost(provider.cost)}
)) )}
Request logs
{logs.data.map((log) => ( ))}
Request Company / user Model Tokens Cost Status Created

{requestLabel( log.request_type, )}

{log.prompt}

{log.company?.name ?? '—'}

{log.user?.name ?? 'System'}

{log.provider ?? 'Unknown'}

{log.model ?? '—'}

{( log.total_tokens ?? 0 ).toLocaleString()} {formatCost( log.cost, log.currency ?? 'USD', )} {log.status} {new Date( log.created_at, ).toLocaleString()}
{logs.data.length === 0 && (

No request logs found.

)} {logs.links.length > 3 && ( )}
); } AiUsagePage.layout = { breadcrumbs: [{ title: 'AI Usage', href: aiUsage() }], };