Initial push
This commit is contained in:
386
app/(dashboard)/players/page.tsx
Normal file
386
app/(dashboard)/players/page.tsx
Normal file
@@ -0,0 +1,386 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user