Reapply "Add missing admin action files and navigation links"

This reverts commit 4d515bc400.
This commit is contained in:
Simo committed 2026-07-11 20:52:56 +02:00
1 parent 96ed768f14
commit 5b4228261a
338 files changed
+28143 -5948

No files matched your search

+10 -8
View File
@@ -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>
+50
View File
@@ -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>
)
}
+6 -132
View File
@@ -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}`)
}
@@ -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>
)
}
@@ -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>
)
}
@@ -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>
)
}
+153
View File
@@ -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>
)
}
@@ -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>
</>
)
}
+65
View File
@@ -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>
)
}