feat: total members on direction line manage

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

@@ -15,6 +15,11 @@ interface TreeCategoryHeaderProps {
   onDelete?: () => void;
   canDelete?: boolean;
   isDirection?: boolean; // Pour différencier les directions des catégories de skills
+  directionStats?: {
+    direction: string;
+    totalMembers: number;
+    hasMembers: boolean;
+  };
 }
 
 export function TreeCategoryHeader({
@@ -28,6 +33,7 @@ export function TreeCategoryHeader({
   onDelete,
   canDelete = true,
   isDirection = false,
+  directionStats,
 }: TreeCategoryHeaderProps) {
   return (
     <div>
@@ -47,6 +53,15 @@ export function TreeCategoryHeader({
         {icon}
         <h3 className="text-base font-semibold text-white">{category}</h3>
         <div className="flex items-center gap-2 ml-auto">
+          {isDirection && directionStats && directionStats.hasMembers && (
+            <Badge
+              variant="secondary"
+              className="text-xs px-2 py-0.5 bg-blue-500/20 text-blue-300 border-blue-500/30"
+            >
+              {directionStats.totalMembers} membre
+              {directionStats.totalMembers > 1 ? "s" : ""}
+            </Badge>
+          )}
           <Badge variant="outline" className="text-xs px-2 py-0.5">
             {itemCount} {itemLabel}
             {itemCount > 1 ? "s" : ""}

components/admin/teams/teams-list.tsx

@@ -18,6 +18,11 @@ interface TeamsListProps {
   onDeleteDirection: (direction: string) => void;
   onViewMembers: (team: TeamType) => void;
   getTeamStats: (teamId: string) => TeamStats | undefined;
+  getDirectionStats: (direction: string) => {
+    direction: string;
+    totalMembers: number;
+    hasMembers: boolean;
+  };
 }
 
 export function TeamsList({
@@ -29,6 +34,7 @@ export function TeamsList({
   onDeleteDirection,
   onViewMembers,
   getTeamStats,
+  getDirectionStats,
 }: TeamsListProps) {
   return (
     <>
@@ -46,6 +52,7 @@ export function TeamsList({
               onDelete={() => onDeleteDirection(direction)}
               canDelete={true}
               isDirection={true}
+              directionStats={getDirectionStats(direction)}
             />
 
             {/* Liste des teams de la direction */}

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

@@ -45,6 +45,7 @@ export function TeamsManagementPage({
     setTeamFormData,
     resetForm,
     getTeamStats,
+    getDirectionStats,
     handleCreateTeam,
     handleEditTeam,
     handleUpdateTeam,
@@ -145,6 +146,7 @@ export function TeamsManagementPage({
           onDeleteDirection={handleDeleteDirection}
           onViewMembers={handleViewMembers}
           getTeamStats={getTeamStats}
+          getDirectionStats={getDirectionStats}
         />
       </TreeViewPage>
 

hooks/use-teams-management.ts

@@ -224,6 +224,23 @@ export function useTeamsManagement(
   // Extraire les directions uniques pour les formulaires
   const directions = Array.from(new Set(teams.map((team) => team.direction)));
 
+  // Calculer les stats par direction
+  const getDirectionStats = (direction: string) => {
+    const teamsInDirection = teams.filter(
+      (team) => team.direction === direction
+    );
+    const totalMembers = teamsInDirection.reduce((total, team) => {
+      const stats = getTeamStats(team.id);
+      return total + (stats?.totalMembers || 0);
+    }, 0);
+
+    return {
+      direction,
+      totalMembers,
+      hasMembers: totalMembers > 0,
+    };
+  };
+
   return {
     teams,
     teamStats,
@@ -234,6 +251,7 @@ export function useTeamsManagement(
     setTeamFormData,
     resetForm,
     getTeamStats,
+    getDirectionStats,
     handleCreateTeam,
     handleEditTeam,
     handleUpdateTeam,