Reapply "Add missing admin action files and navigation links"

This reverts commit 4d515bc400.

src/app/admin/users/[id]/edit/page.tsx

@@ -12,11 +12,7 @@ export const dynamic = "force-dynamic";
 const DUCKETS_TYPE = 0;
 const DIAMONDS_TYPE = 5;
 
-export default async function AdminUserEdit({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
+export default async function AdminUserEdit({ params }: { params: Promise<{ id: string }> }) {
   // Gate the page with the SAME helper the action re-checks.
   await requireStaff();
 
@@ -88,7 +84,9 @@ export default async function AdminUserEdit({
           <User size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title", { username: user.username })}</h1>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">
+            {t("title", { username: user.username })}
+          </h1>
           <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("idLabel", { id: user.id })}</p>
         </div>
       </div>
@@ -146,8 +144,12 @@ export default async function AdminUserEdit({
         <p className="text-xs text-gray-500 dark:text-gray-400">{t("hint")}</p>
 
         <div className="flex gap-2 mt-2">
-          <button type="submit" className="btn btn-primary">{t("save")}</button>
-          <Link href={`/admin/users/${user.id}`} className="btn">{t("cancel")}</Link>
+          <button type="submit" className="btn btn-primary">
+            {t("save")}
+          </button>
+          <Link href={`/admin/users/${user.id}`} className="btn">
+            {t("cancel")}
+          </Link>
         </div>
       </form>
     </main>

src/app/admin/users/[id]/loading.tsx

@@ -0,0 +1,50 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function UserDetailLoading() {
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-4 w-16" />
+        <Skeleton className="h-4 w-4" />
+        <Skeleton className="h-4 w-24" />
+      </div>
+
+      {/* User header */}
+      <div className="flex items-center gap-4">
+        <Skeleton className="h-16 w-16 rounded" />
+        <div>
+          <Skeleton className="h-9 w-40" />
+          <div className="flex items-center gap-2 mt-1">
+            <Skeleton className="h-5 w-16 rounded-full" />
+            <Skeleton className="h-5 w-16 rounded-full" />
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Form */}
+        <div className="rounded-lg border bg-card p-6 space-y-4">
+          <Skeleton className="h-6 w-24" />
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="space-y-2">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ))}
+          <Skeleton className="h-10 w-24 mt-4" />
+        </div>
+
+        {/* Side cards */}
+        <div className="space-y-6">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="rounded-lg border bg-card p-6 space-y-3">
+              <Skeleton className="h-6 w-32" />
+              <Skeleton className="h-20 w-full" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/admin/users/[id]/page.tsx

@@ -1,137 +1,11 @@
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import {
-  alertUser,
-  disconnectUser,
-  giveCurrency,
-  setMotto,
-  setRank,
-} from "@/actions/admin-users";
-import { InfoItem, StatusCard } from "@/components/admin/dashboard";
-import { User } from "lucide-react";
-import { prisma } from "@/lib/prisma";
-import { getTranslations } from "next-intl/server";
+import { redirect } from 'next/navigation'
 
-export const dynamic = "force-dynamic";
-
-export default async function AdminUserDetail({
+/** Legacy route — redirects to /admin/users/show/[id] */
+export default async function UserLegacyPage({
   params,
 }: {
-  params: Promise<{ id: string }>;
+  params: Promise<{ locale: string; id: string }>
 }) {
-  const { id } = await params;
-  const t = await getTranslations("pages.admin.users");
-  const userId = Number(id);
-  const user = await prisma.user
-    .findUnique({
-      where: { id: userId },
-      select: { id: true, username: true, motto: true, rank: true, credits: true, look: true, online: true },
-    })
-    .catch(() => null);
-  if (!user) notFound();
-
-  const isOnline = user.online === "1";
-
-  return (
-    <main>
-      <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
-        <Link href="/admin/users">← {t("title")}</Link>
-      </p>
-      <div className="flex items-center gap-3 mb-6">
-        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
-          <User size={20} className="text-[var(--color-primary)]" />
-        </div>
-        <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{user.username}</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{user.motto ? user.motto : t("detail.noMotto")}</p>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label={t("detail.userId")} value={user.id} icon="🆔" />
-        <StatusCard label={t("detail.rank")} value={user.rank} icon="🎖️" />
-        <StatusCard label={t("detail.credits")} value={user.credits} icon="💰" />
-        <StatusCard
-          label={t("detail.online")}
-          value={isOnline ? t("detail.online") : t("offline")}
-          state={isOnline ? "ok" : "neutral"}
-          icon={isOnline ? "🟢" : "⚪"}
-        />
-      </div>
-
-      <section className="mt-6">
-        <h2 className="admin-section-title">{t("detail.overview")}</h2>
-        <div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
-          <InfoItem label={t("detail.username")} value={user.username} />
-          <InfoItem
-            label={t("detail.online")}
-            value={
-              <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${isOnline ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
-                {isOnline ? t("detail.online") : t("offline")}
-              </span>
-            }
-          />
-          <InfoItem label={t("detail.rank")} value={user.rank} />
-          <InfoItem label={t("detail.credits")} value={user.credits} />
-          <InfoItem label={t("detail.look")} value={<code>{user.look || "—"}</code>} />
-        </div>
-      </section>
-
-      <section className="mt-6">
-        <h2 className="admin-section-title">{t("detail.actions")}</h2>
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-          <form action={giveCurrency} className="admin-card">
-            <input type="hidden" name="userId" value={user.id} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.giveCurrency")}</h3>
-            <select name="type">
-              <option value="credits">{t("detail.credits")}</option>
-              <option value="duckets">{t("detail.duckets")}</option>
-              <option value="diamonds">{t("detail.diamonds")}</option>
-              <option value="points">{t("detail.points")}</option>
-            </select>{" "}
-            <input name="amount" type="number" min={1} placeholder={t("detail.amountPlaceholder")} />{" "}
-            <button type="submit" className="btn btn-primary">
-              {t("detail.give")}
-            </button>
-          </form>
-
-          <form action={setMotto} className="admin-card">
-            <input type="hidden" name="userId" value={user.id} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.setMotto")}</h3>
-            <input name="motto" defaultValue={user.motto} maxLength={127} />{" "}
-            <button type="submit" className="btn btn-primary">
-              {t("detail.save")}
-            </button>
-          </form>
-
-          <form action={setRank} className="admin-card">
-            <input type="hidden" name="userId" value={user.id} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.setRank")}</h3>
-            <input name="rank" type="number" min={1} defaultValue={user.rank} />{" "}
-            <button type="submit" className="btn btn-primary">
-              {t("detail.set")}
-            </button>
-          </form>
-
-          <form action={alertUser} className="admin-card">
-            <input type="hidden" name="userId" value={user.id} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.sendAlert")}</h3>
-            <input name="message" placeholder={t("detail.messagePlaceholder")} />{" "}
-            <button type="submit" className="btn btn-primary">
-              {t("detail.send")}
-            </button>
-          </form>
-
-          <form action={disconnectUser} className="admin-card">
-            <input type="hidden" name="userId" value={user.id} />
-            <input type="hidden" name="username" value={user.username} />
-            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">{t("detail.disconnectUser")}</h3>
-            <button type="submit" className="btn btn-danger">
-              {t("detail.disconnectFromHotel")}
-            </button>
-          </form>
-        </div>
-      </section>
-    </main>
-  );
+  const { id } = await params
+  redirect(`/admin/users/show/${id}`)
 }

src/app/admin/users/[id]/user-activity-log.tsx

@@ -0,0 +1,114 @@
+import { MessageSquare, Terminal } from 'lucide-react'
+import Link from 'next/link'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface ChatMessage {
+  id: number
+  roomId: number
+  timestamp: number
+  message: string
+}
+
+interface CommandEntry {
+  id: number
+  timestamp: number
+  command: string
+  params: string
+  succes: string
+}
+
+interface UserActivityLogProps {
+  chatLogs: ChatMessage[]
+  commandLogs: CommandEntry[]
+}
+
+function formatTime(ts: number) {
+  if (!ts) return '-'
+  const d = new Date(ts * 1000)
+  return d.toLocaleString(undefined, {
+    day: '2-digit',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+export function UserActivityLog({ chatLogs, commandLogs }: UserActivityLogProps) {
+  return (
+    <div className="grid gap-6 lg:grid-cols-2">
+      {/* Chat Messages */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <MessageSquare className="h-4 w-4" />
+            Recent Messages ({chatLogs.length})
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {chatLogs.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No recent messages.</p>
+          ) : (
+            <div className="space-y-2 max-h-[400px] overflow-y-auto">
+              {chatLogs.map((log) => (
+                <div key={log.id} className="rounded-md border px-3 py-2 text-sm">
+                  <div className="flex items-center justify-between gap-2 mb-1">
+                    <Link
+                      href={`/admin/rooms/${log.roomId}`}
+                      className="text-xs text-primary hover:underline"
+                    >
+                      Room #{log.roomId}
+                    </Link>
+                    <span className="text-xs text-muted-foreground">
+                      {formatTime(log.timestamp)}
+                    </span>
+                  </div>
+                  <p className="break-words">{log.message}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Commands */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Terminal className="h-4 w-4" />
+            Recent Commands ({commandLogs.length})
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {commandLogs.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No recent commands.</p>
+          ) : (
+            <div className="space-y-2 max-h-[400px] overflow-y-auto">
+              {commandLogs.map((log) => (
+                <div key={log.id} className="rounded-md border px-3 py-2 text-sm">
+                  <div className="flex items-center justify-between gap-2">
+                    <code className="font-mono text-xs font-bold">:{log.command}</code>
+                    <div className="flex items-center gap-2">
+                      <Badge
+                        variant={log.succes === 'yes' ? 'default' : 'destructive'}
+                        className="text-[10px]"
+                      >
+                        {log.succes === 'yes' ? 'OK' : 'FAIL'}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">
+                        {formatTime(log.timestamp)}
+                      </span>
+                    </div>
+                  </div>
+                  {log.params && (
+                    <p className="text-xs text-muted-foreground mt-1 break-words">{log.params}</p>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/admin/users/[id]/user-badges-section.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { Plus, X } from 'lucide-react'
+import { useState } from 'react'
+import { giveBadge, removeBadge } from '@/actions/users'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { useServerAction } from '@/hooks/use-server-action'
+
+interface BadgeInfo {
+  id: number
+  badgeCode: string
+}
+
+interface UserBadgesSectionProps {
+  userId: number
+  badges: BadgeInfo[]
+}
+
+export function UserBadgesSection({ userId, badges }: UserBadgesSectionProps) {
+  const { isPending, run } = useServerAction()
+  const [newBadge, setNewBadge] = useState('')
+
+  function handleAddBadge() {
+    if (!newBadge.trim()) return
+    run(() => giveBadge({ userId, badgeCode: newBadge.trim() }), {
+      successMessage: `Badge "${newBadge.trim()}" added.`,
+      onSuccess: () => setNewBadge(''),
+    })
+  }
+
+  function handleRemoveBadge(badgeCode: string) {
+    run(() => removeBadge({ userId, badgeCode }), {
+      successMessage: `Badge "${badgeCode}" removed.`,
+    })
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Badges ({badges.length})</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex gap-2">
+          <Input
+            value={newBadge}
+            onChange={(e) => setNewBadge(e.target.value)}
+            placeholder="Badge code..."
+            onKeyDown={(e) => e.key === 'Enter' && handleAddBadge()}
+          />
+          <Button size="icon" onClick={handleAddBadge} disabled={isPending}>
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {badges.map((badge) => (
+            <div
+              key={badge.id}
+              className="group flex items-center gap-1.5 rounded-md border bg-card px-2 py-1 text-sm hover:border-destructive/50 transition-colors"
+            >
+              <img
+                src={
+                  process.env.NEXT_PUBLIC_BADGE_URL
+                    ? `${process.env.NEXT_PUBLIC_BADGE_URL}/${badge.badgeCode}.gif`
+                    : `/swf/c_images/album1584/${badge.badgeCode}.gif`
+                }
+                alt={badge.badgeCode}
+                className="h-5 w-5"
+                onError={(e) => {
+                  ;(e.target as HTMLImageElement).style.display = 'none'
+                }}
+              />
+              <span>{badge.badgeCode}</span>
+              <button
+                type="button"
+                onClick={() => handleRemoveBadge(badge.badgeCode)}
+                disabled={isPending}
+                className="ml-0.5 rounded-full p-0.5 opacity-0 group-hover:opacity-100 hover:bg-destructive/10 text-destructive transition-opacity disabled:opacity-50"
+                title={`Remove ${badge.badgeCode}`}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </div>
+          ))}
+          {badges.length === 0 && <p className="text-sm text-muted-foreground">No badges</p>}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/app/admin/users/[id]/user-ban-section.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { Ban, ShieldOff } from 'lucide-react'
+import { useState } from 'react'
+import { banUser, unbanUser } from '@/actions/users'
+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 { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { useServerAction } from '@/hooks/use-server-action'
+
+interface BanInfo {
+  id: number
+  reason: string
+  type: string
+  staffName: string
+  timestamp: number
+  banExpire: number
+}
+
+interface UserBanSectionProps {
+  userId: number
+  username: string
+  bans: BanInfo[]
+}
+
+export function UserBanSection({ userId, username, bans }: UserBanSectionProps) {
+  const { isPending, run } = useServerAction()
+  const [showBanForm, setShowBanForm] = useState(false)
+  const [reason, setReason] = useState('')
+  const [duration, setDuration] = useState('24')
+  const [banType, setBanType] = useState('account')
+
+  const activeBan = bans.find((b) => {
+    const now = Math.floor(Date.now() / 1000)
+    return b.banExpire === 0 || b.banExpire > now
+  })
+
+  function handleBan() {
+    run(
+      () =>
+        banUser({
+          userId,
+          reason,
+          duration: parseInt(duration, 10),
+          type: banType as 'account' | 'ip' | 'machine',
+        }),
+      {
+        successMessage: `${username} has been banned.`,
+        onSuccess: () => {
+          setShowBanForm(false)
+          setReason('')
+        },
+      },
+    )
+  }
+
+  function handleUnban() {
+    run(() => unbanUser({ userId }), {
+      successMessage: `${username} has been unbanned.`,
+    })
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>Bans</CardTitle>
+        <div className="flex gap-2">
+          {activeBan ? (
+            <Button variant="outline" size="sm" onClick={handleUnban} disabled={isPending}>
+              <ShieldOff className="mr-2 h-4 w-4" />
+              Unban
+            </Button>
+          ) : (
+            <Button variant="destructive" size="sm" onClick={() => setShowBanForm(!showBanForm)}>
+              <Ban className="mr-2 h-4 w-4" />
+              Ban
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {activeBan && (
+          <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
+            <p className="text-sm font-medium text-destructive">Active Ban</p>
+            <p className="text-sm">{activeBan.reason}</p>
+            <p className="text-xs text-muted-foreground">
+              By {activeBan.staffName} &middot;{' '}
+              {activeBan.banExpire === 0
+                ? 'Permanent'
+                : `Expires ${new Date(activeBan.banExpire * 1000).toLocaleString()}`}
+            </p>
+          </div>
+        )}
+
+        {showBanForm && !activeBan && (
+          <div className="space-y-3 rounded-md border p-3">
+            <div className="space-y-2">
+              <Label>Reason</Label>
+              <Textarea
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                placeholder="Ban reason..."
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label>Duration (hours)</Label>
+                <Input
+                  type="number"
+                  value={duration}
+                  onChange={(e) => setDuration(e.target.value)}
+                  placeholder="0 = permanent"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Type</Label>
+                <Select value={banType} onValueChange={setBanType}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="account">Account</SelectItem>
+                    <SelectItem value="ip">IP</SelectItem>
+                    <SelectItem value="machine">Machine</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <Button variant="destructive" onClick={handleBan} disabled={isPending || !reason}>
+              {isPending ? 'Banning...' : 'Confirm Ban'}
+            </Button>
+          </div>
+        )}
+
+        {bans.length > 0 && (
+          <div className="space-y-2">
+            <p className="text-sm font-medium">History</p>
+            {bans.map((ban) => (
+              <div key={ban.id} className="flex items-center justify-between text-sm">
+                <div>
+                  <span>{ban.reason}</span>
+                  <span className="ml-2">
+                    <Badge variant="outline">{ban.type}</Badge>
+                  </span>
+                </div>
+                <span className="text-xs text-muted-foreground">
+                  {new Date(ban.timestamp * 1000).toLocaleDateString()}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/app/admin/users/[id]/user-edit-form.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { updateUser } from '@/actions/users'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useServerAction } from '@/hooks/use-server-action'
+import { type UpdateUserInput, updateUserSchema } from '@/lib/validators/user'
+
+interface UserEditFormProps {
+  user: {
+    id: number
+    username: string
+    mail: string
+    rank: number
+    motto: string
+    credits: number
+    pixels: number
+    diamonds: number
+    duckets: number
+  }
+  /** Ranks loaded from the `permissions` table (id + human-readable name). */
+  ranks?: Array<{ id: number; name: string }>
+}
+
+// Fallback used if the page does not supply the DB-loaded rank list.
+const FALLBACK_RANKS: Array<{ id: number; name: string }> = [
+  { id: 1, name: 'User' },
+  { id: 2, name: 'Bronze' },
+  { id: 3, name: 'Silver' },
+  { id: 4, name: 'Gold' },
+  { id: 5, name: 'Moderator' },
+  { id: 6, name: 'Admin' },
+  { id: 7, name: 'Super Admin' },
+]
+
+export function UserEditForm({ user, ranks }: UserEditFormProps) {
+  const rankOptions = ranks && ranks.length > 0 ? ranks : FALLBACK_RANKS
+  const { isPending, run } = useServerAction()
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<UpdateUserInput>({
+    resolver: zodResolver(updateUserSchema),
+    defaultValues: {
+      username: user.username,
+      mail: user.mail,
+      rank: user.rank,
+      motto: user.motto,
+      credits: user.credits,
+      pixels: user.pixels,
+      diamonds: user.diamonds,
+      duckets: user.duckets,
+    },
+  })
+
+  function onSubmit(data: UpdateUserInput) {
+    run(() => updateUser({ id: user.id, ...data }), {
+      successMessage: 'User updated successfully.',
+    })
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Edit User</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="username">Username</Label>
+              <Input id="username" {...register('username')} />
+              {errors.username && (
+                <p className="text-sm text-destructive">{errors.username.message}</p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="mail">Email</Label>
+              <Input id="mail" type="email" {...register('mail')} />
+              {errors.mail && <p className="text-sm text-destructive">{errors.mail.message}</p>}
+            </div>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="rank">Rank</Label>
+              <Select
+                defaultValue={String(user.rank)}
+                onValueChange={(v) => setValue('rank', parseInt(v, 10))}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select rank" />
+                </SelectTrigger>
+                <SelectContent>
+                  {rankOptions.map((r) => (
+                    <SelectItem key={r.id} value={String(r.id)}>
+                      {r.id} — {r.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="motto">Motto</Label>
+              <Input id="motto" {...register('motto')} />
+            </div>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <div className="space-y-2">
+              <Label htmlFor="credits">Credits</Label>
+              <Input id="credits" type="number" {...register('credits', { valueAsNumber: true })} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="pixels">Pixels</Label>
+              <Input id="pixels" type="number" {...register('pixels', { valueAsNumber: true })} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="diamonds">Diamonds</Label>
+              <Input
+                id="diamonds"
+                type="number"
+                {...register('diamonds', { valueAsNumber: true })}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="duckets">Duckets</Label>
+              <Input id="duckets" type="number" {...register('duckets', { valueAsNumber: true })} />
+            </div>
+          </div>
+
+          <Button type="submit" disabled={isPending}>
+            {isPending ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}

src/app/admin/users/[id]/user-quick-actions.tsx

@@ -0,0 +1,219 @@
+'use client'
+
+import { Check, Coins, Copy, KeyRound, MessageCircle, Unplug, Volume2, VolumeX } from 'lucide-react'
+import { useState } from 'react'
+import {
+  alertUser,
+  disconnectUser,
+  muteUser,
+  resetPassword,
+  sendCredits,
+  unmuteUser,
+} from '@/actions/users'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { useServerAction } from '@/hooks/use-server-action'
+
+interface UserQuickActionsProps {
+  userId: number
+  username: string
+  isOnline: boolean
+}
+
+export function UserQuickActions({ userId, username, isOnline }: UserQuickActionsProps) {
+  const { run, isPending } = useServerAction()
+
+  // Reset password state
+  const [newPassword, setNewPassword] = useState<string | null>(null)
+  const [copied, setCopied] = useState(false)
+
+  // Alert state
+  const [alertMessage, setAlertMessage] = useState('')
+
+  // Mute state
+  const [muteDuration, setMuteDuration] = useState('10')
+
+  // Credits state
+  const [creditAmount, setCreditAmount] = useState('1000')
+
+  function handleResetPassword() {
+    if (!confirm(`Reset password for ${username}? A new random password will be generated.`)) return
+    run(() => resetPassword({ userId }), {
+      successMessage: 'Password reset successfully.',
+      onSuccess: (data) => {
+        setNewPassword(data.newPassword as string)
+      },
+    })
+  }
+
+  function handleDisconnect() {
+    run(() => disconnectUser({ userId }), {
+      successMessage: `${username} disconnected.`,
+    })
+  }
+
+  function handleAlert() {
+    if (!alertMessage.trim()) return
+    run(() => alertUser({ userId, message: alertMessage.trim() }), {
+      successMessage: 'Alert sent.',
+      onSuccess: () => setAlertMessage(''),
+    })
+  }
+
+  function handleMute() {
+    const duration = Number(muteDuration)
+    if (Number.isNaN(duration) || duration < 0) return
+    run(() => muteUser({ userId, duration }), {
+      successMessage: `${username} muted.`,
+    })
+  }
+
+  function handleUnmute() {
+    run(() => unmuteUser({ userId }), {
+      successMessage: `${username} unmuted.`,
+    })
+  }
+
+  function handleSendCredits() {
+    const amount = parseInt(creditAmount, 10)
+    if (!amount || amount <= 0) return
+    run(() => sendCredits({ userId, amount }), {
+      successMessage: `${amount.toLocaleString()} credits sent to ${username}.`,
+    })
+  }
+
+  function copyPassword() {
+    if (newPassword) {
+      navigator.clipboard.writeText(newPassword)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Quick Actions</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Row 1: Password + Disconnect */}
+          <div className="grid grid-cols-2 gap-3">
+            <Button
+              variant="outline"
+              onClick={handleResetPassword}
+              disabled={isPending}
+              className="justify-start"
+            >
+              <KeyRound className="mr-2 h-4 w-4" />
+              Reset Password
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleDisconnect}
+              disabled={isPending || !isOnline}
+              className="justify-start"
+            >
+              <Unplug className="mr-2 h-4 w-4" />
+              Disconnect
+              {isOnline && (
+                <Badge variant="default" className="ml-auto text-[10px] bg-green-600">
+                  Online
+                </Badge>
+              )}
+            </Button>
+          </div>
+
+          {/* Send Alert */}
+          <div className="space-y-2">
+            <Label className="text-xs text-muted-foreground">Send In-Game Alert</Label>
+            <div className="flex gap-2">
+              <Input
+                placeholder="Message to send..."
+                value={alertMessage}
+                onChange={(e) => setAlertMessage(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleAlert()}
+                className="flex-1"
+              />
+              <Button
+                onClick={handleAlert}
+                disabled={isPending || !alertMessage.trim()}
+                size="icon"
+              >
+                <MessageCircle className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Mute */}
+          <div className="space-y-2">
+            <Label className="text-xs text-muted-foreground">Mute / Unmute</Label>
+            <div className="flex gap-2">
+              <Input
+                type="number"
+                placeholder="Minutes (0 = permanent)"
+                value={muteDuration}
+                onChange={(e) => setMuteDuration(e.target.value)}
+                className="w-32"
+              />
+              <Button variant="outline" onClick={handleMute} disabled={isPending} size="sm">
+                <VolumeX className="mr-1.5 h-3.5 w-3.5" /> Mute
+              </Button>
+              <Button variant="outline" onClick={handleUnmute} disabled={isPending} size="sm">
+                <Volume2 className="mr-1.5 h-3.5 w-3.5" /> Unmute
+              </Button>
+            </div>
+          </div>
+
+          {/* Send Credits */}
+          <div className="space-y-2">
+            <Label className="text-xs text-muted-foreground">Send Credits (RCON)</Label>
+            <div className="flex gap-2">
+              <Input
+                type="number"
+                value={creditAmount}
+                onChange={(e) => setCreditAmount(e.target.value)}
+                className="w-32"
+                min={1}
+              />
+              <Button variant="outline" onClick={handleSendCredits} disabled={isPending} size="sm">
+                <Coins className="mr-1.5 h-3.5 w-3.5" /> Send Credits
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Password Reset Dialog */}
+      <Dialog open={!!newPassword} onOpenChange={() => setNewPassword(null)}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Password Reset</DialogTitle>
+            <DialogDescription>
+              New password generated for <strong>{username}</strong>. Copy it now — it won&apos;t be
+              shown again.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex items-center gap-2 rounded-lg border bg-muted p-3">
+            <code className="flex-1 text-lg font-mono font-bold tracking-wider select-all">
+              {newPassword}
+            </code>
+            <Button variant="ghost" size="icon" onClick={copyPassword}>
+              {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

src/app/admin/users/[id]/user-rooms.tsx

@@ -0,0 +1,65 @@
+import { DoorOpen, Users } from 'lucide-react'
+import Link from 'next/link'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface UserRoom {
+  id: number
+  name: string
+  state: string
+  users: number
+  usersMax: number
+}
+
+interface UserRoomsProps {
+  rooms: UserRoom[]
+}
+
+const stateColors: Record<string, 'default' | 'secondary' | 'outline' | 'destructive'> = {
+  open: 'default',
+  locked: 'secondary',
+  password: 'destructive',
+  invisible: 'outline',
+}
+
+export function UserRooms({ rooms }: UserRoomsProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <DoorOpen className="h-4 w-4" />
+          Rooms ({rooms.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {rooms.length === 0 ? (
+          <p className="text-sm text-muted-foreground">This user doesn&apos;t own any rooms.</p>
+        ) : (
+          <div className="grid gap-2 sm:grid-cols-2">
+            {rooms.map((room) => (
+              <Link
+                key={room.id}
+                href={`/admin/rooms/${room.id}`}
+                className="flex items-center gap-3 rounded-lg border px-3 py-2.5 hover:bg-muted/50 transition-colors"
+              >
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{room.name}</p>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <Badge variant={stateColors[room.state] || 'outline'} className="text-[10px]">
+                      {room.state}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground flex items-center gap-1">
+                      <Users className="h-3 w-3" />
+                      {room.users}/{room.usersMax}
+                    </span>
+                  </div>
+                </div>
+                <span className="text-xs font-mono text-muted-foreground">#{room.id}</span>
+              </Link>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/app/admin/users/_components/create-user-dialog.tsx

@@ -0,0 +1,204 @@
+'use client'
+
+import { Loader2, UserPlus } from 'lucide-react'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { createUser } from '@/actions/users'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useServerAction } from '@/hooks/use-server-action'
+
+interface CreateUserDialogProps {
+  sessionRank: number
+}
+
+const RANK_OPTIONS: { value: number; label: string }[] = [
+  { value: 1, label: 'User (1)' },
+  { value: 2, label: 'Bronze (2)' },
+  { value: 3, label: 'Silver (3)' },
+  { value: 4, label: 'Gold (4)' },
+  { value: 5, label: 'Moderator (5)' },
+  { value: 6, label: 'Admin (6)' },
+  { value: 7, label: 'Super Admin (7)' },
+]
+
+export function CreateUserDialog({ sessionRank }: CreateUserDialogProps) {
+  const { run, isPending } = useServerAction()
+  const [open, setOpen] = useState(false)
+  const [username, setUsername] = useState('')
+  const [mail, setMail] = useState('')
+  const [password, setPassword] = useState('')
+  const [rank, setRank] = useState('1')
+  const [motto, setMotto] = useState('')
+
+  const allowedRanks = RANK_OPTIONS.filter((r) => (sessionRank >= 7 ? true : r.value < sessionRank))
+
+  function reset() {
+    setUsername('')
+    setMail('')
+    setPassword('')
+    setRank('1')
+    setMotto('')
+  }
+
+  function generatePassword() {
+    const charset = 'abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ23456789'
+    let out = ''
+    const buf = new Uint32Array(12)
+    crypto.getRandomValues(buf)
+    for (let i = 0; i < buf.length; i++) out += charset[buf[i] % charset.length]
+    setPassword(out)
+    toast.message('Password generated', { description: out })
+  }
+
+  function handleCreate() {
+    const u = username.trim()
+    const m = mail.trim()
+    if (!u || !m || !password) {
+      toast.error('Username, email and password are required')
+      return
+    }
+    if (u.length < 3 || u.length > 20 || !/^[a-zA-Z0-9_-]+$/.test(u)) {
+      toast.error('Invalid username (3-20 chars, letters/digits/_/-)')
+      return
+    }
+    if (password.length < 6) {
+      toast.error('Password must be at least 6 characters')
+      return
+    }
+
+    run(
+      () =>
+        createUser({
+          username: u,
+          mail: m,
+          password,
+          rank: Number(rank),
+          motto: motto.trim(),
+        }),
+      {
+        successMessage: `User "${u}" created.`,
+        onSuccess: () => {
+          setOpen(false)
+          reset()
+        },
+      },
+    )
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next)
+        if (!next) reset()
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button>
+          <UserPlus className="mr-2 h-4 w-4" />
+          New User
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create User</DialogTitle>
+          <DialogDescription>
+            Account is created immediately with default look and 5,000 credits/duckets/diamonds.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="cu-username">Username</Label>
+            <Input
+              id="cu-username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="HabboName"
+              autoComplete="off"
+              maxLength={20}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="cu-mail">Email</Label>
+            <Input
+              id="cu-mail"
+              type="email"
+              value={mail}
+              onChange={(e) => setMail(e.target.value)}
+              placeholder="[email protected]"
+              autoComplete="off"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="cu-password">Password</Label>
+            <div className="flex gap-2">
+              <Input
+                id="cu-password"
+                type="text"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Minimum 6 characters"
+                autoComplete="new-password"
+                className="font-mono"
+              />
+              <Button type="button" variant="outline" onClick={generatePassword}>
+                Generate
+              </Button>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Rank</Label>
+            <Select value={rank} onValueChange={setRank}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {allowedRanks.map((r) => (
+                  <SelectItem key={r.value} value={String(r.value)}>
+                    {r.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="cu-motto">Motto (optional)</Label>
+            <Input
+              id="cu-motto"
+              value={motto}
+              onChange={(e) => setMotto(e.target.value)}
+              maxLength={127}
+              placeholder="I'm new here!"
+            />
+          </div>
+
+          <Button onClick={handleCreate} disabled={isPending} className="w-full">
+            {isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <UserPlus className="mr-2 h-4 w-4" />
+            )}
+            Create User
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/admin/users/_components/user-account-info.tsx

@@ -0,0 +1,115 @@
+import { Calendar, Clock, ExternalLink, Globe, MonitorSmartphone, Shield } from 'lucide-react'
+import Link from 'next/link'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface UserAccountInfoProps {
+  user: {
+    accountCreated: number
+    lastLogin: number | null
+    ipRegister: string
+    ipCurrent: string
+    twoFactorConfirmed: number
+    machine_id: string
+    mail: string
+    gender: string
+  }
+}
+
+export function UserAccountInfo({ user }: UserAccountInfoProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Account Details</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 text-sm">
+              <Calendar className="h-4 w-4 text-muted-foreground shrink-0" />
+              <span className="text-muted-foreground">Registered</span>
+              <span className="ml-auto font-medium">
+                {new Date(user.accountCreated * 1000).toLocaleDateString('it-IT', {
+                  day: '2-digit',
+                  month: 'short',
+                  year: 'numeric',
+                })}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 text-sm">
+              <Clock className="h-4 w-4 text-muted-foreground shrink-0" />
+              <span className="text-muted-foreground">Last Login</span>
+              <span className="ml-auto font-medium">
+                {user.lastLogin
+                  ? new Date(user.lastLogin * 1000).toLocaleDateString('it-IT', {
+                      day: '2-digit',
+                      month: 'short',
+                      year: 'numeric',
+                      hour: '2-digit',
+                      minute: '2-digit',
+                    })
+                  : 'Never'}
+              </span>
+            </div>
+            <div className="flex items-center gap-3 text-sm">
+              <Globe className="h-4 w-4 text-muted-foreground shrink-0" />
+              <span className="text-muted-foreground">IP Register</span>
+              <span className="ml-auto flex items-center gap-1.5">
+                <code className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
+                  {user.ipRegister}
+                </code>
+                <Link
+                  href={`/admin/users?search=${user.ipRegister}`}
+                  title="Find other users with this IP"
+                >
+                  <ExternalLink className="h-3 w-3 text-primary" />
+                </Link>
+              </span>
+            </div>
+            <div className="flex items-center gap-3 text-sm">
+              <Globe className="h-4 w-4 text-muted-foreground shrink-0" />
+              <span className="text-muted-foreground">IP Current</span>
+              <span className="ml-auto flex items-center gap-1.5">
+                <code className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
+                  {user.ipCurrent}
+                </code>
+                <Link
+                  href={`/admin/users?search=${user.ipCurrent}`}
+                  title="Find other users with this IP"
+                >
+                  <ExternalLink className="h-3 w-3 text-primary" />
+                </Link>
+              </span>
+            </div>
+          </div>
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 text-sm">
+              <Shield className="h-4 w-4 text-muted-foreground shrink-0" />
+              <span className="text-muted-foreground">2FA</span>
+              <Badge variant={user.twoFactorConfirmed ? 'default' : 'outline'} className="ml-auto">
+                {user.twoFactorConfirmed ? 'Enabled' : 'Disabled'}
+              </Badge>
+            </div>
+            <div className="flex items-center gap-3 text-sm">
+              <MonitorSmartphone className="h-4 w-4 text-muted-foreground shrink-0" />
+              <span className="text-muted-foreground">Machine ID</span>
+              <code className="ml-auto text-xs font-mono bg-muted px-2 py-0.5 rounded truncate max-w-[180px]">
+                {user.machine_id || 'N/A'}
+              </code>
+            </div>
+            <div className="flex items-center gap-3 text-sm">
+              <span className="text-muted-foreground">Email</span>
+              <span className="ml-auto font-medium">{user.mail}</span>
+            </div>
+            <div className="flex items-center gap-3 text-sm">
+              <span className="text-muted-foreground">Gender</span>
+              <Badge variant="outline" className="ml-auto">
+                {user.gender}
+              </Badge>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/app/admin/users/_components/user-badges-readonly.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+interface Badge {
+  id: number
+  badgeCode: string
+}
+
+export function UserBadgesReadonly({ badges }: { badges: Badge[] }) {
+  if (badges.length === 0) {
+    return <p className="text-sm text-muted-foreground">No badges</p>
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {badges.map((badge) => (
+        <div
+          key={badge.id}
+          className="flex items-center gap-1.5 rounded-md border bg-card px-2 py-1 text-sm"
+        >
+          <img
+            src={
+              process.env.NEXT_PUBLIC_BADGE_URL
+                ? `${process.env.NEXT_PUBLIC_BADGE_URL}/${badge.badgeCode}.gif`
+                : `/swf/c_images/album1584/${badge.badgeCode}.gif`
+            }
+            alt={badge.badgeCode}
+            className="h-5 w-5"
+            onError={(e) => {
+              ;(e.target as HTMLImageElement).style.display = 'none'
+            }}
+          />
+          <span>{badge.badgeCode}</span>
+        </div>
+      ))}
+    </div>
+  )
+}

src/app/admin/users/_components/user-hero.tsx

@@ -0,0 +1,202 @@
+import {
+  ArrowLeftRight,
+  Coins,
+  Diamond,
+  DoorOpen,
+  Eye,
+  Gem,
+  MessageSquare,
+  Pencil,
+  Shield,
+  Sparkles,
+  Wifi,
+  WifiOff,
+} from 'lucide-react'
+import Link from 'next/link'
+import { AdminBreadcrumb } from '@/components/admin/admin-breadcrumb'
+import { UserWatchToggle } from '@/components/admin/user-watch-toggle'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { getAvatarUrl } from '@/lib/imager'
+
+interface UserHeroProps {
+  user: {
+    id: number
+    username: string
+    motto: string
+    look: string
+    rank: number
+    credits: number
+    pixels: number
+    online: string
+    permission: { rankName: string }
+    twoFactorConfirmed: number
+  }
+  diamonds: number
+  duckets: number
+  roomCount: number
+  chatCount: number
+  tradeCount: number
+  isOnline: boolean
+  activeBan: boolean
+  mode: 'show' | 'edit'
+  canEdit: boolean
+  /** When non-null, render the watch toggle with this initial state. */
+  watching?: boolean | null
+}
+
+export function UserHero({
+  user,
+  diamonds,
+  duckets,
+  roomCount,
+  chatCount,
+  tradeCount,
+  isOnline,
+  activeBan,
+  mode,
+  canEdit,
+  watching,
+}: UserHeroProps) {
+  return (
+    <>
+      <AdminBreadcrumb
+        items={[
+          { label: 'Users', href: '/admin/users' },
+          { label: user.username },
+          { label: mode === 'edit' ? 'Edit' : 'View' },
+        ]}
+      />
+
+      <div className="relative rounded-xl border bg-gradient-to-r from-card to-muted/30 p-6">
+        <div className="flex flex-col sm:flex-row items-start gap-5">
+          {/* Avatar */}
+          <div className="relative shrink-0">
+            <img
+              src={getAvatarUrl(user.look, { headDirection: 2, direction: 2 })}
+              alt={user.username}
+              className="h-28 rounded-lg border bg-card shadow-sm"
+              style={{ imageRendering: 'pixelated' }}
+            />
+            <span
+              className={`absolute -top-1 -right-1 flex h-4 w-4 ${isOnline ? '' : 'opacity-50'}`}
+            >
+              {isOnline && (
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+              )}
+              <span
+                className={`relative inline-flex rounded-full h-4 w-4 border-2 border-card ${isOnline ? 'bg-green-500' : 'bg-zinc-400'}`}
+              />
+            </span>
+          </div>
+
+          {/* Info */}
+          <div className="flex-1 min-w-0 space-y-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <h1 className="text-3xl font-bold tracking-tight">{user.username}</h1>
+              <Badge variant="secondary" className="text-xs">
+                ID: {user.id}
+              </Badge>
+              {/* Mode switch buttons */}
+              {mode === 'show' && canEdit && (
+                <Button variant="outline" size="sm" asChild className="ml-2">
+                  <Link href={`/admin/users/edit/${user.id}`}>
+                    <Pencil className="mr-1.5 h-3.5 w-3.5" /> Edit
+                  </Link>
+                </Button>
+              )}
+              {mode === 'edit' && (
+                <Button variant="outline" size="sm" asChild className="ml-2">
+                  <Link href={`/admin/users/show/${user.id}`}>
+                    <Eye className="mr-1.5 h-3.5 w-3.5" /> View
+                  </Link>
+                </Button>
+              )}
+              {watching != null && (
+                <UserWatchToggle
+                  targetUserId={user.id}
+                  username={user.username}
+                  initialWatching={watching}
+                />
+              )}
+            </div>
+
+            {user.motto && (
+              <p className="text-muted-foreground italic">&ldquo;{user.motto}&rdquo;</p>
+            )}
+
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge>{user.permission.rankName || `Rank ${user.rank}`}</Badge>
+              <Badge
+                variant={isOnline ? 'default' : 'outline'}
+                className={isOnline ? 'bg-green-600' : ''}
+              >
+                {isOnline ? (
+                  <>
+                    <Wifi className="mr-1 h-3 w-3" /> Online
+                  </>
+                ) : (
+                  <>
+                    <WifiOff className="mr-1 h-3 w-3" /> Offline
+                  </>
+                )}
+              </Badge>
+              {activeBan && <Badge variant="destructive">Banned</Badge>}
+              {user.twoFactorConfirmed ? (
+                <Badge variant="outline" className="border-green-500/50 text-green-600">
+                  <Shield className="mr-1 h-3 w-3" /> 2FA
+                </Badge>
+              ) : null}
+            </div>
+
+            {/* Currency row */}
+            <div className="flex flex-wrap gap-3 pt-1">
+              <div className="flex items-center gap-1.5 text-sm">
+                <Coins className="h-4 w-4 text-yellow-500" />
+                <span className="font-semibold">{user.credits.toLocaleString()}</span>
+                <span className="text-muted-foreground text-xs">credits</span>
+              </div>
+              <div className="flex items-center gap-1.5 text-sm">
+                <Diamond className="h-4 w-4 text-blue-400" />
+                <span className="font-semibold">{diamonds.toLocaleString()}</span>
+                <span className="text-muted-foreground text-xs">diamonds</span>
+              </div>
+              <div className="flex items-center gap-1.5 text-sm">
+                <Sparkles className="h-4 w-4 text-purple-400" />
+                <span className="font-semibold">{duckets.toLocaleString()}</span>
+                <span className="text-muted-foreground text-xs">duckets</span>
+              </div>
+              <div className="flex items-center gap-1.5 text-sm">
+                <Gem className="h-4 w-4 text-pink-400" />
+                <span className="font-semibold">{user.pixels.toLocaleString()}</span>
+                <span className="text-muted-foreground text-xs">pixels</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Quick stats cards */}
+          <div className="grid grid-cols-3 gap-2 shrink-0">
+            <Link
+              href={`/admin/rooms?search=${user.username}`}
+              className="rounded-lg border bg-card px-3 py-2 text-center hover:shadow-md transition-shadow"
+            >
+              <DoorOpen className="h-4 w-4 mx-auto text-muted-foreground" />
+              <p className="text-lg font-bold">{roomCount}</p>
+              <p className="text-[10px] text-muted-foreground">Rooms</p>
+            </Link>
+            <div className="rounded-lg border bg-card px-3 py-2 text-center">
+              <MessageSquare className="h-4 w-4 mx-auto text-muted-foreground" />
+              <p className="text-lg font-bold">{chatCount.toLocaleString()}</p>
+              <p className="text-[10px] text-muted-foreground">Messages</p>
+            </div>
+            <div className="rounded-lg border bg-card px-3 py-2 text-center">
+              <ArrowLeftRight className="h-4 w-4 mx-auto text-muted-foreground" />
+              <p className="text-lg font-bold">{tradeCount}</p>
+              <p className="text-[10px] text-muted-foreground">Trades</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/app/admin/users/_lib/load-user.ts

@@ -0,0 +1,73 @@
+import { notFound } from 'next/navigation'
+import { prisma } from '@/lib/prisma'
+
+export async function loadUserById(id: string) {
+  const numericId = parseInt(id, 10)
+  const isNumeric = !Number.isNaN(numericId) && String(numericId) === id
+
+  const user = await prisma.user.findUnique({
+    where: isNumeric ? { id: numericId } : { username: id },
+    include: {
+      permission: true,
+      settings: true,
+      currencies: true,
+      badges: true,
+      bansReceived: {
+        include: { staff: { select: { username: true } } },
+        orderBy: { id: 'desc' },
+        take: 5,
+      },
+    },
+  })
+
+  if (!user) notFound()
+
+  const diamonds = user.currencies.find((c) => c.type === 5)?.amount ?? 0
+  const duckets = user.currencies.find((c) => c.type === 0)?.amount ?? 0
+
+  const [roomCount, chatCount, tradeCount, userRooms, chatLogs, commandLogs] = await Promise.all([
+    prisma.room.count({ where: { ownerId: user.id } }),
+    prisma.chatLog.count({ where: { userId: user.id } }),
+    prisma.trade.count({
+      where: { OR: [{ userOneId: user.id }, { userTwoId: user.id }] },
+    }),
+    prisma.room.findMany({
+      where: { ownerId: user.id },
+      orderBy: { users: 'desc' },
+      take: 20,
+      select: { id: true, name: true, state: true, users: true, usersMax: true },
+    }),
+    prisma.chatLog.findMany({
+      where: { userId: user.id },
+      orderBy: { id: 'desc' },
+      take: 20,
+      select: { id: true, roomId: true, timestamp: true, message: true },
+    }),
+    prisma.commandLog.findMany({
+      where: { userId: user.id },
+      orderBy: { id: 'desc' },
+      take: 10,
+      select: { id: true, timestamp: true, command: true, params: true, succes: true },
+    }),
+  ])
+
+  const isOnline = user.online === '1'
+  const activeBan = user.bansReceived.find((b) => {
+    const now = Math.floor(Date.now() / 1000)
+    return b.banExpire === 0 || b.banExpire > now
+  })
+
+  return {
+    user,
+    diamonds,
+    duckets,
+    roomCount,
+    chatCount,
+    tradeCount,
+    userRooms,
+    chatLogs,
+    commandLogs: commandLogs.map((l) => ({ ...l, succes: String(l.succes) })),
+    isOnline,
+    activeBan,
+  }
+}

src/app/admin/users/edit/[id]/page.tsx

@@ -0,0 +1,137 @@
+import { redirect } from 'next/navigation'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Prisma } from '@/generated/prisma/client'
+import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
+import { prisma } from '@/lib/prisma'
+import { getWatchedUserIds } from '@/lib/services/watch'
+import { UserAccountInfo } from '../../_components/user-account-info'
+import { UserHero } from '../../_components/user-hero'
+import { loadUserById } from '../../_lib/load-user'
+import { UserActivityLog } from '../../[id]/user-activity-log'
+import { UserBadgesSection } from '../../[id]/user-badges-section'
+import { UserBanSection } from '../../[id]/user-ban-section'
+import { UserEditForm } from '../../[id]/user-edit-form'
+import { UserQuickActions } from '../../[id]/user-quick-actions'
+import { UserRooms } from '../../[id]/user-rooms'
+
+export default async function UserEditPage({
+  params,
+}: {
+  params: Promise<{ locale: string; id: string }>
+}) {
+  const { id } = await params
+  const { session, permissions } = await getAdminContext()
+  if (!canAccess(permissions, PERMS.USERS_EDIT, session.user.rank)) {
+    redirect('/admin')
+  }
+
+  const data = await loadUserById(id)
+  const watched = await getWatchedUserIds(session.user.id)
+
+  // Fetch rank list from permissions table for the rank dropdown
+  const rawRanks: { id: number; rank_name: string }[] = await prisma.$queryRaw(
+    Prisma.sql`SELECT id, rank_name FROM permissions ORDER BY id ASC`,
+  )
+  const ranks = rawRanks.map((r) => ({
+    id: Number(r.id),
+    name: String(r.rank_name || `Rank ${r.id}`),
+  }))
+
+  return (
+    <div className="space-y-6">
+      <UserHero
+        user={data.user}
+        diamonds={data.diamonds}
+        duckets={data.duckets}
+        roomCount={data.roomCount}
+        chatCount={data.chatCount}
+        tradeCount={data.tradeCount}
+        isOnline={data.isOnline}
+        activeBan={!!data.activeBan}
+        mode="edit"
+        canEdit={true}
+        watching={watched.has(data.user.id)}
+      />
+
+      <div className="grid gap-6 lg:grid-cols-[1fr_320px] xl:grid-cols-[1fr_360px]">
+        <Tabs defaultValue="edit" className="space-y-4 min-w-0">
+          <TabsList className="flex-wrap">
+            <TabsTrigger value="edit">Edit Profile</TabsTrigger>
+            <TabsTrigger value="bans">
+              Bans
+              {data.activeBan && (
+                <span className="ml-1.5 flex h-2 w-2 rounded-full bg-destructive" />
+              )}
+            </TabsTrigger>
+            <TabsTrigger value="badges">Badges ({data.user.badges.length})</TabsTrigger>
+            <TabsTrigger value="rooms">Rooms ({data.roomCount})</TabsTrigger>
+            <TabsTrigger value="activity">Activity</TabsTrigger>
+            <TabsTrigger value="info">Account Info</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="edit">
+            <UserEditForm
+              user={{
+                id: data.user.id,
+                username: data.user.username,
+                mail: data.user.mail,
+                rank: data.user.rank,
+                motto: data.user.motto,
+                credits: data.user.credits,
+                pixels: data.user.pixels,
+                diamonds: data.diamonds,
+                duckets: data.duckets,
+              }}
+              ranks={ranks}
+            />
+          </TabsContent>
+
+          <TabsContent value="bans">
+            <UserBanSection
+              userId={data.user.id}
+              username={data.user.username}
+              bans={data.user.bansReceived.map((b) => ({
+                id: b.id,
+                reason: b.banReason,
+                type: b.type,
+                staffName: b.staff.username,
+                timestamp: b.timestamp,
+                banExpire: b.banExpire,
+              }))}
+            />
+          </TabsContent>
+
+          <TabsContent value="badges">
+            <UserBadgesSection
+              userId={data.user.id}
+              badges={data.user.badges.map((b) => ({
+                id: b.id,
+                badgeCode: b.badgeCode,
+              }))}
+            />
+          </TabsContent>
+
+          <TabsContent value="rooms">
+            <UserRooms rooms={data.userRooms} />
+          </TabsContent>
+
+          <TabsContent value="activity">
+            <UserActivityLog chatLogs={data.chatLogs} commandLogs={data.commandLogs} />
+          </TabsContent>
+
+          <TabsContent value="info">
+            <UserAccountInfo user={data.user} />
+          </TabsContent>
+        </Tabs>
+
+        <aside className="lg:sticky lg:top-4 lg:self-start">
+          <UserQuickActions
+            userId={data.user.id}
+            username={data.user.username}
+            isOnline={data.isOnline}
+          />
+        </aside>
+      </div>
+    </div>
+  )
+}

src/app/admin/users/loading.tsx

@@ -0,0 +1,46 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function UsersLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <Skeleton className="h-9 w-32" />
+          <Skeleton className="h-5 w-56 mt-2" />
+        </div>
+        <Skeleton className="h-10 w-28" />
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-3">
+        <Skeleton className="h-10 w-64" />
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-[100px]" />
+      </div>
+
+      {/* Table */}
+      <div className="rounded-md border">
+        <div className="border-b px-4 py-3">
+          <div className="flex gap-8">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} className="h-4 w-20" />
+            ))}
+          </div>
+        </div>
+        {Array.from({ length: 10 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-8 px-4 py-3 border-b last:border-0">
+            <Skeleton className="h-4 w-10" />
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-8 w-8 rounded" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+            <Skeleton className="h-4 w-36" />
+            <Skeleton className="h-5 w-14 rounded-full" />
+            <Skeleton className="h-4 w-16" />
+            <Skeleton className="h-5 w-14 rounded-full" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/app/admin/users/multi-accounts/page.tsx

@@ -0,0 +1,113 @@
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { detectMultiAccounts, type MultiAccountCluster } from '@/actions/multi-account-detect'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
+
+export default async function MultiAccountsPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string>>
+}) {
+  const { session, permissions } = await getAdminContext()
+  if (!canAccess(permissions, PERMS.USERS_VIEW, session.user.rank)) redirect('/admin')
+
+  const params = await searchParams
+  const minAccounts = Math.max(2, Number(params.min) || 2)
+  const limit = Math.min(200, Number(params.limit) || 50)
+
+  const result = await detectMultiAccounts({ minAccounts, limit })
+  const clusters: MultiAccountCluster[] = result.ok
+    ? ((result.data as { clusters: MultiAccountCluster[] }).clusters ?? [])
+    : []
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Multi-account detector</h1>
+        <p className="text-muted-foreground">
+          Clusters of users sharing a registration IP, current IP, or machine ID. Detection is
+          passive — no AI, just a GROUP BY with index support.
+        </p>
+      </div>
+
+      <form className="flex flex-wrap items-end gap-3" action="">
+        <label className="text-sm">
+          <span className="block text-muted-foreground">Min accounts per cluster</span>
+          <input
+            type="number"
+            name="min"
+            defaultValue={minAccounts}
+            min={2}
+            max={50}
+            className="mt-1 h-9 w-24 rounded-md border bg-background px-2"
+          />
+        </label>
+        <label className="text-sm">
+          <span className="block text-muted-foreground">Result limit</span>
+          <input
+            type="number"
+            name="limit"
+            defaultValue={limit}
+            min={1}
+            max={200}
+            className="mt-1 h-9 w-24 rounded-md border bg-background px-2"
+          />
+        </label>
+        <button
+          type="submit"
+          className="h-9 rounded-md bg-primary px-4 text-sm text-primary-foreground"
+        >
+          Refresh
+        </button>
+      </form>
+
+      {clusters.length === 0 ? (
+        <Card>
+          <CardContent className="py-10 text-center text-muted-foreground">
+            No clusters found at the current thresholds.
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid gap-4">
+          {clusters.map((cluster) => (
+            <Card key={cluster.key}>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0">
+                <CardTitle className="text-base">
+                  <Badge variant="secondary" className="mr-2">
+                    {cluster.label}
+                  </Badge>
+                  {cluster.accountCount} accounts share this identifier
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-2">
+                  {cluster.accounts.map((acc) => (
+                    <Link
+                      key={acc.id}
+                      href={`/admin/users/show/${acc.id}`}
+                      className="inline-flex items-center gap-1.5 rounded-md border bg-background px-2 py-1 text-sm hover:bg-accent"
+                    >
+                      <span className="font-medium">{acc.username}</span>
+                      <span className="text-xs text-muted-foreground">#{acc.id}</span>
+                      {acc.rank >= 5 && <Badge variant="outline">staff</Badge>}
+                      {acc.online === '1' && (
+                        <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
+                      )}
+                    </Link>
+                  ))}
+                  {cluster.accountCount > cluster.accounts.length && (
+                    <span className="text-xs text-muted-foreground">
+                      … and {cluster.accountCount - cluster.accounts.length} more
+                    </span>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/app/admin/users/page.tsx

@@ -1,127 +1,72 @@
-import Link from "next/link";
-import { StatusCard } from "@/components/admin/dashboard";
-import { ConfirmAction } from "@/components/admin/confirm-action";
-import { prisma } from "@/lib/prisma";
-import { getTranslations } from "next-intl/server";
+import { fetchAdminList } from '@/lib/admin-list'
+import { canAccess, PERMS } from '@/lib/permissions'
+import { CreateUserDialog } from './_components/create-user-dialog'
+import { UsersTable } from './users-table'
 
-export const dynamic = "force-dynamic";
-
-const PER_PAGE = 25;
-
-export default async function AdminUsers({
+export default async function UsersPage({
+  params: paramsPromise,
   searchParams,
 }: {
-  searchParams: Promise<{ q?: string; page?: string; form?: string }>;
+  params: Promise<{ locale: string }>
+  searchParams: Promise<Record<string, string>>
 }) {
-  const sp = await searchParams;
-  const t = await getTranslations("pages.admin.users");
-  const q = (sp.q ?? "").trim();
-  const page = Math.max(1, Number(sp.page ?? "1") || 1);
-  const where = q ? { username: { contains: q } } : {};
+  const result = await fetchAdminList(
+    {
+      permission: PERMS.USERS_VIEW,
+      model: 'user',
+      searchFields: ['username', 'mail', 'ipRegister', 'ipCurrent'],
+      select: {
+        id: true,
+        username: true,
+        mail: true,
+        rank: true,
+        credits: true,
+        pixels: true,
+        online: true,
+        motto: true,
+        look: true,
+        ipRegister: true,
+        accountCreated: true,
+        lastLogin: true,
+      },
+      filterMap: {
+        filter_rank: (v) => {
+          const n = Number(v)
+          if (!Number.isFinite(n)) return null
+          // For rank 7 the preset means "super admins" — match ≥ 7 instead of equals.
+          return n >= 7 ? { rank: { gte: 7 } } : { rank: n }
+        },
+        filter_online: (v) => ({ online: v }),
+      },
+    },
+    paramsPromise,
+    searchParams,
+  )
 
-  const users = await prisma.user
-    .findMany({
-      where,
-      select: { id: true, username: true, rank: true, credits: true, online: true },
-      orderBy: { id: "desc" },
-      skip: (page - 1) * PER_PAGE,
-      take: PER_PAGE,
-    })
-    .catch(() => []);
-  const total = await prisma.user.count({ where }).catch(() => 0);
-  const pages = Math.max(1, Math.ceil(total / PER_PAGE));
-
-  const onlineOnPage = users.filter((u) => u.online === "1").length;
+  const canEdit = canAccess(result.permissions, PERMS.USERS_EDIT, result.rank)
+  const canBan = canAccess(result.permissions, PERMS.USERS_BAN, result.rank)
 
   return (
-    <main>
-      <h1>{t("title")}</h1>
-      <p className="muted" style={{ marginTop: "-0.4rem" }}>
-        {q ? t("searchResults", { count: total, query: q }) : t("subtitle")}
-      </p>
-
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
-        <StatusCard label={t("title")} value={total} icon="👥" />
-        <StatusCard label={t("onThisPage")} value={users.length} icon="📄" />
-        <StatusCard
-          label={t("colOnline")}
-          value={onlineOnPage}
-          state={onlineOnPage > 0 ? "ok" : "neutral"}
-          icon="🟢"
-        />
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Users</h1>
+          <p className="text-muted-foreground">{result.total.toLocaleString()} users total</p>
+        </div>
+        {canEdit && <CreateUserDialog sessionRank={result.rank} />}
       </div>
 
-       <form
-         className="admin-card mb-6"
-         style={{ display: "flex", gap: "0.5rem", marginBottom: "1.5rem", flexWrap: "wrap" }}
-       >
-         <input
-           name="q"
-           defaultValue={q}
-           placeholder={t("searchPlaceholder")}
-           style={{ flex: 1, minWidth: 200 }}
-         />
-         <button type="submit" className="btn btn-primary">
-           {t("search")}
-         </button>
-       </form>
-
-      <section className="mt-6">
-        <h2>{t("title")} ({total})</h2>
-        {users.length === 0 ? (
-          <p className="muted">{t("noResults")}</p>
-        ) : (
-          <div style={{ overflowX: "auto" }}>
-            <table className="w-full">
-              <thead>
-                <tr>
-                  <th>{t("colId")}</th>
-                  <th>{t("colUsername")}</th>
-                  <th>{t("colRank")}</th>
-                  <th>{t("detail.credits")}</th>
-                  <th>{t("colOnline")}</th>
-                  <th style={{ width: "200px" }}>{t("colActions")}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {users.map((u) => (
-                  <tr key={u.id}>
-                    <td className="muted">{u.id}</td>
-                    <td>
-                      <Link href={`/admin/users/${u.id}`}>{u.username}</Link>
-                    </td>
-                    <td>{u.rank}</td>
-                    <td>{u.credits}</td>
-                    <td>
-                      <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${u.online === "1" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
-                        {u.online === "1" ? t("colOnline") : t("offline")}
-                      </span>
-                    </td>
-                    <td>
-                      <div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap", justifyContent: "flex-start" }}>
-                        <Link href={`/admin/users/${u.id}/edit`} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("edit")}</Link>
-                        <ConfirmAction message={t("confirmSetRank", { username: u.username })} action="set_rank" userId={u.id} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("setRank")}</ConfirmAction>
-                        <ConfirmAction message={t("confirmDisconnect", { username: u.username })} action="disconnect" userId={u.id} className="btn btn-danger" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("disconnect")}</ConfirmAction>
-                        <ConfirmAction message={t("confirmAlert", { username: u.username })} action="alert" userId={u.id} className="btn btn-primary" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>{t("alert")}</ConfirmAction>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </section>
-
-      <p className="muted">
-        {t("pagination", { page, pages, total })}
-        {page < pages ? (
-          <>
-            {" · "}
-            <Link href={`/admin/users?q=${encodeURIComponent(q)}&page=${page + 1}`}>{t("next")} →</Link>
-          </>
-        ) : null}
-      </p>
-    </main>
-  );
+      <UsersTable
+        data={{
+          rows: result.rows,
+          total: result.total,
+          page: result.page,
+          perPage: result.perPage,
+          lastPage: result.lastPage,
+        }}
+        canEdit={canEdit}
+        canBan={canBan}
+      />
+    </div>
+  )
 }

src/app/admin/users/show/[id]/page.tsx

@@ -0,0 +1,89 @@
+import { redirect } from 'next/navigation'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
+import { getWatchedUserIds } from '@/lib/services/watch'
+import { UserAccountInfo } from '../../_components/user-account-info'
+import { UserBadgesReadonly } from '../../_components/user-badges-readonly'
+import { UserHero } from '../../_components/user-hero'
+import { loadUserById } from '../../_lib/load-user'
+import { UserActivityLog } from '../../[id]/user-activity-log'
+import { UserQuickActions } from '../../[id]/user-quick-actions'
+import { UserRooms } from '../../[id]/user-rooms'
+
+export default async function UserShowPage({
+  params,
+}: {
+  params: Promise<{ locale: string; id: string }>
+}) {
+  const { id } = await params
+  const { session, permissions } = await getAdminContext()
+  if (!canAccess(permissions, PERMS.USERS_VIEW, session.user.rank)) {
+    redirect('/admin')
+  }
+
+  const canEdit = canAccess(permissions, PERMS.USERS_EDIT, session.user.rank)
+  const data = await loadUserById(id)
+  const watched = await getWatchedUserIds(session.user.id)
+
+  return (
+    <div className="space-y-6">
+      <UserHero
+        user={data.user}
+        diamonds={data.diamonds}
+        duckets={data.duckets}
+        roomCount={data.roomCount}
+        chatCount={data.chatCount}
+        tradeCount={data.tradeCount}
+        isOnline={data.isOnline}
+        activeBan={!!data.activeBan}
+        mode="show"
+        canEdit={canEdit}
+        watching={watched.has(data.user.id)}
+      />
+
+      <div
+        className={
+          canEdit ? 'grid gap-6 lg:grid-cols-[1fr_320px] xl:grid-cols-[1fr_360px]' : undefined
+        }
+      >
+        <Tabs defaultValue="info" className="space-y-4 min-w-0">
+          <TabsList>
+            <TabsTrigger value="info">Account Info</TabsTrigger>
+            <TabsTrigger value="badges">Badges ({data.user.badges.length})</TabsTrigger>
+            <TabsTrigger value="rooms">Rooms ({data.roomCount})</TabsTrigger>
+            <TabsTrigger value="activity">Activity</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="info">
+            <UserAccountInfo user={data.user} />
+          </TabsContent>
+
+          <TabsContent value="badges">
+            <div className="rounded-lg border bg-card p-4">
+              <h3 className="text-sm font-semibold mb-3">Badges ({data.user.badges.length})</h3>
+              <UserBadgesReadonly badges={data.user.badges} />
+            </div>
+          </TabsContent>
+
+          <TabsContent value="rooms">
+            <UserRooms rooms={data.userRooms} />
+          </TabsContent>
+
+          <TabsContent value="activity">
+            <UserActivityLog chatLogs={data.chatLogs} commandLogs={data.commandLogs} />
+          </TabsContent>
+        </Tabs>
+
+        {canEdit && (
+          <aside className="lg:sticky lg:top-4 lg:self-start">
+            <UserQuickActions
+              userId={data.user.id}
+              username={data.user.username}
+              isOnline={data.isOnline}
+            />
+          </aside>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,442 @@
+'use client'
+
+import { Eye, Pencil, Wifi, WifiOff } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { bulkBan, bulkGiveBadge, bulkGiveCurrency, bulkUnban } from '@/actions/bulk-users'
+import { DataTable } from '@/components/admin/data-table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { getAvatarUrl } from '@/lib/imager'
+import type { DataTableColumn, PaginatedResult } from '@/types'
+
+interface UserRow {
+  id: number
+  username: string
+  mail: string
+  rank: number
+  credits: number
+  pixels: number
+  online: string
+  motto: string
+  look: string
+  ipRegister: string
+  accountCreated: number
+  lastLogin: number | null
+}
+
+const RANK_LABELS: Record<number, string> = {
+  1: 'User',
+  2: 'Bronze',
+  3: 'Silver',
+  4: 'Gold',
+  5: 'Moderator',
+  6: 'Admin',
+  7: 'Super Admin',
+}
+
+function getColumns(canEdit: boolean): DataTableColumn<UserRow>[] {
+  const cols: DataTableColumn<UserRow>[] = [
+    { key: 'id', label: 'ID', sortable: true },
+    {
+      key: 'username',
+      label: 'User',
+      sortable: true,
+      render: (_, row) => (
+        <Link
+          href={`/admin/users/show/${row.id}`}
+          className="flex items-center gap-2.5 hover:opacity-80"
+        >
+          <img
+            src={getAvatarUrl(row.look, { size: 's', headOnly: true, headDirection: 2 })}
+            alt=""
+            className="h-8 w-8 rounded"
+            style={{ imageRendering: 'pixelated' }}
+          />
+          <div className="min-w-0">
+            <span className="font-medium block">{row.username}</span>
+            {row.motto && (
+              <span className="text-xs text-muted-foreground truncate block max-w-[200px]">
+                {row.motto}
+              </span>
+            )}
+          </div>
+        </Link>
+      ),
+    },
+    { key: 'mail', label: 'Email', sortable: true },
+    {
+      key: 'rank',
+      label: 'Rank',
+      sortable: true,
+      filterKey: 'filter_rank',
+      filterOptions: [
+        { label: 'User (1)', value: '1' },
+        { label: 'Bronze (2)', value: '2' },
+        { label: 'Silver (3)', value: '3' },
+        { label: 'Gold (4)', value: '4' },
+        { label: 'Moderator (5)', value: '5' },
+        { label: 'Admin (6)', value: '6' },
+        { label: 'Super Admin (7+)', value: '7' },
+      ],
+      render: (value) => {
+        const r = Number(value)
+        return (
+          <Badge variant={r >= 7 ? 'default' : r >= 5 ? 'secondary' : 'outline'}>
+            {RANK_LABELS[r] || `Rank ${r}`}
+          </Badge>
+        )
+      },
+    },
+    {
+      key: 'credits',
+      label: 'Credits',
+      sortable: true,
+      render: (value) => <span className="tabular-nums">{Number(value).toLocaleString()}</span>,
+    },
+    {
+      key: 'online',
+      label: 'Status',
+      filterKey: 'filter_online',
+      filterOptions: [
+        { label: 'Online', value: '1' },
+        { label: 'Offline', value: '0' },
+      ],
+      render: (value) =>
+        value === '1' ? (
+          <span className="flex items-center gap-1.5 text-green-600">
+            <Wifi className="h-3.5 w-3.5" /> Online
+          </span>
+        ) : (
+          <span className="flex items-center gap-1.5 text-muted-foreground">
+            <WifiOff className="h-3.5 w-3.5" /> Offline
+          </span>
+        ),
+    },
+    {
+      key: 'accountCreated',
+      label: 'Registered',
+      sortable: true,
+      render: (value) => {
+        const ts = Number(value)
+        if (!ts) return '-'
+        return (
+          <span className="text-xs text-muted-foreground">
+            {new Date(ts * 1000).toLocaleDateString('it-IT', {
+              day: '2-digit',
+              month: 'short',
+              year: 'numeric',
+            })}
+          </span>
+        )
+      },
+    },
+    {
+      key: 'actions',
+      label: '',
+      render: (_, row) => (
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="icon" asChild title="View">
+            <Link href={`/admin/users/show/${row.id}`}>
+              <Eye className="h-4 w-4" />
+            </Link>
+          </Button>
+          {canEdit && (
+            <Button variant="ghost" size="icon" asChild title="Edit">
+              <Link href={`/admin/users/edit/${row.id}`}>
+                <Pencil className="h-4 w-4" />
+              </Link>
+            </Button>
+          )}
+        </div>
+      ),
+    },
+  ]
+
+  return cols
+}
+
+interface UsersTableProps {
+  data: PaginatedResult<UserRow>
+  canEdit: boolean
+  canBan: boolean
+}
+
+type PendingDialog =
+  | { kind: 'ban'; ids: number[] }
+  | { kind: 'give-currency'; ids: number[] }
+  | { kind: 'give-badge'; ids: number[] }
+  | null
+
+export function UsersTable({ data, canEdit, canBan }: UsersTableProps) {
+  const [pending, setPending] = useState<PendingDialog>(null)
+  const [busy, setBusy] = useState(false)
+  const [banReason, setBanReason] = useState('Bulk ban')
+  const [banDuration, setBanDuration] = useState('-1')
+  const [currencyType, setCurrencyType] = useState<'credits' | 'pixels' | 'points'>('credits')
+  const [currencyAmount, setCurrencyAmount] = useState('100')
+  const [badgeCode, setBadgeCode] = useState('')
+
+  function reportResult(label: string, ok: number, total: number, failures = 0) {
+    if (ok > 0) toast.success(`${label}: ${ok}/${total}${failures ? ` · ${failures} failed` : ''}`)
+    if (failures > 0 && ok === 0) toast.error(`${label} failed for ${failures} users`)
+  }
+
+  async function handleBulkAction(action: string, ids: (number | string)[]) {
+    const numericIds = ids.map((i) => Number(i))
+
+    if (action === 'unban') {
+      setBusy(true)
+      try {
+        const result = await bulkUnban({ userIds: numericIds })
+        if (result.ok) {
+          const data = result.data as { unbanned: number; total: number }
+          reportResult('Unbanned', data.unbanned, data.total)
+        } else toast.error(result.error)
+      } finally {
+        setBusy(false)
+      }
+      return
+    }
+
+    if (action === 'ban') {
+      setPending({ kind: 'ban', ids: numericIds })
+      return
+    }
+
+    if (action === 'give-currency') {
+      setPending({ kind: 'give-currency', ids: numericIds })
+      return
+    }
+
+    if (action === 'give-badge') {
+      setPending({ kind: 'give-badge', ids: numericIds })
+      return
+    }
+  }
+
+  async function confirmBan() {
+    if (pending?.kind !== 'ban') return
+    setBusy(true)
+    try {
+      const result = await bulkBan({
+        userIds: pending.ids,
+        reason: banReason,
+        duration: Number(banDuration),
+      })
+      if (result.ok) {
+        const data = result.data as { banned: number }
+        reportResult('Banned', data.banned, pending.ids.length)
+      } else toast.error(result.error)
+      setPending(null)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function confirmGiveCurrency() {
+    if (pending?.kind !== 'give-currency') return
+    setBusy(true)
+    try {
+      const result = await bulkGiveCurrency({
+        userIds: pending.ids,
+        amount: Number(currencyAmount),
+        type: currencyType,
+      })
+      if (result.ok) {
+        const data = result.data as {
+          given: number
+          total: number
+          failedIds: { userId: number; reason: string }[]
+        }
+        reportResult(
+          `Given ${currencyAmount} ${currencyType}`,
+          data.given,
+          data.total,
+          data.failedIds.length,
+        )
+      } else toast.error(result.error)
+      setPending(null)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function confirmGiveBadge() {
+    if (pending?.kind !== 'give-badge') return
+    setBusy(true)
+    try {
+      const result = await bulkGiveBadge({
+        userIds: pending.ids,
+        badgeCode: badgeCode.trim().toUpperCase(),
+      })
+      if (result.ok) {
+        const data = result.data as {
+          given: number
+          total: number
+          failedIds: { userId: number; reason: string }[]
+        }
+        reportResult(`Given badge ${badgeCode}`, data.given, data.total, data.failedIds.length)
+      } else toast.error(result.error)
+      setPending(null)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const bulkActions: { label: string; value: string; variant?: 'destructive' | 'default' }[] = []
+  if (canBan) {
+    bulkActions.push({ label: 'Ban', value: 'ban', variant: 'destructive' })
+    bulkActions.push({ label: 'Unban', value: 'unban' })
+  }
+  if (canEdit) {
+    bulkActions.push({ label: 'Give credits', value: 'give-currency' })
+    bulkActions.push({ label: 'Give badge', value: 'give-badge' })
+  }
+
+  return (
+    <>
+      <DataTable
+        data={data}
+        columns={getColumns(canEdit)}
+        searchPlaceholder="Search by username, email or IP..."
+        presets={[
+          { label: 'Online now', params: { filter_online: '1' } },
+          { label: 'Staff (rank ≥ 5)', params: { filter_rank: '5' } },
+          { label: 'Super admins', params: { filter_rank: '7' } },
+        ]}
+        bulkActions={bulkActions.length > 0 ? bulkActions : undefined}
+        onBulkAction={bulkActions.length > 0 ? handleBulkAction : undefined}
+        exportUrl={canEdit ? '/api/admin/export?type=users' : undefined}
+      />
+
+      <Dialog open={pending?.kind === 'ban'} onOpenChange={(o) => !o && setPending(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Ban {pending?.kind === 'ban' ? pending.ids.length : 0} users</DialogTitle>
+            <DialogDescription>Permanent ban: leave duration at -1.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="ban-reason">Reason</Label>
+              <Input
+                id="ban-reason"
+                value={banReason}
+                onChange={(e) => setBanReason(e.target.value)}
+              />
+            </div>
+            <div>
+              <Label htmlFor="ban-duration">Duration (seconds, -1 = permanent)</Label>
+              <Input
+                id="ban-duration"
+                type="number"
+                value={banDuration}
+                onChange={(e) => setBanDuration(e.target.value)}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPending(null)} disabled={busy}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={confirmBan} disabled={busy || !banReason}>
+              Ban
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={pending?.kind === 'give-currency'} onOpenChange={(o) => !o && setPending(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              Give currency to {pending?.kind === 'give-currency' ? pending.ids.length : 0} users
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <Label>Type</Label>
+              <Select
+                value={currencyType}
+                onValueChange={(v) => setCurrencyType(v as typeof currencyType)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="credits">Credits</SelectItem>
+                  <SelectItem value="pixels">Pixels (Duckets)</SelectItem>
+                  <SelectItem value="points">Points (Diamonds)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label htmlFor="give-amount">Amount</Label>
+              <Input
+                id="give-amount"
+                type="number"
+                value={currencyAmount}
+                onChange={(e) => setCurrencyAmount(e.target.value)}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPending(null)} disabled={busy}>
+              Cancel
+            </Button>
+            <Button onClick={confirmGiveCurrency} disabled={busy || !currencyAmount}>
+              Give
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={pending?.kind === 'give-badge'} onOpenChange={(o) => !o && setPending(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              Give badge to {pending?.kind === 'give-badge' ? pending.ids.length : 0} users
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="badge-code">Badge code</Label>
+              <Input
+                id="badge-code"
+                value={badgeCode}
+                onChange={(e) => setBadgeCode(e.target.value)}
+                placeholder="ACH_*, etc."
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPending(null)} disabled={busy}>
+              Cancel
+            </Button>
+            <Button onClick={confirmGiveBadge} disabled={busy || !badgeCode.trim()}>
+              Give
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}