Migrate tickets and CFH lists to DataTable; confirm destructive mod actions.

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

src/app/admin/moderation/actions/mod-actions-client.tsx

@@ -19,6 +19,7 @@ import {
 	quickRoomKick,
 	quickUnmute,
 } from "@/actions/moderation";
+import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -27,24 +28,65 @@ import { useServerAction } from "@/hooks/use-server-action";
 
 export function ModActionsClient() {
 	const { run, isPending } = useServerAction();
+	const { confirm, dialog: confirmDialog } = useConfirmDialog();
 
-	// User actions
 	const [userId, setUserId] = useState("");
 	const [muteDuration, setMuteDuration] = useState("10");
 	const [alertMessage, setAlertMessage] = useState("");
-
-	// Room actions
 	const [roomId, setRoomId] = useState("");
-
-	// Broadcast
 	const [broadcastMsg, setBroadcastMsg] = useState("");
 
 	const uid = parseInt(userId, 10);
 	const rid = parseInt(roomId, 10);
 
+	async function handleKick() {
+		const ok = await confirm({
+			title: "Kick user",
+			description: `Disconnect user #${uid}?`,
+			confirmLabel: "Kick",
+		});
+		if (!ok) return;
+		run(() => quickKick({ userId: uid }), {
+			successMessage: "User disconnected",
+		});
+	}
+
+	async function handleRoomKick() {
+		const ok = await confirm({
+			title: "Kick all from room",
+			description: `Kick every user from room #${rid}?`,
+			confirmLabel: "Kick all",
+		});
+		if (!ok) return;
+		run(() => quickRoomKick({ roomId: rid }), {
+			successMessage: "All users kicked from room",
+		});
+	}
+
+	async function handleHotelBroadcast() {
+		const ok = await confirm({
+			title: "Hotel-wide alert",
+			description: "Send this alert to everyone in the hotel?",
+			confirmLabel: "Send",
+			variant: "default",
+		});
+		if (!ok) return;
+		run(
+			() =>
+				broadcastAlert({
+					message: broadcastMsg.trim(),
+					type: "hotel",
+				}),
+			{
+				successMessage: "Hotel alert sent!",
+				onSuccess: () => setBroadcastMsg(""),
+			},
+		);
+	}
+
 	return (
 		<div className="grid gap-6 lg:grid-cols-2">
-			{/* User Actions */}
+			{confirmDialog}
 			<Card>
 				<CardHeader>
 					<CardTitle className="text-sm flex items-center gap-2">
@@ -70,11 +112,7 @@ export function ModActionsClient() {
 							variant="destructive"
 							size="sm"
 							disabled={isPending || !uid}
-							onClick={() =>
+							onClick={handleKick}
-								run(() => quickKick({ userId: uid }), {
-									successMessage: "User disconnected",
-								})
-							}
 						>
 							{isPending ? (
 								<Loader2 className="mr-1 h-3 w-3 animate-spin" />
@@ -159,7 +197,6 @@ export function ModActionsClient() {
 				</CardContent>
 			</Card>
 
-			{/* Room Actions */}
 			<div className="space-y-6">
 				<Card>
 					<CardHeader>
@@ -185,18 +222,13 @@ export function ModActionsClient() {
 							size="sm"
 							className="w-full"
 							disabled={isPending || !rid}
-							onClick={() =>
+							onClick={handleRoomKick}
-								run(() => quickRoomKick({ roomId: rid }), {
-									successMessage: "All users kicked from room",
-								})
-							}
 						>
 							<Zap className="mr-1 h-3 w-3" /> Kick All From Room
 						</Button>
 					</CardContent>
 				</Card>
 
-				{/* Broadcast */}
 				<Card>
 					<CardHeader>
 						<CardTitle className="text-sm flex items-center gap-2">
@@ -216,19 +248,7 @@ export function ModActionsClient() {
 							<Button
 								size="sm"
 								disabled={isPending || !broadcastMsg.trim()}
-								onClick={() => {
+								onClick={handleHotelBroadcast}
-									run(
-										() =>
-											broadcastAlert({
-												message: broadcastMsg.trim(),
-												type: "hotel",
-											}),
-										{
-											successMessage: "Hotel alert sent!",
-											onSuccess: () => setBroadcastMsg(""),
-										},
-									);
-								}}
 							>
 								<Megaphone className="mr-1 h-3 w-3" /> Hotel Alert
 							</Button>

src/app/admin/moderation/cfh/cfh-table.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { DataTable } from "@/components/admin/data-table";
+import { Badge } from "@/components/ui/badge";
+import type { DataTableColumn, PaginatedResult } from "@/types";
+
+export interface CfhRow {
+	id: number;
+	issue: string;
+	roomId: number;
+	when: string;
+	sender: string;
+	senderId: number;
+	reported: string;
+	reportedId: number;
+	mod: string;
+	state: number;
+	stateLabel: string;
+}
+
+export function CfhTable({ data }: { data: PaginatedResult<CfhRow> }) {
+	const t = useTranslations("pages.admin.cfh");
+
+	const columns: DataTableColumn<CfhRow>[] = [
+		{ key: "id", label: t("colId"), sortable: true },
+		{
+			key: "issue",
+			label: t("colIssue"),
+			sortable: true,
+			render: (_value, row) => (
+				<div className="min-w-0">
+					<Link
+						href={`/admin/moderation/cfh/${row.id}`}
+						className="text-sm font-medium truncate block hover:underline"
+					>
+						{row.issue || t("noDescription")}
+					</Link>
+					<p className="text-[10px] text-muted-foreground">
+						{t("roomMeta", { room: row.roomId, when: row.when })}
+					</p>
+				</div>
+			),
+		},
+		{
+			key: "sender",
+			label: t("colSender"),
+			sortable: true,
+			render: (_value, row) =>
+				row.senderId ? (
+					<Link
+						href={`/admin/users/${row.senderId}`}
+						className="hover:underline"
+					>
+						{row.sender}
+					</Link>
+				) : (
+					"—"
+				),
+		},
+		{
+			key: "reported",
+			label: t("colReported"),
+			sortable: true,
+			render: (_value, row) =>
+				row.reportedId ? (
+					<Link
+						href={`/admin/users/${row.reportedId}`}
+						className="font-medium hover:underline"
+					>
+						{row.reported}
+					</Link>
+				) : (
+					"—"
+				),
+		},
+		{ key: "mod", label: t("colMod"), sortable: true },
+		{
+			key: "state",
+			label: t("colStatus"),
+			sortable: true,
+			filterKey: "filter_state",
+			filterOptions: [
+				{ label: t("stateOpen"), value: "0" },
+				{ label: t("statePicked"), value: "1" },
+				{ label: t("stateClosed"), value: "2" },
+			],
+			render: (_value, row) => {
+				const variant =
+					row.state === 0
+						? "destructive"
+						: row.state === 1
+							? "default"
+							: "secondary";
+				return (
+					<Badge variant={variant} className="text-[0.7rem]">
+						{row.stateLabel}
+					</Badge>
+				);
+			},
+		},
+	];
+
+	return (
+		<DataTable
+			data={data}
+			columns={columns}
+			searchPlaceholder={t("searchPlaceholder")}
+			presets={[
+				{ label: t("stateOpen"), params: { filter_state: "0" } },
+				{ label: t("statePicked"), params: { filter_state: "1" } },
+				{ label: t("stateClosed"), params: { filter_state: "2" } },
+			]}
+		/>
+	);
+}

src/app/admin/moderation/cfh/page.tsx

@@ -1,186 +1,157 @@
-import { AlertTriangle, CheckCircle2, Clock, Radio } from "lucide-react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
-import { Badge } from "@/components/ui/badge";
+import { getTranslations } from "next-intl/server";
+import type { Prisma } from "@/generated/prisma/client";
+import { calcPagination, parseListParams } from "@/lib/admin-helpers";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
+import { CfhTable, type CfhRow } from "./cfh-table";
 
-const CFH_STATES: Record<
+export const dynamic = "force-dynamic";
-	number,
-	{ label: string; class: string; icon: typeof AlertTriangle }
-> = {
-	0: {
-		label: "Open",
-		class: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)]",
-		icon: AlertTriangle,
-	},
-	1: {
-		label: "Picked",
-		class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
-		icon: Clock,
-	},
-	2: {
-		label: "Closed",
-		class: "bg-muted text-muted-foreground",
-		icon: CheckCircle2,
-	},
-};
 
-interface PageProps {
+export default async function CfhListPage({
-	searchParams: Promise<{ state?: string; page?: string }>;
+	searchParams,
-}
+}: {
-
+	searchParams: Promise<Record<string, string>>;
-export default async function CfhListPage({ searchParams }: PageProps) {
+}) {
 	const { session, permissions } = await getAdminContext();
-	if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank))
+	if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank)) {
 		redirect("/admin");
+	}
 
-	const sp = await searchParams;
+	const t = await getTranslations("pages.admin.cfh");
-	const stateFilter = sp.state !== undefined ? Number(sp.state) : -1;
+	const raw = await searchParams;
-	const page = Math.max(1, Number(sp.page) || 1);
+	const parsed = parseListParams(new URLSearchParams(raw));
-	const perPage = 25;
+	const stateRaw = raw.filter_state ?? raw.state;
+	const stateFilter =
+		stateRaw !== undefined && stateRaw !== "" ? Number(stateRaw) : -1;
 
-	const where = stateFilter >= 0 ? { state: stateFilter } : {};
+	const conditions: Prisma.SupportTicketsWhereInput[] = [];
+	if (stateFilter >= 0) {
+		conditions.push({ state: stateFilter });
+	}
 
-	const [tickets, total] = await Promise.all([
+	if (parsed.search.trim()) {
-		prisma.supportTickets.findMany({
+		const q = parsed.search.trim();
+		const asId = Number(q);
+		let userIds: number[] = [];
+		try {
+			const users = await prisma.user.findMany({
+				where: { username: { contains: q } },
+				select: { id: true },
+				take: 50,
+			});
+			userIds = users.map((u) => u.id);
+		} catch {
+			userIds = [];
+		}
+
+		conditions.push({
+			OR: [
+				{ issue: { contains: q } },
+				...(Number.isFinite(asId) && asId > 0 ? [{ id: asId }] : []),
+				...(userIds.length
+					? [
+							{ senderId: { in: userIds } },
+							{ reportedId: { in: userIds } },
+							{ modId: { in: userIds } },
+						]
+					: []),
+			],
+		});
+	}
+
+	const where: Prisma.SupportTicketsWhereInput =
+		conditions.length === 0
+			? {}
+			: conditions.length === 1
+				? conditions[0]!
+				: { AND: conditions };
+
+	const SORT_MAP: Record<string, Prisma.SupportTicketsOrderByWithRelationInput> =
+		{
+			id: { id: "desc" },
+			issue: { issue: "asc" },
+			sender: { senderId: "asc" },
+			reported: { reportedId: "asc" },
+			mod: { modId: "asc" },
+			state: { state: "asc" },
+		};
+
+	const baseOrder = SORT_MAP[parsed.sort ?? "id"] ?? { id: "desc" };
+	const orderField = Object.keys(baseOrder)[0] as keyof typeof baseOrder;
+	const orderBy = {
+		[orderField]: parsed.order,
+	} as Prisma.SupportTicketsOrderByWithRelationInput;
+
+	const total = await prisma.supportTickets.count({ where }).catch(() => 0);
+	const pagination = calcPagination(total, parsed.page, parsed.perPage);
+
+	const tickets = await prisma.supportTickets
+		.findMany({
 			where,
-			orderBy: { id: "desc" },
+			orderBy,
-			skip: (page - 1) * perPage,
+			skip: pagination.offset,
-			take: perPage,
+			take: pagination.perPage,
-		}),
+		})
-		prisma.supportTickets.count({ where }),
+		.catch(() => []);
-	]);
 
-	// Fetch all related users
 	const userIds = [
 		...new Set([
-			...tickets.map((t) => t.senderId),
+			...tickets.map((x) => x.senderId),
-			...tickets.map((t) => t.reportedId),
+			...tickets.map((x) => x.reportedId),
-			...tickets.map((t) => t.modId),
+			...tickets.map((x) => x.modId),
 		]),
 	].filter(Boolean);
 
-	const users =
+	let userMap = new Map<number, string>();
-		userIds.length > 0
+	if (userIds.length > 0) {
-			? await prisma.user.findMany({
+		try {
-					where: { id: { in: userIds } },
+			const users = await prisma.user.findMany({
-					select: { id: true, username: true },
+				where: { id: { in: userIds } },
-				})
+				select: { id: true, username: true },
-			: [];
+			});
-	const userMap = new Map(users.map((u) => [u.id, u.username]));
+			userMap = new Map(users.map((u) => [u.id, u.username]));
+		} catch {
+			userMap = new Map();
+		}
+	}
 
-	const totalPages = Math.ceil(total / perPage);
+	const stateLabels: Record<number, string> = {
+		0: t("stateOpen"),
+		1: t("statePicked"),
+		2: t("stateClosed"),
+	};
+
+	const rows: CfhRow[] = tickets.map((ticket) => ({
+		id: ticket.id,
+		issue: ticket.issue,
+		roomId: ticket.roomId,
+		when: ticket.timestamp
+			? new Date(ticket.timestamp * 1000).toISOString().slice(0, 16).replace("T", " ")
+			: "—",
+		sender: userMap.get(ticket.senderId) ?? "—",
+		senderId: ticket.senderId,
+		reported: userMap.get(ticket.reportedId) ?? "—",
+		reportedId: ticket.reportedId,
+		mod: userMap.get(ticket.modId) ?? "—",
+		state: ticket.state,
+		stateLabel: stateLabels[ticket.state] ?? String(ticket.state),
+	}));
 
 	return (
 		<div className="space-y-6">
-			{/* Filters */}
+			{total === 0 && !parsed.search && stateFilter < 0 ? (
-			<div className="flex gap-2">
+				<div className="admin-empty">{t("noTickets")}</div>
-				{[
+			) : (
-					{ key: -1, label: "All" },
+				<CfhTable
-					{ key: 0, label: "Open" },
+					data={{
-					{ key: 1, label: "Picked" },
+						rows,
-					{ key: 2, label: "Closed" },
+						total,
-				].map(({ key, label }) => (
+						page: pagination.page,
-					<Link
+						perPage: pagination.perPage,
-						key={key}
+						lastPage: pagination.lastPage,
-						href={`/admin/moderation/cfh${key >= 0 ? `?state=${key}` : ""}`}
+					}}
-					>
+				/>
-						<Badge
-							variant={stateFilter === key ? "default" : "outline"}
-							className="cursor-pointer"
-						>
-							{label}
-						</Badge>
-					</Link>
-				))}
-			</div>
-
-			{/* Table */}
-			<div className="rounded-lg border">
-				<div className="grid grid-cols-[auto_1fr_auto_auto_auto_auto] gap-4 p-3 bg-muted/50 text-xs font-medium text-muted-foreground border-b">
-					<span>#</span>
-					<span>Issue</span>
-					<span>Sender</span>
-					<span>Reported</span>
-					<span>Mod</span>
-					<span>Status</span>
-				</div>
-
-				{tickets.length === 0 ? (
-					<div className="p-8 text-center text-muted-foreground">
-						<Radio className="h-8 w-8 mx-auto mb-2" />
-						No tickets found.
-					</div>
-				) : (
-					tickets.map((ticket) => {
-						const state = CFH_STATES[ticket.state] ?? CFH_STATES[0];
-						const StateIcon = state.icon;
-
-						return (
-							<Link
-								key={ticket.id}
-								href={`/admin/moderation/cfh/${ticket.id}`}
-								className="grid grid-cols-[auto_1fr_auto_auto_auto_auto] gap-4 p-3 items-center hover:bg-accent/50 transition-all duration-150 border-b last:border-0 hover:pl-4"
-							>
-								<span className="text-xs font-mono text-muted-foreground">
-									{ticket.id}
-								</span>
-								<div className="min-w-0">
-									<p className="text-sm truncate">
-										{ticket.issue || "No description"}
-									</p>
-									<p className="text-[10px] text-muted-foreground">
-										Room #{ticket.roomId} ·{" "}
-										{new Date(ticket.timestamp * 1000).toLocaleString()}
-									</p>
-								</div>
-								<span className="text-xs whitespace-nowrap">
-									{userMap.get(ticket.senderId) ?? "—"}
-								</span>
-								<span className="text-xs whitespace-nowrap font-medium">
-									{userMap.get(ticket.reportedId) ?? "—"}
-								</span>
-								<span className="text-xs text-muted-foreground whitespace-nowrap">
-									{userMap.get(ticket.modId) ?? "—"}
-								</span>
-								<span
-									className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap ${state.class}`}
-								>
-									<StateIcon className="h-3 w-3" />
-									{state.label}
-								</span>
-							</Link>
-						);
-					})
-				)}
-			</div>
-
-			{/* Pagination */}
-			{totalPages > 1 && (
-				<div className="flex items-center justify-center gap-2">
-					{page > 1 && (
-						<Link
-							href={`/admin/moderation/cfh?state=${stateFilter}&page=${page - 1}`}
-						>
-							<Badge variant="outline" className="cursor-pointer">
-								Previous
-							</Badge>
-						</Link>
-					)}
-					<span className="text-sm text-muted-foreground">
-						Page {page} of {totalPages}
-					</span>
-					{page < totalPages && (
-						<Link
-							href={`/admin/moderation/cfh?state=${stateFilter}&page=${page + 1}`}
-						>
-							<Badge variant="outline" className="cursor-pointer">
-								Next
-							</Badge>
-						</Link>
-					)}
-				</div>
 			)}
 		</div>
 	);

src/app/admin/tickets/page.tsx

@@ -1,250 +1,151 @@
-import {
-	AlertCircle,
-	CheckCircle2,
-	Clock,
-	Loader2,
-	Ticket,
-} from "lucide-react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
-import { Badge } from "@/components/ui/badge";
+import { getTranslations } from "next-intl/server";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Prisma } from "@/generated/prisma/client";
+import { StatusCard } from "@/components/admin/dashboard";
+import { calcPagination, parseListParams } from "@/lib/admin-helpers";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
+import { TicketsTable, type TicketRow } from "./tickets-table";
 
-const STATUS_CONFIG = {
+export const dynamic = "force-dynamic";
-	open: {
-		label: "Open",
-		icon: AlertCircle,
-		class: "bg-[var(--admin-info-subtle)] text-[var(--admin-info)]",
-	},
-	in_progress: {
-		label: "In Progress",
-		icon: Loader2,
-		class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
-	},
-	waiting: {
-		label: "Waiting",
-		icon: Clock,
-		class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
-	},
-	closed: {
-		label: "Closed",
-		icon: CheckCircle2,
-		class: "bg-muted text-muted-foreground",
-	},
-} as const;
 
-const PRIORITY_COLORS = {
+function fromDate(d: Date | null | undefined): string {
-	low: "",
+	return d ? d.toISOString().slice(0, 10) : "—";
-	normal: "text-[var(--admin-info)]",
-	high: "text-[var(--admin-warning)]",
-	urgent: "text-[var(--admin-error)] font-bold",
-};
-
-interface PageProps {
-	searchParams: Promise<{ status?: string; page?: string }>;
 }
 
-export default async function AdminTicketsPage({ searchParams }: PageProps) {
+export default async function AdminTicketsPage({
+	searchParams,
+}: {
+	searchParams: Promise<Record<string, string>>;
+}) {
 	const { session, permissions } = await getAdminContext();
 	if (!canAccess(permissions, PERMS.TICKETS_VIEW, session.user.rank)) {
 		redirect("/admin");
 	}
 
-	const sp = await searchParams;
+	const t = await getTranslations("pages.admin.tickets");
-	const statusFilter = sp.status || "active";
+	const raw = await searchParams;
-	const page = Math.max(1, Number(sp.page) || 1);
+	const parsed = parseListParams(new URLSearchParams(raw));
-	const perPage = 20;
+	const statusFilter = raw.filter_status || raw.status || "active";
 
-	const where =
+	const conditions: Prisma.WebsiteTicketWhereInput[] = [];
-		statusFilter === "active"
-			? { status: { not: "closed" } }
-			: statusFilter === "all"
-				? {}
-				: { status: statusFilter };
 
-	const [tickets, total, stats] = await Promise.all([
+	if (statusFilter === "active") {
-		prisma.websiteTicket.findMany({
+		conditions.push({ status: { not: "closed" } });
+	} else if (statusFilter && statusFilter !== "all") {
+		conditions.push({ status: statusFilter });
+	}
+
+	if (parsed.search.trim()) {
+		const q = parsed.search.trim();
+		const asId = Number(q);
+		conditions.push({
+			OR: [
+				{ subject: { contains: q } },
+				{ category: { contains: q } },
+				{ creator: { username: { contains: q } } },
+				{ assignee: { username: { contains: q } } },
+				...(Number.isFinite(asId) && asId > 0 ? [{ id: asId }] : []),
+			],
+		});
+	}
+
+	const where: Prisma.WebsiteTicketWhereInput =
+		conditions.length === 0
+			? {}
+			: conditions.length === 1
+				? conditions[0]!
+				: { AND: conditions };
+
+	const SORT_MAP: Record<string, Prisma.WebsiteTicketOrderByWithRelationInput> =
+		{
+			subject: { subject: "asc" },
+			status: { status: "asc" },
+			priority: { priority: "asc" },
+			assignee: { assigneeId: "asc" },
+			date: { createdAt: "desc" },
+			id: { id: "desc" },
+		};
+
+	const baseOrder = SORT_MAP[parsed.sort ?? "date"] ?? { createdAt: "desc" };
+	const orderField = Object.keys(baseOrder)[0] as keyof typeof baseOrder;
+	const orderBy = {
+		[orderField]: parsed.order,
+	} as Prisma.WebsiteTicketOrderByWithRelationInput;
+
+	const [total, openCount, inProgressCount, waitingCount, closedCount] =
+		await Promise.all([
+			prisma.websiteTicket.count({ where }).catch(() => 0),
+			prisma.websiteTicket.count({ where: { status: "open" } }).catch(() => 0),
+			prisma.websiteTicket
+				.count({ where: { status: "in_progress" } })
+				.catch(() => 0),
+			prisma.websiteTicket
+				.count({ where: { status: "waiting" } })
+				.catch(() => 0),
+			prisma.websiteTicket.count({ where: { status: "closed" } }).catch(() => 0),
+		]);
+
+	const pagination = calcPagination(total, parsed.page, parsed.perPage);
+
+	const tickets = await prisma.websiteTicket
+		.findMany({
 			where,
-			orderBy: [{ createdAt: "desc" }],
+			orderBy,
-			skip: (page - 1) * perPage,
+			skip: pagination.offset,
-			take: perPage,
+			take: pagination.perPage,
 			include: {
 				creator: { select: { id: true, username: true } },
 				assignee: { select: { id: true, username: true } },
 				_count: { select: { messages: true } },
 			},
-		}),
+		})
-		prisma.websiteTicket.count({ where }),
+		.catch(() => []);
-		Promise.all([
-			prisma.websiteTicket.count({ where: { status: "open" } }),
-			prisma.websiteTicket.count({ where: { status: "in_progress" } }),
-			prisma.websiteTicket.count({ where: { status: "waiting" } }),
-			prisma.websiteTicket.count({ where: { status: "closed" } }),
-		]),
-	]);
 
-	const [openCount, inProgressCount, waitingCount, closedCount] = stats;
+	const rows: TicketRow[] = tickets.map((ticket) => ({
-	const totalPages = Math.ceil(total / perPage);
+		id: ticket.id,
+		subject: ticket.subject,
+		creator: ticket.creator.username,
+		creatorId: ticket.creatorId,
+		category: ticket.category,
+		messages: ticket._count.messages,
+		status: ticket.status,
+		priority: ticket.priority,
+		assignee: ticket.assignee?.username ?? "—",
+		date: fromDate(ticket.createdAt),
+	}));
 
 	return (
 		<div className="space-y-6">
-			{/* Stats */}
+			<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5">
-			<div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
+				<StatusCard label={t("statusOpen")} value={openCount} icon="🎫" />
-				<Card>
+				<StatusCard
-					<CardHeader className="pb-2">
+					label={t("statusInProgress")}
-						<CardTitle className="text-sm font-medium text-[var(--admin-info)]">
+					value={inProgressCount}
-							Open
+					state={inProgressCount > 0 ? "warn" : "neutral"}
-						</CardTitle>
+					icon="⏳"
-					</CardHeader>
+				/>
-					<CardContent>
+				<StatusCard
-						<div className="text-2xl font-bold">{openCount}</div>
+					label={t("statusWaiting")}
-					</CardContent>
+					value={waitingCount}
-				</Card>
+					state={waitingCount > 0 ? "warn" : "neutral"}
-				<Card>
+					icon="🕒"
-					<CardHeader className="pb-2">
+				/>
-						<CardTitle className="text-sm font-medium text-[var(--admin-warning)]">
+				<StatusCard label={t("statusClosed")} value={closedCount} icon="✅" />
-							In Progress
-						</CardTitle>
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold">{inProgressCount}</div>
-					</CardContent>
-				</Card>
-				<Card>
-					<CardHeader className="pb-2">
-						<CardTitle className="text-sm font-medium text-[var(--admin-warning)]">
-							Waiting
-						</CardTitle>
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold">{waitingCount}</div>
-					</CardContent>
-				</Card>
-				<Card>
-					<CardHeader className="pb-2">
-						<CardTitle className="text-sm font-medium text-muted-foreground">
-							Closed
-						</CardTitle>
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold">{closedCount}</div>
-					</CardContent>
-				</Card>
 			</div>
 
-			{/* Filter tabs */}
+			{total === 0 && !parsed.search && statusFilter === "active" ? (
-			<div className="flex gap-2">
+				<div className="admin-empty">{t("noTickets")}</div>
-				{[
+			) : (
-					{ key: "active", label: "Active" },
+				<TicketsTable
-					{ key: "open", label: "Open" },
+					data={{
-					{ key: "in_progress", label: "In Progress" },
+						rows,
-					{ key: "waiting", label: "Waiting" },
+						total,
-					{ key: "closed", label: "Closed" },
+						page: pagination.page,
-					{ key: "all", label: "All" },
+						perPage: pagination.perPage,
-				].map(({ key, label }) => (
+						lastPage: pagination.lastPage,
-					<Link key={key} href={`/admin/tickets?status=${key}`}>
+					}}
-						<Badge
+				/>
-							variant={statusFilter === key ? "default" : "outline"}
-							className="cursor-pointer"
-						>
-							{label}
-						</Badge>
-					</Link>
-				))}
-			</div>
-
-			{/* Ticket list */}
-			<div className="rounded-lg border">
-				<div className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 p-3 bg-muted/50 text-xs font-medium text-muted-foreground border-b">
-					<span>Ticket</span>
-					<span>Status</span>
-					<span>Priority</span>
-					<span>Assigned</span>
-					<span>Date</span>
-				</div>
-
-				{tickets.length === 0 ? (
-					<div className="p-8 text-center text-muted-foreground">
-						<Ticket className="h-8 w-8 mx-auto mb-2" />
-						No tickets found.
-					</div>
-				) : (
-					tickets.map((ticket) => {
-						const status =
-							STATUS_CONFIG[ticket.status as keyof typeof STATUS_CONFIG] ??
-							STATUS_CONFIG.open;
-						const StatusIcon = status.icon;
-
-						return (
-							<Link
-								key={ticket.id}
-								href={`/admin/tickets/${ticket.id}`}
-								className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 p-3 items-center hover:bg-accent/50 transition-all duration-150 border-b last:border-0 hover:pl-4"
-							>
-								<div className="min-w-0">
-									<div className="flex items-center gap-2">
-										<span className="text-xs text-muted-foreground font-mono">
-											#{ticket.id}
-										</span>
-										<span className="font-medium truncate">
-											{ticket.subject}
-										</span>
-									</div>
-									<div className="text-xs text-muted-foreground">
-										by {ticket.creator.username} &middot;{" "}
-										{ticket._count.messages} msg &middot; {ticket.category}
-									</div>
-								</div>
-								<span
-									className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap ${status.class}`}
-								>
-									<StatusIcon className="h-3 w-3" />
-									{status.label}
-								</span>
-								<span
-									className={`text-xs capitalize whitespace-nowrap ${PRIORITY_COLORS[ticket.priority as keyof typeof PRIORITY_COLORS] ?? ""}`}
-								>
-									{ticket.priority}
-								</span>
-								<span className="text-xs text-muted-foreground whitespace-nowrap">
-									{ticket.assignee?.username ?? "—"}
-								</span>
-								<span className="text-xs text-muted-foreground whitespace-nowrap">
-									{new Date(ticket.createdAt).toLocaleDateString()}
-								</span>
-							</Link>
-						);
-					})
-				)}
-			</div>
-
-			{/* Pagination */}
-			{totalPages > 1 && (
-				<div className="flex items-center justify-center gap-2">
-					{page > 1 && (
-						<Link
-							href={`/admin/tickets?status=${statusFilter}&page=${page - 1}`}
-						>
-							<Badge variant="outline" className="cursor-pointer">
-								Previous
-							</Badge>
-						</Link>
-					)}
-					<span className="text-sm text-muted-foreground">
-						Page {page} of {totalPages}
-					</span>
-					{page < totalPages && (
-						<Link
-							href={`/admin/tickets?status=${statusFilter}&page=${page + 1}`}
-						>
-							<Badge variant="outline" className="cursor-pointer">
-								Next
-							</Badge>
-						</Link>
-					)}
-				</div>
 			)}
 		</div>
 	);

src/app/admin/tickets/tickets-table.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { DataTable } from "@/components/admin/data-table";
+import { Badge } from "@/components/ui/badge";
+import type { DataTableColumn, PaginatedResult } from "@/types";
+
+export interface TicketRow {
+	id: number;
+	subject: string;
+	creator: string;
+	creatorId: number;
+	category: string;
+	messages: number;
+	status: string;
+	priority: string;
+	assignee: string;
+	date: string;
+}
+
+const STATUS_VARIANT: Record<
+	string,
+	"default" | "secondary" | "destructive" | "outline"
+> = {
+	open: "default",
+	in_progress: "secondary",
+	waiting: "outline",
+	closed: "secondary",
+};
+
+export function TicketsTable({ data }: { data: PaginatedResult<TicketRow> }) {
+	const t = useTranslations("pages.admin.tickets");
+
+	const statusLabel: Record<string, string> = {
+		open: t("statusOpen"),
+		in_progress: t("statusInProgress"),
+		waiting: t("statusWaiting"),
+		closed: t("statusClosed"),
+	};
+
+	const columns: DataTableColumn<TicketRow>[] = [
+		{
+			key: "subject",
+			label: t("colTicket"),
+			sortable: true,
+			render: (_value, row) => (
+				<div className="min-w-0">
+					<div className="flex items-center gap-2">
+						<span className="text-xs text-muted-foreground font-mono">
+							#{row.id}
+						</span>
+						<Link
+							href={`/admin/tickets/${row.id}`}
+							className="font-medium truncate hover:underline"
+						>
+							{row.subject}
+						</Link>
+					</div>
+					<div className="text-xs text-muted-foreground">
+						{t("meta", {
+							user: row.creator,
+							count: row.messages,
+							category: row.category,
+						})}
+					</div>
+				</div>
+			),
+		},
+		{
+			key: "status",
+			label: t("colStatus"),
+			sortable: true,
+			filterKey: "filter_status",
+			filterOptions: [
+				{ label: t("statusOpen"), value: "open" },
+				{ label: t("statusInProgress"), value: "in_progress" },
+				{ label: t("statusWaiting"), value: "waiting" },
+				{ label: t("statusClosed"), value: "closed" },
+			],
+			render: (value) => {
+				const status = String(value);
+				return (
+					<Badge
+						variant={STATUS_VARIANT[status] ?? "secondary"}
+						className="text-[0.7rem]"
+					>
+						{statusLabel[status] ?? status.replace("_", " ")}
+					</Badge>
+				);
+			},
+		},
+		{
+			key: "priority",
+			label: t("colPriority"),
+			sortable: true,
+			render: (value) => {
+				const p = String(value);
+				const className =
+					p === "urgent"
+						? "text-[var(--admin-error)] font-bold"
+						: p === "high"
+							? "text-[var(--admin-warning)]"
+							: p === "normal"
+								? "text-[var(--admin-info)]"
+								: "";
+				return <span className={`text-xs capitalize ${className}`}>{p}</span>;
+			},
+		},
+		{ key: "assignee", label: t("colAssigned"), sortable: true },
+		{ key: "date", label: t("colDate"), sortable: true },
+	];
+
+	return (
+		<DataTable
+			data={data}
+			columns={columns}
+			searchPlaceholder={t("searchPlaceholder")}
+			presets={[
+				{ label: t("presetActive"), params: { filter_status: "active" } },
+				{ label: t("statusOpen"), params: { filter_status: "open" } },
+				{
+					label: t("statusInProgress"),
+					params: { filter_status: "in_progress" },
+				},
+				{ label: t("statusWaiting"), params: { filter_status: "waiting" } },
+				{ label: t("statusClosed"), params: { filter_status: "closed" } },
+			]}
+		/>
+	);
+}

src/messages/en.json

@@ -1092,6 +1092,40 @@
 				"saving": "Saving…",
 				"settingsSaved": "VPN settings saved successfully"
 			},
+			"tickets": {
+				"title": "Tickets",
+				"subtitle": "Support tickets from players",
+				"noTickets": "No active tickets",
+				"searchPlaceholder": "Search subject, user, category or ID…",
+				"presetActive": "Active",
+				"statusOpen": "Open",
+				"statusInProgress": "In progress",
+				"statusWaiting": "Waiting",
+				"statusClosed": "Closed",
+				"colTicket": "Ticket",
+				"colStatus": "Status",
+				"colPriority": "Priority",
+				"colAssigned": "Assigned",
+				"colDate": "Date",
+				"meta": "by {user} · {count} msg · {category}"
+			},
+			"cfh": {
+				"title": "Call for Help",
+				"subtitle": "In-game CFH / support tickets",
+				"noTickets": "No CFH tickets",
+				"searchPlaceholder": "Search issue, user or ID…",
+				"noDescription": "No description",
+				"roomMeta": "Room #{room} · {when}",
+				"stateOpen": "Open",
+				"statePicked": "Picked",
+				"stateClosed": "Closed",
+				"colId": "ID",
+				"colIssue": "Issue",
+				"colSender": "Sender",
+				"colReported": "Reported",
+				"colMod": "Mod",
+				"colStatus": "Status"
+			},
 			"applications": {
 				"title": "Staff Applications",
 				"subtitle": "Pending and reviewed staff applications",

src/messages/it.json

@@ -1056,6 +1056,40 @@
 				"saving": "Salvataggio…",
 				"settingsSaved": "Impostazioni VPN salvate con successo"
 			},
+			"tickets": {
+				"title": "Ticket",
+				"subtitle": "Ticket di supporto dai giocatori",
+				"noTickets": "Nessun ticket attivo",
+				"searchPlaceholder": "Cerca oggetto, utente, categoria o ID…",
+				"presetActive": "Attivi",
+				"statusOpen": "Aperti",
+				"statusInProgress": "In corso",
+				"statusWaiting": "In attesa",
+				"statusClosed": "Chiusi",
+				"colTicket": "Ticket",
+				"colStatus": "Stato",
+				"colPriority": "Priorità",
+				"colAssigned": "Assegnato",
+				"colDate": "Data",
+				"meta": "di {user} · {count} msg · {category}"
+			},
+			"cfh": {
+				"title": "Call for Help",
+				"subtitle": "Ticket CFH in-game",
+				"noTickets": "Nessun ticket CFH",
+				"searchPlaceholder": "Cerca problema, utente o ID…",
+				"noDescription": "Nessuna descrizione",
+				"roomMeta": "Stanza #{room} · {when}",
+				"stateOpen": "Aperti",
+				"statePicked": "Presi in carico",
+				"stateClosed": "Chiusi",
+				"colId": "ID",
+				"colIssue": "Problema",
+				"colSender": "Mittente",
+				"colReported": "Segnalato",
+				"colMod": "Mod",
+				"colStatus": "Stato"
+			},
 			"applications": {
 				"title": "Candidature staff",
 				"subtitle": "Candidature allo staff in sospeso e revisionate",