i18n events/polls detail pages, forms, and empty sections.

Align detail headers with admin chrome, translate stats/forms/breadcrumbs, and use admin-empty for prizes, winners, registrations, and questions.

Co-authored-by: Cursor <[email protected]>

src/app/admin/events/[id]/event-prizes.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Plus, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { addEventPrize, deleteEventPrize } from "@/actions/events";
 import { Badge } from "@/components/ui/badge";
@@ -38,6 +39,7 @@ interface Props {
 }
 
 export function EventPrizesManager({ eventId, prizes }: Props) {
+	const t = useTranslations("pages.admin.events");
 	const { run, isPending } = useServerAction();
 	const [showForm, setShowForm] = useState(false);
 	const [form, setForm] = useState<EventPrizeInput>({
@@ -70,9 +72,9 @@ export function EventPrizesManager({ eventId, prizes }: Props) {
 	return (
 		<Card>
 			<CardHeader className="flex flex-row items-center justify-between">
-				<CardTitle>Prizes</CardTitle>
+				<CardTitle>{t("statPrizes")}</CardTitle>
 				<Button size="sm" onClick={() => setShowForm(!showForm)}>
-					<Plus className="h-4 w-4 mr-1" /> Add Prize
+					<Plus className="h-4 w-4 mr-1" /> {t("addPrize")}
 				</Button>
 			</CardHeader>
 			<CardContent className="space-y-4">
@@ -159,9 +161,7 @@ export function EventPrizesManager({ eventId, prizes }: Props) {
 				)}
 
 				{prizes.length === 0 && !showForm && (
-					<p className="text-sm text-muted-foreground text-center py-4">
-						No prizes configured yet.
-					</p>
+					<div className="admin-empty">{t("noPrizes")}</div>
 				)}
 
 				{prizes.map((prize) => (

src/app/admin/events/[id]/event-registrations.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 interface Registration {
@@ -14,16 +15,18 @@ interface Props {
 }
 
 export function EventRegistrations({ registrations }: Props) {
+	const t = useTranslations("pages.admin.events");
+
 	return (
 		<Card>
 			<CardHeader>
-				<CardTitle>Registrations ({registrations.length})</CardTitle>
+				<CardTitle>
+					{t("registrationsTitle", { count: registrations.length })}
+				</CardTitle>
 			</CardHeader>
 			<CardContent>
 				{registrations.length === 0 ? (
-					<p className="text-sm text-muted-foreground text-center py-4">
-						No registrations yet.
-					</p>
+					<div className="admin-empty">{t("noRegistrations")}</div>
 				) : (
 					<div className="divide-y max-h-[400px] overflow-y-auto">
 						{registrations.map((r) => (

src/app/admin/events/[id]/event-winners.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { addEventWinner } from "@/actions/events";
 import { Button } from "@/components/ui/button";
@@ -23,6 +24,7 @@ interface Props {
 }
 
 export function EventWinnersManager({ eventId, winners }: Props) {
+	const t = useTranslations("pages.admin.events");
 	const { run, isPending } = useServerAction();
 	const [showForm, setShowForm] = useState(false);
 	const [userId, setUserId] = useState("");
@@ -43,9 +45,9 @@ export function EventWinnersManager({ eventId, winners }: Props) {
 	return (
 		<Card>
 			<CardHeader className="flex flex-row items-center justify-between">
-				<CardTitle>Winners</CardTitle>
+				<CardTitle>{t("statWinners")}</CardTitle>
 				<Button size="sm" onClick={() => setShowForm(!showForm)}>
-					<Plus className="h-4 w-4 mr-1" /> Add Winner
+					<Plus className="h-4 w-4 mr-1" /> {t("addWinner")}
 				</Button>
 			</CardHeader>
 			<CardContent className="space-y-3">
@@ -80,9 +82,7 @@ export function EventWinnersManager({ eventId, winners }: Props) {
 				)}
 
 				{winners.length === 0 && !showForm && (
-					<p className="text-sm text-muted-foreground text-center py-4">
-						No winners yet.
-					</p>
+					<div className="admin-empty">{t("noWinners")}</div>
 				)}
 
 				<div className="divide-y">

src/app/admin/events/[id]/page.tsx

@@ -1,4 +1,5 @@
 import { CalendarDays, Gift, Trophy, Users } from "lucide-react";
+import { getTranslations } from "next-intl/server";
 import { notFound, redirect } from "next/navigation";
 import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
 import { Badge } from "@/components/ui/badge";
@@ -24,6 +25,9 @@ export default async function EventDetailPage({
 	const eventId = parseInt(id, 10);
 	if (Number.isNaN(eventId)) notFound();
 
+	const t = await getTranslations("pages.admin.events");
+	const tHubs = await getTranslations("pages.admin.hubs");
+
 	const event = await prisma.websiteEvent.findUnique({
 		where: { id: eventId },
 		include: {
@@ -55,17 +59,26 @@ export default async function EventDetailPage({
 			: [];
 	const userMap = new Map(users.map((u) => [u.id, u.username]));
 
+	const statusLabel: Record<string, string> = {
+		published: t("statusPublished"),
+		draft: t("statusDraft"),
+		cancelled: t("statusCancelled"),
+		completed: t("statusCompleted"),
+	};
+
 	return (
 		<div className="space-y-6">
 			<div>
 				<AdminBreadcrumb
 					items={[
-						{ label: "Events", href: "/admin/events" },
+						{ label: tHubs("tabs.events"), href: "/admin/events" },
 						{ label: event.title },
 					]}
 				/>
 				<div className="flex items-center gap-3">
-					<h1 className="text-3xl font-bold tracking-tight">{event.title}</h1>
+					<h1 className="m-0 text-2xl font-extrabold text-[var(--admin-text)]">
+						{event.title}
+					</h1>
 					<Badge
 						variant={
 							event.status === "published"
@@ -75,10 +88,10 @@ export default async function EventDetailPage({
 									: "secondary"
 						}
 					>
-						{event.status}
+						{statusLabel[event.status] ?? event.status}
 					</Badge>
 				</div>
-				<p className="text-muted-foreground">
+				<p className="m-0 mt-1 text-sm text-[var(--admin-text-muted)]">
 					{event.type.name} &middot; {new Date(event.startsAt).toLocaleString()}
 				</p>
 			</div>
@@ -87,7 +100,9 @@ export default async function EventDetailPage({
 			<div className="grid gap-4 md:grid-cols-4">
 				<Card>
 					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">Registrations</CardTitle>
+						<CardTitle className="text-sm font-medium">
+							{t("statRegistrations")}
+						</CardTitle>
 						<Users className="h-4 w-4 text-muted-foreground" />
 					</CardHeader>
 					<CardContent>
@@ -96,14 +111,14 @@ export default async function EventDetailPage({
 						</div>
 						{event.maxPlayers && (
 							<p className="text-xs text-muted-foreground">
-								Max: {event.maxPlayers}
+								{t("maxPlayers", { count: event.maxPlayers })}
 							</p>
 						)}
 					</CardContent>
 				</Card>
 				<Card>
 					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">Prizes</CardTitle>
+						<CardTitle className="text-sm font-medium">{t("statPrizes")}</CardTitle>
 						<Gift className="h-4 w-4 text-muted-foreground" />
 					</CardHeader>
 					<CardContent>
@@ -112,7 +127,9 @@ export default async function EventDetailPage({
 				</Card>
 				<Card>
 					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">Winners</CardTitle>
+						<CardTitle className="text-sm font-medium">
+							{t("statWinners")}
+						</CardTitle>
 						<Trophy className="h-4 w-4 text-muted-foreground" />
 					</CardHeader>
 					<CardContent>
@@ -121,16 +138,20 @@ export default async function EventDetailPage({
 				</Card>
 				<Card>
 					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">Time</CardTitle>
+						<CardTitle className="text-sm font-medium">{t("statTime")}</CardTitle>
 						<CalendarDays className="h-4 w-4 text-muted-foreground" />
 					</CardHeader>
 					<CardContent>
 						<div className="text-sm font-medium">
-							{new Date(event.startsAt) > new Date() ? "Upcoming" : "Past"}
+							{new Date(event.startsAt) > new Date()
+								? t("timeUpcoming")
+								: t("timePast")}
 						</div>
 						{event.endsAt && (
 							<p className="text-xs text-muted-foreground">
-								Ends: {new Date(event.endsAt).toLocaleString()}
+								{t("endsAt", {
+									date: new Date(event.endsAt).toLocaleString(),
+								})}
 							</p>
 						)}
 					</CardContent>
@@ -168,7 +189,7 @@ export default async function EventDetailPage({
 				eventId={event.id}
 				winners={event.winners.map((w) => ({
 					...w,
-					username: userMap.get(w.userId) ?? `User #${w.userId}`,
+					username: userMap.get(w.userId) ?? t("userFallback", { id: w.userId }),
 				}))}
 			/>
 
@@ -176,7 +197,7 @@ export default async function EventDetailPage({
 			<EventRegistrations
 				registrations={event.registrations.map((r) => ({
 					...r,
-					username: userMap.get(r.userId) ?? `User #${r.userId}`,
+					username: userMap.get(r.userId) ?? t("userFallback", { id: r.userId }),
 				}))}
 			/>
 		</div>