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>

src/app/admin/events/event-form.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useForm } from "react-hook-form";
 import { createEvent, updateEvent } from "@/actions/events";
 import { Button } from "@/components/ui/button";
@@ -47,6 +48,7 @@ interface EventFormValues {
 }
 
 export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
+	const t = useTranslations("pages.admin.events");
 	const { run, isPending } = useServerAction();
 	const isEditing = !!defaultValues?.id;
 
@@ -69,12 +71,12 @@ export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
 						id: number;
 					}),
 				{
-					successMessage: "Event updated!",
+					successMessage: t("toastUpdated"),
 				},
 			);
 		} else {
 			run(() => createEvent(data as CreateEventInput), {
-				successMessage: "Event created!",
+				successMessage: t("toastCreated"),
 				onSuccess: (result) => {
 					const data = result.data as Record<string, unknown> | undefined;
 					if (data?.id) {
@@ -89,12 +91,14 @@ export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
 		<form onSubmit={form.handleSubmit(onSubmit)}>
 			<Card>
 				<CardHeader>
-					<CardTitle>{isEditing ? "Edit Event" : "Event Details"}</CardTitle>
+					<CardTitle>
+						{isEditing ? t("formEditTitle") : t("formDetailsTitle")}
+					</CardTitle>
 				</CardHeader>
 				<CardContent className="space-y-4">
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
 						<div className="space-y-2">
-							<Label htmlFor="title">Title</Label>
+							<Label htmlFor="title">{t("formTitle")}</Label>
 							<Input id="title" {...form.register("title")} />
 							{form.formState.errors.title && (
 								<p className="text-sm text-destructive">
@@ -104,18 +108,18 @@ export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
 						</div>
 
 						<div className="space-y-2">
-							<Label htmlFor="typeId">Event Type</Label>
+							<Label htmlFor="typeId">{t("formEventType")}</Label>
 							<Select
 								value={String(form.watch("typeId"))}
 								onValueChange={(v) => form.setValue("typeId", Number(v))}
 							>
 								<SelectTrigger>
-									<SelectValue placeholder="Select type" />
+									<SelectValue placeholder={t("formSelectType")} />
 								</SelectTrigger>
 								<SelectContent>
-									{eventTypes.map((t) => (
-										<SelectItem key={t.id} value={String(t.id)}>
-											{t.name}
+									{eventTypes.map((et) => (
+										<SelectItem key={et.id} value={String(et.id)}>
+											{et.name}
 										</SelectItem>
 									))}
 								</SelectContent>
@@ -124,7 +128,7 @@ export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
 					</div>
 
 					<div className="space-y-2">
-						<Label htmlFor="description">Description</Label>
+						<Label htmlFor="description">{t("formDescription")}</Label>
 						<Textarea
 							id="description"
 							rows={4}
@@ -134,48 +138,48 @@ export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
 
 					<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
 						<div className="space-y-2">
-							<Label>Starts At</Label>
+							<Label>{t("formStartsAt")}</Label>
 							<DateTimePicker
 								value={form.watch("startsAt")}
 								onChange={(d) =>
 									form.setValue("startsAt", d, { shouldDirty: true })
 								}
-								placeholder="Select start date"
+								placeholder={t("formSelectStart")}
 							/>
 						</div>
 						<div className="space-y-2">
-							<Label>Ends At</Label>
+							<Label>{t("formEndsAt")}</Label>
 							<DateTimePicker
 								value={form.watch("endsAt")}
 								onChange={(d) =>
 									form.setValue("endsAt", d, { shouldDirty: true })
 								}
-								placeholder="Select end date"
+								placeholder={t("formSelectEnd")}
 							/>
 						</div>
 						<div className="space-y-2">
-							<Label htmlFor="maxPlayers">Max Players</Label>
+							<Label htmlFor="maxPlayers">{t("formMaxPlayers")}</Label>
 							<Input
 								id="maxPlayers"
 								type="number"
 								{...form.register("maxPlayers")}
-								placeholder="Unlimited"
+								placeholder={t("formUnlimited")}
 							/>
 						</div>
 					</div>
 
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
 						<div className="space-y-2">
-							<Label htmlFor="roomId">Room ID</Label>
+							<Label htmlFor="roomId">{t("formRoomId")}</Label>
 							<Input
 								id="roomId"
 								type="number"
 								{...form.register("roomId")}
-								placeholder="Optional"
+								placeholder={t("formOptional")}
 							/>
 						</div>
 						<div className="space-y-2">
-							<Label htmlFor="status">Status</Label>
+							<Label htmlFor="status">{t("colStatus")}</Label>
 							<Select
 								value={form.watch("status")}
 								onValueChange={(v) =>
@@ -186,17 +190,23 @@ export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
 									<SelectValue />
 								</SelectTrigger>
 								<SelectContent>
-									<SelectItem value="draft">Draft</SelectItem>
-									<SelectItem value="published">Published</SelectItem>
-									<SelectItem value="cancelled">Cancelled</SelectItem>
-									<SelectItem value="completed">Completed</SelectItem>
+									<SelectItem value="draft">{t("statusDraft")}</SelectItem>
+									<SelectItem value="published">
+										{t("statusPublished")}
+									</SelectItem>
+									<SelectItem value="cancelled">
+										{t("statusCancelled")}
+									</SelectItem>
+									<SelectItem value="completed">
+										{t("statusCompleted")}
+									</SelectItem>
 								</SelectContent>
 							</Select>
 						</div>
 					</div>
 
 					<div className="space-y-2">
-						<Label htmlFor="image">Image URL</Label>
+						<Label htmlFor="image">{t("formImageUrl")}</Label>
 						<Input
 							id="image"
 							{...form.register("image")}
@@ -207,10 +217,10 @@ export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
 					<div className="flex justify-end">
 						<Button type="submit" disabled={isPending}>
 							{isPending
-								? "Saving..."
+								? t("formSaving")
 								: isEditing
-									? "Update Event"
-									: "Create Event"}
+									? t("formUpdate")
+									: t("formCreate")}
 						</Button>
 					</div>
 				</CardContent>