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/polls/[id]/page.tsx

@@ -1,3 +1,4 @@
+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";
@@ -22,6 +23,9 @@ export default async function PollDetailPage({
 	const pollId = parseInt(id, 10);
 	if (Number.isNaN(pollId)) notFound();
 
+	const t = await getTranslations("pages.admin.polls");
+	const tHubs = await getTranslations("pages.admin.hubs");
+
 	const poll = await prisma.websitePoll.findUnique({
 		where: { id: pollId },
 		include: {
@@ -40,17 +44,25 @@ export default async function PollDetailPage({
 		poll.questions.flatMap((q) => q.votes.map((v) => v.userId)),
 	).size;
 
+	const statusLabel: Record<string, string> = {
+		active: t("statusActive"),
+		draft: t("statusDraft"),
+		closed: t("statusClosed"),
+	};
+
 	return (
 		<div className="space-y-6">
 			<div>
 				<AdminBreadcrumb
 					items={[
-						{ label: "Polls", href: "/admin/polls" },
+						{ label: tHubs("tabs.polls"), href: "/admin/polls" },
 						{ label: poll.title },
 					]}
 				/>
 				<div className="flex items-center gap-3">
-					<h1 className="text-3xl font-bold tracking-tight">{poll.title}</h1>
+					<h1 className="m-0 text-2xl font-extrabold text-[var(--admin-text)]">
+						{poll.title}
+					</h1>
 					<Badge
 						variant={
 							poll.status === "active"
@@ -60,11 +72,13 @@ export default async function PollDetailPage({
 									: "secondary"
 						}
 					>
-						{poll.status}
+						{statusLabel[poll.status] ?? poll.status}
 					</Badge>
 				</div>
 				{poll.description && (
-					<p className="text-muted-foreground">{poll.description}</p>
+					<p className="m-0 mt-1 text-sm text-[var(--admin-text-muted)]">
+						{poll.description}
+					</p>
 				)}
 			</div>
 
@@ -72,7 +86,9 @@ export default async function PollDetailPage({
 			<div className="grid gap-4 md:grid-cols-3">
 				<Card>
 					<CardHeader className="pb-2">
-						<CardTitle className="text-sm font-medium">Total Voters</CardTitle>
+						<CardTitle className="text-sm font-medium">
+							{t("statVoters")}
+						</CardTitle>
 					</CardHeader>
 					<CardContent>
 						<div className="text-2xl font-bold">{totalVoters}</div>
@@ -80,7 +96,9 @@ export default async function PollDetailPage({
 				</Card>
 				<Card>
 					<CardHeader className="pb-2">
-						<CardTitle className="text-sm font-medium">Questions</CardTitle>
+						<CardTitle className="text-sm font-medium">
+							{t("statQuestions")}
+						</CardTitle>
 					</CardHeader>
 					<CardContent>
 						<div className="text-2xl font-bold">{poll.questions.length}</div>
@@ -88,7 +106,9 @@ export default async function PollDetailPage({
 				</Card>
 				<Card>
 					<CardHeader className="pb-2">
-						<CardTitle className="text-sm font-medium">Total Votes</CardTitle>
+						<CardTitle className="text-sm font-medium">
+							{t("statVotes")}
+						</CardTitle>
 					</CardHeader>
 					<CardContent>
 						<div className="text-2xl font-bold">

src/app/admin/polls/[id]/poll-questions.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { GripVertical, Pencil, Plus, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import {
 	addPollQuestion,
@@ -37,6 +38,7 @@ interface Props {
 type PollQuestionUpdateInput = PollQuestionInput & { id: number };
 
 export function PollQuestionsManager({ pollId, questions }: Props) {
+	const t = useTranslations("pages.admin.polls");
 	const { run, isPending } = useServerAction();
 	const [showForm, setShowForm] = useState(false);
 	const [editingId, setEditingId] = useState<number | null>(null);
@@ -96,7 +98,9 @@ export function PollQuestionsManager({ pollId, questions }: Props) {
 	return (
 		<Card>
 			<CardHeader className="flex flex-row items-center justify-between">
-				<CardTitle>Questions ({questions.length})</CardTitle>
+				<CardTitle>
+					{t("questionsTitle", { count: questions.length })}
+				</CardTitle>
 				<Button
 					size="sm"
 					onClick={() => {
@@ -104,7 +108,7 @@ export function PollQuestionsManager({ pollId, questions }: Props) {
 						setShowForm(!showForm);
 					}}
 				>
-					<Plus className="h-4 w-4 mr-1" /> Add Question
+					<Plus className="h-4 w-4 mr-1" /> {t("addQuestion")}
 				</Button>
 			</CardHeader>
 			<CardContent className="space-y-4">
@@ -177,9 +181,7 @@ export function PollQuestionsManager({ pollId, questions }: Props) {
 				)}
 
 				{questions.length === 0 && !showForm && (
-					<p className="text-sm text-muted-foreground text-center py-4">
-						No questions yet. Add your first question above.
-					</p>
+					<div className="admin-empty">{t("noQuestions")}</div>
 				)}
 
 				<div className="space-y-2">

src/app/admin/polls/[id]/poll-results.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 interface QuestionResult {
@@ -14,10 +15,12 @@ interface Props {
 }
 
 export function PollResultsView({ questions }: Props) {
+	const t = useTranslations("pages.admin.polls");
+
 	return (
 		<Card>
 			<CardHeader>
-				<CardTitle>Results</CardTitle>
+				<CardTitle>{t("resultsTitle")}</CardTitle>
 			</CardHeader>
 			<CardContent className="space-y-6">
 				{questions.map((q) => {

src/app/admin/polls/poll-form.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useForm } from "react-hook-form";
 import { createPoll, updatePoll } from "@/actions/polls";
 import { Button } from "@/components/ui/button";
@@ -34,6 +35,7 @@ interface PollFormValues {
 }
 
 export function PollForm({ defaultValues }: PollFormProps) {
+	const t = useTranslations("pages.admin.polls");
 	const { run, isPending } = useServerAction();
 	const isEditing = !!defaultValues?.id;
 
@@ -56,12 +58,12 @@ export function PollForm({ defaultValues }: PollFormProps) {
 						id: number;
 					}),
 				{
-					successMessage: "Poll updated!",
+					successMessage: t("toastUpdated"),
 				},
 			);
 		} else {
 			run(() => createPoll(data as CreatePollInput), {
-				successMessage: "Poll created!",
+				successMessage: t("toastCreated"),
 				onSuccess: (result) => {
 					const data = result.data as Record<string, unknown> | undefined;
 					if (data?.id) {
@@ -76,11 +78,13 @@ export function PollForm({ defaultValues }: PollFormProps) {
 		<form onSubmit={form.handleSubmit(onSubmit)}>
 			<Card>
 				<CardHeader>
-					<CardTitle>{isEditing ? "Edit Poll" : "Poll Details"}</CardTitle>
+					<CardTitle>
+						{isEditing ? t("formEditTitle") : t("formDetailsTitle")}
+					</CardTitle>
 				</CardHeader>
 				<CardContent className="space-y-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">
@@ -90,7 +94,7 @@ export function PollForm({ defaultValues }: PollFormProps) {
 					</div>
 
 					<div className="space-y-2">
-						<Label htmlFor="description">Description</Label>
+						<Label htmlFor="description">{t("formDescription")}</Label>
 						<Textarea
 							id="description"
 							rows={3}
@@ -100,7 +104,7 @@ export function PollForm({ defaultValues }: PollFormProps) {
 
 					<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
 						<div className="space-y-2">
-							<Label htmlFor="status">Status</Label>
+							<Label htmlFor="status">{t("colStatus")}</Label>
 							<Select
 								value={form.watch("status")}
 								onValueChange={(v) =>
@@ -111,30 +115,30 @@ export function PollForm({ defaultValues }: PollFormProps) {
 									<SelectValue />
 								</SelectTrigger>
 								<SelectContent>
-									<SelectItem value="draft">Draft</SelectItem>
-									<SelectItem value="active">Active</SelectItem>
-									<SelectItem value="closed">Closed</SelectItem>
+									<SelectItem value="draft">{t("statusDraft")}</SelectItem>
+									<SelectItem value="active">{t("statusActive")}</SelectItem>
+									<SelectItem value="closed">{t("statusClosed")}</SelectItem>
 								</SelectContent>
 							</Select>
 						</div>
 						<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>
@@ -145,7 +149,7 @@ export function PollForm({ defaultValues }: PollFormProps) {
 								checked={form.watch("showResults") === 1}
 								onCheckedChange={(v) => form.setValue("showResults", v ? 1 : 0)}
 							/>
-							<Label>Show results to voters</Label>
+							<Label>{t("formShowResults")}</Label>
 						</div>
 						<div className="flex items-center gap-2">
 							<Switch
@@ -154,17 +158,17 @@ export function PollForm({ defaultValues }: PollFormProps) {
 									form.setValue("multipleChoice", v ? 1 : 0)
 								}
 							/>
-							<Label>Allow multiple answers</Label>
+							<Label>{t("formAllowMultiple")}</Label>
 						</div>
 					</div>
 
 					<div className="flex justify-end">
 						<Button type="submit" disabled={isPending}>
 							{isPending
-								? "Saving..."
+								? t("formSaving")
 								: isEditing
-									? "Update Poll"
-									: "Create Poll"}
+									? t("formUpdate")
+									: t("formCreate")}
 						</Button>
 					</div>
 				</CardContent>