style: format code biome

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

@@ -1,14 +1,23 @@
 "use client";
 
-import { DoorOpen, Loader2, Megaphone, MessageSquare, Shield, Volume2, VolumeX, Zap } from "lucide-react";
+import {
+	DoorOpen,
+	Loader2,
+	Megaphone,
+	MessageSquare,
+	Shield,
+	Volume2,
+	VolumeX,
+	Zap,
+} from "lucide-react";
 import { useState } from "react";
 import {
-  broadcastAlert,
-  quickAlert,
-  quickKick,
-  quickMute,
-  quickRoomKick,
-  quickUnmute,
+	broadcastAlert,
+	quickAlert,
+	quickKick,
+	quickMute,
+	quickRoomKick,
+	quickUnmute,
 } from "@/actions/moderation";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -17,199 +26,236 @@ import { Textarea } from "@/components/ui/textarea";
 import { useServerAction } from "@/hooks/use-server-action";
 
 export function ModActionsClient() {
-  const { run, isPending } = useServerAction();
+	const { run, isPending } = useServerAction();
 
-  // User actions
-  const [userId, setUserId] = useState("");
-  const [muteDuration, setMuteDuration] = useState("10");
-  const [alertMessage, setAlertMessage] = useState("");
+	// User actions
+	const [userId, setUserId] = useState("");
+	const [muteDuration, setMuteDuration] = useState("10");
+	const [alertMessage, setAlertMessage] = useState("");
 
-  // Room actions
-  const [roomId, setRoomId] = useState("");
+	// Room actions
+	const [roomId, setRoomId] = useState("");
 
-  // Broadcast
-  const [broadcastMsg, setBroadcastMsg] = useState("");
+	// Broadcast
+	const [broadcastMsg, setBroadcastMsg] = useState("");
 
-  const uid = parseInt(userId, 10);
-  const rid = parseInt(roomId, 10);
+	const uid = parseInt(userId, 10);
+	const rid = parseInt(roomId, 10);
 
-  return (
-    <div className="grid gap-6 lg:grid-cols-2">
-      {/* User Actions */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-sm flex items-center gap-2">
-            <Zap className="h-4 w-4 text-[var(--admin-warning)]" />
-            User Actions
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div>
-            <span className="text-xs text-muted-foreground mb-1 block">User ID</span>
-            <Input
-              type="number"
-              value={userId}
-              onChange={(e) => setUserId(e.target.value)}
-              placeholder="Enter user ID"
-            />
-          </div>
+	return (
+		<div className="grid gap-6 lg:grid-cols-2">
+			{/* User Actions */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-sm flex items-center gap-2">
+						<Zap className="h-4 w-4 text-[var(--admin-warning)]" />
+						User Actions
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<div>
+						<span className="text-xs text-muted-foreground mb-1 block">
+							User ID
+						</span>
+						<Input
+							type="number"
+							value={userId}
+							onChange={(e) => setUserId(e.target.value)}
+							placeholder="Enter user ID"
+						/>
+					</div>
 
-          <div className="grid grid-cols-2 gap-2">
-            <Button
-              variant="destructive"
-              size="sm"
-              disabled={isPending || !uid}
-              onClick={() => run(() => quickKick({ userId: uid }), { successMessage: "User disconnected" })}
-            >
-              {isPending ? (
-                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
-              ) : (
-                <Zap className="mr-1 h-3 w-3" />
-              )}
-              Kick / Disconnect
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              disabled={isPending || !uid}
-              onClick={() => run(() => quickUnmute({ userId: uid }), { successMessage: "User unmuted" })}
-            >
-              <Volume2 className="mr-1 h-3 w-3" /> Unmute
-            </Button>
-          </div>
+					<div className="grid grid-cols-2 gap-2">
+						<Button
+							variant="destructive"
+							size="sm"
+							disabled={isPending || !uid}
+							onClick={() =>
+								run(() => quickKick({ userId: uid }), {
+									successMessage: "User disconnected",
+								})
+							}
+						>
+							{isPending ? (
+								<Loader2 className="mr-1 h-3 w-3 animate-spin" />
+							) : (
+								<Zap className="mr-1 h-3 w-3" />
+							)}
+							Kick / Disconnect
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							disabled={isPending || !uid}
+							onClick={() =>
+								run(() => quickUnmute({ userId: uid }), {
+									successMessage: "User unmuted",
+								})
+							}
+						>
+							<Volume2 className="mr-1 h-3 w-3" /> Unmute
+						</Button>
+					</div>
 
-          <div className="flex gap-2">
-            <Input
-              type="number"
-              min={1}
-              max={1440}
-              value={muteDuration}
-              onChange={(e) => setMuteDuration(e.target.value)}
-              className="w-24"
-              placeholder="Min"
-            />
-            <Button
-              variant="outline"
-              size="sm"
-              className="flex-1"
-              disabled={isPending || !uid || !parseInt(muteDuration, 10)}
-              onClick={() =>
-                run(() => quickMute({ userId: uid, duration: parseInt(muteDuration, 10) }), {
-                  successMessage: `Muted for ${muteDuration} min`,
-                })
-              }
-            >
-              <VolumeX className="mr-1 h-3 w-3" /> Mute
-            </Button>
-          </div>
+					<div className="flex gap-2">
+						<Input
+							type="number"
+							min={1}
+							max={1440}
+							value={muteDuration}
+							onChange={(e) => setMuteDuration(e.target.value)}
+							className="w-24"
+							placeholder="Min"
+						/>
+						<Button
+							variant="outline"
+							size="sm"
+							className="flex-1"
+							disabled={isPending || !uid || !parseInt(muteDuration, 10)}
+							onClick={() =>
+								run(
+									() =>
+										quickMute({
+											userId: uid,
+											duration: parseInt(muteDuration, 10),
+										}),
+									{
+										successMessage: `Muted for ${muteDuration} min`,
+									},
+								)
+							}
+						>
+							<VolumeX className="mr-1 h-3 w-3" /> Mute
+						</Button>
+					</div>
 
-          <div className="flex gap-2">
-            <Textarea
-              value={alertMessage}
-              onChange={(e) => setAlertMessage(e.target.value)}
-              placeholder="Alert message to user..."
-              rows={2}
-              className="resize-none text-xs"
-            />
-            <Button
-              variant="outline"
-              size="sm"
-              className="shrink-0 h-auto"
-              disabled={isPending || !uid || !alertMessage.trim()}
-              onClick={() => {
-                run(() => quickAlert({ userId: uid, message: alertMessage.trim() }), {
-                  successMessage: "Alert sent",
-                  onSuccess: () => setAlertMessage(""),
-                });
-              }}
-            >
-              <MessageSquare className="h-4 w-4" />
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+					<div className="flex gap-2">
+						<Textarea
+							value={alertMessage}
+							onChange={(e) => setAlertMessage(e.target.value)}
+							placeholder="Alert message to user..."
+							rows={2}
+							className="resize-none text-xs"
+						/>
+						<Button
+							variant="outline"
+							size="sm"
+							className="shrink-0 h-auto"
+							disabled={isPending || !uid || !alertMessage.trim()}
+							onClick={() => {
+								run(
+									() =>
+										quickAlert({ userId: uid, message: alertMessage.trim() }),
+									{
+										successMessage: "Alert sent",
+										onSuccess: () => setAlertMessage(""),
+									},
+								);
+							}}
+						>
+							<MessageSquare className="h-4 w-4" />
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
 
-      {/* Room Actions */}
-      <div className="space-y-6">
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-sm flex items-center gap-2">
-              <DoorOpen className="h-4 w-4 text-[var(--admin-warning)]" />
-              Room Actions
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <div>
-              <span className="text-xs text-muted-foreground mb-1 block">Room ID</span>
-              <Input
-                type="number"
-                value={roomId}
-                onChange={(e) => setRoomId(e.target.value)}
-                placeholder="Enter room ID"
-              />
-            </div>
-            <Button
-              variant="destructive"
-              size="sm"
-              className="w-full"
-              disabled={isPending || !rid}
-              onClick={() =>
-                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>
+			{/* Room Actions */}
+			<div className="space-y-6">
+				<Card>
+					<CardHeader>
+						<CardTitle className="text-sm flex items-center gap-2">
+							<DoorOpen className="h-4 w-4 text-[var(--admin-warning)]" />
+							Room Actions
+						</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-3">
+						<div>
+							<span className="text-xs text-muted-foreground mb-1 block">
+								Room ID
+							</span>
+							<Input
+								type="number"
+								value={roomId}
+								onChange={(e) => setRoomId(e.target.value)}
+								placeholder="Enter room ID"
+							/>
+						</div>
+						<Button
+							variant="destructive"
+							size="sm"
+							className="w-full"
+							disabled={isPending || !rid}
+							onClick={() =>
+								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">
-              <Megaphone className="h-4 w-4 text-primary" />
-              Broadcast Alert
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <Textarea
-              value={broadcastMsg}
-              onChange={(e) => setBroadcastMsg(e.target.value)}
-              placeholder="Type broadcast message..."
-              rows={3}
-              className="resize-none"
-            />
-            <div className="grid grid-cols-2 gap-2">
-              <Button
-                size="sm"
-                disabled={isPending || !broadcastMsg.trim()}
-                onClick={() => {
-                  run(() => broadcastAlert({ message: broadcastMsg.trim(), type: "hotel" }), {
-                    successMessage: "Hotel alert sent!",
-                    onSuccess: () => setBroadcastMsg(""),
-                  });
-                }}
-              >
-                <Megaphone className="mr-1 h-3 w-3" /> Hotel Alert
-              </Button>
-              <Button
-                variant="secondary"
-                size="sm"
-                disabled={isPending || !broadcastMsg.trim()}
-                onClick={() => {
-                  run(() => broadcastAlert({ message: broadcastMsg.trim(), type: "staff" }), {
-                    successMessage: "Staff alert sent!",
-                    onSuccess: () => setBroadcastMsg(""),
-                  });
-                }}
-              >
-                <Shield className="mr-1 h-3 w-3" /> Staff Alert
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
+				{/* Broadcast */}
+				<Card>
+					<CardHeader>
+						<CardTitle className="text-sm flex items-center gap-2">
+							<Megaphone className="h-4 w-4 text-primary" />
+							Broadcast Alert
+						</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-3">
+						<Textarea
+							value={broadcastMsg}
+							onChange={(e) => setBroadcastMsg(e.target.value)}
+							placeholder="Type broadcast message..."
+							rows={3}
+							className="resize-none"
+						/>
+						<div className="grid grid-cols-2 gap-2">
+							<Button
+								size="sm"
+								disabled={isPending || !broadcastMsg.trim()}
+								onClick={() => {
+									run(
+										() =>
+											broadcastAlert({
+												message: broadcastMsg.trim(),
+												type: "hotel",
+											}),
+										{
+											successMessage: "Hotel alert sent!",
+											onSuccess: () => setBroadcastMsg(""),
+										},
+									);
+								}}
+							>
+								<Megaphone className="mr-1 h-3 w-3" /> Hotel Alert
+							</Button>
+							<Button
+								variant="secondary"
+								size="sm"
+								disabled={isPending || !broadcastMsg.trim()}
+								onClick={() => {
+									run(
+										() =>
+											broadcastAlert({
+												message: broadcastMsg.trim(),
+												type: "staff",
+											}),
+										{
+											successMessage: "Staff alert sent!",
+											onSuccess: () => setBroadcastMsg(""),
+										},
+									);
+								}}
+							>
+								<Shield className="mr-1 h-3 w-3" /> Staff Alert
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
 }

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

@@ -3,16 +3,19 @@ import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { ModActionsClient } from "./mod-actions-client";
 
 export default async function QuickActionsPage() {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.MODERATION_EDIT, session.user.rank)) redirect("/admin");
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.MODERATION_EDIT, session.user.rank))
+		redirect("/admin");
 
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">Quick Actions</h1>
-        <p className="text-muted-foreground">Fast moderation tools — kick, mute, alert, broadcast</p>
-      </div>
-      <ModActionsClient />
-    </div>
-  );
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-3xl font-bold tracking-tight">Quick Actions</h1>
+				<p className="text-muted-foreground">
+					Fast moderation tools — kick, mute, alert, broadcast
+				</p>
+			</div>
+			<ModActionsClient />
+		</div>
+	);
 }

src/app/admin/moderation/cfh/[id]/cfh-detail.tsx

@@ -1,397 +1,449 @@
 "use client";
 
 import {
-  AlertTriangle,
-  ArrowLeft,
-  Ban,
-  CheckCircle2,
-  MessageSquare,
-  Shield,
-  User,
-  VolumeX,
-  Zap,
+	AlertTriangle,
+	ArrowLeft,
+	Ban,
+	CheckCircle2,
+	MessageSquare,
+	Shield,
+	User,
+	VolumeX,
+	Zap,
 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import {
-  assignCfhTicket,
-  closeCfhTicket,
-  quickAlert,
-  quickKick,
-  quickMute,
-  updateCfhState,
+	assignCfhTicket,
+	closeCfhTicket,
+	quickAlert,
+	quickKick,
+	quickMute,
+	updateCfhState,
 } from "@/actions/moderation";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { useServerAction } from "@/hooks/use-server-action";
 
 const CFH_STATES: Record<number, { label: string; class: string }> = {
-  0: { label: "Open", class: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)]" },
-  1: { label: "Picked", class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]" },
-  2: { label: "Closed", class: "bg-muted text-muted-foreground" },
+	0: {
+		label: "Open",
+		class: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)]",
+	},
+	1: {
+		label: "Picked",
+		class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
+	},
+	2: { label: "Closed", class: "bg-muted text-muted-foreground" },
 };
 
 interface UserInfo {
-  id: number;
-  username: string;
-  look: string;
-  rank: number;
-  online: string;
-  ipRegister: string;
-  mail: string | null;
+	id: number;
+	username: string;
+	look: string;
+	rank: number;
+	online: string;
+	ipRegister: string;
+	mail: string | null;
 }
 
 interface BanRecord {
-  id: number;
-  reason: string;
-  type: string;
-  staff: string;
-  timestamp: number;
+	id: number;
+	reason: string;
+	type: string;
+	staff: string;
+	timestamp: number;
 }
 
 export function CfhDetail({
-  ticket,
-  sender,
-  reported,
-  moderator,
-  banHistory,
-  canEdit,
-  // biome-ignore lint/correctness/noUnusedFunctionParameters: part of the public component API
-  currentUserId,
+	ticket,
+	sender,
+	reported,
+	moderator,
+	banHistory,
+	canEdit,
+	// biome-ignore lint/correctness/noUnusedFunctionParameters: part of the public component API
+	currentUserId,
 }: {
-  ticket: {
-    id: number;
-    state: number;
-    type: number;
-    timestamp: number;
-    issue: string;
-    roomId: number;
-    category: number;
-    score: number;
-  };
-  sender: UserInfo | null;
-  reported: UserInfo | null;
-  moderator: UserInfo | null;
-  banHistory: { count: number; recent: BanRecord[] };
-  canEdit: boolean;
-  currentUserId: number;
+	ticket: {
+		id: number;
+		state: number;
+		type: number;
+		timestamp: number;
+		issue: string;
+		roomId: number;
+		category: number;
+		score: number;
+	};
+	sender: UserInfo | null;
+	reported: UserInfo | null;
+	moderator: UserInfo | null;
+	banHistory: { count: number; recent: BanRecord[] };
+	canEdit: boolean;
+	currentUserId: number;
 }) {
-  const { run, isPending } = useServerAction();
-  const [alertMsg, setAlertMsg] = useState("");
-  const [muteDuration, setMuteDuration] = useState(10);
+	const { run, isPending } = useServerAction();
+	const [alertMsg, setAlertMsg] = useState("");
+	const [muteDuration, setMuteDuration] = useState(10);
 
-  const state = CFH_STATES[ticket.state] ?? CFH_STATES[0];
+	const state = CFH_STATES[ticket.state] ?? CFH_STATES[0];
 
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-start gap-4">
-        <Link href="/admin/moderation/cfh">
-          <Button variant="ghost" size="icon">
-            <ArrowLeft className="h-4 w-4" />
-          </Button>
-        </Link>
-        <div className="flex-1">
-          <div className="flex items-center gap-2 mb-1">
-            <span className="text-sm text-muted-foreground font-mono">CFH #{ticket.id}</span>
-            <Badge className={state.class}>{state.label}</Badge>
-            <span className="text-xs text-muted-foreground">
-              Type {ticket.type} · Category {ticket.category}
-            </span>
-          </div>
-          <h1 className="text-xl font-bold">Call For Help Report</h1>
-          <p className="text-xs text-muted-foreground">
-            {new Date(ticket.timestamp * 1000).toLocaleString()} · Room #{ticket.roomId}
-          </p>
-        </div>
-      </div>
+	return (
+		<div className="space-y-6">
+			{/* Header */}
+			<div className="flex items-start gap-4">
+				<Link href="/admin/moderation/cfh">
+					<Button variant="ghost" size="icon">
+						<ArrowLeft className="h-4 w-4" />
+					</Button>
+				</Link>
+				<div className="flex-1">
+					<div className="flex items-center gap-2 mb-1">
+						<span className="text-sm text-muted-foreground font-mono">
+							CFH #{ticket.id}
+						</span>
+						<Badge className={state.class}>{state.label}</Badge>
+						<span className="text-xs text-muted-foreground">
+							Type {ticket.type} · Category {ticket.category}
+						</span>
+					</div>
+					<h1 className="text-xl font-bold">Call For Help Report</h1>
+					<p className="text-xs text-muted-foreground">
+						{new Date(ticket.timestamp * 1000).toLocaleString()} · Room #
+						{ticket.roomId}
+					</p>
+				</div>
+			</div>
 
-      <div className="grid gap-6 lg:grid-cols-[1fr_300px]">
-        {/* Main content */}
-        <div className="space-y-4">
-          {/* Issue */}
-          <Card>
-            <CardHeader className="pb-2">
-              <CardTitle className="text-sm flex items-center gap-2">
-                <MessageSquare className="h-4 w-4" />
-                Report Message
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm leading-relaxed whitespace-pre-wrap">
-                {ticket.issue || "No description provided."}
-              </p>
-            </CardContent>
-          </Card>
+			<div className="grid gap-6 lg:grid-cols-[1fr_300px]">
+				{/* Main content */}
+				<div className="space-y-4">
+					{/* Issue */}
+					<Card>
+						<CardHeader className="pb-2">
+							<CardTitle className="text-sm flex items-center gap-2">
+								<MessageSquare className="h-4 w-4" />
+								Report Message
+							</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<p className="text-sm leading-relaxed whitespace-pre-wrap">
+								{ticket.issue || "No description provided."}
+							</p>
+						</CardContent>
+					</Card>
 
-          {/* Users involved */}
-          <div className="grid gap-4 sm:grid-cols-2">
-            {/* Sender */}
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm text-[var(--admin-info)]">Reporter</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {sender ? (
-                  <Link
-                    href={`/admin/users/show/${sender.id}`}
-                    className="flex items-center gap-3 hover:text-primary no-underline"
-                  >
-                    <User className="h-4 w-4" />
-                    <div>
-                      <p className="text-sm font-bold">{sender.username}</p>
-                      <p className="text-xs text-muted-foreground">
-                        Rank {sender.rank} · {sender.online === "1" ? "Online" : "Offline"}
-                      </p>
-                    </div>
-                  </Link>
-                ) : (
-                  <p className="text-sm text-muted-foreground">Unknown user</p>
-                )}
-              </CardContent>
-            </Card>
+					{/* Users involved */}
+					<div className="grid gap-4 sm:grid-cols-2">
+						{/* Sender */}
+						<Card>
+							<CardHeader className="pb-2">
+								<CardTitle className="text-sm text-[var(--admin-info)]">
+									Reporter
+								</CardTitle>
+							</CardHeader>
+							<CardContent>
+								{sender ? (
+									<Link
+										href={`/admin/users/show/${sender.id}`}
+										className="flex items-center gap-3 hover:text-primary no-underline"
+									>
+										<User className="h-4 w-4" />
+										<div>
+											<p className="text-sm font-bold">{sender.username}</p>
+											<p className="text-xs text-muted-foreground">
+												Rank {sender.rank} ·{" "}
+												{sender.online === "1" ? "Online" : "Offline"}
+											</p>
+										</div>
+									</Link>
+								) : (
+									<p className="text-sm text-muted-foreground">Unknown user</p>
+								)}
+							</CardContent>
+						</Card>
 
-            {/* Reported */}
-            <Card className="border-[var(--admin-error-border)]">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm text-[var(--admin-error)]">Reported User</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {reported ? (
-                  <div>
-                    <Link
-                      href={`/admin/users/show/${reported.id}`}
-                      className="flex items-center gap-3 hover:text-primary no-underline"
-                    >
-                      <AlertTriangle className="h-4 w-4 text-[var(--admin-error)]" />
-                      <div>
-                        <p className="text-sm font-bold">{reported.username}</p>
-                        <p className="text-xs text-muted-foreground">
-                          Rank {reported.rank} · {reported.online === "1" ? "Online" : "Offline"} ·{" "}
-                          {banHistory.count} bans
-                        </p>
-                      </div>
-                    </Link>
+						{/* Reported */}
+						<Card className="border-[var(--admin-error-border)]">
+							<CardHeader className="pb-2">
+								<CardTitle className="text-sm text-[var(--admin-error)]">
+									Reported User
+								</CardTitle>
+							</CardHeader>
+							<CardContent>
+								{reported ? (
+									<div>
+										<Link
+											href={`/admin/users/show/${reported.id}`}
+											className="flex items-center gap-3 hover:text-primary no-underline"
+										>
+											<AlertTriangle className="h-4 w-4 text-[var(--admin-error)]" />
+											<div>
+												<p className="text-sm font-bold">{reported.username}</p>
+												<p className="text-xs text-muted-foreground">
+													Rank {reported.rank} ·{" "}
+													{reported.online === "1" ? "Online" : "Offline"} ·{" "}
+													{banHistory.count} bans
+												</p>
+											</div>
+										</Link>
 
-                    {/* Quick actions on reported user */}
-                    {canEdit && (
-                      <div className="mt-3 pt-3 border-t space-y-2">
-                        <div className="flex gap-2">
-                          <Button
-                            size="sm"
-                            variant="destructive"
-                            className="flex-1"
-                            disabled={isPending}
-                            onClick={() =>
-                              run(() => quickKick({ userId: reported.id }), {
-                                successMessage: "User kicked",
-                              })
-                            }
-                          >
-                            <Zap className="mr-1 h-3 w-3" /> Kick
-                          </Button>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="flex-1"
-                            disabled={isPending}
-                            onClick={() =>
-                              run(() => quickMute({ userId: reported.id, duration: muteDuration }), {
-                                successMessage: `Muted for ${muteDuration}min`,
-                              })
-                            }
-                          >
-                            <VolumeX className="mr-1 h-3 w-3" /> Mute
-                          </Button>
-                        </div>
-                        <Input
-                          type="number"
-                          min={1}
-                          max={1440}
-                          value={muteDuration}
-                          onChange={(e) => setMuteDuration(Number(e.target.value))}
-                          className="h-7 text-xs"
-                          placeholder="Mute duration (min)"
-                        />
-                        <div className="flex gap-2">
-                          <Textarea
-                            value={alertMsg}
-                            onChange={(e) => setAlertMsg(e.target.value)}
-                            placeholder="Alert message..."
-                            rows={2}
-                            className="text-xs resize-none"
-                          />
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="shrink-0"
-                            disabled={isPending || !alertMsg.trim()}
-                            onClick={() => {
-                              run(() => quickAlert({ userId: reported.id, message: alertMsg.trim() }), {
-                                successMessage: "Alert sent",
-                                onSuccess: () => setAlertMsg(""),
-                              });
-                            }}
-                          >
-                            Alert
-                          </Button>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                ) : (
-                  <p className="text-sm text-muted-foreground">Unknown user</p>
-                )}
-              </CardContent>
-            </Card>
-          </div>
+										{/* Quick actions on reported user */}
+										{canEdit && (
+											<div className="mt-3 pt-3 border-t space-y-2">
+												<div className="flex gap-2">
+													<Button
+														size="sm"
+														variant="destructive"
+														className="flex-1"
+														disabled={isPending}
+														onClick={() =>
+															run(() => quickKick({ userId: reported.id }), {
+																successMessage: "User kicked",
+															})
+														}
+													>
+														<Zap className="mr-1 h-3 w-3" /> Kick
+													</Button>
+													<Button
+														size="sm"
+														variant="outline"
+														className="flex-1"
+														disabled={isPending}
+														onClick={() =>
+															run(
+																() =>
+																	quickMute({
+																		userId: reported.id,
+																		duration: muteDuration,
+																	}),
+																{
+																	successMessage: `Muted for ${muteDuration}min`,
+																},
+															)
+														}
+													>
+														<VolumeX className="mr-1 h-3 w-3" /> Mute
+													</Button>
+												</div>
+												<Input
+													type="number"
+													min={1}
+													max={1440}
+													value={muteDuration}
+													onChange={(e) =>
+														setMuteDuration(Number(e.target.value))
+													}
+													className="h-7 text-xs"
+													placeholder="Mute duration (min)"
+												/>
+												<div className="flex gap-2">
+													<Textarea
+														value={alertMsg}
+														onChange={(e) => setAlertMsg(e.target.value)}
+														placeholder="Alert message..."
+														rows={2}
+														className="text-xs resize-none"
+													/>
+													<Button
+														size="sm"
+														variant="outline"
+														className="shrink-0"
+														disabled={isPending || !alertMsg.trim()}
+														onClick={() => {
+															run(
+																() =>
+																	quickAlert({
+																		userId: reported.id,
+																		message: alertMsg.trim(),
+																	}),
+																{
+																	successMessage: "Alert sent",
+																	onSuccess: () => setAlertMsg(""),
+																},
+															);
+														}}
+													>
+														Alert
+													</Button>
+												</div>
+											</div>
+										)}
+									</div>
+								) : (
+									<p className="text-sm text-muted-foreground">Unknown user</p>
+								)}
+							</CardContent>
+						</Card>
+					</div>
 
-          {/* Ban history */}
-          {banHistory.recent.length > 0 && (
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm flex items-center gap-2">
-                  <Ban className="h-4 w-4 text-[var(--admin-error)]" />
-                  Ban History ({banHistory.count})
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="divide-y divide-border">
-                  {banHistory.recent.map((ban) => (
-                    <div key={ban.id} className="py-2 first:pt-0 last:pb-0 text-xs">
-                      <p className="font-medium">{ban.reason || "No reason"}</p>
-                      <p className="text-muted-foreground">
-                        {ban.type} · by {ban.staff} · {new Date(ban.timestamp * 1000).toLocaleDateString()}
-                      </p>
-                    </div>
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-          )}
-        </div>
+					{/* Ban history */}
+					{banHistory.recent.length > 0 && (
+						<Card>
+							<CardHeader className="pb-2">
+								<CardTitle className="text-sm flex items-center gap-2">
+									<Ban className="h-4 w-4 text-[var(--admin-error)]" />
+									Ban History ({banHistory.count})
+								</CardTitle>
+							</CardHeader>
+							<CardContent>
+								<div className="divide-y divide-border">
+									{banHistory.recent.map((ban) => (
+										<div
+											key={ban.id}
+											className="py-2 first:pt-0 last:pb-0 text-xs"
+										>
+											<p className="font-medium">{ban.reason || "No reason"}</p>
+											<p className="text-muted-foreground">
+												{ban.type} · by {ban.staff} ·{" "}
+												{new Date(ban.timestamp * 1000).toLocaleDateString()}
+											</p>
+										</div>
+									))}
+								</div>
+							</CardContent>
+						</Card>
+					)}
+				</div>
 
-        {/* Sidebar */}
-        <div className="space-y-4">
-          {/* Actions */}
-          {canEdit && (
-            <Card>
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm">Actions</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                <div>
-                  <span className="text-xs text-muted-foreground mb-1 block">Status</span>
-                  <Select
-                    value={String(ticket.state)}
-                    onValueChange={(v) =>
-                      run(() => updateCfhState({ ticketId: ticket.id, state: Number(v) }), {
-                        successMessage: "Status updated",
-                      })
-                    }
-                  >
-                    <SelectTrigger className="h-8 text-xs">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="0" className="text-xs">
-                        Open
-                      </SelectItem>
-                      <SelectItem value="1" className="text-xs">
-                        Picked
-                      </SelectItem>
-                      <SelectItem value="2" className="text-xs">
-                        Closed
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
+				{/* Sidebar */}
+				<div className="space-y-4">
+					{/* Actions */}
+					{canEdit && (
+						<Card>
+							<CardHeader className="pb-2">
+								<CardTitle className="text-sm">Actions</CardTitle>
+							</CardHeader>
+							<CardContent className="space-y-3">
+								<div>
+									<span className="text-xs text-muted-foreground mb-1 block">
+										Status
+									</span>
+									<Select
+										value={String(ticket.state)}
+										onValueChange={(v) =>
+											run(
+												() =>
+													updateCfhState({
+														ticketId: ticket.id,
+														state: Number(v),
+													}),
+												{
+													successMessage: "Status updated",
+												},
+											)
+										}
+									>
+										<SelectTrigger className="h-8 text-xs">
+											<SelectValue />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectItem value="0" className="text-xs">
+												Open
+											</SelectItem>
+											<SelectItem value="1" className="text-xs">
+												Picked
+											</SelectItem>
+											<SelectItem value="2" className="text-xs">
+												Closed
+											</SelectItem>
+										</SelectContent>
+									</Select>
+								</div>
 
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="w-full"
-                  disabled={isPending}
-                  onClick={() =>
-                    run(() => assignCfhTicket({ ticketId: ticket.id }), {
-                      successMessage: "Assigned to you",
-                    })
-                  }
-                >
-                  <Shield className="mr-1.5 h-3.5 w-3.5" /> Assign to me
-                </Button>
+								<Button
+									variant="outline"
+									size="sm"
+									className="w-full"
+									disabled={isPending}
+									onClick={() =>
+										run(() => assignCfhTicket({ ticketId: ticket.id }), {
+											successMessage: "Assigned to you",
+										})
+									}
+								>
+									<Shield className="mr-1.5 h-3.5 w-3.5" /> Assign to me
+								</Button>
 
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="w-full text-[var(--admin-success)]"
-                  disabled={isPending || ticket.state === 2}
-                  onClick={() =>
-                    run(() => closeCfhTicket({ ticketId: ticket.id }), {
-                      successMessage: "Ticket closed",
-                    })
-                  }
-                >
-                  <CheckCircle2 className="mr-1.5 h-3.5 w-3.5" /> Close Ticket
-                </Button>
-              </CardContent>
-            </Card>
-          )}
+								<Button
+									variant="outline"
+									size="sm"
+									className="w-full text-[var(--admin-success)]"
+									disabled={isPending || ticket.state === 2}
+									onClick={() =>
+										run(() => closeCfhTicket({ ticketId: ticket.id }), {
+											successMessage: "Ticket closed",
+										})
+									}
+								>
+									<CheckCircle2 className="mr-1.5 h-3.5 w-3.5" /> Close Ticket
+								</Button>
+							</CardContent>
+						</Card>
+					)}
 
-          {/* Moderator */}
-          <Card>
-            <CardHeader className="pb-2">
-              <CardTitle className="text-sm">Assigned Moderator</CardTitle>
-            </CardHeader>
-            <CardContent>
-              {moderator ? (
-                <Link
-                  href={`/admin/users/show/${moderator.id}`}
-                  className="flex items-center gap-2 text-sm hover:text-primary no-underline"
-                >
-                  <Shield className="h-3.5 w-3.5 text-primary" />
-                  {moderator.username}
-                </Link>
-              ) : (
-                <p className="text-xs text-muted-foreground">Unassigned</p>
-              )}
-            </CardContent>
-          </Card>
+					{/* Moderator */}
+					<Card>
+						<CardHeader className="pb-2">
+							<CardTitle className="text-sm">Assigned Moderator</CardTitle>
+						</CardHeader>
+						<CardContent>
+							{moderator ? (
+								<Link
+									href={`/admin/users/show/${moderator.id}`}
+									className="flex items-center gap-2 text-sm hover:text-primary no-underline"
+								>
+									<Shield className="h-3.5 w-3.5 text-primary" />
+									{moderator.username}
+								</Link>
+							) : (
+								<p className="text-xs text-muted-foreground">Unassigned</p>
+							)}
+						</CardContent>
+					</Card>
 
-          {/* Details */}
-          <Card>
-            <CardHeader className="pb-2">
-              <CardTitle className="text-sm">Details</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-2 text-xs text-muted-foreground">
-              <div className="flex justify-between">
-                <span>Created</span>
-                <span>{new Date(ticket.timestamp * 1000).toLocaleString()}</span>
-              </div>
-              <div className="flex justify-between">
-                <span>Room</span>
-                <span>#{ticket.roomId}</span>
-              </div>
-              <div className="flex justify-between">
-                <span>Type</span>
-                <span>{ticket.type}</span>
-              </div>
-              <div className="flex justify-between">
-                <span>Category</span>
-                <span>{ticket.category}</span>
-              </div>
-              <div className="flex justify-between">
-                <span>Score</span>
-                <span>{ticket.score}</span>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </div>
-  );
+					{/* Details */}
+					<Card>
+						<CardHeader className="pb-2">
+							<CardTitle className="text-sm">Details</CardTitle>
+						</CardHeader>
+						<CardContent className="space-y-2 text-xs text-muted-foreground">
+							<div className="flex justify-between">
+								<span>Created</span>
+								<span>
+									{new Date(ticket.timestamp * 1000).toLocaleString()}
+								</span>
+							</div>
+							<div className="flex justify-between">
+								<span>Room</span>
+								<span>#{ticket.roomId}</span>
+							</div>
+							<div className="flex justify-between">
+								<span>Type</span>
+								<span>{ticket.type}</span>
+							</div>
+							<div className="flex justify-between">
+								<span>Category</span>
+								<span>{ticket.category}</span>
+							</div>
+							<div className="flex justify-between">
+								<span>Score</span>
+								<span>{ticket.score}</span>
+							</div>
+						</CardContent>
+					</Card>
+				</div>
+			</div>
+		</div>
+	);
 }

src/app/admin/moderation/cfh/[id]/page.tsx

@@ -3,78 +3,91 @@ import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import { CfhDetail } from "./cfh-detail";
 
-export default async function CfhDetailPage({ params }: { params: Promise<{ id: string }> }) {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank)) redirect("/admin");
+export default async function CfhDetailPage({
+	params,
+}: {
+	params: Promise<{ id: string }>;
+}) {
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank))
+		redirect("/admin");
 
-  const { id } = await params;
-  const ticketId = Number(id);
-  if (Number.isNaN(ticketId)) notFound();
+	const { id } = await params;
+	const ticketId = Number(id);
+	if (Number.isNaN(ticketId)) notFound();
 
-  const ticket = await prisma.supportTickets.findUnique({ where: { id: ticketId } });
-  if (!ticket) notFound();
+	const ticket = await prisma.supportTickets.findUnique({
+		where: { id: ticketId },
+	});
+	if (!ticket) notFound();
 
-  const canEdit = canAccess(permissions, PERMS.MODERATION_EDIT, session.user.rank);
+	const canEdit = canAccess(
+		permissions,
+		PERMS.MODERATION_EDIT,
+		session.user.rank,
+	);
 
-  // Fetch sender, reported, mod info
-  const userIds = [ticket.senderId, ticket.reportedId, ticket.modId].filter(Boolean);
-  const users =
-    userIds.length > 0
-      ? await prisma.user.findMany({
-          where: { id: { in: userIds } },
-          select: {
-            id: true,
-            username: true,
-            look: true,
-            rank: true,
-            online: true,
-            ipRegister: true,
-            mail: true,
-          },
-        })
-      : [];
-  const userMap = Object.fromEntries(users.map((u) => [u.id, u]));
+	// Fetch sender, reported, mod info
+	const userIds = [ticket.senderId, ticket.reportedId, ticket.modId].filter(
+		Boolean,
+	);
+	const users =
+		userIds.length > 0
+			? await prisma.user.findMany({
+					where: { id: { in: userIds } },
+					select: {
+						id: true,
+						username: true,
+						look: true,
+						rank: true,
+						online: true,
+						ipRegister: true,
+						mail: true,
+					},
+				})
+			: [];
+	const userMap = Object.fromEntries(users.map((u) => [u.id, u]));
 
-  // Get ban/mute history for reported user
-  const reportedId = ticket.reportedId;
-  const [banCount, recentBans] = reportedId
-    ? await Promise.all([
-        prisma.ban.count({ where: { userId: reportedId } }),
-        prisma.ban.findMany({
-          where: { userId: reportedId },
-          orderBy: { id: "desc" },
-          take: 5,
-        }),
-      ])
-    : [0, []];
+	// Get ban/mute history for reported user
+	const reportedId = ticket.reportedId;
+	const [banCount, recentBans] = reportedId
+		? await Promise.all([
+				prisma.ban.count({ where: { userId: reportedId } }),
+				prisma.ban.findMany({
+					where: { userId: reportedId },
+					orderBy: { id: "desc" },
+					take: 5,
+				}),
+			])
+		: [0, []];
 
-  return (
-    <CfhDetail
-      ticket={{
-        id: ticket.id,
-        state: ticket.state,
-        type: ticket.type,
-        timestamp: ticket.timestamp,
-        issue: ticket.issue,
-        roomId: ticket.roomId,
-        category: ticket.category,
-        score: ticket.score,
-      }}
-      sender={userMap[ticket.senderId] ?? null}
-      reported={userMap[ticket.reportedId] ?? null}
-      moderator={userMap[ticket.modId] ?? null}
-      banHistory={{
-        count: banCount,
-        recent: recentBans.map((b) => ({
-          id: b.id,
-          reason: b.banReason,
-          type: b.type,
-          staff: `Staff #${b.userStaffId}`,
-          timestamp: b.timestamp,
-        })),
-      }}
-      canEdit={canEdit}
-      currentUserId={session.user.id}
-    />
-  );
+	return (
+		<CfhDetail
+			ticket={{
+				id: ticket.id,
+				state: ticket.state,
+				type: ticket.type,
+				timestamp: ticket.timestamp,
+				issue: ticket.issue,
+				roomId: ticket.roomId,
+				category: ticket.category,
+				score: ticket.score,
+			}}
+			sender={userMap[ticket.senderId] ?? null}
+			reported={userMap[ticket.reportedId] ?? null}
+			moderator={userMap[ticket.modId] ?? null}
+			banHistory={{
+				count: banCount,
+				recent: recentBans.map((b) => ({
+					id: b.id,
+					reason: b.banReason,
+					type: b.type,
+					staff: `Staff #${b.userStaffId}`,
+					timestamp: b.timestamp,
+				})),
+			}}
+			canEdit={canEdit}
+			currentUserId={session.user.id}
+		/>
+	);
 }

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

@@ -5,159 +5,188 @@ import { Badge } from "@/components/ui/badge";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
-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 },
+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,
+	},
 };
 
 interface PageProps {
-  searchParams: Promise<{ state?: string; page?: string }>;
+	searchParams: Promise<{ state?: string; page?: string }>;
 }
 
 export default async function CfhListPage({ searchParams }: PageProps) {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank)) redirect("/admin");
+	const { session, permissions } = await getAdminContext();
+	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 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 where = stateFilter >= 0 ? { state: stateFilter } : {};
+	const where = stateFilter >= 0 ? { state: stateFilter } : {};
 
-  const [tickets, total] = await Promise.all([
-    prisma.supportTickets.findMany({
-      where,
-      orderBy: { id: "desc" },
-      skip: (page - 1) * perPage,
-      take: perPage,
-    }),
-    prisma.supportTickets.count({ where }),
-  ]);
+	const [tickets, total] = await Promise.all([
+		prisma.supportTickets.findMany({
+			where,
+			orderBy: { id: "desc" },
+			skip: (page - 1) * perPage,
+			take: perPage,
+		}),
+		prisma.supportTickets.count({ where }),
+	]);
 
-  // Fetch all related users
-  const userIds = [
-    ...new Set([
-      ...tickets.map((t) => t.senderId),
-      ...tickets.map((t) => t.reportedId),
-      ...tickets.map((t) => t.modId),
-    ]),
-  ].filter(Boolean);
+	// Fetch all related users
+	const userIds = [
+		...new Set([
+			...tickets.map((t) => t.senderId),
+			...tickets.map((t) => t.reportedId),
+			...tickets.map((t) => t.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]));
+	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]));
 
-  const totalPages = Math.ceil(total / perPage);
+	const totalPages = Math.ceil(total / perPage);
 
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">CFH Tickets</h1>
-        <p className="text-muted-foreground">In-game Call For Help reports</p>
-      </div>
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-3xl font-bold tracking-tight">CFH Tickets</h1>
+				<p className="text-muted-foreground">In-game Call For Help reports</p>
+			</div>
 
-      {/* 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>
+			{/* 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>
+			{/* 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;
+				{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>
+						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>
-  );
+			{/* 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/moderation/page.tsx

@@ -1,4 +1,12 @@
-import { AlertTriangle, Ban, Clock, Gavel, Radio, Shield, User } from "lucide-react";
+import {
+	AlertTriangle,
+	Ban,
+	Clock,
+	Gavel,
+	Radio,
+	Shield,
+	User,
+} from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { StatsCard } from "@/components/admin/stats-card";
@@ -8,169 +16,201 @@ import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 const CFH_STATES: Record<number, { label: string; class: string }> = {
-  0: { label: "Open", class: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)]" },
-  1: { label: "Picked", class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]" },
-  2: { label: "Closed", class: "bg-muted text-muted-foreground" },
+	0: {
+		label: "Open",
+		class: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)]",
+	},
+	1: {
+		label: "Picked",
+		class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
+	},
+	2: { label: "Closed", class: "bg-muted text-muted-foreground" },
 };
 
 export default async function ModerationDashboard() {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank)) redirect("/admin");
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank))
+		redirect("/admin");
 
-  const now = Math.floor(Date.now() / 1000);
-  const todayStart = now - (now % 86400);
+	const now = Math.floor(Date.now() / 1000);
+	const todayStart = now - (now % 86400);
 
-  const [openCfh, pickedCfh, todayBans, modsOnline, recentCfh, recentModActions] = await Promise.all([
-    prisma.supportTickets.count({ where: { state: 0 } }),
-    prisma.supportTickets.count({ where: { state: 1 } }),
-    prisma.ban.count({ where: { timestamp: { gte: todayStart } } }),
-    prisma.user.count({ where: { online: "1", rank: { gte: 4 } } }),
-    prisma.supportTickets.findMany({
-      orderBy: { id: "desc" },
-      take: 10,
-    }),
-    prisma.adminAuditLog.findMany({
-      where: {
-        action: { startsWith: "mod_" },
-      },
-      orderBy: { id: "desc" },
-      take: 10,
-      include: { user: { select: { username: true } } },
-    }),
-  ]);
+	const [
+		openCfh,
+		pickedCfh,
+		todayBans,
+		modsOnline,
+		recentCfh,
+		recentModActions,
+	] = await Promise.all([
+		prisma.supportTickets.count({ where: { state: 0 } }),
+		prisma.supportTickets.count({ where: { state: 1 } }),
+		prisma.ban.count({ where: { timestamp: { gte: todayStart } } }),
+		prisma.user.count({ where: { online: "1", rank: { gte: 4 } } }),
+		prisma.supportTickets.findMany({
+			orderBy: { id: "desc" },
+			take: 10,
+		}),
+		prisma.adminAuditLog.findMany({
+			where: {
+				action: { startsWith: "mod_" },
+			},
+			orderBy: { id: "desc" },
+			take: 10,
+			include: { user: { select: { username: true } } },
+		}),
+	]);
 
-  // Fetch usernames for CFH tickets
-  const userIds = [
-    ...new Set([
-      ...recentCfh.map((t) => t.senderId),
-      ...recentCfh.map((t) => t.reportedId),
-      ...recentCfh.map((t) => t.modId),
-    ]),
-  ].filter(Boolean);
+	// Fetch usernames for CFH tickets
+	const userIds = [
+		...new Set([
+			...recentCfh.map((t) => t.senderId),
+			...recentCfh.map((t) => t.reportedId),
+			...recentCfh.map((t) => t.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]));
+	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]));
 
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">Moderation</h1>
-        <p className="text-muted-foreground">In-game moderation dashboard</p>
-      </div>
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-3xl font-bold tracking-tight">Moderation</h1>
+				<p className="text-muted-foreground">In-game moderation dashboard</p>
+			</div>
 
-      {/* Stats */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <StatsCard
-          title="Open CFH"
-          value={openCfh}
-          description={`${pickedCfh} picked`}
-          icon={<Radio className="h-4 w-4" />}
-          href="/admin/moderation/cfh"
-        />
-        <StatsCard
-          title="Bans Today"
-          value={todayBans}
-          icon={<Ban className="h-4 w-4" />}
-          href="/admin/bans"
-        />
-        <StatsCard
-          title="Mods Online"
-          value={modsOnline}
-          icon={<Shield className="h-4 w-4" />}
-          href="/admin/moderation/team"
-        />
-        <StatsCard
-          title="Quick Actions"
-          value="→"
-          description="Kick, mute, alert"
-          icon={<Gavel className="h-4 w-4" />}
-          href="/admin/moderation/actions"
-        />
-      </div>
+			{/* Stats */}
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+				<StatsCard
+					title="Open CFH"
+					value={openCfh}
+					description={`${pickedCfh} picked`}
+					icon={<Radio className="h-4 w-4" />}
+					href="/admin/moderation/cfh"
+				/>
+				<StatsCard
+					title="Bans Today"
+					value={todayBans}
+					icon={<Ban className="h-4 w-4" />}
+					href="/admin/bans"
+				/>
+				<StatsCard
+					title="Mods Online"
+					value={modsOnline}
+					icon={<Shield className="h-4 w-4" />}
+					href="/admin/moderation/team"
+				/>
+				<StatsCard
+					title="Quick Actions"
+					value="→"
+					description="Kick, mute, alert"
+					icon={<Gavel className="h-4 w-4" />}
+					href="/admin/moderation/actions"
+				/>
+			</div>
 
-      <div className="grid gap-6 lg:grid-cols-2">
-        {/* Recent CFH */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center justify-between">
-              <span className="flex items-center gap-2">
-                <AlertTriangle className="h-4 w-4 text-[var(--admin-error)]" />
-                Recent CFH Tickets
-              </span>
-              <Link href="/admin/moderation/cfh" className="text-xs font-normal text-primary hover:underline">
-                View all
-              </Link>
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            {recentCfh.length === 0 ? (
-              <p className="text-sm text-muted-foreground text-center py-4">No CFH tickets</p>
-            ) : (
-              <div className="divide-y divide-border">
-                {recentCfh.map((ticket) => {
-                  const state = CFH_STATES[ticket.state] ?? CFH_STATES[0];
-                  return (
-                    <Link
-                      key={ticket.id}
-                      href={`/admin/moderation/cfh/${ticket.id}`}
-                      className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0 hover:bg-accent/50 -mx-2 px-2 rounded transition-colors"
-                    >
-                      <span className="text-xs font-mono text-muted-foreground w-8">#{ticket.id}</span>
-                      <div className="flex-1 min-w-0">
-                        <p className="text-sm truncate">{ticket.issue || "No description"}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {userMap.get(ticket.senderId) ?? "?"} → {userMap.get(ticket.reportedId) ?? "?"}
-                        </p>
-                      </div>
-                      <Badge className={`text-[10px] ${state.class}`}>{state.label}</Badge>
-                    </Link>
-                  );
-                })}
-              </div>
-            )}
-          </CardContent>
-        </Card>
+			<div className="grid gap-6 lg:grid-cols-2">
+				{/* Recent CFH */}
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center justify-between">
+							<span className="flex items-center gap-2">
+								<AlertTriangle className="h-4 w-4 text-[var(--admin-error)]" />
+								Recent CFH Tickets
+							</span>
+							<Link
+								href="/admin/moderation/cfh"
+								className="text-xs font-normal text-primary hover:underline"
+							>
+								View all
+							</Link>
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						{recentCfh.length === 0 ? (
+							<p className="text-sm text-muted-foreground text-center py-4">
+								No CFH tickets
+							</p>
+						) : (
+							<div className="divide-y divide-border">
+								{recentCfh.map((ticket) => {
+									const state = CFH_STATES[ticket.state] ?? CFH_STATES[0];
+									return (
+										<Link
+											key={ticket.id}
+											href={`/admin/moderation/cfh/${ticket.id}`}
+											className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0 hover:bg-accent/50 -mx-2 px-2 rounded transition-colors"
+										>
+											<span className="text-xs font-mono text-muted-foreground w-8">
+												#{ticket.id}
+											</span>
+											<div className="flex-1 min-w-0">
+												<p className="text-sm truncate">
+													{ticket.issue || "No description"}
+												</p>
+												<p className="text-xs text-muted-foreground">
+													{userMap.get(ticket.senderId) ?? "?"} →{" "}
+													{userMap.get(ticket.reportedId) ?? "?"}
+												</p>
+											</div>
+											<Badge className={`text-[10px] ${state.class}`}>
+												{state.label}
+											</Badge>
+										</Link>
+									);
+								})}
+							</div>
+						)}
+					</CardContent>
+				</Card>
 
-        {/* Recent Mod Actions */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Clock className="h-4 w-4" />
-              Recent Mod Actions
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            {recentModActions.length === 0 ? (
-              <p className="text-sm text-muted-foreground text-center py-4">No recent actions</p>
-            ) : (
-              <div className="divide-y divide-border">
-                {recentModActions.map((log) => (
-                  <div key={log.id} className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0">
-                    <User className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium truncate">
-                        {log.action.replace("mod_", "").replace(/_/g, " ")}
-                      </p>
-                      <p className="text-xs text-muted-foreground">
-                        by {log.user?.username ?? "?"} · {log.target} {log.targetId ? `#${log.targetId}` : ""}
-                      </p>
-                    </div>
-                    <span className="text-[10px] text-muted-foreground whitespace-nowrap">
-                      {log.createdAt}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
+				{/* Recent Mod Actions */}
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center gap-2">
+							<Clock className="h-4 w-4" />
+							Recent Mod Actions
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						{recentModActions.length === 0 ? (
+							<p className="text-sm text-muted-foreground text-center py-4">
+								No recent actions
+							</p>
+						) : (
+							<div className="divide-y divide-border">
+								{recentModActions.map((log) => (
+									<div
+										key={log.id}
+										className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0"
+									>
+										<User className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+										<div className="flex-1 min-w-0">
+											<p className="text-sm font-medium truncate">
+												{log.action.replace("mod_", "").replace(/_/g, " ")}
+											</p>
+											<p className="text-xs text-muted-foreground">
+												by {log.user?.username ?? "?"} · {log.target}{" "}
+												{log.targetId ? `#${log.targetId}` : ""}
+											</p>
+										</div>
+										<span className="text-[10px] text-muted-foreground whitespace-nowrap">
+											{log.createdAt}
+										</span>
+									</div>
+								))}
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
 }

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

@@ -7,141 +7,152 @@ import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export default async function ModTeamPage() {
-  const { session, permissions } = await getAdminContext();
-  if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank)) redirect("/admin");
+	const { session, permissions } = await getAdminContext();
+	if (!canAccess(permissions, PERMS.MODERATION_VIEW, session.user.rank))
+		redirect("/admin");
 
-  // Get all staff (rank >= 4)
-  const staff = await prisma.user.findMany({
-    where: { rank: { gte: 4 } },
-    select: {
-      id: true,
-      username: true,
-      look: true,
-      rank: true,
-      online: true,
-      lastLogin: true,
-      lastOnline: true,
-    },
-    orderBy: [{ online: "desc" }, { rank: "desc" }],
-  });
+	// Get all staff (rank >= 4)
+	const staff = await prisma.user.findMany({
+		where: { rank: { gte: 4 } },
+		select: {
+			id: true,
+			username: true,
+			look: true,
+			rank: true,
+			online: true,
+			lastLogin: true,
+			lastOnline: true,
+		},
+		orderBy: [{ online: "desc" }, { rank: "desc" }],
+	});
 
-  // Get CFH ticket counts per mod and web ticket counts
-  const [cfhCounts, webTicketCounts, modActionCounts] = await Promise.all([
-    prisma.supportTickets.groupBy({
-      by: ["modId"],
-      where: { modId: { in: staff.map((s) => s.id) } },
-      _count: { _all: true },
-    }),
-    prisma.websiteTicket.groupBy({
-      by: ["assigneeId"],
-      where: { assigneeId: { in: staff.map((s) => s.id) } },
-      _count: { _all: true },
-    }),
-    prisma.adminAuditLog.groupBy({
-      by: ["userId"],
-      where: {
-        userId: { in: staff.map((s) => s.id) },
-        action: { startsWith: "mod_" },
-      },
-      _count: { _all: true },
-    }),
-  ]);
+	// Get CFH ticket counts per mod and web ticket counts
+	const [cfhCounts, webTicketCounts, modActionCounts] = await Promise.all([
+		prisma.supportTickets.groupBy({
+			by: ["modId"],
+			where: { modId: { in: staff.map((s) => s.id) } },
+			_count: { _all: true },
+		}),
+		prisma.websiteTicket.groupBy({
+			by: ["assigneeId"],
+			where: { assigneeId: { in: staff.map((s) => s.id) } },
+			_count: { _all: true },
+		}),
+		prisma.adminAuditLog.groupBy({
+			by: ["userId"],
+			where: {
+				userId: { in: staff.map((s) => s.id) },
+				action: { startsWith: "mod_" },
+			},
+			_count: { _all: true },
+		}),
+	]);
 
-  const cfhMap = new Map(cfhCounts.map((c) => [c.modId, c._count._all]));
-  const webMap = new Map(webTicketCounts.map((c) => [c.assigneeId, c._count._all]));
-  const actionMap = new Map(modActionCounts.map((c) => [c.userId, c._count._all]));
+	const cfhMap = new Map(cfhCounts.map((c) => [c.modId, c._count._all]));
+	const webMap = new Map(
+		webTicketCounts.map((c) => [c.assigneeId, c._count._all]),
+	);
+	const actionMap = new Map(
+		modActionCounts.map((c) => [c.userId, c._count._all]),
+	);
 
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">Mod Team</h1>
-        <p className="text-muted-foreground">Staff performance and status</p>
-      </div>
+	return (
+		<div className="space-y-6">
+			<div>
+				<h1 className="text-3xl font-bold tracking-tight">Mod Team</h1>
+				<p className="text-muted-foreground">Staff performance and status</p>
+			</div>
 
-      {/* Summary */}
-      <div className="grid gap-4 grid-cols-3">
-        <Card>
-          <CardContent className="pt-4 text-center">
-            <p className="text-2xl font-bold text-[var(--admin-success)]">
-              {staff.filter((s) => s.online === "1").length}
-            </p>
-            <p className="text-xs text-muted-foreground">Online Now</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-4 text-center">
-            <p className="text-2xl font-bold">{staff.length}</p>
-            <p className="text-xs text-muted-foreground">Total Staff</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-4 text-center">
-            <p className="text-2xl font-bold text-primary">{staff.filter((s) => s.rank >= 7).length}</p>
-            <p className="text-xs text-muted-foreground">Super Admins</p>
-          </CardContent>
-        </Card>
-      </div>
+			{/* Summary */}
+			<div className="grid gap-4 grid-cols-3">
+				<Card>
+					<CardContent className="pt-4 text-center">
+						<p className="text-2xl font-bold text-[var(--admin-success)]">
+							{staff.filter((s) => s.online === "1").length}
+						</p>
+						<p className="text-xs text-muted-foreground">Online Now</p>
+					</CardContent>
+				</Card>
+				<Card>
+					<CardContent className="pt-4 text-center">
+						<p className="text-2xl font-bold">{staff.length}</p>
+						<p className="text-xs text-muted-foreground">Total Staff</p>
+					</CardContent>
+				</Card>
+				<Card>
+					<CardContent className="pt-4 text-center">
+						<p className="text-2xl font-bold text-primary">
+							{staff.filter((s) => s.rank >= 7).length}
+						</p>
+						<p className="text-xs text-muted-foreground">Super Admins</p>
+					</CardContent>
+				</Card>
+			</div>
 
-      {/* Staff list */}
-      <div className="rounded-lg border">
-        <div className="grid grid-cols-[auto_1fr_auto_auto_auto_auto_auto] gap-4 p-3 bg-muted/50 text-xs font-medium text-muted-foreground border-b">
-          <span></span>
-          <span>Name</span>
-          <span>Rank</span>
-          <span>CFH</span>
-          <span>Tickets</span>
-          <span>Actions</span>
-          <span>Last Seen</span>
-        </div>
+			{/* Staff list */}
+			<div className="rounded-lg border">
+				<div className="grid grid-cols-[auto_1fr_auto_auto_auto_auto_auto] gap-4 p-3 bg-muted/50 text-xs font-medium text-muted-foreground border-b">
+					<span></span>
+					<span>Name</span>
+					<span>Rank</span>
+					<span>CFH</span>
+					<span>Tickets</span>
+					<span>Actions</span>
+					<span>Last Seen</span>
+				</div>
 
-        {staff.map((member) => (
-          <Link
-            key={member.id}
-            href={`/admin/users/show/${member.id}`}
-            className="grid grid-cols-[auto_1fr_auto_auto_auto_auto_auto] gap-4 p-3 items-center hover:bg-accent/50 transition-all duration-150 border-b last:border-0"
-          >
-            <div className="relative">
-              <AvatarImage
-                figure={member.look}
-                options={{ headOnly: true, size: "l" }}
-                alt={member.username}
-                width={32}
-                height={32}
-              />
-              <span
-                className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-background ${
-                  member.online === "1" ? "bg-[var(--admin-success)]" : "bg-[var(--admin-text-muted)]"
-                }`}
-              />
-            </div>
-            <div>
-              <p className="text-sm font-medium">{member.username}</p>
-            </div>
-            <Badge variant="outline" className="text-[10px]">
-              Rank {member.rank}
-            </Badge>
-            <div className="text-center">
-              <p className="text-sm font-bold">{cfhMap.get(member.id) ?? 0}</p>
-              <p className="text-[9px] text-muted-foreground">CFH</p>
-            </div>
-            <div className="text-center">
-              <p className="text-sm font-bold">{webMap.get(member.id) ?? 0}</p>
-              <p className="text-[9px] text-muted-foreground">Web</p>
-            </div>
-            <div className="text-center">
-              <p className="text-sm font-bold">{actionMap.get(member.id) ?? 0}</p>
-              <p className="text-[9px] text-muted-foreground">Mod</p>
-            </div>
-            <span className="text-xs text-muted-foreground whitespace-nowrap">
-              {member.online === "1"
-                ? "Online"
-                : member.lastOnline
-                  ? new Date(member.lastOnline * 1000).toLocaleDateString()
-                  : "—"}
-            </span>
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
+				{staff.map((member) => (
+					<Link
+						key={member.id}
+						href={`/admin/users/show/${member.id}`}
+						className="grid grid-cols-[auto_1fr_auto_auto_auto_auto_auto] gap-4 p-3 items-center hover:bg-accent/50 transition-all duration-150 border-b last:border-0"
+					>
+						<div className="relative">
+							<AvatarImage
+								figure={member.look}
+								options={{ headOnly: true, size: "l" }}
+								alt={member.username}
+								width={32}
+								height={32}
+							/>
+							<span
+								className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-background ${
+									member.online === "1"
+										? "bg-[var(--admin-success)]"
+										: "bg-[var(--admin-text-muted)]"
+								}`}
+							/>
+						</div>
+						<div>
+							<p className="text-sm font-medium">{member.username}</p>
+						</div>
+						<Badge variant="outline" className="text-[10px]">
+							Rank {member.rank}
+						</Badge>
+						<div className="text-center">
+							<p className="text-sm font-bold">{cfhMap.get(member.id) ?? 0}</p>
+							<p className="text-[9px] text-muted-foreground">CFH</p>
+						</div>
+						<div className="text-center">
+							<p className="text-sm font-bold">{webMap.get(member.id) ?? 0}</p>
+							<p className="text-[9px] text-muted-foreground">Web</p>
+						</div>
+						<div className="text-center">
+							<p className="text-sm font-bold">
+								{actionMap.get(member.id) ?? 0}
+							</p>
+							<p className="text-[9px] text-muted-foreground">Mod</p>
+						</div>
+						<span className="text-xs text-muted-foreground whitespace-nowrap">
+							{member.online === "1"
+								? "Online"
+								: member.lastOnline
+									? new Date(member.lastOnline * 1000).toLocaleDateString()
+									: "—"}
+						</span>
+					</Link>
+				))}
+			</div>
+		</div>
+	);
 }