feat: CRUD admin for skills and teams

components/admin/management/index.ts

@@ -0,0 +1,6 @@
+// Composants réutilisables pour la vue arborescente
+export { TreeViewContainer } from "./tree-view-container";
+export { TreeCategoryHeader } from "./tree-category-header";
+export { TreeItemRow } from "./tree-item-row";
+export { TreeSearchControls } from "./tree-search-controls";
+export { TeamMetrics } from "./team-metrics";

components/admin/management/pages/index.ts

@@ -0,0 +1,3 @@
+// Composants de pages de gestion
+export { SkillsManagement } from "./skills-management";
+export { TeamsManagement } from "./teams-management";

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

@@ -0,0 +1,596 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import {
+  Plus,
+  Edit,
+  Trash2,
+  Code2,
+  Search,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  ChevronDown,
+  Palette,
+  Database,
+  Cloud,
+  Shield,
+  Smartphone,
+  Layers,
+} 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,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
+import { SkillCategory, Team } from "@/lib/types";
+import {
+  AdminManagementService,
+  Skill,
+} from "@/services/admin-management-service";
+import { TechIcon } from "@/components/icons/tech-icon";
+import {
+  TreeViewContainer,
+  TreeCategoryHeader,
+  TreeItemRow,
+  TreeSearchControls,
+} from "@/components/admin";
+
+interface SkillsManagementProps {
+  skillCategories: SkillCategory[];
+  teams: Team[];
+}
+
+interface SkillFormData {
+  name: string;
+  categoryId: string;
+  description: string;
+  icon: string;
+}
+
+export function SkillsManagement({
+  skillCategories,
+  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: "",
+    categoryId: "",
+    description: "",
+    icon: "",
+  });
+  const { toast } = useToast();
+
+  // É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());
+    },
+    []
+  );
+
+  // Charger les skills depuis l'API
+  const fetchSkills = async () => {
+    try {
+      setIsLoading(true);
+      const skillsData = await AdminManagementService.getSkills();
+      setSkills(skillsData);
+    } catch (error) {
+      console.error("Error fetching skills:", error);
+      toast({
+        title: "Erreur",
+        description: "Impossible de charger les skills",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Charger les skills au montage du composant
+  useEffect(() => {
+    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({
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs obligatoires",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      const categoryIndex = parseInt(skillFormData.categoryId);
+      const category = skillCategories[categoryIndex];
+
+      const skillData = {
+        ...skillFormData,
+        category: category.category,
+      };
+
+      const newSkill = await AdminManagementService.createSkill(skillData);
+      setSkills([...skills, newSkill]);
+      setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
+      setIsCreateDialogOpen(false);
+
+      toast({
+        title: "Succès",
+        description: "Skill créée avec succès",
+      });
+    } catch (error: any) {
+      toast({
+        title: "Erreur",
+        description: error.message || "Erreur lors de la création de la skill",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleEditSkill = (skill: any) => {
+    setEditingSkill(skill);
+    const categoryIndex = skillCategories.findIndex(
+      (cat) => cat.category === skill.category
+    );
+    setSkillFormData({
+      name: skill.name,
+      categoryId: categoryIndex !== -1 ? categoryIndex.toString() : "",
+      description: skill.description,
+      icon: skill.icon,
+    });
+    setIsEditDialogOpen(true);
+  };
+
+  const handleUpdateSkill = async () => {
+    if (!editingSkill || !skillFormData.name || !skillFormData.categoryId) {
+      toast({
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs obligatoires",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      const categoryIndex = parseInt(skillFormData.categoryId);
+      const category = skillCategories[categoryIndex];
+
+      const skillData = {
+        id: editingSkill.id,
+        ...skillFormData,
+        category: category.category,
+        usageCount: editingSkill.usageCount,
+      };
+
+      const updatedSkill = await AdminManagementService.updateSkill(skillData);
+
+      const updatedSkills = skills.map((skill) =>
+        skill.id === editingSkill.id ? updatedSkill : skill
+      );
+
+      setSkills(updatedSkills);
+      setIsEditDialogOpen(false);
+      setEditingSkill(null);
+      setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
+
+      toast({
+        title: "Succès",
+        description: "Skill mise à jour avec succès",
+      });
+    } catch (error: any) {
+      toast({
+        title: "Erreur",
+        description:
+          error.message || "Erreur lors de la mise à jour de la skill",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleDeleteSkill = async (skillId: string) => {
+    if (
+      confirm(
+        "Êtes-vous sûr de vouloir supprimer cette skill ? Cette action est irréversible."
+      )
+    ) {
+      try {
+        await AdminManagementService.deleteSkill(skillId);
+        setSkills(skills.filter((s) => s.id !== skillId));
+        toast({
+          title: "Succès",
+          description: "Skill supprimée avec succès",
+        });
+      } catch (error: any) {
+        toast({
+          title: "Erreur",
+          description:
+            error.message || "Erreur lors de la suppression de la skill",
+          variant: "destructive",
+        });
+      }
+    }
+  };
+
+  const resetForm = () => {
+    setSkillFormData({ name: "", categoryId: "", description: "", icon: "" });
+  };
+
+  // Fonction pour obtenir l'icône de la catégorie
+  const getCategoryIcon = (category: string) => {
+    const categoryName = category.toLowerCase();
+    if (categoryName.includes("frontend") || categoryName.includes("front"))
+      return Code2;
+    if (categoryName.includes("backend") || categoryName.includes("back"))
+      return Layers;
+    if (
+      categoryName.includes("design") ||
+      categoryName.includes("ui") ||
+      categoryName.includes("ux")
+    )
+      return Palette;
+    if (categoryName.includes("data") || categoryName.includes("database"))
+      return Database;
+    if (categoryName.includes("cloud") || categoryName.includes("devops"))
+      return Cloud;
+    if (categoryName.includes("security") || categoryName.includes("securité"))
+      return Shield;
+    if (
+      categoryName.includes("mobile") ||
+      categoryName.includes("android") ||
+      categoryName.includes("ios")
+    )
+      return Smartphone;
+    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
+            </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>
+
+      {/* Filtres et contrôles */}
+      <TreeSearchControls
+        searchTerm={searchTerm}
+        onSearchChange={setSearchTerm}
+        onExpandAll={expandAll}
+        onCollapseAll={collapseAll}
+        placeholder="Rechercher une skill..."
+      />
+
+      {/* Vue arborescente des Skills */}
+      <TreeViewContainer
+        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>
+        }
+      >
+        {Object.entries(filteredSkillsByCategory).map(
+          ([category, categorySkills], index) => (
+            <div key={category}>
+              <TreeCategoryHeader
+                category={category}
+                isExpanded={expandedCategories.has(category)}
+                onToggle={() => toggleCategory(category)}
+                icon={(() => {
+                  const IconComponent = getCategoryIcon(category);
+                  return <IconComponent className="w-5 h-5 text-blue-400" />;
+                })()}
+                itemCount={categorySkills.length}
+                itemLabel="skill"
+                showSeparator={index > 0}
+              />
+
+              {/* Liste des skills de la catégorie */}
+              {expandedCategories.has(category) && (
+                <div className="bg-slate-950/30">
+                  {categorySkills.map((skill, skillIndex) => (
+                    <TreeItemRow
+                      key={skill.id}
+                      icon={
+                        <div className="flex items-center gap-3">
+                          <TechIcon
+                            iconName={skill.icon}
+                            className="w-5 h-5 text-green-400"
+                            fallbackText={skill.name}
+                          />
+                          <div className="p-1 bg-green-500/20 border border-green-500/30 rounded text-xs font-mono text-green-400 min-w-[3rem] text-center shrink-0">
+                            {skill.icon || "?"}
+                          </div>
+                        </div>
+                      }
+                      title={skill.name}
+                      subtitle={skill.description}
+                      badges={[
+                        {
+                          text: `${skill.usageCount} util.`,
+                          variant: "outline",
+                        },
+                      ]}
+                      onEdit={() => handleEditSkill(skill)}
+                      onDelete={() => handleDeleteSkill(skill.id)}
+                      canDelete={skill.usageCount === 0}
+                      showSeparator={skillIndex > 0}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        )}
+      </TreeViewContainer>
+
+      {/* Dialog d'édition */}
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Modifier la skill</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="edit-skill-name">Nom de la skill *</Label>
+              <Input
+                id="edit-skill-name"
+                value={skillFormData.name}
+                onChange={(e) =>
+                  setSkillFormData({ ...skillFormData, name: e.target.value })
+                }
+                placeholder="Ex: React, Node.js, PostgreSQL"
+              />
+            </div>
+            <div>
+              <Label htmlFor="edit-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="edit-skill-description">Description</Label>
+              <Textarea
+                id="edit-skill-description"
+                value={skillFormData.description}
+                onChange={(e) =>
+                  setSkillFormData({
+                    ...skillFormData,
+                    description: e.target.value,
+                  })
+                }
+                placeholder="Description de la skill..."
+                rows={3}
+              />
+            </div>
+            <div>
+              <Label htmlFor="edit-skill-icon">Icône</Label>
+              <Input
+                id="edit-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={() => setIsEditDialogOpen(false)}
+              >
+                Annuler
+              </Button>
+              <Button onClick={handleUpdateSkill}>Mettre à jour</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

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

@@ -0,0 +1,547 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { Plus, Edit, Trash2, Users, Search, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } 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,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import { SkillCategory, Team as TeamType } from "@/lib/types";
+import { TeamStats } from "@/services/admin-service";
+import {
+  AdminManagementService,
+  Team,
+} from "@/services/admin-management-service";
+import {
+  TreeViewContainer,
+  TreeCategoryHeader,
+  TreeItemRow,
+  TreeSearchControls,
+  TeamMetrics,
+} from "@/components/admin";
+
+interface TeamsManagementProps {
+  teams: TeamType[];
+  teamStats: TeamStats[];
+  skillCategories: SkillCategory[];
+}
+
+interface TeamFormData {
+  name: string;
+  direction: string;
+}
+
+export function TeamsManagement({
+  teams,
+  teamStats,
+  skillCategories,
+}: TeamsManagementProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [editingTeam, setEditingTeam] = useState<any>(null);
+  const [teamFormData, setTeamFormData] = useState<TeamFormData>({
+    name: "",
+    direction: "",
+  });
+  const { toast } = useToast();
+
+  // État pour les directions ouvertes/fermées
+  const [expandedDirections, setExpandedDirections] = useState<Set<string>>(
+    new Set()
+  );
+
+  // État pour gérer la liste des équipes
+
+  // Grouper les teams par direction et filtrer en fonction de la recherche
+  const filteredTeamsByDirection = useMemo(() => {
+    // Grouper les teams par direction
+    const teamsByDirection = teams.reduce((acc, team) => {
+      if (!acc[team.direction]) {
+        acc[team.direction] = [];
+      }
+      acc[team.direction].push(team);
+      return acc;
+    }, {} as Record<string, TeamType[]>);
+
+    // Filtrer les teams en fonction de la recherche
+    return Object.entries(teamsByDirection).reduce(
+      (acc, [direction, directionTeams]) => {
+        const filteredTeams = directionTeams.filter((team) => {
+          const matchesSearch = team.name
+            .toLowerCase()
+            .includes(searchTerm.toLowerCase());
+          return matchesSearch;
+        });
+
+        if (filteredTeams.length > 0) {
+          acc[direction] = filteredTeams;
+        }
+        return acc;
+      },
+      {} as Record<string, TeamType[]>
+    );
+  }, [teams, searchTerm]);
+
+  // Fonctions pour gérer l'expansion des directions
+  const toggleDirection = useMemo(
+    () => (direction: string) => {
+      setExpandedDirections((prev) => {
+        const newExpanded = new Set(prev);
+        if (newExpanded.has(direction)) {
+          newExpanded.delete(direction);
+        } else {
+          newExpanded.add(direction);
+        }
+        return newExpanded;
+      });
+    },
+    []
+  );
+
+  const expandAll = useMemo(
+    () => () => {
+      setExpandedDirections(new Set(Object.keys(filteredTeamsByDirection)));
+    },
+    [filteredTeamsByDirection]
+  );
+
+  const collapseAll = useMemo(
+    () => () => {
+      setExpandedDirections(new Set());
+    },
+    []
+  );
+
+  const getTeamStats = (teamId: string) => {
+    return teamStats.find((stats) => stats.teamId === teamId);
+  };
+
+  // Charger les teams depuis l'API
+  const fetchTeams = async () => {
+    try {
+      const teamsData = await AdminManagementService.getTeams();
+      // Note: on garde les teams existantes pour la compatibilité
+      // Les nouvelles teams créées via l'API seront visibles après rafraîchissement
+    } catch (error) {
+      console.error("Error fetching teams:", error);
+      toast({
+        title: "Erreur",
+        description: "Impossible de charger les teams",
+        variant: "destructive",
+      });
+    }
+  };
+
+  // Charger les teams au montage du composant
+  useEffect(() => {
+    fetchTeams();
+  }, []);
+
+  // Ouvrir automatiquement les directions qui contiennent des résultats lors de la recherche
+  useEffect(() => {
+    if (searchTerm.trim()) {
+      const directionsWithResults = Object.keys(filteredTeamsByDirection);
+      setExpandedDirections(new Set(directionsWithResults));
+    } else {
+      // Si pas de recherche, fermer toutes les directions
+      setExpandedDirections(new Set());
+    }
+  }, [searchTerm, filteredTeamsByDirection]);
+
+  const handleCreateTeam = async () => {
+    if (!teamFormData.name || !teamFormData.direction) {
+      toast({
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs obligatoires",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      const newTeam = await AdminManagementService.createTeam(teamFormData);
+      toast({
+        title: "Succès",
+        description: "Équipe créée avec succès",
+      });
+
+      setTeamFormData({ name: "", direction: "" });
+      setIsCreateDialogOpen(false);
+
+      // Rafraîchir la page pour voir les changements
+      window.location.reload();
+    } catch (error: any) {
+      toast({
+        title: "Erreur",
+        description: error.message || "Erreur lors de la création de l'équipe",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleEditTeam = (team: any) => {
+    setEditingTeam(team);
+    setTeamFormData({
+      name: team.name,
+      direction: team.direction,
+    });
+    setIsEditDialogOpen(true);
+  };
+
+  const handleUpdateTeam = async () => {
+    if (!editingTeam || !teamFormData.name || !teamFormData.direction) {
+      toast({
+        title: "Erreur",
+        description: "Veuillez remplir tous les champs obligatoires",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      await AdminManagementService.updateTeam({
+        id: editingTeam.id,
+        ...teamFormData,
+        memberCount: editingTeam.memberCount || 0,
+      });
+
+      toast({
+        title: "Succès",
+        description: "Équipe mise à jour avec succès",
+      });
+
+      setIsEditDialogOpen(false);
+      setEditingTeam(null);
+      setTeamFormData({ name: "", direction: "" });
+
+      // Rafraîchir la page pour voir les changements
+      window.location.reload();
+    } catch (error: any) {
+      toast({
+        title: "Erreur",
+        description:
+          error.message || "Erreur lors de la mise à jour de l'équipe",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleDeleteTeam = async (teamId: string) => {
+    const team = teams.find((t) => t.id === teamId);
+    const stats = getTeamStats(teamId);
+
+    if (stats && stats.totalMembers > 0) {
+      toast({
+        title: "Erreur",
+        description:
+          "Impossible de supprimer une équipe qui contient des membres",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (
+      confirm(
+        `Êtes-vous sûr de vouloir supprimer l'équipe "${team?.name}" ? Cette action est irréversible.`
+      )
+    ) {
+      try {
+        await AdminManagementService.deleteTeam(teamId);
+        toast({
+          title: "Succès",
+          description: "Équipe supprimée avec succès",
+        });
+
+        // Rafraîchir la page pour voir les changements
+        window.location.reload();
+      } catch (error: any) {
+        toast({
+          title: "Erreur",
+          description:
+            error.message || "Erreur lors de la suppression de l'équipe",
+          variant: "destructive",
+        });
+      }
+    }
+  };
+
+  const handleDeleteDirection = async (direction: string) => {
+    // Vérifier si des équipes de cette direction ont des membres
+    const teamsInDirection = teams.filter(
+      (team) => team.direction === direction
+    );
+    const hasMembers = teamsInDirection.some((team) => {
+      const stats = getTeamStats(team.id);
+      return stats && stats.totalMembers > 0;
+    });
+
+    if (hasMembers) {
+      toast({
+        title: "Erreur",
+        description: `Impossible de supprimer la direction "${direction}" car certaines équipes ont des membres`,
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (
+      confirm(
+        `Êtes-vous sûr de vouloir supprimer la direction "${direction}" et TOUTES ses équipes ?\n\n⚠️ Cette action est irréversible !\n\nÉquipes qui seront supprimées :\n${teamsInDirection
+          .map((t) => `• ${t.name}`)
+          .join("\n")}`
+      )
+    ) {
+      try {
+        await AdminManagementService.deleteDirection(direction);
+        toast({
+          title: "Succès",
+          description: `Direction "${direction}" et toutes ses équipes supprimées avec succès`,
+          variant: "default",
+        });
+        // Rafraîchir la page pour voir les changements
+        window.location.reload();
+      } catch (error: any) {
+        toast({
+          title: "Erreur",
+          description:
+            error.message || "Erreur lors de la suppression de la direction",
+          variant: "destructive",
+        });
+      }
+    }
+  };
+
+  const resetForm = () => {
+    setTeamFormData({ name: "", direction: "" });
+  };
+
+  // Extraire les directions uniques pour les formulaires
+  const directions = Array.from(new Set(teams.map((team) => team.direction)));
+
+  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 Teams</h2>
+          <p className="text-slate-400">
+            Créez, modifiez et supprimez les équipes de votre organisation
+          </p>
+        </div>
+        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+          <DialogTrigger asChild>
+            <Button onClick={resetForm}>
+              <Plus className="w-4 h-4 mr-2" />
+              Nouvelle Équipe
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-[500px]">
+            <DialogHeader>
+              <DialogTitle>Créer une nouvelle équipe</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4">
+              <div>
+                <Label htmlFor="team-name">Nom de l'équipe *</Label>
+                <Input
+                  id="team-name"
+                  value={teamFormData.name}
+                  onChange={(e) =>
+                    setTeamFormData({ ...teamFormData, name: e.target.value })
+                  }
+                  placeholder="Ex: Équipe Frontend, Équipe Backend"
+                />
+              </div>
+              <div>
+                <Label htmlFor="team-direction">Direction *</Label>
+                <Select
+                  value={teamFormData.direction}
+                  onValueChange={(value) =>
+                    setTeamFormData({ ...teamFormData, direction: value })
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Sélectionner une direction" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {directions.map((direction) => (
+                      <SelectItem key={direction} value={direction}>
+                        {direction}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex justify-end gap-2 pt-4">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsCreateDialogOpen(false)}
+                >
+                  Annuler
+                </Button>
+                <Button onClick={handleCreateTeam}>Créer</Button>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {/* Filtres et contrôles */}
+      <TreeSearchControls
+        searchTerm={searchTerm}
+        onSearchChange={setSearchTerm}
+        onExpandAll={expandAll}
+        onCollapseAll={collapseAll}
+        placeholder="Rechercher une équipe..."
+      />
+
+      {/* Vue arborescente des Teams */}
+      <TreeViewContainer
+        hasContent={Object.keys(filteredTeamsByDirection).length > 0}
+        emptyState={
+          <div className="text-center py-8">
+            <Building2 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 équipe trouvée" : "Aucune équipe"}
+            </h3>
+            <p className="text-sm text-slate-500">
+              {searchTerm
+                ? "Essayez de modifier vos critères de recherche"
+                : "Commencez par créer votre première équipe"}
+            </p>
+          </div>
+        }
+      >
+        {Object.entries(filteredTeamsByDirection).map(
+          ([direction, directionTeams], index) => (
+            <div key={direction}>
+              <TreeCategoryHeader
+                category={direction}
+                isExpanded={expandedDirections.has(direction)}
+                onToggle={() => toggleDirection(direction)}
+                icon={<Building2 className="w-5 h-5 text-blue-400" />}
+                itemCount={directionTeams.length}
+                itemLabel="équipe"
+                showSeparator={index > 0}
+                onDelete={() => handleDeleteDirection(direction)}
+                canDelete={true}
+                isDirection={true}
+              />
+
+              {/* Liste des teams de la direction */}
+              {expandedDirections.has(direction) && (
+                <div className="bg-slate-950/30">
+                  {directionTeams.map((team, teamIndex) => {
+                    const stats = getTeamStats(team.id);
+                    return (
+                      <TreeItemRow
+                        key={team.id}
+                        icon={<Users className="w-5 h-5 text-green-400" />}
+                        title={team.name}
+                        badges={
+                          stats
+                            ? [
+                                {
+                                  text: `${stats.totalMembers} membres`,
+                                  variant: "outline",
+                                },
+                              ]
+                            : []
+                        }
+                        onEdit={() => handleEditTeam(team)}
+                        onDelete={() => handleDeleteTeam(team.id)}
+                        canDelete={!stats || stats.totalMembers === 0}
+                        showSeparator={teamIndex > 0}
+                        additionalInfo={
+                          stats ? (
+                            <TeamMetrics
+                              averageSkillLevel={stats.averageSkillLevel}
+                              skillCoverage={stats.skillCoverage}
+                              topSkillsCount={stats.topSkills.length}
+                              totalMembers={stats.totalMembers}
+                            />
+                          ) : (
+                            <p className="text-slate-500 text-xs">
+                              Aucune donnée disponible
+                            </p>
+                          )
+                        }
+                      />
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )
+        )}
+      </TreeViewContainer>
+
+      {/* Dialog d'édition */}
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Modifier l'équipe</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="edit-team-name">Nom de l'équipe *</Label>
+              <Input
+                id="edit-team-name"
+                value={teamFormData.name}
+                onChange={(e) =>
+                  setTeamFormData({ ...teamFormData, name: e.target.value })
+                }
+                placeholder="Ex: Équipe Frontend, Équipe Backend"
+              />
+            </div>
+            <div>
+              <Label htmlFor="edit-team-direction">Direction *</Label>
+              <Select
+                value={teamFormData.direction}
+                onValueChange={(value) =>
+                  setTeamFormData({ ...teamFormData, direction: value })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Sélectionner une direction" />
+                </SelectTrigger>
+                <SelectContent>
+                  {directions.map((direction) => (
+                    <SelectItem key={direction} value={direction}>
+                      {direction}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex justify-end gap-2 pt-4">
+              <Button
+                variant="outline"
+                onClick={() => setIsEditDialogOpen(false)}
+              >
+                Annuler
+              </Button>
+              <Button onClick={handleUpdateTeam}>Mettre à jour</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

components/admin/management/team-metrics.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+interface TeamMetricsProps {
+  averageSkillLevel: number;
+  skillCoverage: number;
+  topSkillsCount: number;
+  totalMembers: number;
+}
+
+export function TeamMetrics({
+  averageSkillLevel,
+  skillCoverage,
+  topSkillsCount,
+  totalMembers,
+}: TeamMetricsProps) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-center">
+      <div>
+        <div className="text-xs text-slate-400">Niveau moy.</div>
+        <div className="text-sm font-semibold text-white">
+          {averageSkillLevel.toFixed(1)}
+        </div>
+      </div>
+      <div>
+        <div className="text-xs text-slate-400">Couverture</div>
+        <div className="text-sm font-semibold text-white">
+          {skillCoverage.toFixed(0)}%
+        </div>
+      </div>
+      <div>
+        <div className="text-xs text-slate-400">Top Skills</div>
+        <div className="text-sm font-semibold text-white">{topSkillsCount}</div>
+      </div>
+      <div>
+        <div className="text-xs text-slate-400">Membres</div>
+        <div className="text-sm font-semibold text-white">{totalMembers}</div>
+      </div>
+    </div>
+  );
+}

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>
+  );
+}

components/admin/management/tree-item-row.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Edit, Trash2 } from "lucide-react";
+
+interface TreeItemRowProps {
+  icon?: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  badges?: Array<{
+    text: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+    className?: string;
+  }>;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  canDelete?: boolean;
+  showSeparator?: boolean;
+  additionalInfo?: React.ReactNode;
+}
+
+export function TreeItemRow({
+  icon,
+  title,
+  subtitle,
+  badges = [],
+  onEdit,
+  onDelete,
+  canDelete = true,
+  showSeparator = false,
+  additionalInfo,
+}: TreeItemRowProps) {
+  return (
+    <div>
+      {/* Séparateur entre items */}
+      {showSeparator && <div className="border-t border-white/5 ml-12" />}
+
+      <div className="flex items-center justify-between p-2 ml-6 border-l-2 border-slate-700/50 hover:bg-white/5 transition-colors">
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {icon}
+          <div className="flex items-center gap-3 flex-1 min-w-0">
+            <h4 className="text-sm font-medium text-white truncate">{title}</h4>
+            {badges.map((badge, index) => (
+              <Badge
+                key={index}
+                variant={badge.variant || "outline"}
+                className={`text-xs px-2 py-0.5 shrink-0 ${
+                  badge.className || ""
+                }`}
+              >
+                {badge.text}
+              </Badge>
+            ))}
+            {subtitle && (
+              <p className="text-slate-400 text-xs truncate flex-1">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Informations additionnelles (comme les métriques) */}
+        {additionalInfo && (
+          <div className="mx-4 shrink-0">{additionalInfo}</div>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 shrink-0">
+          {onEdit && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onEdit}
+              className="text-blue-400 hover:text-blue-300 hover:bg-blue-500/20 h-6 w-6 p-0"
+            >
+              <Edit className="w-3 h-3" />
+            </Button>
+          )}
+          {onDelete && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onDelete}
+              className="text-red-400 hover:text-red-300 hover:bg-red-500/20 h-6 w-6 p-0"
+              disabled={!canDelete}
+            >
+              <Trash2 className="w-3 h-3" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

components/admin/management/tree-search-controls.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface TreeSearchControlsProps {
+  searchTerm: string;
+  onSearchChange: (value: string) => void;
+  onExpandAll: () => void;
+  onCollapseAll: () => void;
+  placeholder?: string;
+}
+
+export function TreeSearchControls({
+  searchTerm,
+  onSearchChange,
+  onExpandAll,
+  onCollapseAll,
+  placeholder = "Rechercher...",
+}: TreeSearchControlsProps) {
+  return (
+    <div className="flex flex-col sm:flex-row gap-3">
+      <div className="relative flex-1">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4" />
+        <Input
+          placeholder={placeholder}
+          value={searchTerm}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onExpandAll}
+          className="text-slate-400 hover:text-white"
+        >
+          Tout ouvrir
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onCollapseAll}
+          className="text-slate-400 hover:text-white"
+        >
+          Tout fermer
+        </Button>
+      </div>
+    </div>
+  );
+}

components/admin/management/tree-view-container.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+
+interface TreeViewContainerProps {
+  children: React.ReactNode;
+  isLoading?: boolean;
+  loadingMessage?: string;
+  emptyState?: React.ReactNode;
+  hasContent?: boolean;
+}
+
+export function TreeViewContainer({
+  children,
+  isLoading = false,
+  loadingMessage = "Chargement...",
+  emptyState,
+  hasContent = true,
+}: TreeViewContainerProps) {
+  if (isLoading) {
+    return (
+      <div className="text-center py-8">
+        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-400 mx-auto mb-3"></div>
+        <p className="text-slate-400 text-sm">{loadingMessage}</p>
+      </div>
+    );
+  }
+
+  if (!hasContent && emptyState) {
+    return emptyState;
+  }
+
+  return (
+    <Card className="bg-white/5 border-white/10">
+      <CardContent className="p-0">{children}</CardContent>
+    </Card>
+  );
+}