i18n observability hub: analytics pages and log tables.
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]>
This commit is contained in:
SimoandCursor committed
1 parent
a25008deb5
commit
bcbdca841b
13 files changed
+576
-211
No files matched your search
@@ -1,4 +1,5 @@
|
||||
import { MessageSquare, Shield, Terminal, Users } from "lucide-react";
|
||||
import { getLocale, getTranslations } from "next-intl/server";
|
||||
import { redirect } from "next/navigation";
|
||||
import { StatsCard } from "@/components/admin/stats-card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
@@ -39,7 +40,7 @@ async function safeRawCount(sql: Promise<{ count: bigint }[]>): Promise<number>
|
||||
}
|
||||
}
|
||||
|
||||
async function getActivityData(): Promise<ActivityData> {
|
||||
async function getActivityData(locale: string): Promise<ActivityData> {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const todayStart = now - (now % 86400);
|
||||
const weekAgo = now - 7 * 86400;
|
||||
@@ -50,7 +51,7 @@ async function getActivityData(): Promise<ActivityData> {
|
||||
const dayStart = todayStart - i * 86400;
|
||||
const date = new Date(dayStart * 1000);
|
||||
emptyDays.push({
|
||||
label: date.toLocaleDateString("en", {
|
||||
label: date.toLocaleDateString(locale, {
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
@@ -153,7 +154,7 @@ async function getActivityData(): Promise<ActivityData> {
|
||||
const userId = Number(c.userId);
|
||||
return {
|
||||
userId,
|
||||
username: userMap.get(userId) ?? `User #${userId}`,
|
||||
username: userMap.get(userId) ?? "",
|
||||
messages: Number(c.messages),
|
||||
};
|
||||
});
|
||||
@@ -177,33 +178,35 @@ export default async function ActivityPage() {
|
||||
redirect("/admin");
|
||||
}
|
||||
|
||||
const data = await getActivityData();
|
||||
const locale = await getLocale();
|
||||
const t = await getTranslations("pages.admin.analytics.activity");
|
||||
const data = await getActivityData(locale);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<StatsCard
|
||||
title="Chat Messages"
|
||||
value={data.weekChats.toLocaleString()}
|
||||
description="Last 7 days"
|
||||
title={t("chatMessages")}
|
||||
value={data.weekChats.toLocaleString(locale)}
|
||||
description={t("last7Days")}
|
||||
icon={<MessageSquare className="h-4 w-4" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Commands"
|
||||
value={data.weekCommands.toLocaleString()}
|
||||
description="Last 7 days"
|
||||
title={t("commands")}
|
||||
value={data.weekCommands.toLocaleString(locale)}
|
||||
description={t("last7Days")}
|
||||
icon={<Terminal className="h-4 w-4" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Bans"
|
||||
value={data.weekBans.toLocaleString()}
|
||||
description="Last 7 days"
|
||||
title={t("bans")}
|
||||
value={data.weekBans.toLocaleString(locale)}
|
||||
description={t("last7Days")}
|
||||
icon={<Shield className="h-4 w-4" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Registrations"
|
||||
value={data.weekRegistrations.toLocaleString()}
|
||||
description="Last 7 days"
|
||||
title={t("registrations")}
|
||||
value={data.weekRegistrations.toLocaleString(locale)}
|
||||
description={t("last7Days")}
|
||||
icon={<Users className="h-4 w-4" />}
|
||||
/>
|
||||
</div>
|
||||
@@ -211,18 +214,26 @@ export default async function ActivityPage() {
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Daily Breakdown (7 days)</CardTitle>
|
||||
<CardTitle>{t("dailyBreakdownTitle")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-muted-foreground">
|
||||
<th className="text-left py-2 font-medium">Day</th>
|
||||
<th className="text-right py-2 font-medium">Chats</th>
|
||||
<th className="text-right py-2 font-medium">Cmds</th>
|
||||
<th className="text-right py-2 font-medium">Bans</th>
|
||||
<th className="text-right py-2 font-medium">Regs</th>
|
||||
<th className="text-left py-2 font-medium">{t("colDay")}</th>
|
||||
<th className="text-right py-2 font-medium">
|
||||
{t("colChats")}
|
||||
</th>
|
||||
<th className="text-right py-2 font-medium">
|
||||
{t("colCmds")}
|
||||
</th>
|
||||
<th className="text-right py-2 font-medium">
|
||||
{t("colBans")}
|
||||
</th>
|
||||
<th className="text-right py-2 font-medium">
|
||||
{t("colRegs")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -230,10 +241,10 @@ export default async function ActivityPage() {
|
||||
<tr key={day.label} className="border-b last:border-0">
|
||||
<td className="py-2">{day.label}</td>
|
||||
<td className="text-right tabular-nums">
|
||||
{day.chats.toLocaleString()}
|
||||
{day.chats.toLocaleString(locale)}
|
||||
</td>
|
||||
<td className="text-right tabular-nums">
|
||||
{day.commands.toLocaleString()}
|
||||
{day.commands.toLocaleString(locale)}
|
||||
</td>
|
||||
<td className="text-right tabular-nums">{day.bans}</td>
|
||||
<td className="text-right tabular-nums">
|
||||
@@ -249,11 +260,11 @@ export default async function ActivityPage() {
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Most Active Users (7 days)</CardTitle>
|
||||
<CardTitle>{t("mostActiveUsersTitle")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data.topChatters.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No chat activity</p>
|
||||
<div className="admin-empty">{t("noChatActivity")}</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{data.topChatters.map((user, i) => (
|
||||
@@ -265,10 +276,13 @@ export default async function ActivityPage() {
|
||||
{i + 1}
|
||||
</span>
|
||||
<span className="flex-1 text-sm font-medium">
|
||||
{user.username}
|
||||
{user.username ||
|
||||
t("userFallback", { id: user.userId })}
|
||||
</span>
|
||||
<span className="text-sm tabular-nums text-muted-foreground">
|
||||
{user.messages.toLocaleString()} msgs
|
||||
{t("msgCount", {
|
||||
count: user.messages.toLocaleString(locale),
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { ArrowLeftRight } from "lucide-react";
|
||||
import { getLocale, getTranslations } from "next-intl/server";
|
||||
import { redirect } from "next/navigation";
|
||||
import { RevenueChart } from "@/components/admin/revenue-chart";
|
||||
import { StatsCard } from "@/components/admin/stats-card";
|
||||
@@ -41,7 +42,7 @@ async function safeCount(fn: () => Promise<number>): Promise<number> {
|
||||
}
|
||||
}
|
||||
|
||||
async function getEconomyData(): Promise<EconomyData> {
|
||||
async function getEconomyData(locale: string): Promise<EconomyData> {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const todayStart = now - (now % 86400);
|
||||
const weekAgo = now - 7 * 86400;
|
||||
@@ -95,7 +96,7 @@ async function getEconomyData(): Promise<EconomyData> {
|
||||
const dayStart = todayStart - i * 86400;
|
||||
const date = new Date(dayStart * 1000);
|
||||
revenueData.push({
|
||||
label: date.toLocaleDateString("en", { weekday: "short" }),
|
||||
label: date.toLocaleDateString(locale, { weekday: "short" }),
|
||||
credits: 0,
|
||||
points: 0,
|
||||
});
|
||||
@@ -153,33 +154,37 @@ export default async function EconomyPage() {
|
||||
redirect("/admin");
|
||||
}
|
||||
|
||||
const data = await getEconomyData();
|
||||
const locale = await getLocale();
|
||||
const t = await getTranslations("pages.admin.analytics.economy");
|
||||
const data = await getEconomyData(locale);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<StatsCard
|
||||
title="Credits in Circulation"
|
||||
value={data.totalCredits.toLocaleString()}
|
||||
description="Total credits across all users"
|
||||
title={t("creditsInCirculation")}
|
||||
value={data.totalCredits.toLocaleString(locale)}
|
||||
description={t("creditsDescription")}
|
||||
icon={<CurrencyIcon kind="credits" size={16} />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Pixels in Circulation"
|
||||
value={data.totalPixels.toLocaleString()}
|
||||
description="Total pixels across all users"
|
||||
title={t("pixelsInCirculation")}
|
||||
value={data.totalPixels.toLocaleString(locale)}
|
||||
description={t("pixelsDescription")}
|
||||
icon={<CurrencyIcon kind="pixels" size={16} />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Points in Circulation"
|
||||
value={data.totalPoints.toLocaleString()}
|
||||
description="Total points across all users"
|
||||
title={t("pointsInCirculation")}
|
||||
value={data.totalPoints.toLocaleString(locale)}
|
||||
description={t("pointsDescription")}
|
||||
icon={<CurrencyIcon kind="diamonds" size={16} />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Weekly Trades"
|
||||
value={data.weekTrades.toLocaleString()}
|
||||
description={`${data.marketplaceActive} marketplace listings`}
|
||||
title={t("weeklyTrades")}
|
||||
value={data.weekTrades.toLocaleString(locale)}
|
||||
description={t("marketplaceListings", {
|
||||
count: data.marketplaceActive,
|
||||
})}
|
||||
icon={<ArrowLeftRight className="h-4 w-4" />}
|
||||
/>
|
||||
</div>
|
||||
@@ -189,24 +194,24 @@ export default async function EconomyPage() {
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Shop Revenue (7d)</CardTitle>
|
||||
<CardTitle>{t("shopRevenueTitle")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Purchases</span>
|
||||
<span className="text-muted-foreground">{t("purchases")}</span>
|
||||
<span className="font-medium">{data.shopPurchases}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Credits spent</span>
|
||||
<span className="text-muted-foreground">{t("creditsSpent")}</span>
|
||||
<span className="font-medium">
|
||||
{data.shopCreditsSpent.toLocaleString()}
|
||||
{data.shopCreditsSpent.toLocaleString(locale)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Points spent</span>
|
||||
<span className="text-muted-foreground">{t("pointsSpent")}</span>
|
||||
<span className="font-medium">
|
||||
{data.shopPointsSpent.toLocaleString()}
|
||||
{data.shopPointsSpent.toLocaleString(locale)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,16 +219,18 @@ export default async function EconomyPage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Marketplace</CardTitle>
|
||||
<CardTitle>{t("marketplaceTitle")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Active listings</span>
|
||||
<span className="text-muted-foreground">
|
||||
{t("activeListings")}
|
||||
</span>
|
||||
<span className="font-medium">{data.marketplaceActive}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Sold (7d)</span>
|
||||
<span className="text-muted-foreground">{t("sold7d")}</span>
|
||||
<span className="font-medium">{data.marketplaceSold}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -231,26 +238,26 @@ export default async function EconomyPage() {
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Currency Distribution</CardTitle>
|
||||
<CardTitle>{t("currencyDistributionTitle")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Credits</span>
|
||||
<span className="text-muted-foreground">{t("credits")}</span>
|
||||
<span className="font-medium">
|
||||
{data.totalCredits.toLocaleString()}
|
||||
{data.totalCredits.toLocaleString(locale)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Pixels</span>
|
||||
<span className="text-muted-foreground">{t("pixels")}</span>
|
||||
<span className="font-medium">
|
||||
{data.totalPixels.toLocaleString()}
|
||||
{data.totalPixels.toLocaleString(locale)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Points</span>
|
||||
<span className="text-muted-foreground">{t("points")}</span>
|
||||
<span className="font-medium">
|
||||
{data.totalPoints.toLocaleString()}
|
||||
{data.totalPoints.toLocaleString(locale)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
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";
|
||||
@@ -53,7 +54,7 @@ async function safeCount(fn: () => Promise<number>): Promise<number> {
|
||||
}
|
||||
}
|
||||
|
||||
async function getAnalyticsData(): Promise<AnalyticsData> {
|
||||
async function getAnalyticsData(locale: string): Promise<AnalyticsData> {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const todayStart = now - (now % 86400);
|
||||
const weekAgo = now - 7 * 86400;
|
||||
@@ -116,7 +117,7 @@ async function getAnalyticsData(): Promise<AnalyticsData> {
|
||||
const bucket = Math.floor(dayStart / 86400);
|
||||
const date = new Date(dayStart * 1000);
|
||||
registrationChart.push({
|
||||
label: date.toLocaleDateString("en", {
|
||||
label: date.toLocaleDateString(locale, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
}),
|
||||
@@ -176,43 +177,48 @@ export default async function AnalyticsPage() {
|
||||
redirect("/admin");
|
||||
}
|
||||
|
||||
const data = await getAnalyticsData();
|
||||
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="Total Users"
|
||||
value={data.totalUsers.toLocaleString()}
|
||||
description={`${data.onlineUsers} online now`}
|
||||
title={t("totalUsers")}
|
||||
value={data.totalUsers.toLocaleString(locale)}
|
||||
description={t("onlineNow", { count: data.onlineUsers })}
|
||||
icon={<Users className="h-4 w-4" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Week Registrations"
|
||||
value={data.weekRegistrations.toLocaleString()}
|
||||
description={`${data.monthRegistrations} this month`}
|
||||
title={t("weekRegistrations")}
|
||||
value={data.weekRegistrations.toLocaleString(locale)}
|
||||
description={t("thisMonth", { count: data.monthRegistrations })}
|
||||
icon={<TrendingUp className="h-4 w-4" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Active Rooms"
|
||||
value={data.activeRooms.toLocaleString()}
|
||||
description={`${data.totalRooms} total rooms`}
|
||||
title={t("activeRooms")}
|
||||
value={data.activeRooms.toLocaleString(locale)}
|
||||
description={t("totalRooms", { count: data.totalRooms })}
|
||||
icon={<DoorOpen className="h-4 w-4" />}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Weekly Activity"
|
||||
value={data.weekChatMessages.toLocaleString()}
|
||||
description={`${data.weekTrades} trades, ${data.weekBans} bans`}
|
||||
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="Registrations (30 days)"
|
||||
title={t("registrationsChartTitle")}
|
||||
data={data.registrationChart}
|
||||
color="hsl(262, 83%, 58%)"
|
||||
description="New user registrations over the last 30 days"
|
||||
description={t("registrationsChartDescription")}
|
||||
/>
|
||||
<PeakHoursHeatmap data={data.peakHours} />
|
||||
</div>
|
||||
@@ -221,37 +227,37 @@ export default async function AnalyticsPage() {
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<MessageSquare className="h-4 w-4" /> Chat Activity
|
||||
<MessageSquare className="h-4 w-4" /> {t("chatActivity")}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">
|
||||
{data.weekChatMessages.toLocaleString()}
|
||||
{data.weekChatMessages.toLocaleString(locale)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Messages in the last 7 days
|
||||
{t("messagesLast7Days")}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<ArrowLeftRight className="h-4 w-4" /> Trades
|
||||
<ArrowLeftRight className="h-4 w-4" /> {t("trades")}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold">
|
||||
{data.weekTrades.toLocaleString()}
|
||||
{data.weekTrades.toLocaleString(locale)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Trades in the last 7 days
|
||||
{t("tradesLast7Days")}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4" /> Retention
|
||||
<Clock className="h-4 w-4" /> {t("retention")}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
@@ -262,7 +268,7 @@ export default async function AnalyticsPage() {
|
||||
%
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Users online / total
|
||||
{t("usersOnlineOverTotal")}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in new issue
Block a user