763 lines
31 KiB
TypeScript
763 lines
31 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Avatar from "./Avatar";
|
|
|
|
interface User {
|
|
id: string;
|
|
username: string;
|
|
email: string;
|
|
role: string;
|
|
score: number;
|
|
level: number;
|
|
hp: number;
|
|
maxHp: number;
|
|
xp: number;
|
|
maxXp: number;
|
|
avatar: string | null;
|
|
createdAt: string;
|
|
}
|
|
|
|
interface EditingUser {
|
|
userId: string;
|
|
username: string | null;
|
|
avatar: string | null;
|
|
hpDelta: number;
|
|
xpDelta: number;
|
|
score: number | null;
|
|
level: number | null;
|
|
role: string | null;
|
|
}
|
|
|
|
export default function UserManagement() {
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editingUser, setEditingUser] = useState<EditingUser | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
|
|
const [uploadingAvatar, setUploadingAvatar] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchUsers();
|
|
}, []);
|
|
|
|
const fetchUsers = async () => {
|
|
try {
|
|
const response = await fetch("/api/admin/users");
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setUsers(data);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching users:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleEdit = (user: User) => {
|
|
setEditingUser({
|
|
userId: user.id,
|
|
username: user.username,
|
|
avatar: user.avatar,
|
|
hpDelta: 0,
|
|
xpDelta: 0,
|
|
score: user.score,
|
|
level: user.level,
|
|
role: user.role,
|
|
});
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!editingUser) return;
|
|
|
|
setSaving(true);
|
|
try {
|
|
const body: {
|
|
username?: string;
|
|
avatar?: string | null;
|
|
hpDelta?: number;
|
|
xpDelta?: number;
|
|
score?: number;
|
|
level?: number;
|
|
role?: string;
|
|
} = {};
|
|
|
|
if (editingUser.username !== null) {
|
|
body.username = editingUser.username;
|
|
}
|
|
if (editingUser.avatar !== undefined) {
|
|
body.avatar = editingUser.avatar;
|
|
}
|
|
if (editingUser.hpDelta !== 0) {
|
|
body.hpDelta = editingUser.hpDelta;
|
|
}
|
|
if (editingUser.xpDelta !== 0) {
|
|
body.xpDelta = editingUser.xpDelta;
|
|
}
|
|
if (editingUser.score !== null) {
|
|
body.score = editingUser.score;
|
|
}
|
|
if (editingUser.level !== null) {
|
|
body.level = editingUser.level;
|
|
}
|
|
if (editingUser.role !== null) {
|
|
body.role = editingUser.role;
|
|
}
|
|
|
|
const response = await fetch(`/api/admin/users/${editingUser.userId}`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(body),
|
|
});
|
|
|
|
if (response.ok) {
|
|
await fetchUsers();
|
|
setEditingUser(null);
|
|
} else {
|
|
const error = await response.json();
|
|
alert(error.error || "Erreur lors de la mise à jour");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error updating user:", error);
|
|
alert("Erreur lors de la mise à jour");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setEditingUser(null);
|
|
};
|
|
|
|
const handleDelete = async (userId: string) => {
|
|
if (
|
|
!confirm(
|
|
"Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible."
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
setDeletingUserId(userId);
|
|
try {
|
|
const response = await fetch(`/api/admin/users/${userId}`, {
|
|
method: "DELETE",
|
|
});
|
|
|
|
if (response.ok) {
|
|
await fetchUsers();
|
|
} else {
|
|
const error = await response.json();
|
|
alert(error.error || "Erreur lors de la suppression");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error deleting user:", error);
|
|
alert("Erreur lors de la suppression");
|
|
} finally {
|
|
setDeletingUserId(null);
|
|
}
|
|
};
|
|
|
|
const formatNumber = (num: number) => {
|
|
return num.toLocaleString("en-US");
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="text-center text-gray-400 py-8">Chargement...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{users.length === 0 ? (
|
|
<div className="text-center text-gray-400 py-8">
|
|
Aucun utilisateur trouvé
|
|
</div>
|
|
) : (
|
|
users.map((user) => {
|
|
const isEditing = editingUser?.userId === user.id;
|
|
const previewHp = isEditing
|
|
? Math.max(0, Math.min(user.maxHp, user.hp + editingUser.hpDelta))
|
|
: user.hp;
|
|
const previewXp = isEditing
|
|
? Math.max(0, user.xp + editingUser.xpDelta)
|
|
: user.xp;
|
|
const displayAvatar = isEditing ? editingUser.avatar : user.avatar;
|
|
const displayUsername = isEditing
|
|
? editingUser.username || user.username
|
|
: user.username;
|
|
|
|
return (
|
|
<div
|
|
key={user.id}
|
|
className="bg-black/60 border border-pixel-gold/20 rounded p-3 sm:p-4"
|
|
>
|
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-2">
|
|
<div className="flex gap-2 sm:gap-3 items-center flex-1 min-w-0">
|
|
{/* Avatar */}
|
|
<Avatar
|
|
src={displayAvatar}
|
|
username={displayUsername}
|
|
size="sm"
|
|
className="flex-shrink-0"
|
|
borderClassName="border-2 border-pixel-gold/50"
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-1.5 sm:gap-2 flex-wrap">
|
|
<h3 className="text-pixel-gold font-bold text-sm sm:text-base break-words">
|
|
{displayUsername}
|
|
</h3>
|
|
<span className="text-[10px] sm:text-xs text-gray-500 whitespace-nowrap">
|
|
Niveau {user.level}
|
|
</span>
|
|
<span className="text-[10px] sm:text-xs text-gray-500 whitespace-nowrap">
|
|
Score: {formatNumber(user.score)}
|
|
</span>
|
|
<span
|
|
className={`text-[10px] sm:text-xs whitespace-nowrap ${
|
|
user.role === "ADMIN"
|
|
? "text-pixel-gold"
|
|
: "text-gray-500"
|
|
}`}
|
|
>
|
|
{user.role}
|
|
</span>
|
|
</div>
|
|
<p className="text-gray-400 text-[10px] sm:text-xs truncate">
|
|
{user.email}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{!isEditing && (
|
|
<div className="flex gap-2 flex-shrink-0 sm:ml-2">
|
|
<button
|
|
onClick={() => handleEdit(user)}
|
|
className="px-2 sm:px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition whitespace-nowrap"
|
|
>
|
|
Modifier
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(user.id)}
|
|
disabled={deletingUserId === user.id}
|
|
className="px-2 sm:px-3 py-1.5 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50 whitespace-nowrap"
|
|
>
|
|
{deletingUserId === user.id
|
|
? "Suppression..."
|
|
: "Supprimer"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{isEditing ? (
|
|
<div className="space-y-4">
|
|
{/* Username Section */}
|
|
<div>
|
|
<label className="block text-xs sm:text-sm text-gray-300 mb-2">
|
|
Nom d'utilisateur
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={editingUser.username || ""}
|
|
onChange={(e) =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
username: e.target.value,
|
|
})
|
|
}
|
|
className="w-full px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
|
|
placeholder="Nom d'utilisateur"
|
|
/>
|
|
</div>
|
|
|
|
{/* Avatar Section */}
|
|
<div className="flex flex-col items-center gap-3">
|
|
<label className="block text-xs sm:text-sm text-gray-300 mb-2">
|
|
Avatar
|
|
</label>
|
|
|
|
{/* Preview */}
|
|
<div className="relative">
|
|
<Avatar
|
|
src={editingUser.avatar}
|
|
username={editingUser.username || user.username}
|
|
size="lg"
|
|
borderClassName="border-2 border-pixel-gold/50"
|
|
/>
|
|
{uploadingAvatar === user.id && (
|
|
<div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-full">
|
|
<div className="text-pixel-gold text-xs">
|
|
Upload...
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Avatars par défaut */}
|
|
<div className="flex flex-col items-center gap-2 w-full">
|
|
<label className="block text-pixel-gold text-[10px] sm:text-xs uppercase tracking-widest">
|
|
Avatars par défaut
|
|
</label>
|
|
<div className="flex flex-wrap gap-2 justify-center">
|
|
{[
|
|
"/avatar-1.jpg",
|
|
"/avatar-2.jpg",
|
|
"/avatar-3.jpg",
|
|
"/avatar-4.jpg",
|
|
"/avatar-5.jpg",
|
|
"/avatar-6.jpg",
|
|
].map((defaultAvatar) => (
|
|
<button
|
|
key={defaultAvatar}
|
|
type="button"
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
avatar: defaultAvatar,
|
|
})
|
|
}
|
|
className={`w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 overflow-hidden transition ${
|
|
editingUser.avatar === defaultAvatar
|
|
? "border-pixel-gold scale-110"
|
|
: "border-pixel-gold/30 hover:border-pixel-gold/50"
|
|
}`}
|
|
>
|
|
<img
|
|
src={defaultAvatar}
|
|
alt="Avatar par défaut"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Custom Upload */}
|
|
<div>
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={async (e) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setUploadingAvatar(user.id);
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
|
|
const response = await fetch(
|
|
"/api/admin/avatars/upload",
|
|
{
|
|
method: "POST",
|
|
body: formData,
|
|
}
|
|
);
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setEditingUser({
|
|
...editingUser,
|
|
avatar: data.url,
|
|
});
|
|
} else {
|
|
alert("Erreur lors de l'upload de l'image");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error uploading image:", error);
|
|
alert("Erreur lors de l'upload de l'image");
|
|
} finally {
|
|
setUploadingAvatar(null);
|
|
if (e.target) {
|
|
e.target.value = "";
|
|
}
|
|
}
|
|
}}
|
|
className="hidden"
|
|
id={`avatar-upload-${user.id}`}
|
|
/>
|
|
<label
|
|
htmlFor={`avatar-upload-${user.id}`}
|
|
className="px-3 sm:px-4 py-1.5 border border-pixel-gold/50 bg-black/40 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition cursor-pointer inline-block"
|
|
>
|
|
{uploadingAvatar === user.id
|
|
? "Upload en cours..."
|
|
: "Upload un avatar custom"}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* HP Section */}
|
|
<div>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<label className="text-xs sm:text-sm text-gray-300">
|
|
Points de Vie (HP)
|
|
</label>
|
|
<span className="text-[10px] sm:text-xs text-gray-400">
|
|
{previewHp} / {user.maxHp}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-1 sm:gap-2 flex-wrap">
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
hpDelta: editingUser.hpDelta - 100,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
|
|
>
|
|
-100
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
hpDelta: editingUser.hpDelta - 10,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
|
|
>
|
|
-10
|
|
</button>
|
|
<input
|
|
type="number"
|
|
value={editingUser.hpDelta || 0}
|
|
onChange={(e) =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
hpDelta: parseInt(e.target.value) || 0,
|
|
})
|
|
}
|
|
className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
|
|
/>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
hpDelta: editingUser.hpDelta + 10,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
|
|
>
|
|
+10
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
hpDelta: editingUser.hpDelta + 100,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
|
|
>
|
|
+100
|
|
</button>
|
|
</div>
|
|
<div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-red-600 to-green-500 transition-all duration-300"
|
|
style={{
|
|
width: `${Math.min(
|
|
100,
|
|
(previewHp / user.maxHp) * 100
|
|
)}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* XP Section */}
|
|
<div>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<label className="text-xs sm:text-sm text-gray-300">
|
|
Expérience (XP)
|
|
</label>
|
|
<span className="text-[10px] sm:text-xs text-gray-400">
|
|
{formatNumber(previewXp)} / {formatNumber(user.maxXp)}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-1 sm:gap-2 flex-wrap">
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
xpDelta: editingUser.xpDelta - 1000,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
|
|
>
|
|
-1000
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
xpDelta: editingUser.xpDelta - 100,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
|
|
>
|
|
-100
|
|
</button>
|
|
<input
|
|
type="number"
|
|
value={editingUser.xpDelta || 0}
|
|
onChange={(e) =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
xpDelta: parseInt(e.target.value) || 0,
|
|
})
|
|
}
|
|
className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
|
|
/>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
xpDelta: editingUser.xpDelta + 100,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
|
|
>
|
|
+100
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
xpDelta: editingUser.xpDelta + 1000,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
|
|
>
|
|
+1000
|
|
</button>
|
|
</div>
|
|
<div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-blue-600 to-purple-500 transition-all duration-300"
|
|
style={{
|
|
width: `${Math.min(
|
|
100,
|
|
(previewXp / user.maxXp) * 100
|
|
)}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Score Section */}
|
|
<div>
|
|
<label className="block text-xs sm:text-sm text-gray-300 mb-2">
|
|
Score
|
|
</label>
|
|
<div className="flex gap-1 sm:gap-2 flex-wrap">
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
score: (editingUser.score || 0) - 1000,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
|
|
>
|
|
-1000
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
score: (editingUser.score || 0) - 100,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
|
|
>
|
|
-100
|
|
</button>
|
|
<input
|
|
type="number"
|
|
value={editingUser.score ?? 0}
|
|
onChange={(e) =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
score: parseInt(e.target.value) || 0,
|
|
})
|
|
}
|
|
className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
|
|
/>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
score: (editingUser.score || 0) + 100,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
|
|
>
|
|
+100
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
score: (editingUser.score || 0) + 1000,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
|
|
>
|
|
+1000
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Level Section */}
|
|
<div>
|
|
<label className="block text-xs sm:text-sm text-gray-300 mb-2">
|
|
Niveau
|
|
</label>
|
|
<div className="flex gap-1 sm:gap-2">
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
level: Math.max(1, (editingUser.level || 1) - 1),
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
|
|
>
|
|
-1
|
|
</button>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
value={editingUser.level ?? 1}
|
|
onChange={(e) =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
level: Math.max(1, parseInt(e.target.value) || 1),
|
|
})
|
|
}
|
|
className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
|
|
/>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
level: (editingUser.level || 1) + 1,
|
|
})
|
|
}
|
|
className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
|
|
>
|
|
+1
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Role Section */}
|
|
<div>
|
|
<label className="block text-xs sm:text-sm text-gray-300 mb-2">
|
|
Rôle
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
role: "USER",
|
|
})
|
|
}
|
|
className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
|
|
editingUser.role === "USER"
|
|
? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
|
|
: "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
|
|
}`}
|
|
>
|
|
USER
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
setEditingUser({
|
|
...editingUser,
|
|
role: "ADMIN",
|
|
})
|
|
}
|
|
className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
|
|
editingUser.role === "ADMIN"
|
|
? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
|
|
: "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
|
|
}`}
|
|
>
|
|
ADMIN
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-2 pt-2">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-xs tracking-widest rounded hover:bg-green-900/30 transition disabled:opacity-50"
|
|
>
|
|
{saving ? "Enregistrement..." : "Enregistrer"}
|
|
</button>
|
|
<button
|
|
onClick={handleCancel}
|
|
className="px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-400 uppercase text-xs tracking-widest rounded hover:bg-gray-900/30 transition"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 text-[10px] sm:text-xs">
|
|
<div className="flex-1">
|
|
<div className="flex justify-between items-center mb-0.5">
|
|
<span className="text-gray-400">HP</span>
|
|
<span className="text-gray-400">
|
|
{user.hp}/{user.maxHp}
|
|
</span>
|
|
</div>
|
|
<div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-red-600 to-green-500"
|
|
style={{
|
|
width: `${Math.min(
|
|
100,
|
|
(user.hp / user.maxHp) * 100
|
|
)}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex justify-between items-center mb-0.5">
|
|
<span className="text-gray-400">XP</span>
|
|
<span className="text-gray-400">
|
|
{formatNumber(user.xp)}/{formatNumber(user.maxXp)}
|
|
</span>
|
|
</div>
|
|
<div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
|
|
style={{
|
|
width: `${Math.min(
|
|
100,
|
|
(user.xp / user.maxXp) * 100
|
|
)}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
);
|
|
}
|