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]>

src/app/admin/analytics/activity/page.tsx

@@ -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>
 								))}

src/app/admin/analytics/economy/page.tsx

@@ -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>

src/app/admin/analytics/page.tsx

@@ -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>

src/app/admin/logs/audit/audit-table.tsx

@@ -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"
 		/>
 	);

src/app/admin/logs/chat/chat-table.tsx

@@ -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"
 		/>
 	);

src/app/admin/logs/commands/commands-table.tsx

@@ -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"
 		/>
 	);

src/app/admin/logs/page.tsx

@@ -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,

src/app/admin/logs/trades/trades-table.tsx

@@ -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")}
 		/>
 	);
 }