Merge pull request 'feat(i18n): observability - analytics + log tables (+ events/polls detail)' (#10) from feat/observability-i18n into main
Local Build and Deploy / deploy (push) Successful in 59s

Reviewed-on: #10
This commit is contained in:
Simo committed 2026-07-18 21:52:36 +02:00
commit 022fbfa223
13 files changed
+576 -211

No files matched your search

+42 -28
View File
@@ -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>
))}
+38 -31
View File
@@ -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>
+31 -25
View File
@@ -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>
+48 -40
View File
@@ -1,5 +1,6 @@
"use client";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { DataTable } from "@/components/admin/data-table";
import { Badge } from "@/components/ui/badge";
@@ -17,24 +18,25 @@ interface AuditRow {
}
function DiffCell({ diff }: { diff: string | null }) {
const t = useTranslations("pages.admin.logs");
const [open, setOpen] = useState(false);
if (!diff) return <span className="text-muted-foreground">-</span>;
if (!diff) return <span className="text-muted-foreground">{t("emptyValue")}</span>;
let parsed: Record<string, { from: unknown; to: unknown }>;
try {
parsed = JSON.parse(diff);
} catch {
return <span className="text-muted-foreground">-</span>;
return <span className="text-muted-foreground">{t("emptyValue")}</span>;
}
const keys = Object.keys(parsed);
if (keys.length === 0)
return <span className="text-muted-foreground">-</span>;
return <span className="text-muted-foreground">{t("emptyValue")}</span>;
const summary =
keys.length === 1
? `${keys[0]}: ${String(parsed[keys[0]].from ?? "∅")} → ${String(parsed[keys[0]].to ?? "∅")}`
: `${keys.length} changes`;
: t("audit.changesCount", { count: keys.length });
return (
<div>
@@ -66,51 +68,57 @@ function DiffCell({ diff }: { diff: string | null }) {
);
}
const columns: DataTableColumn<AuditRow>[] = [
{ key: "id", label: "ID", sortable: true },
{ key: "username", label: "User", sortable: true },
{
key: "action",
label: "Action",
sortable: true,
render: (value) => {
const v = String(value);
let variant: "default" | "secondary" | "destructive" = "secondary";
if (v.includes("create") || v.includes("add")) variant = "default";
if (v.includes("delete") || v.includes("remove") || v.includes("ban"))
variant = "destructive";
return <Badge variant={variant}>{v}</Badge>;
},
},
{ key: "target", label: "Target", sortable: true },
{
key: "targetId",
label: "Target ID",
render: (value) => <span>{value != null ? String(value) : "-"}</span>,
},
{
key: "diff",
label: "Details",
render: (_value, row) => <DiffCell diff={row.diff} />,
},
{
key: "createdAt",
label: "Date",
sortable: true,
render: (value) => <span>{String(value) || "N/A"}</span>,
},
];
interface AuditTableProps {
data: PaginatedResult<AuditRow>;
}
export function AuditTable({ data }: AuditTableProps) {
const t = useTranslations("pages.admin.logs");
const columns: DataTableColumn<AuditRow>[] = [
{ key: "id", label: t("colId"), sortable: true },
{ key: "username", label: t("colUser"), sortable: true },
{
key: "action",
label: t("colAction"),
sortable: true,
render: (value) => {
const v = String(value);
let variant: "default" | "secondary" | "destructive" = "secondary";
if (v.includes("create") || v.includes("add")) variant = "default";
if (v.includes("delete") || v.includes("remove") || v.includes("ban"))
variant = "destructive";
return <Badge variant={variant}>{v}</Badge>;
},
},
{ key: "target", label: t("colTarget"), sortable: true },
{
key: "targetId",
label: t("audit.colTargetId"),
render: (value) => (
<span>{value != null ? String(value) : t("emptyValue")}</span>
),
},
{
key: "diff",
label: t("audit.colDetails"),
render: (_value, row) => <DiffCell diff={row.diff} />,
},
{
key: "createdAt",
label: t("audit.colDate"),
sortable: true,
render: (value) => (
<span>{String(value) || t("audit.notAvailable")}</span>
),
},
];
return (
<DataTable
data={data}
columns={columns}
searchPlaceholder="Search by action or target..."
searchPlaceholder={t("audit.searchPlaceholder")}
exportUrl="/api/admin/export?type=audit"
/>
);
+23 -20
View File
@@ -1,5 +1,6 @@
"use client";
import { useTranslations } from "next-intl";
import { DataTable } from "@/components/admin/data-table";
import { formatTimestamp } from "@/lib/admin-helpers";
import type { DataTableColumn, PaginatedResult } from "@/types";
@@ -12,35 +13,37 @@ interface ChatLogRow {
roomId: number;
}
const columns: DataTableColumn<ChatLogRow>[] = [
{ key: "id", label: "ID", sortable: true },
{ key: "username", label: "User" },
{
key: "message",
label: "Message",
render: (value) => (
<span className="max-w-[300px] truncate block">{String(value)}</span>
),
},
{
key: "timestamp",
label: "Time",
sortable: true,
render: (value) => <span>{formatTimestamp(Number(value))}</span>,
},
{ key: "roomId", label: "Room ID", sortable: true },
];
interface ChatTableProps {
data: PaginatedResult<ChatLogRow>;
}
export function ChatTable({ data }: ChatTableProps) {
const t = useTranslations("pages.admin.logs");
const columns: DataTableColumn<ChatLogRow>[] = [
{ key: "id", label: t("colId"), sortable: true },
{ key: "username", label: t("colUser") },
{
key: "message",
label: t("chat.colMessage"),
render: (value) => (
<span className="max-w-[300px] truncate block">{String(value)}</span>
),
},
{
key: "timestamp",
label: t("colTime"),
sortable: true,
render: (value) => <span>{formatTimestamp(Number(value))}</span>,
},
{ key: "roomId", label: t("chat.colRoomId"), sortable: true },
];
return (
<DataTable
data={data}
columns={columns}
searchPlaceholder="Search by username or message..."
searchPlaceholder={t("chat.searchPlaceholder")}
exportUrl="/api/admin/export?type=chatlogs"
/>
);
+25 -22
View File
@@ -1,5 +1,6 @@
"use client";
import { useTranslations } from "next-intl";
import { DataTable } from "@/components/admin/data-table";
import { formatTimestamp } from "@/lib/admin-helpers";
import type { DataTableColumn, PaginatedResult } from "@/types";
@@ -12,37 +13,39 @@ interface CommandLogRow {
timestamp: number;
}
const columns: DataTableColumn<CommandLogRow>[] = [
{ key: "id", label: "ID", sortable: true },
{ key: "username", label: "User" },
{ key: "command", label: "Command", sortable: true },
{
key: "params",
label: "Params",
render: (value) => (
<span className="max-w-[200px] truncate block font-mono text-sm">
{String(value) || "-"}
</span>
),
},
{
key: "timestamp",
label: "Time",
sortable: true,
render: (value) => <span>{formatTimestamp(Number(value))}</span>,
},
];
interface CommandsTableProps {
data: PaginatedResult<CommandLogRow>;
}
export function CommandsTable({ data }: CommandsTableProps) {
const t = useTranslations("pages.admin.logs");
const columns: DataTableColumn<CommandLogRow>[] = [
{ key: "id", label: t("colId"), sortable: true },
{ key: "username", label: t("colUser") },
{ key: "command", label: t("commands.colCommand"), sortable: true },
{
key: "params",
label: t("commands.colParams"),
render: (value) => (
<span className="max-w-[200px] truncate block font-mono text-sm">
{String(value) || t("emptyValue")}
</span>
),
},
{
key: "timestamp",
label: t("colTime"),
sortable: true,
render: (value) => <span>{formatTimestamp(Number(value))}</span>,
},
];
return (
<DataTable
data={data}
columns={columns}
searchPlaceholder="Search by username, command, or params..."
searchPlaceholder={t("commands.searchPlaceholder")}
exportUrl="/api/admin/export?type=commands"
/>
);
+1 -1
View File
@@ -88,7 +88,7 @@ export default async function AdminStaffActivities({
when: fromDate(a.createdAt),
staff: t("staffWithId", {
id: Number(a.userId),
name: nameById.get(Number(a.userId)) ?? "unknown",
name: nameById.get(Number(a.userId)) ?? t("unknownUser"),
}),
action: a.action,
description: a.description,
+33 -28
View File
@@ -1,5 +1,6 @@
"use client";
import { useTranslations } from "next-intl";
import { DataTable } from "@/components/admin/data-table";
import { Badge } from "@/components/ui/badge";
import { formatTimestamp } from "@/lib/admin-helpers";
@@ -13,43 +14,47 @@ interface TradeLogRow {
timestamp: number;
}
const columns: DataTableColumn<TradeLogRow>[] = [
{ key: "id", label: "ID", sortable: true },
{ key: "userOneName", label: "User One" },
{ key: "userTwoName", label: "User Two" },
{
key: "status",
label: "Status",
sortable: true,
render: (value) => {
const v = String(value);
const variant =
v === "completed"
? "default"
: v === "cancelled"
? "destructive"
: "secondary";
return <Badge variant={variant}>{v || "unknown"}</Badge>;
},
},
{
key: "timestamp",
label: "Time",
sortable: true,
render: (value) => <span>{formatTimestamp(Number(value))}</span>,
},
];
interface TradesTableProps {
data: PaginatedResult<TradeLogRow>;
}
export function TradesTable({ data }: TradesTableProps) {
const t = useTranslations("pages.admin.logs");
const columns: DataTableColumn<TradeLogRow>[] = [
{ key: "id", label: t("colId"), sortable: true },
{ key: "userOneName", label: t("trades.colUserOne") },
{ key: "userTwoName", label: t("trades.colUserTwo") },
{
key: "status",
label: t("trades.colStatus"),
sortable: true,
render: (value) => {
const v = String(value);
const variant =
v === "completed"
? "default"
: v === "cancelled"
? "destructive"
: "secondary";
return (
<Badge variant={variant}>{v || t("trades.statusUnknown")}</Badge>
);
},
},
{
key: "timestamp",
label: t("colTime"),
sortable: true,
render: (value) => <span>{formatTimestamp(Number(value))}</span>,
},
];
return (
<DataTable
data={data}
columns={columns}
searchPlaceholder="Search by username..."
searchPlaceholder={t("trades.searchPlaceholder")}
/>
);
}
+16 -10
View File
@@ -1,5 +1,6 @@
"use client";
import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Tooltip,
@@ -14,7 +15,7 @@ interface PeakHoursData {
max: number;
}
const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const DAY_KEYS = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"] as const;
const HOURS = Array.from({ length: 24 }, (_, i) => i);
function getColor(value: number, max: number) {
@@ -28,13 +29,14 @@ function getColor(value: number, max: number) {
}
export function PeakHoursHeatmap({ data }: { data: PeakHoursData }) {
const t = useTranslations("pages.admin.analytics.peakHours");
const days = DAY_KEYS.map((key) => t(`days.${key}`));
return (
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Peak Hours</CardTitle>
<p className="text-xs text-muted-foreground">
User activity by day &amp; hour (last 7 days)
</p>
<CardTitle className="text-sm font-medium">{t("title")}</CardTitle>
<p className="text-xs text-muted-foreground">{t("description")}</p>
</CardHeader>
<CardContent>
<div className="overflow-x-auto">
@@ -51,8 +53,8 @@ export function PeakHoursHeatmap({ data }: { data: PeakHoursData }) {
))}
</div>
{/* Rows */}
{DAYS.map((day, dayIdx) => (
<div key={day} className="flex items-center gap-px mb-px">
{days.map((day, dayIdx) => (
<div key={DAY_KEYS[dayIdx]} className="flex items-center gap-px mb-px">
<span className="w-10 text-xs text-muted-foreground text-right pr-2 shrink-0">
{day}
</span>
@@ -67,7 +69,7 @@ export function PeakHoursHeatmap({ data }: { data: PeakHoursData }) {
/>
</TooltipTrigger>
<TooltipContent side="top" className="text-xs">
{day} {hour}:00 — {count} users
{t("tooltip", { day, hour, count })}
</TooltipContent>
</Tooltip>
);
@@ -77,13 +79,17 @@ export function PeakHoursHeatmap({ data }: { data: PeakHoursData }) {
))}
{/* Legend */}
<div className="flex items-center gap-2 mt-3 ml-10">
<span className="text-[10px] text-muted-foreground">Less</span>
<span className="text-[10px] text-muted-foreground">
{t("less")}
</span>
<div className="h-3 w-3 rounded-sm bg-muted" />
<div className="h-3 w-3 rounded-sm bg-[var(--admin-success)]/20" />
<div className="h-3 w-3 rounded-sm bg-[var(--admin-success)]/55" />
<div className="h-3 w-3 rounded-sm bg-[var(--admin-success)] dark:bg-[var(--admin-success)]" />
<div className="h-3 w-3 rounded-sm bg-[var(--admin-success-strong,var(--admin-success))]" />
<span className="text-[10px] text-muted-foreground">More</span>
<span className="text-[10px] text-muted-foreground">
{t("more")}
</span>
</div>
</div>
</div>
+7 -3
View File
@@ -1,5 +1,6 @@
"use client";
import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
interface RevenueDataPoint {
@@ -9,6 +10,7 @@ interface RevenueDataPoint {
}
export function RevenueChart({ data }: { data: RevenueDataPoint[] }) {
const t = useTranslations("pages.admin.analytics.economy");
const max = Math.max(
1,
...data.flatMap((point) => [point.credits, point.points]),
@@ -16,7 +18,9 @@ export function RevenueChart({ data }: { data: RevenueDataPoint[] }) {
return (
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Catalog Spending</CardTitle>
<CardTitle className="text-sm font-medium">
{t("catalogSpendingTitle")}
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
@@ -32,14 +36,14 @@ export function RevenueChart({ data }: { data: RevenueDataPoint[] }) {
style={{
width: `${Math.max(2, (point.credits / max) * 100)}%`,
}}
title={`${point.credits} credits`}
title={t("creditsTooltip", { count: point.credits })}
/>
<div
className="h-2 rounded bg-[var(--admin-accent)]"
style={{
width: `${Math.max(2, (point.points / max) * 100)}%`,
}}
title={`${point.points} points`}
title={t("pointsTooltip", { count: point.points })}
/>
</div>
</div>
+104 -1
View File
@@ -2026,7 +2026,35 @@
"userPrefix": "user",
"pagination": "Page {page} of {pages} · {total} total",
"next": "Next",
"prev": "Previous"
"prev": "Previous",
"unknownUser": "unknown",
"emptyValue": "-",
"colTime": "Time",
"audit": {
"colTargetId": "Target ID",
"colDetails": "Details",
"colDate": "Date",
"searchPlaceholder": "Search by action or target…",
"changesCount": "{count} changes",
"notAvailable": "N/A"
},
"chat": {
"colMessage": "Message",
"colRoomId": "Room ID",
"searchPlaceholder": "Search by username or message…"
},
"commands": {
"colCommand": "Command",
"colParams": "Params",
"searchPlaceholder": "Search by username, command, or params…"
},
"trades": {
"colUserOne": "User one",
"colUserTwo": "User two",
"colStatus": "Status",
"statusUnknown": "unknown",
"searchPlaceholder": "Search by username…"
}
},
"hubs": {
"newsMedia": "News & media",
@@ -2487,6 +2515,81 @@
"saving": "Saving…",
"cancel": "Cancel"
}
},
"analytics": {
"totalUsers": "Total users",
"onlineNow": "{count} online now",
"weekRegistrations": "Week registrations",
"thisMonth": "{count} this month",
"activeRooms": "Active rooms",
"totalRooms": "{count} total rooms",
"weeklyActivity": "Weekly activity",
"tradesAndBans": "{trades} trades, {bans} bans",
"registrationsChartTitle": "Registrations (30 days)",
"registrationsChartDescription": "New user registrations over the last 30 days",
"chatActivity": "Chat activity",
"messagesLast7Days": "Messages in the last 7 days",
"trades": "Trades",
"tradesLast7Days": "Trades in the last 7 days",
"retention": "Retention",
"usersOnlineOverTotal": "Users online / total",
"activity": {
"chatMessages": "Chat messages",
"commands": "Commands",
"bans": "Bans",
"registrations": "Registrations",
"last7Days": "Last 7 days",
"dailyBreakdownTitle": "Daily breakdown (7 days)",
"colDay": "Day",
"colChats": "Chats",
"colCmds": "Cmds",
"colBans": "Bans",
"colRegs": "Regs",
"mostActiveUsersTitle": "Most active users (7 days)",
"noChatActivity": "No chat activity",
"msgCount": "{count} msgs",
"userFallback": "User #{id}"
},
"economy": {
"creditsInCirculation": "Credits in circulation",
"creditsDescription": "Total credits across all users",
"pixelsInCirculation": "Pixels in circulation",
"pixelsDescription": "Total pixels across all users",
"pointsInCirculation": "Points in circulation",
"pointsDescription": "Total points across all users",
"weeklyTrades": "Weekly trades",
"marketplaceListings": "{count} marketplace listings",
"shopRevenueTitle": "Shop revenue (7d)",
"purchases": "Purchases",
"creditsSpent": "Credits spent",
"pointsSpent": "Points spent",
"marketplaceTitle": "Marketplace",
"activeListings": "Active listings",
"sold7d": "Sold (7d)",
"currencyDistributionTitle": "Currency distribution",
"credits": "Credits",
"pixels": "Pixels",
"points": "Points",
"catalogSpendingTitle": "Catalog spending",
"creditsTooltip": "{count} credits",
"pointsTooltip": "{count} points"
},
"peakHours": {
"title": "Peak hours",
"description": "User activity by day & hour (last 7 days)",
"days": {
"mon": "Mon",
"tue": "Tue",
"wed": "Wed",
"thu": "Thu",
"fri": "Fri",
"sat": "Sat",
"sun": "Sun"
},
"tooltip": "{day} {hour}:00 — {count} users",
"less": "Less",
"more": "More"
}
}
}
}
+104 -1
View File
@@ -1991,7 +1991,35 @@
"userPrefix": "user",
"pagination": "Page {page} of {pages} · {total} total",
"next": "Next",
"prev": "Previous"
"prev": "Previous",
"unknownUser": "sconosciuto",
"emptyValue": "-",
"colTime": "Ora",
"audit": {
"colTargetId": "ID destinazione",
"colDetails": "Dettagli",
"colDate": "Data",
"searchPlaceholder": "Cerca per azione o destinazione…",
"changesCount": "{count} modifiche",
"notAvailable": "N/D"
},
"chat": {
"colMessage": "Messaggio",
"colRoomId": "ID stanza",
"searchPlaceholder": "Cerca per username o messaggio…"
},
"commands": {
"colCommand": "Comando",
"colParams": "Parametri",
"searchPlaceholder": "Cerca per username, comando o parametri…"
},
"trades": {
"colUserOne": "Utente uno",
"colUserTwo": "Utente due",
"colStatus": "Stato",
"statusUnknown": "sconosciuto",
"searchPlaceholder": "Cerca per username…"
}
},
"wordfilter": {
"title": "Filtro parole",
@@ -2453,6 +2481,81 @@
"infoBox": "Configuration settings (ports, timeouts, IDs) do not appear here — use the full settings link. Saved changes are synced to the emulator via RCON.",
"fullSettings": "Full settings"
}
},
"analytics": {
"totalUsers": "Utenti totali",
"onlineNow": "{count} online ora",
"weekRegistrations": "Registrazioni della settimana",
"thisMonth": "{count} questo mese",
"activeRooms": "Stanze attive",
"totalRooms": "{count} stanze totali",
"weeklyActivity": "Attività settimanale",
"tradesAndBans": "{trades} trade, {bans} ban",
"registrationsChartTitle": "Registrazioni (30 giorni)",
"registrationsChartDescription": "Nuove registrazioni utenti negli ultimi 30 giorni",
"chatActivity": "Attività chat",
"messagesLast7Days": "Messaggi negli ultimi 7 giorni",
"trades": "Trade",
"tradesLast7Days": "Trade negli ultimi 7 giorni",
"retention": "Retention",
"usersOnlineOverTotal": "Utenti online / totale",
"activity": {
"chatMessages": "Messaggi chat",
"commands": "Comandi",
"bans": "Ban",
"registrations": "Registrazioni",
"last7Days": "Ultimi 7 giorni",
"dailyBreakdownTitle": "Ripartizione giornaliera (7 giorni)",
"colDay": "Giorno",
"colChats": "Chat",
"colCmds": "Cmd",
"colBans": "Ban",
"colRegs": "Reg",
"mostActiveUsersTitle": "Utenti più attivi (7 giorni)",
"noChatActivity": "Nessuna attività chat",
"msgCount": "{count} msg",
"userFallback": "Utente #{id}"
},
"economy": {
"creditsInCirculation": "Crediti in circolazione",
"creditsDescription": "Crediti totali di tutti gli utenti",
"pixelsInCirculation": "Pixel in circolazione",
"pixelsDescription": "Pixel totali di tutti gli utenti",
"pointsInCirculation": "Punti in circolazione",
"pointsDescription": "Punti totali di tutti gli utenti",
"weeklyTrades": "Trade settimanali",
"marketplaceListings": "{count} annunci marketplace",
"shopRevenueTitle": "Ricavi shop (7g)",
"purchases": "Acquisti",
"creditsSpent": "Crediti spesi",
"pointsSpent": "Punti spesi",
"marketplaceTitle": "Marketplace",
"activeListings": "Annunci attivi",
"sold7d": "Venduti (7g)",
"currencyDistributionTitle": "Distribuzione valute",
"credits": "Crediti",
"pixels": "Pixel",
"points": "Punti",
"catalogSpendingTitle": "Spesa catalogo",
"creditsTooltip": "{count} crediti",
"pointsTooltip": "{count} punti"
},
"peakHours": {
"title": "Ore di punta",
"description": "Attività utenti per giorno e ora (ultimi 7 giorni)",
"days": {
"mon": "lun",
"tue": "mar",
"wed": "mer",
"thu": "gio",
"fri": "ven",
"sat": "sab",
"sun": "dom"
},
"tooltip": "{day} {hour}:00 — {count} utenti",
"less": "Meno",
"more": "Più"
}
}
},
"client": {
+104 -1
View File
@@ -1973,7 +1973,35 @@
"colTimestamp": "Tijdstempel",
"filterByUser": "Filteren op gebruiker…",
"filterByAction": "Filteren op actie…",
"clearFilters": "Filters wissen"
"clearFilters": "Filters wissen",
"unknownUser": "onbekend",
"emptyValue": "-",
"colTime": "Tijd",
"audit": {
"colTargetId": "Doel-ID",
"colDetails": "Details",
"colDate": "Datum",
"searchPlaceholder": "Zoek op actie of doel…",
"changesCount": "{count} wijzigingen",
"notAvailable": "n.v.t."
},
"chat": {
"colMessage": "Bericht",
"colRoomId": "Kamer-ID",
"searchPlaceholder": "Zoek op gebruikersnaam of bericht…"
},
"commands": {
"colCommand": "Commando",
"colParams": "Parameters",
"searchPlaceholder": "Zoek op gebruikersnaam, commando of parameters…"
},
"trades": {
"colUserOne": "Gebruiker één",
"colUserTwo": "Gebruiker twee",
"colStatus": "Status",
"statusUnknown": "onbekend",
"searchPlaceholder": "Zoek op gebruikersnaam…"
}
},
"wordfilter": {
"title": "Woordfilter",
@@ -2450,6 +2478,81 @@
"colReported": "Gerapporteerd",
"colMod": "Mod",
"colStatus": "Status"
},
"analytics": {
"totalUsers": "Totaal gebruikers",
"onlineNow": "{count} nu online",
"weekRegistrations": "Registraties deze week",
"thisMonth": "{count} deze maand",
"activeRooms": "Actieve kamers",
"totalRooms": "{count} kamers totaal",
"weeklyActivity": "Wekelijkse activiteit",
"tradesAndBans": "{trades} trades, {bans} bans",
"registrationsChartTitle": "Registraties (30 dagen)",
"registrationsChartDescription": "Nieuwe gebruikersregistraties van de laatste 30 dagen",
"chatActivity": "Chatactiviteit",
"messagesLast7Days": "Berichten in de laatste 7 dagen",
"trades": "Trades",
"tradesLast7Days": "Trades in de laatste 7 dagen",
"retention": "Retentie",
"usersOnlineOverTotal": "Gebruikers online / totaal",
"activity": {
"chatMessages": "Chatberichten",
"commands": "Commando's",
"bans": "Bans",
"registrations": "Registraties",
"last7Days": "Laatste 7 dagen",
"dailyBreakdownTitle": "Dagelijkse uitsplitsing (7 dagen)",
"colDay": "Dag",
"colChats": "Chats",
"colCmds": "Cmds",
"colBans": "Bans",
"colRegs": "Regs",
"mostActiveUsersTitle": "Meest actieve gebruikers (7 dagen)",
"noChatActivity": "Geen chatactiviteit",
"msgCount": "{count} msgs",
"userFallback": "Gebruiker #{id}"
},
"economy": {
"creditsInCirculation": "Credits in omloop",
"creditsDescription": "Totaal credits van alle gebruikers",
"pixelsInCirculation": "Pixels in omloop",
"pixelsDescription": "Totaal pixels van alle gebruikers",
"pointsInCirculation": "Punten in omloop",
"pointsDescription": "Totaal punten van alle gebruikers",
"weeklyTrades": "Wekelijkse trades",
"marketplaceListings": "{count} marketplace-advertenties",
"shopRevenueTitle": "Shopomzet (7d)",
"purchases": "Aankopen",
"creditsSpent": "Credits uitgegeven",
"pointsSpent": "Punten uitgegeven",
"marketplaceTitle": "Marketplace",
"activeListings": "Actieve advertenties",
"sold7d": "Verkocht (7d)",
"currencyDistributionTitle": "Valutaverdeling",
"credits": "Credits",
"pixels": "Pixels",
"points": "Punten",
"catalogSpendingTitle": "Catalogusuitgaven",
"creditsTooltip": "{count} credits",
"pointsTooltip": "{count} punten"
},
"peakHours": {
"title": "Piekuren",
"description": "Gebruikersactiviteit per dag & uur (laatste 7 dagen)",
"days": {
"mon": "ma",
"tue": "di",
"wed": "wo",
"thu": "do",
"fri": "vr",
"sat": "za",
"sun": "zo"
},
"tooltip": "{day} {hour}:00 — {count} gebruikers",
"less": "Minder",
"more": "Meer"
}
}
}
}