From 029bbe9bb9617dae151c7d864183f5f7dc3182a6 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:43:19 +0100
Subject: [PATCH] feat(users): enhance table responsiveness and replace action
 buttons with dropdown menu

- Improved table layout by hiding specific columns on smaller screens.
- Replaced action buttons with `DropdownMenu` for a cleaner and more accessible UI.
- Updated skeleton loaders to align with the revised table structure.
---
 .../src/app/(dashboard)/admin/users/page.tsx  | 64 ++++++++++++-------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/(dashboard)/admin/users/page.tsx b/frontend/src/app/(dashboard)/admin/users/page.tsx
index d6dba69..786a1e7 100644
--- a/frontend/src/app/(dashboard)/admin/users/page.tsx
+++ b/frontend/src/app/(dashboard)/admin/users/page.tsx
@@ -2,10 +2,18 @@
 
 import { format } from "date-fns";
 import { fr } from "date-fns/locale";
-import { Edit, Trash2 } from "lucide-react";
+import { Edit, MoreHorizontal, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
@@ -77,10 +85,12 @@ export default function AdminUsersPage() {
 					<TableHeader>
 						<TableRow>
 							<TableHead>Utilisateur</TableHead>
-							<TableHead>Email</TableHead>
+							<TableHead className="hidden md:table-cell">Email</TableHead>
 							<TableHead>Rôle</TableHead>
-							<TableHead>Status</TableHead>
-							<TableHead>Date d'inscription</TableHead>
+							<TableHead className="hidden sm:table-cell">Status</TableHead>
+							<TableHead className="hidden lg:table-cell">
+								Date d'inscription
+							</TableHead>
 							<TableHead className="w-[100px]"></TableHead>
 						</TableRow>
 					</TableHeader>
@@ -92,16 +102,16 @@ export default function AdminUsersPage() {
 									<TableCell>
 										<Skeleton className="h-4 w-[150px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden md:table-cell">
 										<Skeleton className="h-4 w-[200px]" />
 									</TableCell>
 									<TableCell>
 										<Skeleton className="h-4 w-[50px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Skeleton className="h-4 w-[80px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden lg:table-cell">
 										<Skeleton className="h-4 w-[100px]" />
 									</TableCell>
 									<TableCell>
@@ -122,13 +132,13 @@ export default function AdminUsersPage() {
 										{user.displayName || user.username}
 										<div className="text-xs text-muted-foreground">@{user.username}</div>
 									</TableCell>
-									<TableCell>{user.email}</TableCell>
+									<TableCell className="hidden md:table-cell">{user.email}</TableCell>
 									<TableCell>
 										<Badge variant={user.role === "admin" ? "default" : "secondary"}>
 											{user.role}
 										</Badge>
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Badge
 											variant={
 												user.status === "active"
@@ -141,23 +151,31 @@ export default function AdminUsersPage() {
 											{user.status}
 										</Badge>
 									</TableCell>
-									<TableCell className="whitespace-nowrap">
+									<TableCell className="hidden lg:table-cell whitespace-nowrap">
 										{format(new Date(user.createdAt), "PPP", { locale: fr })}
 									</TableCell>
 									<TableCell>
-										<div className="flex items-center gap-2">
-											<Button variant="ghost" size="icon" onClick={() => handleEdit(user)}>
-												<Edit className="h-4 w-4" />
-											</Button>
-											<Button
-												variant="ghost"
-												size="icon"
-												onClick={() => handleDelete(user.uuid)}
-												className="text-destructive hover:text-destructive hover:bg-destructive/10"
-											>
-												<Trash2 className="h-4 w-4" />
-											</Button>
-										</div>
+										<DropdownMenu>
+											<DropdownMenuTrigger asChild>
+												<Button variant="ghost" size="icon">
+													<MoreHorizontal className="h-4 w-4" />
+													<span className="sr-only">Actions</span>
+												</Button>
+											</DropdownMenuTrigger>
+											<DropdownMenuContent align="end">
+												<DropdownMenuLabel>Actions</DropdownMenuLabel>
+												<DropdownMenuSeparator />
+												<DropdownMenuItem onClick={() => handleEdit(user)}>
+													<Edit className="mr-2 h-4 w-4" /> Modifier
+												</DropdownMenuItem>
+												<DropdownMenuItem
+													onClick={() => handleDelete(user.uuid)}
+													className="text-destructive focus:text-destructive"
+												>
+													<Trash2 className="mr-2 h-4 w-4" /> Supprimer
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
 									</TableCell>
 								</TableRow>
 							))