Translate analytics overview/activity/economy plus peak-hours/revenue charts, and audit/chat/commands/trades DataTables (en/nl/it). Includes prior events/polls detail i18n. Co-authored-by: Cursor <[email protected]>
279 lines
7.5 KiB
TypeScript
279 lines
7.5 KiB
TypeScript
import {
|
|
ArrowLeftRight,
|
|
Clock,
|
|
DoorOpen,
|
|
MessageSquare,
|
|
TrendingUp,
|
|
Users,
|
|
} from "lucide-react";
|
|
import { getLocale, getTranslations } from "next-intl/server";
|
|
import { redirect } from "next/navigation";
|
|
import { DashboardChart } from "@/components/admin/dashboard-chart";
|
|
import { PeakHoursHeatmap } from "@/components/admin/peak-hours-heatmap";
|
|
import { StatsCard } from "@/components/admin/stats-card";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
|
|
import { prisma } from "@/lib/prisma";
|
|
|
|
type AnalyticsData = {
|
|
totalUsers: number;
|
|
onlineUsers: number;
|
|
weekRegistrations: number;
|
|
monthRegistrations: number;
|
|
totalRooms: number;
|
|
activeRooms: number;
|
|
weekChatMessages: number;
|
|
weekTrades: number;
|
|
weekBans: number;
|
|
registrationChart: { label: string; value: number }[];
|
|
peakHours: { grid: number[][]; max: number };
|
|
};
|
|
|
|
const EMPTY: AnalyticsData = {
|
|
totalUsers: 0,
|
|
onlineUsers: 0,
|
|
weekRegistrations: 0,
|
|
monthRegistrations: 0,
|
|
totalRooms: 0,
|
|
activeRooms: 0,
|
|
weekChatMessages: 0,
|
|
weekTrades: 0,
|
|
weekBans: 0,
|
|
registrationChart: [],
|
|
peakHours: {
|
|
grid: Array.from({ length: 7 }, () => Array(24).fill(0)),
|
|
max: 0,
|
|
},
|
|
};
|
|
|
|
async function safeCount(fn: () => Promise<number>): Promise<number> {
|
|
try {
|
|
return await fn();
|
|
} catch {
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
async function getAnalyticsData(locale: string): Promise<AnalyticsData> {
|
|
const now = Math.floor(Date.now() / 1000);
|
|
const todayStart = now - (now % 86400);
|
|
const weekAgo = now - 7 * 86400;
|
|
const monthAgo = now - 30 * 86400;
|
|
|
|
try {
|
|
const [
|
|
totalUsers,
|
|
onlineUsers,
|
|
weekRegistrations,
|
|
monthRegistrations,
|
|
totalRooms,
|
|
activeRooms,
|
|
weekChatMessages,
|
|
weekTrades,
|
|
weekBans,
|
|
] = await Promise.all([
|
|
safeCount(() => prisma.user.count()),
|
|
safeCount(() => prisma.user.count({ where: { online: "1" } })),
|
|
safeCount(() =>
|
|
prisma.user.count({ where: { accountCreated: { gte: weekAgo } } }),
|
|
),
|
|
safeCount(() =>
|
|
prisma.user.count({ where: { accountCreated: { gte: monthAgo } } }),
|
|
),
|
|
safeCount(() => prisma.rooms.count()),
|
|
safeCount(() => prisma.rooms.count({ where: { users: { gt: 0 } } })),
|
|
(async () => {
|
|
try {
|
|
const rows = await prisma.$queryRaw<{ count: bigint }[]>`
|
|
SELECT COUNT(*) AS count FROM chatlogs_room WHERE timestamp >= ${weekAgo}`;
|
|
return Number(rows[0]?.count ?? 0);
|
|
} catch {
|
|
return 0;
|
|
}
|
|
})(),
|
|
safeCount(() =>
|
|
prisma.roomTradeLog.count({ where: { timestamp: { gte: weekAgo } } }),
|
|
),
|
|
safeCount(() =>
|
|
prisma.ban.count({ where: { timestamp: { gte: weekAgo } } }),
|
|
),
|
|
]);
|
|
|
|
let registrationChart: { label: string; value: number }[] = [];
|
|
try {
|
|
const regRows = await prisma.$queryRaw<
|
|
{ day_bucket: bigint; count: bigint }[]
|
|
>`
|
|
SELECT FLOOR(account_created / 86400) AS day_bucket, COUNT(*) AS count
|
|
FROM users
|
|
WHERE account_created >= ${monthAgo}
|
|
GROUP BY day_bucket ORDER BY day_bucket
|
|
`;
|
|
const regCountMap = new Map(
|
|
regRows.map((r) => [Number(r.day_bucket), Number(r.count)]),
|
|
);
|
|
for (let i = 29; i >= 0; i--) {
|
|
const dayStart = todayStart - i * 86400;
|
|
const bucket = Math.floor(dayStart / 86400);
|
|
const date = new Date(dayStart * 1000);
|
|
registrationChart.push({
|
|
label: date.toLocaleDateString(locale, {
|
|
month: "short",
|
|
day: "numeric",
|
|
}),
|
|
value: regCountMap.get(bucket) ?? 0,
|
|
});
|
|
}
|
|
} catch {
|
|
registrationChart = [];
|
|
}
|
|
|
|
const grid: number[][] = Array.from({ length: 7 }, () => Array(24).fill(0));
|
|
let max = 0;
|
|
try {
|
|
const peakRows = await prisma.$queryRaw<
|
|
{ d: number; h: number; c: bigint }[]
|
|
>`
|
|
SELECT ((DAYOFWEEK(FROM_UNIXTIME(last_online)) + 5) % 7) AS d,
|
|
HOUR(FROM_UNIXTIME(last_online)) AS h,
|
|
COUNT(*) AS c
|
|
FROM users
|
|
WHERE last_online >= ${weekAgo}
|
|
GROUP BY d, h
|
|
`;
|
|
for (const r of peakRows) {
|
|
const day = Number(r.d);
|
|
const hour = Number(r.h);
|
|
if (day < 0 || day > 6 || hour < 0 || hour > 23) continue;
|
|
const count = Number(r.c);
|
|
grid[day][hour] = count;
|
|
if (count > max) max = count;
|
|
}
|
|
} catch {
|
|
/* keep empty grid */
|
|
}
|
|
|
|
return {
|
|
totalUsers,
|
|
onlineUsers,
|
|
weekRegistrations,
|
|
monthRegistrations,
|
|
totalRooms,
|
|
activeRooms,
|
|
weekChatMessages,
|
|
weekTrades,
|
|
weekBans,
|
|
registrationChart,
|
|
peakHours: { grid, max },
|
|
};
|
|
} catch {
|
|
return EMPTY;
|
|
}
|
|
}
|
|
|
|
export default async function AnalyticsPage() {
|
|
const { session, permissions } = await getAdminContext();
|
|
if (!canAccess(permissions, PERMS.ANALYTICS_VIEW, session.user.rank)) {
|
|
redirect("/admin");
|
|
}
|
|
|
|
const locale = await getLocale();
|
|
const t = await getTranslations("pages.admin.analytics");
|
|
const data = await getAnalyticsData(locale);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<StatsCard
|
|
title={t("totalUsers")}
|
|
value={data.totalUsers.toLocaleString(locale)}
|
|
description={t("onlineNow", { count: data.onlineUsers })}
|
|
icon={<Users className="h-4 w-4" />}
|
|
/>
|
|
<StatsCard
|
|
title={t("weekRegistrations")}
|
|
value={data.weekRegistrations.toLocaleString(locale)}
|
|
description={t("thisMonth", { count: data.monthRegistrations })}
|
|
icon={<TrendingUp className="h-4 w-4" />}
|
|
/>
|
|
<StatsCard
|
|
title={t("activeRooms")}
|
|
value={data.activeRooms.toLocaleString(locale)}
|
|
description={t("totalRooms", { count: data.totalRooms })}
|
|
icon={<DoorOpen className="h-4 w-4" />}
|
|
/>
|
|
<StatsCard
|
|
title={t("weeklyActivity")}
|
|
value={data.weekChatMessages.toLocaleString(locale)}
|
|
description={t("tradesAndBans", {
|
|
trades: data.weekTrades,
|
|
bans: data.weekBans,
|
|
})}
|
|
icon={<MessageSquare className="h-4 w-4" />}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<DashboardChart
|
|
title={t("registrationsChartTitle")}
|
|
data={data.registrationChart}
|
|
color="hsl(262, 83%, 58%)"
|
|
description={t("registrationsChartDescription")}
|
|
/>
|
|
<PeakHoursHeatmap data={data.peakHours} />
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-3">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<MessageSquare className="h-4 w-4" /> {t("chatActivity")}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-bold">
|
|
{data.weekChatMessages.toLocaleString(locale)}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("messagesLast7Days")}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<ArrowLeftRight className="h-4 w-4" /> {t("trades")}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-bold">
|
|
{data.weekTrades.toLocaleString(locale)}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("tradesLast7Days")}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Clock className="h-4 w-4" /> {t("retention")}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-bold">
|
|
{data.totalUsers > 0
|
|
? Math.round((data.onlineUsers / data.totalUsers) * 100)
|
|
: 0}
|
|
%
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("usersOnlineOverTotal")}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|