From 939448d15cdfa2a159b7adf5cc04a9009dea304e Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:43:00 +0100
Subject: [PATCH] feat(categories): enhance table UI and add dropdown menu for
 actions

- Improved table responsiveness by hiding columns on smaller screens.
- Replaced action buttons with a `DropdownMenu` for better accessibility.
- Updated skeleton loaders to match the new table layout.
---
 .../app/(dashboard)/admin/categories/page.tsx | 62 ++++++++++++-------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/(dashboard)/admin/categories/page.tsx b/frontend/src/app/(dashboard)/admin/categories/page.tsx
index a71b5ab..d1f40c6 100644
--- a/frontend/src/app/(dashboard)/admin/categories/page.tsx
+++ b/frontend/src/app/(dashboard)/admin/categories/page.tsx
@@ -1,9 +1,17 @@
 "use client";
 
-import { Edit, Plus, Trash2 } from "lucide-react";
+import { Edit, MoreHorizontal, Plus, Trash2 } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
 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,
@@ -72,8 +80,8 @@ export default function AdminCategoriesPage() {
 					<TableHeader>
 						<TableRow>
 							<TableHead>Nom</TableHead>
-							<TableHead>Slug</TableHead>
-							<TableHead>Description</TableHead>
+							<TableHead className="hidden sm:table-cell">Slug</TableHead>
+							<TableHead className="hidden md:table-cell">Description</TableHead>
 							<TableHead className="w-[100px]"></TableHead>
 						</TableRow>
 					</TableHeader>
@@ -85,10 +93,10 @@ export default function AdminCategoriesPage() {
 									<TableCell>
 										<Skeleton className="h-4 w-[150px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Skeleton className="h-4 w-[150px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden md:table-cell">
 										<Skeleton className="h-4 w-[250px]" />
 									</TableCell>
 									<TableCell>
@@ -120,28 +128,34 @@ export default function AdminCategoriesPage() {
 											{category.name}
 										</div>
 									</TableCell>
-									<TableCell className="whitespace-nowrap">{category.slug}</TableCell>
-									<TableCell className="text-muted-foreground">
+									<TableCell className="whitespace-nowrap hidden sm:table-cell">
+										{category.slug}
+									</TableCell>
+									<TableCell className="text-muted-foreground hidden md:table-cell">
 										{category.description || "Aucune description"}
 									</TableCell>
 									<TableCell>
-										<div className="flex items-center gap-2">
-											<Button
-												variant="ghost"
-												size="icon"
-												onClick={() => handleEdit(category)}
-											>
-												<Edit className="h-4 w-4" />
-											</Button>
-											<Button
-												variant="ghost"
-												size="icon"
-												onClick={() => handleDelete(category.id)}
-												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(category)}>
+													<Edit className="mr-2 h-4 w-4" /> Modifier
+												</DropdownMenuItem>
+												<DropdownMenuItem
+													onClick={() => handleDelete(category.id)}
+													className="text-destructive focus:text-destructive"
+												>
+													<Trash2 className="mr-2 h-4 w-4" /> Supprimer
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
 									</TableCell>
 								</TableRow>
 							))