import { useMemo, useState } from 'react' import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts' import { HugeiconsIcon } from '@hugeicons/react' import { ChartLineData01Icon, CancelIcon, } from '@hugeicons/core-free-icons' import { formatModelName } from '@/screens/dashboard/lib/formatters' import type { DashboardOverview } from '@/server/dashboard-aggregator' function formatTokens(n: number): string { if (!n || n <= 0) return '0' if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(2)}B` if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M` if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K` return String(n) } function formatCost(usd: number): string { if (!usd || usd <= 0) return '$0' if (usd < 0.01) return '<$0.01' if (usd < 1) return `$${usd.toFixed(3)}` if (usd < 100) return `$${usd.toFixed(2)}` return `$${Math.round(usd).toLocaleString()}` } function shortDay(day: string): string { // Native API gives `YYYY-MM-DD`. Render as `Apr 18` etc. for axis ticks. const ts = Date.parse(day) if (!Number.isFinite(ts)) return day return new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric', }) } type ChartDatum = { day: string label: string tokens: number input: number output: number cache: number reasoning: number sessions: number cost: number } /** * Big analytics card. Anchors the bottom-of-fold of the dashboard * and replaces the old top-3 model bar list with a full daily area * chart + top-models breakdown table. Click "Expand" to open the * deep modal with cache/reasoning split, sessions overlay, and full * by-model + cost ranking. * * Hides itself when analytics is unavailable. Empty state (analytics * present but no usage) renders a quiet placeholder so the dashboard * layout doesn't reflow. */ export function AnalyticsHeroCard({ analytics, }: { analytics: DashboardOverview['analytics'] }) { const [showModal, setShowModal] = useState(false) const data: Array = useMemo(() => { if (!analytics) return [] return analytics.daily.map((d) => ({ day: d.day, label: shortDay(d.day), tokens: d.inputTokens + d.outputTokens, input: d.inputTokens, output: d.outputTokens, cache: d.cacheReadTokens, reasoning: d.reasoningTokens, sessions: d.sessions, cost: d.estimatedCost, })) }, [analytics]) if (!analytics) return null const hasData = analytics.source === 'analytics' && data.length > 0 return ( <>

Analytics · {analytics.windowDays}d

{formatTokens(analytics.totalTokens)} tokens ·{' '} {analytics.totalApiCalls.toLocaleString()} calls ·{' '} {formatCost(analytics.estimatedCostUsd ?? 0)}

{hasData ? ( ) : null}

{hasData ? (

formatTokens(v)} /> [ formatTokens(value), name, ]} />

By model · top 5

{analytics.topModels.map((m, i) => { const max = analytics.topModels[0]?.tokens || 1 const widthPct = Math.max(2, Math.round((m.tokens / max) * 100)) return (

{i + 1} {formatModelName(m.id)} {formatTokens(m.tokens)}

) })}

) : (

No analytics usage in the last {analytics.windowDays}d.

)}

{showModal && hasData ? ( setShowModal(false)} /> ) : null} ) } function LegendDot({ tone, label }: { tone: string; label: string }) { return ( {label} ) } function AnalyticsModal({ analytics, data, onClose, }: { analytics: NonNullable data: Array onClose: () => void }) { return ( ) }