157 lines
8.8 KiB
TypeScript
157 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback, startTransition } from "react";
|
|
import { useParams } from "next/navigation";
|
|
import { motion } from "motion/react";
|
|
import { ArrowLeft, Hash, Zap, DollarSign, MessageSquare, DatabaseZap, BookOpen, ArrowUpDown, ArrowDown, ArrowUp } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { StatsCard } from "@/components/StatsCard";
|
|
import { TimeRangeSelector } from "@/components/TimeRangeSelector";
|
|
import { TrendChart } from "@/components/charts/TrendChart";
|
|
import { buildQuery, formatNumber, formatTokens, formatUSD } from "@/lib/utils";
|
|
import { sortDetailBreakdown, type DetailBreakdownItem, type DetailBreakdownSortKey } from "@/lib/detail-sort";
|
|
import { useTimeRange } from "@/lib/time-range-context";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
interface DetailData {
|
|
calls: number; prompt_tokens: number; completion_tokens: number;
|
|
cache_creation_tokens: number; cache_read_tokens: number;
|
|
total_tokens: number; quota: number; display_name?: string;
|
|
models?: DetailBreakdownItem[];
|
|
users?: DetailBreakdownItem[];
|
|
channel_name?: string;
|
|
}
|
|
|
|
export default function DetailPage() {
|
|
const { t } = useI18n();
|
|
const params = useParams();
|
|
const segments = Array.isArray(params.slug) ? params.slug : [];
|
|
const type = segments[0] || "";
|
|
const id = segments[1] || "";
|
|
const decodedId = decodeURIComponent(id);
|
|
|
|
const { getEffectiveRange } = useTimeRange();
|
|
const [data, setData] = useState<DetailData | null>(null);
|
|
const [trends, setTrends] = useState<{ date: string; calls: number; total_tokens: number; prompt_tokens: number; completion_tokens: number }[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [breakdownSortKey, setBreakdownSortKey] = useState<DetailBreakdownSortKey>("total_tokens");
|
|
const [breakdownSortAsc, setBreakdownSortAsc] = useState(false);
|
|
|
|
const fetchData = useCallback(async () => {
|
|
startTransition(() => setLoading(true));
|
|
const { start, end } = getEffectiveRange();
|
|
const tp = { start, end };
|
|
const [detail, tr] = await Promise.all([
|
|
fetch(buildQuery(`/api/detail/${type}/${encodeURIComponent(decodedId)}`, tp)).then(r => r.json()),
|
|
fetch(buildQuery("/api/trends", { ...tp, granularity: "day",
|
|
...(type === "user" ? { username: decodedId } : {}),
|
|
...(type === "model" ? { model: decodedId } : {}),
|
|
...(type === "channel" ? { channel_id: decodedId } : {}),
|
|
})).then(r => r.json()),
|
|
]);
|
|
startTransition(() => { setData(detail); setTrends(tr); setLoading(false); });
|
|
}, [type, decodedId, getEffectiveRange]);
|
|
|
|
useEffect(() => { fetchData(); }, [fetchData]);
|
|
|
|
const title = type === "channel" ? (data?.channel_name || decodedId) : (data?.display_name || decodedId);
|
|
const typeLabel = { user: t("detail.user"), model: t("detail.model"), channel: t("detail.channel") }[type] || type;
|
|
const breakdownItems = data?.models || data?.users || [];
|
|
const sortedBreakdownItems = sortDetailBreakdown(breakdownItems, breakdownSortKey, breakdownSortAsc);
|
|
const breakdownLabel = data?.models ? t("detail.modelDist") : t("detail.userDist");
|
|
|
|
function handleBreakdownSort(key: DetailBreakdownSortKey) {
|
|
if (breakdownSortKey === key) setBreakdownSortAsc(!breakdownSortAsc);
|
|
else { setBreakdownSortKey(key); setBreakdownSortAsc(false); }
|
|
}
|
|
|
|
const renderBreakdownSortIcon = (col: DetailBreakdownSortKey) => {
|
|
if (breakdownSortKey !== col) return <ArrowUpDown className="h-3 w-3" style={{ color: "var(--text-muted)", opacity: 0.4 }} />;
|
|
return breakdownSortAsc
|
|
? <ArrowUp className="h-3 w-3" style={{ color: "var(--accent)" }} />
|
|
: <ArrowDown className="h-3 w-3" style={{ color: "var(--accent)" }} />;
|
|
};
|
|
|
|
const breakdownColumns: { key: DetailBreakdownSortKey | null; label: string; align: "left" | "right" }[] = [
|
|
{ key: null, label: t("th.name"), align: "left" },
|
|
{ key: "calls", label: t("th.calls"), align: "right" },
|
|
{ key: "total_tokens", label: t("th.totalToken"), align: "right" },
|
|
{ key: "quota", label: t("th.cost"), align: "right" },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
|
|
<Link href="/rankings" className="inline-flex items-center gap-1 text-xs transition-colors mb-2" style={{ color: "var(--text-muted)" }}>
|
|
<ArrowLeft className="h-3 w-3" /> {t("common.backToRankings")}
|
|
</Link>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs uppercase tracking-wider px-2 py-0.5 rounded" style={{ color: "var(--text-muted)", background: "var(--btn-active-bg)", border: "1px solid var(--surface-border)" }}>{typeLabel}</span>
|
|
<h1 className="text-2xl font-bold" style={{ color: "var(--text-primary)" }}>{title}</h1>
|
|
</div>
|
|
</motion.div>
|
|
<TimeRangeSelector />
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex h-64 items-center justify-center"><div className="h-6 w-6 animate-spin rounded-full spinner" /></div>
|
|
) : data ? (
|
|
<>
|
|
<div className="grid grid-cols-2 gap-4 md:grid-cols-6">
|
|
<StatsCard title={t("dash.totalCalls")} value={data.calls} icon={Hash} delay={0} />
|
|
<StatsCard title={t("th.totalToken")} value={data.total_tokens} format="tokens" icon={Zap} delay={0.05} />
|
|
<StatsCard title={t("th.cost")} value={data.quota / 500000} format="usd" icon={DollarSign} delay={0.1} />
|
|
<StatsCard title={t("th.input")} value={data.prompt_tokens} format="tokens" icon={MessageSquare} delay={0.15} />
|
|
<StatsCard title={t("th.cacheCreation")} value={data.cache_creation_tokens} format="tokens" icon={DatabaseZap} delay={0.2} />
|
|
<StatsCard title={t("th.cacheRead")} value={data.cache_read_tokens} format="tokens" icon={BookOpen} delay={0.25} />
|
|
</div>
|
|
|
|
<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.15 }} className="glass p-5">
|
|
<h2 className="mb-4 text-sm font-semibold" style={{ color: "var(--text-primary)" }}>{t("detail.trend")}</h2>
|
|
<TrendChart data={trends} />
|
|
</motion.div>
|
|
|
|
{breakdownItems.length > 0 && (
|
|
<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="glass overflow-hidden">
|
|
<h2 className="px-5 pt-5 text-xs font-medium uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{breakdownLabel}</h2>
|
|
<table className="w-full text-sm mt-3">
|
|
<thead>
|
|
<tr style={{ borderBottom: "1px solid var(--surface-border)" }}>
|
|
{breakdownColumns.map((col) => {
|
|
const key = col.key;
|
|
return (
|
|
<th key={col.label}
|
|
className={`px-5 py-3 text-xs font-medium uppercase tracking-wider ${col.align === "right" ? "text-right" : "text-left"} ${key ? "cursor-pointer select-none transition-colors hover:opacity-80" : ""}`}
|
|
style={{ color: key && breakdownSortKey === key ? "var(--text-accent)" : "var(--text-muted)" }}
|
|
onClick={key ? () => handleBreakdownSort(key) : undefined}
|
|
>
|
|
{key ? (
|
|
<span className={`inline-flex items-center gap-1 ${col.align === "right" ? "justify-end" : ""}`}>
|
|
{col.label} {renderBreakdownSortIcon(key)}
|
|
</span>
|
|
) : col.label}
|
|
</th>
|
|
);
|
|
})}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sortedBreakdownItems.map((item) => (
|
|
<tr key={item.name} className="row-glow transition-colors" style={{ borderBottom: "1px solid var(--surface-border)" }}>
|
|
<td className="px-5 py-3" style={{ color: "var(--text-accent)", opacity: 0.8 }}>{item.name}</td>
|
|
<td className="px-5 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)] text-xs" style={{ color: "var(--text-secondary)" }}>{formatNumber(item.calls)}</td>
|
|
<td className="px-5 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)]" style={{ color: "var(--text-primary)" }}>{formatTokens(item.total_tokens)}</td>
|
|
<td className="px-5 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)] text-xs" style={{ color: "var(--text-secondary)" }}>{formatUSD(item.quota / 500000)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</motion.div>
|
|
)}
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|