295 lines
8.9 KiB
TypeScript
295 lines
8.9 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { trpc } from '@/lib/trpc/client'
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from '@/components/ui/card'
|
||
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
||
|
|
import { Badge } from '@/components/ui/badge'
|
||
|
|
import {
|
||
|
|
Coins,
|
||
|
|
Zap,
|
||
|
|
TrendingUp,
|
||
|
|
Activity,
|
||
|
|
Brain,
|
||
|
|
Filter,
|
||
|
|
Users,
|
||
|
|
Award,
|
||
|
|
} from 'lucide-react'
|
||
|
|
import { cn } from '@/lib/utils'
|
||
|
|
|
||
|
|
const ACTION_ICONS: Record<string, typeof Zap> = {
|
||
|
|
ASSIGNMENT: Users,
|
||
|
|
FILTERING: Filter,
|
||
|
|
AWARD_ELIGIBILITY: Award,
|
||
|
|
MENTOR_MATCHING: Brain,
|
||
|
|
}
|
||
|
|
|
||
|
|
const ACTION_LABELS: Record<string, string> = {
|
||
|
|
ASSIGNMENT: 'Jury Assignment',
|
||
|
|
FILTERING: 'Project Filtering',
|
||
|
|
AWARD_ELIGIBILITY: 'Award Eligibility',
|
||
|
|
MENTOR_MATCHING: 'Mentor Matching',
|
||
|
|
}
|
||
|
|
|
||
|
|
function StatCard({
|
||
|
|
label,
|
||
|
|
value,
|
||
|
|
subValue,
|
||
|
|
icon: Icon,
|
||
|
|
trend,
|
||
|
|
}: {
|
||
|
|
label: string
|
||
|
|
value: string
|
||
|
|
subValue?: string
|
||
|
|
icon: typeof Zap
|
||
|
|
trend?: 'up' | 'down' | 'neutral'
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-start gap-3 rounded-lg border bg-card p-4">
|
||
|
|
<div className="rounded-md bg-muted p-2">
|
||
|
|
<Icon className="h-4 w-4 text-muted-foreground" />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 space-y-1">
|
||
|
|
<p className="text-sm font-medium text-muted-foreground">{label}</p>
|
||
|
|
<div className="flex items-baseline gap-2">
|
||
|
|
<p className="text-2xl font-bold">{value}</p>
|
||
|
|
{trend && trend !== 'neutral' && (
|
||
|
|
<TrendingUp
|
||
|
|
className={cn(
|
||
|
|
'h-4 w-4',
|
||
|
|
trend === 'up' ? 'text-green-500' : 'rotate-180 text-red-500'
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{subValue && (
|
||
|
|
<p className="text-xs text-muted-foreground">{subValue}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function UsageBar({
|
||
|
|
label,
|
||
|
|
value,
|
||
|
|
maxValue,
|
||
|
|
color,
|
||
|
|
}: {
|
||
|
|
label: string
|
||
|
|
value: number
|
||
|
|
maxValue: number
|
||
|
|
color: string
|
||
|
|
}) {
|
||
|
|
const percentage = maxValue > 0 ? (value / maxValue) * 100 : 0
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-1">
|
||
|
|
<div className="flex justify-between text-sm">
|
||
|
|
<span className="text-muted-foreground">{label}</span>
|
||
|
|
<span className="font-medium">{value.toLocaleString()}</span>
|
||
|
|
</div>
|
||
|
|
<div className="h-2 overflow-hidden rounded-full bg-muted">
|
||
|
|
<div
|
||
|
|
className={cn('h-full transition-all duration-500', color)}
|
||
|
|
style={{ width: `${percentage}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AIUsageCard() {
|
||
|
|
const {
|
||
|
|
data: monthCost,
|
||
|
|
isLoading: monthLoading,
|
||
|
|
} = trpc.settings.getAICurrentMonthCost.useQuery(undefined, {
|
||
|
|
staleTime: 60 * 1000, // 1 minute
|
||
|
|
})
|
||
|
|
|
||
|
|
const {
|
||
|
|
data: stats,
|
||
|
|
isLoading: statsLoading,
|
||
|
|
} = trpc.settings.getAIUsageStats.useQuery({}, {
|
||
|
|
staleTime: 60 * 1000,
|
||
|
|
})
|
||
|
|
|
||
|
|
const {
|
||
|
|
data: history,
|
||
|
|
isLoading: historyLoading,
|
||
|
|
} = trpc.settings.getAIUsageHistory.useQuery({ days: 30 }, {
|
||
|
|
staleTime: 60 * 1000,
|
||
|
|
})
|
||
|
|
|
||
|
|
const isLoading = monthLoading || statsLoading
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="flex items-center gap-2">
|
||
|
|
<Activity className="h-5 w-5" />
|
||
|
|
AI Usage & Costs
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>Loading usage data...</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-6">
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
||
|
|
<Skeleton className="h-24" />
|
||
|
|
<Skeleton className="h-24" />
|
||
|
|
</div>
|
||
|
|
<Skeleton className="h-32" />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const hasUsage = monthCost && monthCost.requestCount > 0
|
||
|
|
const maxTokensByAction = stats?.byAction
|
||
|
|
? Math.max(...Object.values(stats.byAction).map((a) => a.tokens))
|
||
|
|
: 0
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="flex items-center gap-2">
|
||
|
|
<Activity className="h-5 w-5" />
|
||
|
|
AI Usage & Costs
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
Token usage and estimated costs for AI features
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-6">
|
||
|
|
{/* Current month summary */}
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||
|
|
<StatCard
|
||
|
|
label="This Month Cost"
|
||
|
|
value={monthCost?.costFormatted || '$0.00'}
|
||
|
|
subValue={`${monthCost?.requestCount || 0} requests`}
|
||
|
|
icon={Coins}
|
||
|
|
/>
|
||
|
|
<StatCard
|
||
|
|
label="Tokens Used"
|
||
|
|
value={monthCost?.tokens?.toLocaleString() || '0'}
|
||
|
|
subValue="This month"
|
||
|
|
icon={Zap}
|
||
|
|
/>
|
||
|
|
{stats && (
|
||
|
|
<StatCard
|
||
|
|
label="All-Time Cost"
|
||
|
|
value={stats.totalCostFormatted || '$0.00'}
|
||
|
|
subValue={`${stats.totalTokens?.toLocaleString() || 0} tokens`}
|
||
|
|
icon={TrendingUp}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Usage by action */}
|
||
|
|
{hasUsage && stats?.byAction && Object.keys(stats.byAction).length > 0 && (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<h4 className="text-sm font-semibold">Usage by Feature</h4>
|
||
|
|
<div className="space-y-3">
|
||
|
|
{Object.entries(stats.byAction)
|
||
|
|
.sort(([, a], [, b]) => b.tokens - a.tokens)
|
||
|
|
.map(([action, data]) => {
|
||
|
|
const Icon = ACTION_ICONS[action] || Zap
|
||
|
|
return (
|
||
|
|
<div key={action} className="flex items-center gap-3">
|
||
|
|
<div className="rounded-md bg-muted p-1.5">
|
||
|
|
<Icon className="h-3.5 w-3.5 text-muted-foreground" />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<UsageBar
|
||
|
|
label={ACTION_LABELS[action] || action}
|
||
|
|
value={data.tokens}
|
||
|
|
maxValue={maxTokensByAction}
|
||
|
|
color="bg-primary"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Badge variant="secondary" className="ml-2 text-xs">
|
||
|
|
{(data as { costFormatted?: string }).costFormatted}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Usage by model */}
|
||
|
|
{hasUsage && stats?.byModel && Object.keys(stats.byModel).length > 0 && (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<h4 className="text-sm font-semibold">Usage by Model</h4>
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{Object.entries(stats.byModel)
|
||
|
|
.sort(([, a], [, b]) => b.cost - a.cost)
|
||
|
|
.map(([model, data]) => (
|
||
|
|
<Badge
|
||
|
|
key={model}
|
||
|
|
variant="outline"
|
||
|
|
className="flex items-center gap-2"
|
||
|
|
>
|
||
|
|
<Brain className="h-3 w-3" />
|
||
|
|
<span>{model}</span>
|
||
|
|
<span className="text-muted-foreground">
|
||
|
|
{(data as { costFormatted?: string }).costFormatted}
|
||
|
|
</span>
|
||
|
|
</Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Usage history mini chart */}
|
||
|
|
{hasUsage && history && history.length > 0 && (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<h4 className="text-sm font-semibold">Last 30 Days</h4>
|
||
|
|
<div className="flex h-16 items-end gap-0.5">
|
||
|
|
{(() => {
|
||
|
|
const maxCost = Math.max(...history.map((d) => d.cost), 0.001)
|
||
|
|
return history.slice(-30).map((day, i) => {
|
||
|
|
const height = (day.cost / maxCost) * 100
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={day.date}
|
||
|
|
className="group relative flex-1 cursor-pointer"
|
||
|
|
title={`${day.date}: ${day.costFormatted}`}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-full rounded-t bg-primary/60 transition-colors hover:bg-primary"
|
||
|
|
style={{ height: `${Math.max(height, 4)}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
})()}
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
||
|
|
<span>{history[0]?.date}</span>
|
||
|
|
<span>{history[history.length - 1]?.date}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* No usage message */}
|
||
|
|
{!hasUsage && (
|
||
|
|
<div className="rounded-lg border border-dashed p-8 text-center">
|
||
|
|
<Activity className="mx-auto h-8 w-8 text-muted-foreground" />
|
||
|
|
<h4 className="mt-2 text-sm font-semibold">No AI usage yet</h4>
|
||
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
||
|
|
AI usage will be tracked when you use filtering, assignments, or
|
||
|
|
other AI-powered features.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|