refactor: managements pages simplification

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

@@ -1,16 +1,11 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import {
   Plus,
   Edit,
   Trash2,
   Code2,
-  Search,
-  Folder,
-  FolderOpen,
-  ChevronRight,
-  ChevronDown,
   Palette,
   Database,
   Cloud,
@@ -20,15 +15,6 @@ import {
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -38,6 +24,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
 import { SkillCategory, Team } from "@/lib/types";
 import {
@@ -46,11 +39,12 @@ import {
 } from "@/services/admin-management-service";
 import { TechIcon } from "@/components/icons/tech-icon";
 import {
-  TreeViewContainer,
   TreeCategoryHeader,
   TreeItemRow,
-  TreeSearchControls,
 } from "@/components/admin";
+import { TreeViewPage } from "../tree-view-page";
+import { useTreeView } from "@/hooks/use-tree-view";
+import { useFormDialog } from "@/hooks/use-form-dialog";
 
 interface SkillsManagementProps {
   skillCategories: SkillCategory[];
@@ -69,8 +63,6 @@ export function SkillsManagement({
   teams,
 }: SkillsManagementProps) {
   const [searchTerm, setSearchTerm] = useState("");
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const [editingSkill, setEditingSkill] = useState<any>(null);
   const [skillFormData, setSkillFormData] = useState<SkillFormData>({
     name: "",
@@ -79,78 +71,26 @@ export function SkillsManagement({
     icon: "",
   });
   const { toast } = useToast();
+  const { isCreateDialogOpen, isEditDialogOpen, openCreateDialog, closeCreateDialog, openEditDialog, closeEditDialog } = useFormDialog();
 
   // État des skills
   const [skills, setSkills] = useState<Skill[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
-  // État pour les catégories ouvertes/fermées
-  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
-    new Set()
-  );
-
-  // Grouper les skills par catégorie et filtrer en fonction de la recherche
-  const filteredSkillsByCategory = useMemo(() => {
-    // Grouper les skills par catégorie
-    const skillsByCategory = skills.reduce((acc, skill) => {
-      if (!acc[skill.category]) {
-        acc[skill.category] = [];
-      }
-      acc[skill.category].push(skill);
-      return acc;
-    }, {} as Record<string, Skill[]>);
-
-    // Filtrer les skills en fonction de la recherche
-    return Object.entries(skillsByCategory).reduce(
-      (acc, [category, categorySkills]) => {
-        const filteredSkills = categorySkills.filter((skill) => {
-          const matchesSearch =
-            skill.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-            (skill.description &&
-              skill.description
-                .toLowerCase()
-                .includes(searchTerm.toLowerCase()));
-          return matchesSearch;
-        });
-
-        if (filteredSkills.length > 0) {
-          acc[category] = filteredSkills;
-        }
-        return acc;
-      },
-      {} as Record<string, Skill[]>
-    );
-  }, [skills, searchTerm]);
-
-  // Fonctions pour gérer l'expansion des catégories
-  const toggleCategory = useMemo(
-    () => (category: string) => {
-      setExpandedCategories((prev) => {
-        const newExpanded = new Set(prev);
-        if (newExpanded.has(category)) {
-          newExpanded.delete(category);
-        } else {
-          newExpanded.add(category);
-        }
-        return newExpanded;
-      });
-    },
-    []
-  );
-
-  const expandAll = useMemo(
-    () => () => {
-      setExpandedCategories(new Set(Object.keys(filteredSkillsByCategory)));
-    },
-    [filteredSkillsByCategory]
-  );
-
-  const collapseAll = useMemo(
-    () => () => {
-      setExpandedCategories(new Set());
-    },
-    []
-  );
+  // Utilisation du hook factorisé
+  const {
+    filteredDataByCategory: filteredSkillsByCategory,
+    expandedCategories,
+    toggleCategory,
+    expandAll,
+    collapseAll,
+  } = useTreeView({
+    data: skills,
+    searchFields: ['name', 'description'],
+    groupBy: (skill) => skill.category,
+    searchTerm,
+    onSearchChange: setSearchTerm,
+  });
 
   // Charger les skills depuis l'API
   const fetchSkills = async () => {
@@ -175,17 +115,6 @@ export function SkillsManagement({
     fetchSkills();
   }, []);
 
-  // Ouvrir automatiquement les catégories qui contiennent des résultats lors de la recherche
-  useEffect(() => {
-    if (searchTerm.trim()) {
-      const categoriesWithResults = Object.keys(filteredSkillsByCategory);
-      setExpandedCategories(new Set(categoriesWithResults));
-    } else {
-      // Si pas de recherche, fermer toutes les catégories
-      setExpandedCategories(new Set());
-    }
-  }, [searchTerm, filteredSkillsByCategory]);
-
   const handleCreateSkill = async () => {
     if (!skillFormData.name || !skillFormData.categoryId) {
       toast({
@@ -208,7 +137,7 @@ export function SkillsManagement({
       const newSkill = await AdminManagementService.createSkill(skillData);
       setSkills([...skills, newSkill]);
       setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
-      setIsCreateDialogOpen(false);
+      closeCreateDialog();
 
       toast({
         title: "Succès",
@@ -234,7 +163,7 @@ export function SkillsManagement({
       description: skill.description,
       icon: skill.icon,
     });
-    setIsEditDialogOpen(true);
+    openEditDialog();
   };
 
   const handleUpdateSkill = async () => {
@@ -265,7 +194,7 @@ export function SkillsManagement({
       );
 
       setSkills(updatedSkills);
-      setIsEditDialogOpen(false);
+      closeEditDialog();
       setEditingSkill(null);
       setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
 
@@ -339,126 +268,119 @@ export function SkillsManagement({
     return Code2; // Par défaut
   };
 
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
-        <div>
-          <h2 className="text-2xl font-bold text-white">Gestion des Skills</h2>
-          <p className="text-slate-400">
-            Créez, modifiez et supprimez les skills de votre organisation
-          </p>
-        </div>
-        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-          <DialogTrigger asChild>
-            <Button onClick={resetForm}>
-              <Plus className="w-4 h-4 mr-2" />
-              Nouvelle Skill
+  const headerActions = (
+          <Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
+      <DialogTrigger asChild>
+        <Button onClick={() => { resetForm(); openCreateDialog(); }}>
+          <Plus className="w-4 h-4 mr-2" />
+          Nouvelle Skill
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Créer une nouvelle skill</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="skill-name">Nom de la skill *</Label>
+            <Input
+              id="skill-name"
+              value={skillFormData.name}
+              onChange={(e) =>
+                setSkillFormData({ ...skillFormData, name: e.target.value })
+              }
+              placeholder="Ex: React, Node.js, PostgreSQL"
+            />
+          </div>
+          <div>
+            <Label htmlFor="skill-category">Catégorie *</Label>
+            <Select
+              value={skillFormData.categoryId}
+              onValueChange={(value) =>
+                setSkillFormData({ ...skillFormData, categoryId: value })
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionner une catégorie" />
+              </SelectTrigger>
+              <SelectContent>
+                {skillCategories.map((category, index) => (
+                  <SelectItem key={index} value={index.toString()}>
+                    {category.category}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="skill-description">Description</Label>
+            <Textarea
+              id="skill-description"
+              value={skillFormData.description}
+              onChange={(e) =>
+                setSkillFormData({
+                  ...skillFormData,
+                  description: e.target.value,
+                })
+              }
+              placeholder="Description de la skill..."
+              rows={3}
+            />
+          </div>
+          <div>
+            <Label htmlFor="skill-icon">Icône</Label>
+            <Input
+              id="skill-icon"
+              value={skillFormData.icon}
+              onChange={(e) =>
+                setSkillFormData({ ...skillFormData, icon: e.target.value })
+              }
+              placeholder="Ex: react, nodejs, postgresql"
+            />
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <Button
+              variant="outline"
+              onClick={closeCreateDialog}
+            >
+              Annuler
             </Button>
-          </DialogTrigger>
-          <DialogContent className="sm:max-w-[500px]">
-            <DialogHeader>
-              <DialogTitle>Créer une nouvelle skill</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-4">
-              <div>
-                <Label htmlFor="skill-name">Nom de la skill *</Label>
-                <Input
-                  id="skill-name"
-                  value={skillFormData.name}
-                  onChange={(e) =>
-                    setSkillFormData({ ...skillFormData, name: e.target.value })
-                  }
-                  placeholder="Ex: React, Node.js, PostgreSQL"
-                />
-              </div>
-              <div>
-                <Label htmlFor="skill-category">Catégorie *</Label>
-                <Select
-                  value={skillFormData.categoryId}
-                  onValueChange={(value) =>
-                    setSkillFormData({ ...skillFormData, categoryId: value })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Sélectionner une catégorie" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {skillCategories.map((category, index) => (
-                      <SelectItem key={index} value={index.toString()}>
-                        {category.category}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div>
-                <Label htmlFor="skill-description">Description</Label>
-                <Textarea
-                  id="skill-description"
-                  value={skillFormData.description}
-                  onChange={(e) =>
-                    setSkillFormData({
-                      ...skillFormData,
-                      description: e.target.value,
-                    })
-                  }
-                  placeholder="Description de la skill..."
-                  rows={3}
-                />
-              </div>
-              <div>
-                <Label htmlFor="skill-icon">Icône</Label>
-                <Input
-                  id="skill-icon"
-                  value={skillFormData.icon}
-                  onChange={(e) =>
-                    setSkillFormData({ ...skillFormData, icon: e.target.value })
-                  }
-                  placeholder="Ex: react, nodejs, postgresql"
-                />
-              </div>
-              <div className="flex justify-end gap-2 pt-4">
-                <Button
-                  variant="outline"
-                  onClick={() => setIsCreateDialogOpen(false)}
-                >
-                  Annuler
-                </Button>
-                <Button onClick={handleCreateSkill}>Créer</Button>
-              </div>
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
+            <Button onClick={handleCreateSkill}>Créer</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
 
-      {/* Filtres et contrôles */}
-      <TreeSearchControls
+  const emptyState = (
+    <div className="text-center py-8">
+      <Code2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
+      <h3 className="text-base font-medium text-slate-400 mb-1">
+        {searchTerm ? "Aucune skill trouvée" : "Aucune skill"}
+      </h3>
+      <p className="text-slate-500 text-sm">
+        {searchTerm
+          ? "Essayez de modifier vos critères de recherche"
+          : "Commencez par créer votre première skill"}
+      </p>
+    </div>
+  );
+
+  return (
+    <>
+      <TreeViewPage
+        title="Gestion des Skills"
+        description="Créez, modifiez et supprimez les skills de votre organisation"
         searchTerm={searchTerm}
         onSearchChange={setSearchTerm}
         onExpandAll={expandAll}
         onCollapseAll={collapseAll}
-        placeholder="Rechercher une skill..."
-      />
-
-      {/* Vue arborescente des Skills */}
-      <TreeViewContainer
+        searchPlaceholder="Rechercher une skill..."
+        hasContent={Object.keys(filteredSkillsByCategory).length > 0}
         isLoading={isLoading}
         loadingMessage="Chargement des skills..."
-        hasContent={Object.keys(filteredSkillsByCategory).length > 0}
-        emptyState={
-          <div className="text-center py-8">
-            <Code2 className="w-10 h-10 text-slate-500 mx-auto mb-3" />
-            <h3 className="text-base font-medium text-slate-400 mb-1">
-              {searchTerm ? "Aucune skill trouvée" : "Aucune skill"}
-            </h3>
-            <p className="text-slate-500 text-sm">
-              {searchTerm
-                ? "Essayez de modifier vos critères de recherche"
-                : "Commencez par créer votre première skill"}
-            </p>
-          </div>
-        }
+        emptyState={emptyState}
+        headerActions={headerActions}
       >
         {Object.entries(filteredSkillsByCategory).map(
           ([category, categorySkills], index) => (
@@ -513,10 +435,10 @@ export function SkillsManagement({
             </div>
           )
         )}
-      </TreeViewContainer>
+      </TreeViewPage>
 
       {/* Dialog d'édition */}
-      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+      <Dialog open={isEditDialogOpen} onOpenChange={closeEditDialog}>
         <DialogContent className="sm:max-w-[500px]">
           <DialogHeader>
             <DialogTitle>Modifier la skill</DialogTitle>
@@ -582,7 +504,7 @@ export function SkillsManagement({
             <div className="flex justify-end gap-2 pt-4">
               <Button
                 variant="outline"
-                onClick={() => setIsEditDialogOpen(false)}
+                onClick={closeEditDialog}
               >
                 Annuler
               </Button>
@@ -591,6 +513,6 @@ export function SkillsManagement({
           </div>
         </DialogContent>
       </Dialog>
-    </div>
+    </>
   );
 }