feat: add team members functionality and modal

- Introduced `onViewMembers` prop in `TreeItemRow` to handle viewing team members.
- Added `TeamMembersModal` to display members of a selected team.
- Implemented state management for team members in `TeamsManagement`, including fetching and updating stats.
- Enhanced `AdminManagementService` with methods to fetch and remove team members.

app/api/admin/teams/[teamId]/members/route.ts

@@ -0,0 +1,110 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getPool } from "@/services/database";
+import { isUserAuthenticated } from "@/lib/server-auth";
+
+// GET - Récupérer les membres d'une équipe
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ teamId: string }> }
+) {
+  try {
+    // Vérifier l'authentification
+    const isAuthenticated = await isUserAuthenticated();
+    if (!isAuthenticated) {
+      return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+    }
+
+    const { teamId } = await params;
+
+    if (!teamId) {
+      return NextResponse.json(
+        { error: "L'ID de l'équipe est requis" },
+        { status: 400 }
+      );
+    }
+
+    const pool = getPool();
+    const query = `
+      SELECT 
+        u.uuid_id,
+        u.first_name,
+        u.last_name,
+        u.created_at
+      FROM users u
+      WHERE u.team_id = $1
+      ORDER BY u.last_name, u.first_name
+    `;
+
+    const result = await pool.query(query, [teamId]);
+
+    const members = result.rows.map((row) => ({
+      id: row.uuid_id,
+      firstName: row.first_name,
+      lastName: row.last_name,
+      fullName: `${row.first_name} ${row.last_name}`,
+      joinedAt: row.created_at,
+    }));
+
+    return NextResponse.json(members);
+  } catch (error) {
+    console.error("Error fetching team members:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la récupération des membres" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Supprimer un membre d'une équipe
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ teamId: string }> }
+) {
+  try {
+    // Vérifier l'authentification
+    const isAuthenticated = await isUserAuthenticated();
+    if (!isAuthenticated) {
+      return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
+    }
+
+    const { teamId } = await params;
+    const { memberId } = await request.json();
+
+    if (!teamId || !memberId) {
+      return NextResponse.json(
+        { error: "L'ID de l'équipe et l'ID du membre sont requis" },
+        { status: 400 }
+      );
+    }
+
+    const pool = getPool();
+
+    // Vérifier que le membre appartient bien à cette équipe
+    const memberCheck = await pool.query(
+      "SELECT uuid_id FROM users WHERE uuid_id = $1 AND team_id = $2",
+      [memberId, teamId]
+    );
+
+    if (memberCheck.rows.length === 0) {
+      return NextResponse.json(
+        { error: "Membre non trouvé dans cette équipe" },
+        { status: 404 }
+      );
+    }
+
+    // Supprimer le membre (mettre team_id à NULL au lieu de supprimer l'utilisateur)
+    await pool.query("UPDATE users SET team_id = NULL WHERE uuid_id = $1", [
+      memberId,
+    ]);
+
+    return NextResponse.json({
+      message: "Membre supprimé de l'équipe avec succès",
+    });
+  } catch (error) {
+    console.error("Error removing team member:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la suppression du membre" },
+      { status: 500 }
+    );
+  }
+}

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

@@ -35,6 +35,7 @@ import {
   TreeSearchControls,
   TeamMetrics,
 } from "@/components/admin";
+import { TeamMembersModal } from "@/components/admin/management/team-members-modal";
 
 interface TeamsManagementProps {
   teams: TeamType[];
@@ -55,6 +56,8 @@ export function TeamsManagement({
   const [searchTerm, setSearchTerm] = useState("");
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isMembersModalOpen, setIsMembersModalOpen] = useState(false);
+  const [selectedTeam, setSelectedTeam] = useState<any>(null);
   const [editingTeam, setEditingTeam] = useState<any>(null);
   const [teamFormData, setTeamFormData] = useState<TeamFormData>({
     name: "",
@@ -67,7 +70,8 @@ export function TeamsManagement({
     new Set()
   );
 
-  // État pour gérer la liste des équipes
+  // État local pour les stats des équipes
+  const [localTeamStats, setLocalTeamStats] = useState<TeamStats[]>(teamStats);
 
   // Grouper les teams par direction et filtrer en fonction de la recherche
   const filteredTeamsByDirection = useMemo(() => {
@@ -129,8 +133,8 @@ export function TeamsManagement({
     []
   );
 
-  const getTeamStats = (teamId: string) => {
+  const getTeamStats = (teamId: string): TeamStats | undefined => {
-    return teamStats.find((stats) => stats.teamId === teamId);
+    return localTeamStats.find((stats) => stats.teamId === teamId);
   };
 
   // Charger les teams depuis l'API
@@ -149,6 +153,18 @@ export function TeamsManagement({
     }
   };
 
+  // Rafraîchir les stats des équipes depuis l'API des équipes
+  const refreshTeamStats = async () => {
+    try {
+      const teamsData = await AdminManagementService.getTeams();
+      // Fusionner avec les stats existantes pour préserver les métriques
+      const updatedStats = mergeTeamStats(localTeamStats, teamsData);
+      setLocalTeamStats(updatedStats);
+    } catch (error) {
+      console.error("Error refreshing team stats:", error);
+    }
+  };
+
   // Charger les teams au montage du composant
   useEffect(() => {
     fetchTeams();
@@ -205,6 +221,41 @@ export function TeamsManagement({
     setIsEditDialogOpen(true);
   };
 
+  const handleViewMembers = (team: any) => {
+    setSelectedTeam(team);
+    setIsMembersModalOpen(true);
+  };
+
+  // Fonction pour mettre à jour les stats d'une équipe après suppression d'un membre
+  const updateTeamStatsAfterMemberRemoval = (teamId: string) => {
+    setLocalTeamStats((prev) =>
+      prev.map((stats) =>
+        stats.teamId === teamId
+          ? { ...stats, totalMembers: Math.max(0, stats.totalMembers - 1) }
+          : stats
+      )
+    );
+  };
+
+  // Fonction pour fusionner les stats existantes avec les nouvelles données
+  const mergeTeamStats = (existingStats: TeamStats[], newTeams: Team[]) => {
+    return newTeams.map((team) => {
+      const existingStat = existingStats.find(
+        (stat) => stat.teamId === team.id
+      );
+      return {
+        teamId: team.id,
+        teamName: team.name,
+        direction: team.direction,
+        totalMembers: team.memberCount,
+        averageSkillLevel: existingStat?.averageSkillLevel || 0,
+        skillCoverage: existingStat?.skillCoverage || 0,
+        topSkillsCount: existingStat?.topSkillsCount || 0,
+        topSkills: existingStat?.topSkills || [],
+      };
+    });
+  };
+
   const handleUpdateTeam = async () => {
     if (!editingTeam || !teamFormData.name || !teamFormData.direction) {
       toast({
@@ -466,8 +517,10 @@ export function TeamsManagement({
                         }
                         onEdit={() => handleEditTeam(team)}
                         onDelete={() => handleDeleteTeam(team.id)}
+                        onViewMembers={() => handleViewMembers(team)}
                         canDelete={!stats || stats.totalMembers === 0}
                         showSeparator={teamIndex > 0}
+                        hasMembers={stats ? stats.totalMembers > 0 : false}
                         additionalInfo={
                           stats ? (
                             <TeamMetrics
@@ -542,6 +595,27 @@ export function TeamsManagement({
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* Modal des membres d'équipe */}
+      {selectedTeam && (
+        <TeamMembersModal
+          teamId={selectedTeam.id}
+          teamName={selectedTeam.name}
+          isOpen={isMembersModalOpen}
+          onClose={() => {
+            setIsMembersModalOpen(false);
+            setSelectedTeam(null);
+            // Rafraîchir les stats depuis l'API pour s'assurer de la cohérence
+            refreshTeamStats();
+          }}
+          onMemberRemoved={() => {
+            // Mettre à jour les stats localement
+            if (selectedTeam) {
+              updateTeamStatsAfterMemberRemoval(selectedTeam.id);
+            }
+          }}
+        />
+      )}
     </div>
   );
 }

components/admin/management/team-members-modal.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Users, User, Calendar, X, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TeamMember } from "@/services/admin-management-service";
+import { AdminManagementService } from "@/services/admin-management-service";
+import { useToast } from "@/hooks/use-toast";
+
+interface TeamMembersModalProps {
+  teamId: string;
+  teamName: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onMemberRemoved?: () => void; // Callback pour notifier le parent qu'un membre a été supprimé
+}
+
+export function TeamMembersModal({
+  teamId,
+  teamName,
+  isOpen,
+  onClose,
+  onMemberRemoved,
+}: TeamMembersModalProps) {
+  const [members, setMembers] = useState<TeamMember[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [deletingMemberId, setDeletingMemberId] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (isOpen && teamId) {
+      fetchMembers();
+    }
+  }, [isOpen, teamId]);
+
+  const fetchMembers = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const membersData = await AdminManagementService.getTeamMembers(teamId);
+      setMembers(membersData);
+    } catch (err: any) {
+      setError(err.message || "Erreur lors du chargement des membres");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRemoveMember = async (memberId: string, memberName: string) => {
+    if (
+      !confirm(`Êtes-vous sûr de vouloir retirer ${memberName} de l'équipe ?`)
+    ) {
+      return;
+    }
+
+    setDeletingMemberId(memberId);
+    try {
+      await AdminManagementService.removeTeamMember(teamId, memberId);
+
+      // Mettre à jour la liste locale
+      setMembers((prev) => prev.filter((member) => member.id !== memberId));
+
+      // Notifier le parent qu'un membre a été supprimé
+      onMemberRemoved?.();
+
+      toast({
+        title: "Succès",
+        description: `${memberName} a été retiré de l'équipe`,
+      });
+    } catch (err: any) {
+      toast({
+        title: "Erreur",
+        description: err.message || "Erreur lors de la suppression du membre",
+        variant: "destructive",
+      });
+    } finally {
+      setDeletingMemberId(null);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <Card className="w-full max-w-2xl max-h-[80vh] overflow-hidden">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+          <div className="flex items-center gap-3">
+            <Users className="w-6 h-6 text-blue-400" />
+            <div>
+              <CardTitle className="text-xl">Membres de l'équipe</CardTitle>
+              <p className="text-sm text-slate-500 font-normal">{teamName}</p>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            className="h-8 w-8 p-0"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          {isLoading ? (
+            <div className="space-y-3">
+              {[...Array(5)].map((_, i) => (
+                <div key={i} className="flex items-center gap-3">
+                  <Skeleton className="w-8 h-8 rounded-full" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-24" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : error ? (
+            <div className="text-center py-8">
+              <div className="text-red-400 mb-2">
+                <Users className="w-12 h-12 mx-auto" />
+              </div>
+              <p className="text-red-400 font-medium">{error}</p>
+              <Button variant="outline" onClick={fetchMembers} className="mt-3">
+                Réessayer
+              </Button>
+            </div>
+          ) : members.length === 0 ? (
+            <div className="text-center py-8">
+              <div className="text-slate-400 mb-2">
+                <Users className="w-12 h-12 mx-auto" />
+              </div>
+              <p className="text-slate-400 font-medium">
+                Aucun membre dans cette équipe
+              </p>
+              <p className="text-slate-500 text-sm mt-1">
+                Les membres apparaîtront ici une fois qu'ils seront assignés
+              </p>
+            </div>
+          ) : (
+            <>
+              <div className="flex items-center justify-between mb-4">
+                <Badge variant="outline" className="text-sm">
+                  {members.length} membre{members.length > 1 ? "s" : ""}
+                </Badge>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={fetchMembers}
+                  className="text-xs"
+                >
+                  Actualiser
+                </Button>
+              </div>
+
+              <div className="space-y-3 max-h-96 overflow-y-auto">
+                {members.map((member) => (
+                  <div
+                    key={member.id}
+                    className="flex items-center gap-3 p-3 rounded-lg border border-slate-200/10 bg-slate-50/5 hover:bg-slate-50/10 transition-colors"
+                  >
+                    <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center">
+                      <User className="w-4 h-4 text-blue-400" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-white truncate">
+                        {member.fullName}
+                      </p>
+                      <div className="flex items-center gap-2 text-xs text-slate-400">
+                        <Calendar className="w-3 h-3" />
+                        <span>
+                          Membre depuis{" "}
+                          {new Date(member.joinedAt).toLocaleDateString(
+                            "fr-FR",
+                            {
+                              year: "numeric",
+                              month: "long",
+                            }
+                          )}
+                        </span>
+                      </div>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() =>
+                        handleRemoveMember(member.id, member.fullName)
+                      }
+                      disabled={deletingMemberId === member.id}
+                      className="text-red-400 hover:text-red-300 hover:bg-red-500/20 h-6 w-6 p-0 shrink-0"
+                      title="Retirer de l'équipe"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -2,7 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Edit, Trash2 } from "lucide-react";
+import { Edit, Trash2, Users } from "lucide-react";
 
 interface TreeItemRowProps {
   icon?: React.ReactNode;
@@ -15,9 +15,11 @@ interface TreeItemRowProps {
   }>;
   onEdit?: () => void;
   onDelete?: () => void;
+  onViewMembers?: () => void;
   canDelete?: boolean;
   showSeparator?: boolean;
   additionalInfo?: React.ReactNode;
+  hasMembers?: boolean;
 }
 
 export function TreeItemRow({
@@ -27,9 +29,11 @@ export function TreeItemRow({
   badges = [],
   onEdit,
   onDelete,
+  onViewMembers,
   canDelete = true,
   showSeparator = false,
   additionalInfo,
+  hasMembers = false,
 }: TreeItemRowProps) {
   return (
     <div>
@@ -67,6 +71,17 @@ export function TreeItemRow({
 
         {/* Actions */}
         <div className="flex items-center gap-1 shrink-0">
+          {onViewMembers && hasMembers && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onViewMembers}
+              className="text-green-400 hover:text-green-300 hover:bg-green-500/20 h-6 w-6 p-0"
+              title="Voir les membres"
+            >
+              <Users className="w-3 h-3" />
+            </Button>
+          )}
           {onEdit && (
             <Button
               variant="ghost"

services/admin-management-service.ts

@@ -15,6 +15,14 @@ export interface Team {
   memberCount: number;
 }
 
+export interface TeamMember {
+  id: string;
+  firstName: string;
+  lastName: string;
+  fullName: string;
+  joinedAt: string;
+}
+
 export class AdminManagementService {
   private static baseUrl = "/api/admin";
 
@@ -143,4 +151,31 @@ export class AdminManagementService {
       throw new Error(error.error || "Failed to delete direction");
     }
   }
+
+  // Team Members
+  static async getTeamMembers(teamId: string): Promise<TeamMember[]> {
+    const response = await fetch(`${this.baseUrl}/teams/${teamId}/members`);
+    if (!response.ok) {
+      throw new Error("Failed to fetch team members");
+    }
+    return response.json();
+  }
+
+  static async removeTeamMember(
+    teamId: string,
+    memberId: string
+  ): Promise<void> {
+    const response = await fetch(`${this.baseUrl}/teams/${teamId}/members`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ memberId }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || "Failed to remove team member");
+    }
+  }
 }