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.

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 className="hidden sm:table-cell">Slug</TableHead>
-							<TableHead>Description</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="whitespace-nowrap hidden sm:table-cell">
-									<TableCell className="text-muted-foreground">
+										{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">
+										<DropdownMenu>
-											<Button
+											<DropdownMenuTrigger asChild>
-												variant="ghost"
+												<Button variant="ghost" size="icon">
-												size="icon"
+													<MoreHorizontal className="h-4 w-4" />
-												onClick={() => handleEdit(category)}
+													<span className="sr-only">Actions</span>
-											>
+												</Button>
-												<Edit className="h-4 w-4" />
+											</DropdownMenuTrigger>
-											</Button>
+											<DropdownMenuContent align="end">
-											<Button
+												<DropdownMenuLabel>Actions</DropdownMenuLabel>
-												variant="ghost"
+												<DropdownMenuSeparator />
-												size="icon"
+												<DropdownMenuItem onClick={() => handleEdit(category)}>
-												onClick={() => handleDelete(category.id)}
+													<Edit className="mr-2 h-4 w-4" /> Modifier
-												className="text-destructive hover:text-destructive hover:bg-destructive/10"
+												</DropdownMenuItem>
-											>
+												<DropdownMenuItem
-												<Trash2 className="h-4 w-4" />
+													onClick={() => handleDelete(category.id)}
-											</Button>
+													className="text-destructive focus:text-destructive"
-										</div>
+												>
+													<Trash2 className="mr-2 h-4 w-4" /> Supprimer
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
 									</TableCell>
 								</TableRow>
 							))