feat: CRUD admin for skills and teams

components/admin/management/tree-category-header.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ChevronRight, ChevronDown, Trash2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+interface TreeCategoryHeaderProps {
+  category: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+  icon?: React.ReactNode;
+  itemCount: number;
+  itemLabel: string; // "skill" or "équipe" etc.
+  showSeparator?: boolean;
+  onDelete?: () => void;
+  canDelete?: boolean;
+  isDirection?: boolean; // Pour différencier les directions des catégories de skills
+}
+
+export function TreeCategoryHeader({
+  category,
+  isExpanded,
+  onToggle,
+  icon,
+  itemCount,
+  itemLabel,
+  showSeparator = false,
+  onDelete,
+  canDelete = true,
+  isDirection = false,
+}: TreeCategoryHeaderProps) {
+  return (
+    <div>
+      {/* Séparateur entre catégories (sauf pour la première) */}
+      {showSeparator && <div className="border-t border-white/5" />}
+
+      {/* Header de catégorie */}
+      <div
+        className="flex items-center gap-2 p-3 cursor-pointer hover:bg-white/5 transition-colors"
+        onClick={onToggle}
+      >
+        {isExpanded ? (
+          <ChevronDown className="w-4 h-4 text-slate-400" />
+        ) : (
+          <ChevronRight className="w-4 h-4 text-slate-400" />
+        )}
+        {icon}
+        <h3 className="text-base font-semibold text-white">{category}</h3>
+        <div className="flex items-center gap-2 ml-auto">
+          <Badge variant="outline" className="text-xs px-2 py-0.5">
+            {itemCount} {itemLabel}
+            {itemCount > 1 ? "s" : ""}
+          </Badge>
+          {isDirection && onDelete && canDelete && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation(); // Empêcher l'ouverture/fermeture
+                onDelete();
+              }}
+              className="text-red-400 hover:text-red-300 hover:bg-red-500/20 h-6 w-6 p-0"
+              title={`Supprimer la direction "${category}" et toutes ses équipes`}
+            >
+              <Trash2 className="w-3 h-3" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}