feat: API analytics dashboard with i18n and theme support
Next.js full-stack analytics dashboard for new-api. - Direct PostgreSQL readonly queries on logs table - 5 pages: Dashboard, Rankings, Aggregation, Logs, Detail - Dark/Light/System theme with CSS variables - Chinese/English i18n (default Chinese) - Recharts with dual Y-axis for input/output tokens - Lucide icons + Motion animations - Docker + docker-compose with external sinobridge network, port 8019
This commit is contained in:
117
app/page.tsx
Normal file
117
app/page.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { motion } from "motion/react";
|
||||
import { Zap, Hash, Users, Cpu, TrendingUp, BarChart3 } from "lucide-react";
|
||||
import { StatsCard } from "@/components/StatsCard";
|
||||
import { TimeRangeSelector } from "@/components/TimeRangeSelector";
|
||||
import { TrendChart } from "@/components/charts/TrendChart";
|
||||
import { RankingBar } from "@/components/charts/RankingBar";
|
||||
import { type TimeRange, getTimeRange, buildQuery } from "@/lib/utils";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { t } = useI18n();
|
||||
const [range, setRange] = useState<TimeRange>("30d");
|
||||
const [granularity, setGranularity] = useState<"day" | "week" | "month">("day");
|
||||
const [trendMetric, setTrendMetric] = useState<"total_tokens" | "calls">("total_tokens");
|
||||
const [overview, setOverview] = useState<any>(null);
|
||||
const [trends, setTrends] = useState<any[]>([]);
|
||||
const [userRank, setUserRank] = useState<any[]>([]);
|
||||
const [modelRank, setModelRank] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
const { start, end } = getTimeRange(range);
|
||||
const tp = { start, end };
|
||||
const [ov, tr, ur, mr] = await Promise.all([
|
||||
fetch(buildQuery("/api/overview", tp)).then(r => r.json()),
|
||||
fetch(buildQuery("/api/trends", { ...tp, granularity })).then(r => r.json()),
|
||||
fetch(buildQuery("/api/rankings", { ...tp, type: "user", limit: 10 })).then(r => r.json()),
|
||||
fetch(buildQuery("/api/rankings", { ...tp, type: "model", limit: 10 })).then(r => r.json()),
|
||||
]);
|
||||
setOverview(ov); setTrends(tr); setUserRank(ur); setModelRank(mr); setLoading(false);
|
||||
}, [range, granularity]);
|
||||
|
||||
useEffect(() => { fetchData(); }, [fetchData]);
|
||||
|
||||
const grans = [
|
||||
{ key: "day" as const, label: t("gran.day") },
|
||||
{ key: "week" as const, label: t("gran.week") },
|
||||
{ key: "month" as const, label: t("gran.month") },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<motion.h1 initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="text-2xl font-bold gradient-text">
|
||||
{t("dash.title")}
|
||||
</motion.h1>
|
||||
<TimeRangeSelector value={range} onChange={setRange} />
|
||||
</div>
|
||||
|
||||
{overview && (
|
||||
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<StatsCard title={t("dash.totalCalls")} value={overview.total_calls} icon={Hash} delay={0} />
|
||||
<StatsCard title={t("dash.tokenUsage")} value={overview.total_tokens} format="tokens" icon={Zap} delay={0.05} />
|
||||
<StatsCard title={t("dash.activeUsers")} value={overview.active_users} icon={Users} delay={0.1} />
|
||||
<StatsCard title={t("dash.activeModels")} value={overview.active_models} icon={Cpu} delay={0.15} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.15 }} className="glass p-5">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="h-4 w-4" style={{ color: "var(--accent)", opacity: 0.6 }} />
|
||||
<h2 className="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>{t("dash.trend")}</h2>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex gap-1 rounded-md p-0.5" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
|
||||
{grans.map(g => (
|
||||
<button key={g.key} onClick={() => setGranularity(g.key)}
|
||||
className="px-2.5 py-1 text-xs rounded transition-colors"
|
||||
style={{
|
||||
background: granularity === g.key ? "var(--btn-active-bg)" : "transparent",
|
||||
color: granularity === g.key ? "var(--text-accent)" : "var(--text-muted)",
|
||||
border: granularity === g.key ? "1px solid var(--surface-border)" : "1px solid transparent",
|
||||
}}
|
||||
>{g.label}</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-1 rounded-md p-0.5" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
|
||||
{([["total_tokens", t("metric.token")], ["calls", t("metric.calls")]] as const).map(([k, l]) => (
|
||||
<button key={k} onClick={() => setTrendMetric(k as any)}
|
||||
className="px-2.5 py-1 text-xs rounded transition-colors"
|
||||
style={{
|
||||
background: trendMetric === k ? "var(--btn-active-bg)" : "transparent",
|
||||
color: trendMetric === k ? "var(--text-accent)" : "var(--text-muted)",
|
||||
border: trendMetric === k ? "1px solid var(--surface-border)" : "1px solid transparent",
|
||||
}}
|
||||
>{l}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<div className="h-5 w-5 animate-spin rounded-full spinner" />
|
||||
</div>
|
||||
) : (
|
||||
<TrendChart data={trends} metric={trendMetric} />
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.25 }} className="glass p-5">
|
||||
<BarChart3 className="h-4 w-4 mb-1" style={{ color: "var(--accent)", opacity: 0.6 }} />
|
||||
<RankingBar data={userRank} title={t("dash.userTop10")} />
|
||||
</motion.div>
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3 }} className="glass p-5">
|
||||
<BarChart3 className="h-4 w-4 mb-1" style={{ color: "var(--accent-purple)", opacity: 0.6 }} />
|
||||
<RankingBar data={modelRank} title={t("dash.modelTop10")} />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user