feat: remove a skill category empty

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

@@ -20,6 +20,8 @@ interface TreeCategoryHeaderProps {
     totalMembers: number;
     hasMembers: boolean;
   };
+  onDeleteCategory?: (categoryName: string) => void; // Nouvelle prop pour supprimer les catégories de skills
+  canDeleteCategory?: boolean; // Si la catégorie peut être supprimée
 }
 
 export function TreeCategoryHeader({
@@ -34,6 +36,8 @@ export function TreeCategoryHeader({
   canDelete = true,
   isDirection = false,
   directionStats,
+  onDeleteCategory,
+  canDeleteCategory = false,
 }: TreeCategoryHeaderProps) {
   return (
     <div>
@@ -85,6 +89,26 @@ export function TreeCategoryHeader({
               <Trash2 className="w-3 h-3" />
             </Button>
           )}
+          {/* Bouton de suppression pour les catégories de skills vides */}
+          {!isDirection && onDeleteCategory && itemCount === 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation(); // Empêcher l'ouverture/fermeture
+                onDeleteCategory(category);
+              }}
+              className="text-red-400 hover:text-red-300 hover:bg-red-500/20 h-6 w-6 p-0"
+              disabled={!canDeleteCategory}
+              title={
+                canDeleteCategory
+                  ? `Supprimer la catégorie "${category}"`
+                  : `Impossible de supprimer la catégorie "${category}"`
+              }
+            >
+              <Trash2 className="w-3 h-3" />
+            </Button>
+          )}
         </div>
       </div>
     </div>

components/admin/skills/skills-list.tsx

@@ -19,6 +19,7 @@ interface SkillsListProps {
   onToggleCategory: (category: string) => void;
   onEditSkill: (skill: Skill) => void;
   onDeleteSkill: (skillId: string) => void;
+  onDeleteCategory?: (categoryName: string) => void; // Nouvelle prop
 }
 
 export function SkillsList({
@@ -27,6 +28,7 @@ export function SkillsList({
   onToggleCategory,
   onEditSkill,
   onDeleteSkill,
+  onDeleteCategory,
 }: SkillsListProps) {
   // Fonction pour obtenir l'icône de la catégorie
   const getCategoryIcon = (category: string) => {
@@ -72,6 +74,8 @@ export function SkillsList({
               itemCount={categorySkills.length}
               itemLabel="skill"
               showSeparator={index > 0}
+              onDeleteCategory={onDeleteCategory}
+              canDeleteCategory={categorySkills.length === 0} // Peut supprimer si vide
             />
 
             {/* Liste des skills de la catégorie */}

components/admin/skills/skills-management-page.tsx

@@ -8,7 +8,10 @@ import { SkillCategory, Team } from "@/lib/types";
 import { TreeViewPage } from "../management/tree-view-page";
 import { useTreeView } from "@/hooks/use-tree-view";
 import { useFormDialog } from "@/hooks/use-form-dialog";
-import { useSkillsManagement } from "@/hooks/use-skills-management";
+import {
+  useSkillsManagement,
+  useSkillCategoriesManagement,
+} from "@/hooks/use-skills-management";
 import { SkillFormDialog } from "./skill-form-dialog";
 import { SkillsList } from "./skills-list";
 
@@ -18,10 +21,15 @@ interface SkillsManagementPageProps {
 }
 
 export function SkillsManagementPage({
-  skillCategories,
+  skillCategories: initialSkillCategories,
   initialSkills,
 }: SkillsManagementPageProps) {
   const [searchTerm, setSearchTerm] = useState("");
+
+  // Utiliser le hook dédié pour la gestion des catégories
+  const { skillCategories, handleDeleteCategory } =
+    useSkillCategoriesManagement(initialSkillCategories);
+
   const {
     isCreateDialogOpen,
     isEditDialogOpen,
@@ -58,6 +66,7 @@ export function SkillsManagementPage({
     groupBy: (skill) => skill.category,
     searchTerm,
     onSearchChange: setSearchTerm,
+    availableCategories: skillCategories.map((cat) => cat.name), // Ajouter les catégories disponibles
   });
 
   const handleCreateSubmit = async () => {
@@ -127,6 +136,7 @@ export function SkillsManagementPage({
           onToggleCategory={toggleCategory}
           onEditSkill={handleOpenEditDialog}
           onDeleteSkill={handleDeleteSkill}
+          onDeleteCategory={handleDeleteCategory}
         />
       </TreeViewPage>