387 lines
14 KiB
TypeScript
387 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Search,
|
|
MoreHorizontal,
|
|
Ban,
|
|
UserX,
|
|
Shield,
|
|
Clock,
|
|
Users,
|
|
WifiOff,
|
|
RefreshCw,
|
|
} from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { formatDistanceToNow } from "date-fns";
|
|
|
|
interface Player {
|
|
id: string;
|
|
uuid: string | null;
|
|
username: string;
|
|
firstSeen: number;
|
|
lastSeen: number;
|
|
isOnline: boolean;
|
|
playTime: number;
|
|
role: string | null;
|
|
isBanned: boolean;
|
|
notes: string | null;
|
|
}
|
|
|
|
function PlayerAvatar({ username }: { username: string }) {
|
|
return (
|
|
<Avatar className="w-8 h-8">
|
|
<AvatarImage
|
|
src={`https://crafatar.com/avatars/${username}?size=32&overlay`}
|
|
alt={username}
|
|
/>
|
|
<AvatarFallback className="bg-zinc-800 text-zinc-400 text-xs">
|
|
{username.slice(0, 2).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|
|
|
|
function formatPlayTime(minutes: number): string {
|
|
const h = Math.floor(minutes / 60);
|
|
const m = minutes % 60;
|
|
if (h === 0) return `${m}m`;
|
|
return `${h}h ${m}m`;
|
|
}
|
|
|
|
export default function PlayersPage() {
|
|
const [players, setPlayers] = useState<Player[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [search, setSearch] = useState("");
|
|
const [filter, setFilter] = useState<"all" | "online" | "banned">("all");
|
|
const [selectedPlayer, setSelectedPlayer] = useState<Player | null>(null);
|
|
const [banDialogOpen, setBanDialogOpen] = useState(false);
|
|
const [banReason, setBanReason] = useState("");
|
|
const [actionLoading, setActionLoading] = useState(false);
|
|
|
|
const fetchPlayers = useCallback(async () => {
|
|
try {
|
|
const params = new URLSearchParams({ q: search, limit: "100" });
|
|
if (filter === "online") params.set("online", "true");
|
|
if (filter === "banned") params.set("banned", "true");
|
|
const res = await fetch(`/api/players?${params}`);
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setPlayers(data.players);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [search, filter]);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
fetchPlayers();
|
|
}, [fetchPlayers]);
|
|
|
|
const handleBan = async () => {
|
|
if (!selectedPlayer || !banReason.trim()) return;
|
|
setActionLoading(true);
|
|
try {
|
|
const res = await fetch(`/api/players/${selectedPlayer.id}?action=ban`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ reason: banReason }),
|
|
});
|
|
if (!res.ok) throw new Error((await res.json()).error);
|
|
toast.success(`${selectedPlayer.username} has been banned`);
|
|
setBanDialogOpen(false);
|
|
setBanReason("");
|
|
fetchPlayers();
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Failed to ban player");
|
|
} finally {
|
|
setActionLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleUnban = async (player: Player) => {
|
|
try {
|
|
const res = await fetch(`/api/players/${player.id}?action=unban`, {
|
|
method: "POST",
|
|
});
|
|
if (!res.ok) throw new Error((await res.json()).error);
|
|
toast.success(`${player.username} has been unbanned`);
|
|
fetchPlayers();
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Failed to unban player");
|
|
}
|
|
};
|
|
|
|
const handleKick = async (player: Player) => {
|
|
try {
|
|
const res = await fetch(`/api/players/${player.id}?action=kick`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ reason: "Kicked by admin" }),
|
|
});
|
|
if (!res.ok) throw new Error((await res.json()).error);
|
|
toast.success(`${player.username} has been kicked`);
|
|
fetchPlayers();
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Failed to kick player");
|
|
}
|
|
};
|
|
|
|
const onlinePlayers = players.filter((p) => p.isOnline).length;
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Players</h1>
|
|
<p className="text-zinc-400 text-sm mt-1">
|
|
Manage players, bans, and permissions
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5 animate-pulse" />
|
|
{onlinePlayers} online
|
|
</Badge>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-zinc-700 text-zinc-400 hover:text-white"
|
|
onClick={fetchPlayers}
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
|
|
<Input
|
|
placeholder="Search players..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="pl-9 bg-zinc-900 border-zinc-700 text-white placeholder:text-zinc-500 focus:border-emerald-500/50"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{(["all", "online", "banned"] as const).map((f) => (
|
|
<Button
|
|
key={f}
|
|
variant={filter === f ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setFilter(f)}
|
|
className={
|
|
filter === f
|
|
? "bg-emerald-600 hover:bg-emerald-500 text-white"
|
|
: "border-zinc-700 text-zinc-400 hover:text-white"
|
|
}
|
|
>
|
|
{f.charAt(0).toUpperCase() + f.slice(1)}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Players table */}
|
|
<Card className="bg-zinc-900 border-zinc-800">
|
|
<CardContent className="p-0">
|
|
{loading ? (
|
|
<div className="p-4 space-y-3">
|
|
{Array.from({ length: 8 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-12 w-full bg-zinc-800" />
|
|
))}
|
|
</div>
|
|
) : players.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-16 text-zinc-600">
|
|
<Users className="w-10 h-10 mb-3 opacity-50" />
|
|
<p>No players found</p>
|
|
</div>
|
|
) : (
|
|
<div className="divide-y divide-zinc-800">
|
|
{/* Header */}
|
|
<div className="grid grid-cols-[auto_1fr_auto_auto_auto_auto] gap-4 px-4 py-2.5 text-xs font-medium text-zinc-500 uppercase tracking-wide">
|
|
<span className="w-8" />
|
|
<span>Player</span>
|
|
<span>Status</span>
|
|
<span>Play Time</span>
|
|
<span>Last Seen</span>
|
|
<span />
|
|
</div>
|
|
|
|
{players.map((player) => (
|
|
<div
|
|
key={player.id}
|
|
className="grid grid-cols-[auto_1fr_auto_auto_auto_auto] gap-4 px-4 py-3 items-center hover:bg-zinc-800/50 transition-colors"
|
|
>
|
|
<PlayerAvatar username={player.username} />
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-white">
|
|
{player.username}
|
|
</span>
|
|
{player.role && (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-xs border-zinc-700 text-zinc-400"
|
|
>
|
|
{player.role}
|
|
</Badge>
|
|
)}
|
|
{player.isBanned && (
|
|
<Badge className="text-xs bg-red-500/20 text-red-400 border-red-500/30">
|
|
Banned
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<span className="text-xs text-zinc-500">
|
|
{player.uuid ?? "UUID unknown"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<span
|
|
className={`w-1.5 h-1.5 rounded-full ${
|
|
player.isOnline ? "bg-emerald-500" : "bg-zinc-600"
|
|
}`}
|
|
/>
|
|
<span
|
|
className={`text-sm ${
|
|
player.isOnline ? "text-emerald-400" : "text-zinc-500"
|
|
}`}
|
|
>
|
|
{player.isOnline ? "Online" : "Offline"}
|
|
</span>
|
|
</div>
|
|
<span className="text-sm text-zinc-400">
|
|
{formatPlayTime(player.playTime)}
|
|
</span>
|
|
<span className="text-sm text-zinc-500">
|
|
{formatDistanceToNow(new Date(player.lastSeen), {
|
|
addSuffix: true,
|
|
})}
|
|
</span>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="inline-flex shrink-0 items-center justify-center rounded-lg text-sm font-medium w-8 h-8 text-zinc-500 hover:text-white transition-all">
|
|
<MoreHorizontal className="w-4 h-4" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className="bg-zinc-900 border-zinc-700"
|
|
>
|
|
<DropdownMenuItem
|
|
className="text-zinc-300 focus:text-white focus:bg-zinc-800"
|
|
onClick={() =>
|
|
(window.location.href = `/players/${player.id}`)
|
|
}
|
|
>
|
|
<Shield className="w-4 h-4 mr-2" />
|
|
View Profile
|
|
</DropdownMenuItem>
|
|
{player.isOnline && (
|
|
<DropdownMenuItem
|
|
className="text-amber-400 focus:text-amber-300 focus:bg-zinc-800"
|
|
onClick={() => handleKick(player)}
|
|
>
|
|
<WifiOff className="w-4 h-4 mr-2" />
|
|
Kick
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuSeparator className="bg-zinc-700" />
|
|
{player.isBanned ? (
|
|
<DropdownMenuItem
|
|
className="text-emerald-400 focus:text-emerald-300 focus:bg-zinc-800"
|
|
onClick={() => handleUnban(player)}
|
|
>
|
|
<UserX className="w-4 h-4 mr-2" />
|
|
Unban
|
|
</DropdownMenuItem>
|
|
) : (
|
|
<DropdownMenuItem
|
|
className="text-red-400 focus:text-red-300 focus:bg-zinc-800"
|
|
onClick={() => {
|
|
setSelectedPlayer(player);
|
|
setBanDialogOpen(true);
|
|
}}
|
|
>
|
|
<Ban className="w-4 h-4 mr-2" />
|
|
Ban
|
|
</DropdownMenuItem>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Ban Dialog */}
|
|
<Dialog open={banDialogOpen} onOpenChange={setBanDialogOpen}>
|
|
<DialogContent className="bg-zinc-900 border-zinc-700">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-white">
|
|
Ban {selectedPlayer?.username}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-zinc-400">
|
|
This will ban the player from the server and record the ban in the
|
|
history.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<Label className="text-zinc-300">Reason</Label>
|
|
<Textarea
|
|
value={banReason}
|
|
onChange={(e) => setBanReason(e.target.value)}
|
|
placeholder="Enter ban reason..."
|
|
className="bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500 resize-none"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setBanDialogOpen(false)}
|
|
className="border-zinc-700 text-zinc-400"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleBan}
|
|
disabled={!banReason.trim() || actionLoading}
|
|
className="bg-red-600 hover:bg-red-500 text-white"
|
|
>
|
|
{actionLoading ? "Banning..." : "Ban Player"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|