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={() =>
-								run(() => quickKick({ userId: uid }), {
-									successMessage: "User disconnected",
-								})
-							}
+							onClick={handleKick}
 						>
 							{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={() =>
-								run(() => quickRoomKick({ roomId: rid }), {
-									successMessage: "All users kicked from room",
-								})
-							}
+							onClick={handleRoomKick}
 						>
 							<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={() => {
-									run(
-										() =>
-											broadcastAlert({
-												message: broadcastMsg.trim(),
-												type: "hotel",
-											}),
-										{
-											successMessage: "Hotel alert sent!",
-											onSuccess: () => setBroadcastMsg(""),
-										},
-									);
-								}}
+								onClick={handleHotelBroadcast}
 							>
 								<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<
-	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,
-	},
-};
+export const dynamic = "force-dynamic";
 
-interface PageProps {
-	searchParams: Promise<{ state?: string; page?: string }>;
-}
-
-export default async function CfhListPage({ searchParams }: PageProps) {
+export default async function CfhListPage({
+	searchParams,
+}: {
+	searchParams: Promise<Record<string, string>>;
+}) {
 	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 stateFilter = sp.state !== undefined ? Number(sp.state) : -1;
-	const page = Math.max(1, Number(sp.page) || 1);
-	const perPage = 25;
+	const t = await getTranslations("pages.admin.cfh");
+	const raw = await searchParams;
+	const parsed = parseListParams(new URLSearchParams(raw));
+	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([
-		prisma.supportTickets.findMany({
+	if (parsed.search.trim()) {
+		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" },
-			skip: (page - 1) * perPage,
-			take: perPage,
-		}),
-		prisma.supportTickets.count({ where }),
-	]);
+			orderBy,
+			skip: pagination.offset,
+			take: pagination.perPage,
+		})
+		.catch(() => []);
 
-	// Fetch all related users
 	const userIds = [
 		...new Set([
-			...tickets.map((t) => t.senderId),
-			...tickets.map((t) => t.reportedId),
-			...tickets.map((t) => t.modId),
+			...tickets.map((x) => x.senderId),
+			...tickets.map((x) => x.reportedId),
+			...tickets.map((x) => x.modId),
 		]),
 	].filter(Boolean);
 
-	const users =
-		userIds.length > 0
-			? await prisma.user.findMany({
-					where: { id: { in: userIds } },
-					select: { id: true, username: true },
-				})
-			: [];
-	const userMap = new Map(users.map((u) => [u.id, u.username]));
+	let userMap = new Map<number, string>();
+	if (userIds.length > 0) {
+		try {
+			const users = await prisma.user.findMany({
+				where: { id: { in: userIds } },
+				select: { id: true, username: true },
+			});
+			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 */}
-			<div className="flex gap-2">
-				{[
-					{ key: -1, label: "All" },
-					{ key: 0, label: "Open" },
-					{ key: 1, label: "Picked" },
-					{ key: 2, label: "Closed" },
-				].map(({ key, label }) => (
-					<Link
-						key={key}
-						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>
+			{total === 0 && !parsed.search && stateFilter < 0 ? (
+				<div className="admin-empty">{t("noTickets")}</div>
+			) : (
+				<CfhTable
+					data={{
+						rows,
+						total,
+						page: pagination.page,
+						perPage: pagination.perPage,
+						lastPage: pagination.lastPage,
+					}}
+				/>
 			)}
 		</div>
 	);