julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UserManagement component layout: Update user display to a grid format for improved responsiveness, enhance user information presentation with clearer stats and action buttons, and streamline the overall UI for better user experience.
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 3m3s
Details

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-16 16:55:40 +01:00
parent ec965cd59d
commit 5eddf36121
1 changed files with 102 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
components/admin/UserManagement.tsx
View File

@@ -196,12 +196,13 @@ export default function UserManagement() {
Aucun utilisateur trouvé
</div>
) : (
users.map((user) => {
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
{users.map((user) => {
return (
<Card key={user.id} variant="default" className="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 */}
<Card key={user.id} variant="default" className="p-3">
<div className="flex flex-col gap-2">
{/* Header avec avatar et nom */}
<div className="flex items-center gap-2">
<Avatar
src={user.avatar}
username={user.username}
@@ -210,60 +211,44 @@ export default function UserManagement() {
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">
<h3 className="text-pixel-gold font-bold text-sm truncate">
{user.username}
</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)}
<div className="flex items-center gap-1.5 mt-0.5">
<span className="text-[10px] text-gray-500">
Niv. {user.level}
</span>
<span
className={`text-[10px] sm:text-xs whitespace-nowrap ${
className={`text-[10px] font-bold px-1.5 py-0.5 rounded border ${
user.role === "ADMIN"
? "text-pixel-gold"
: "text-gray-500"
? "text-pixel-gold border-pixel-gold/50 bg-pixel-gold/10"
: "text-gray-500 border-gray-500/30 bg-gray-500/10"
}`}
>
{user.role}
</span>
</div>
<p className="text-gray-400 text-[10px] sm:text-xs truncate">
{user.email}
</p>
</div>
</div>
<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>
{/* Affichage des stats */}
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 text-[10px] sm:text-xs">
<div className="flex-1">
{/* Score en évidence */}
<div className="flex items-baseline gap-1.5 px-1">
<span className="text-[10px] text-gray-400">Score:</span>
<span className="text-lg font-bold text-pixel-gold">
{formatNumber(user.score)}
</span>
</div>
{/* Stats HP et XP */}
<div className="space-y-1.5 text-[10px]">
<div>
<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-1 bg-black/60 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-red-600 to-green-500"
style={{
@@ -275,14 +260,14 @@ export default function UserManagement() {
/>
</div>
</div>
<div className="flex-1">
<div>
<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-1 bg-black/60 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
style={{
@@ -295,9 +280,33 @@ export default function UserManagement() {
</div>
</div>
</div>
{/* Email */}
<p className="text-gray-400 text-[10px] truncate px-1">
{user.email}
</p>
{/* Boutons d'action */}
<div className="flex gap-2 pt-1">
<button
onClick={() => handleEdit(user)}
className="flex-1 px-2 py-1 border border-pixel-gold/50 bg-black/60 text-white uppercase text-[10px] tracking-widest rounded hover:bg-pixel-gold/10 transition"
>
Modifier
</button>
<button
onClick={() => handleDelete(user.id)}
disabled={deletingUserId === user.id}
className="flex-1 px-2 py-1 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-[10px] tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50"
>
{deletingUserId === user.id ? "..." : "Suppr."}
</button>
</div>
</div>
</Card>
);
})
})}
</div>
)}
{/* Modal d'édition */}