refactor: modularize AdminClientWrapper by extracting components

- Removed unused imports and components from AdminClientWrapper.
- Introduced AdminHeader, AdminOverviewCards, AdminFilters, and AdminContentTabs for better code organization and readability.
- Streamlined the layout and functionality of the admin dashboard, enhancing maintainability.

components/admin/admin-client-wrapper.tsx

@@ -1,17 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { Users, Target, Building2, UserCheck, Filter } from "lucide-react";
 import { Team, SkillCategory } from "@/lib/types";
-import {
-  TeamStatsCard,
-  DirectionOverview,
-  MultiSelectFilter,
-} from "@/components/admin";
-import { TeamDetailModal } from "@/components/admin/team-detail-modal";
 import { TeamStats, DirectionStats } from "@/services/admin-service";
+import { TeamDetailModal } from "@/components/admin/team-detail-modal";
+import { AdminHeader } from "./admin-header";
+import { AdminOverviewCards } from "./admin-overview-cards";
+import { AdminFilters } from "./admin-filters";
+import { AdminContentTabs } from "./admin-content-tabs";
 
 interface AdminClientWrapperProps {
   teams: Team[];
@@ -85,21 +81,6 @@ export function AdminClientWrapper({
     return filtered;
   };
 
-  // Options pour les filtres
-  const directionOptions = Array.from(
-    new Set(teams.map((team) => team.direction))
-  ).map((direction) => ({
-    id: direction,
-    label: direction,
-    count: teams.filter((team) => team.direction === direction).length,
-  }));
-
-  const teamOptions = teams.map((team) => ({
-    id: team.id,
-    label: `${team.name} (${team.direction})`,
-    count: teamStats.find((stat) => stat.teamId === team.id)?.totalMembers || 0,
-  }));
-
   // Fonctions pour les actions des équipes
   const handleViewTeamDetails = (team: TeamStats) => {
     setSelectedTeamForModal(team);
@@ -142,293 +123,38 @@ export function AdminClientWrapper({
 
       <div className="relative z-10 container mx-auto px-6 py-8 max-w-7xl space-y-8">
         {/* Header */}
-        <div className="text-center space-y-4 mb-12">
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
-            <Building2 className="h-4 w-4 text-blue-400" />
-            <span className="text-sm font-medium text-slate-200">
-              Administration
-            </span>
-          </div>
-
-          <h1 className="text-4xl font-bold text-white">
-            Dashboard Managérial
-          </h1>
-
-          <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
-            Vue d'ensemble des compétences par équipe et direction pour pilotage
-            stratégique
-          </p>
-        </div>
+        <AdminHeader />
 
         {/* Overview Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
-            <div className="flex items-center justify-between mb-4">
-              <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
-                <Users className="h-5 w-5 text-blue-400" />
-              </div>
-              <div className="text-xs text-slate-400 font-medium">
-                {selectedDirections.length > 0 || selectedTeams.length > 0
-                  ? "FILTRÉES"
-                  : "TOTAL"}
-              </div>
-            </div>
-            <div className="space-y-1">
-              <p className="text-2xl font-bold text-white">
-                {selectedDirections.length > 0 || selectedTeams.length > 0
-                  ? getFilteredTeamStats().length
-                  : teams.length}
-              </p>
-              <p className="text-sm text-slate-400">
-                {selectedDirections.length > 0 || selectedTeams.length > 0
-                  ? "Équipes filtrées"
-                  : "Équipes"}
-              </p>
-              {(selectedDirections.length > 0 || selectedTeams.length > 0) && (
-                <p className="text-xs text-slate-500">
-                  sur {teams.length} au total
-                </p>
-              )}
-            </div>
-          </div>
-
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
-            <div className="flex items-center justify-between mb-4">
-              <div className="p-2 bg-green-500/20 border border-green-500/30 rounded-xl">
-                <UserCheck className="h-5 w-5 text-green-400" />
-              </div>
-              <div className="text-xs text-slate-400 font-medium">
-                {selectedDirections.length > 0 || selectedTeams.length > 0
-                  ? "FILTRÉS"
-                  : "TOTAL"}
-              </div>
-            </div>
-            <div className="space-y-1">
-              <p className="text-2xl font-bold text-white">
-                {selectedDirections.length > 0 || selectedTeams.length > 0
-                  ? getFilteredTeamStats().reduce(
-                      (sum, t) => sum + t.totalMembers,
-                      0
-                    )
-                  : teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
-              </p>
-              <p className="text-sm text-slate-400">
-                {selectedDirections.length > 0 || selectedTeams.length > 0
-                  ? "Membres filtrés"
-                  : "Membres"}
-              </p>
-              {(selectedDirections.length > 0 || selectedTeams.length > 0) && (
-                <p className="text-xs text-slate-500">
-                  sur {teamStats.reduce((sum, t) => sum + t.totalMembers, 0)} au
-                  total
-                </p>
-              )}
-            </div>
-          </div>
-
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
-            <div className="flex items-center justify-between mb-4">
-              <div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
-                <Building2 className="h-5 w-5 text-purple-400" />
-              </div>
-              <div className="text-xs text-slate-400 font-medium">
-                {selectedDirections.length > 0 || selectedTeams.length > 0
-                  ? "FILTRÉES"
-                  : "TOTAL"}
-              </div>
-            </div>
-            <div className="space-y-1">
-              <p className="text-2xl font-bold text-white">
-                {selectedDirections.length > 0 || selectedTeams.length > 0
-                  ? getFilteredDirectionStats().length
-                  : directionStats.length}
-              </p>
-              <p className="text-sm text-slate-400">
-                {selectedDirections.length > 0 || selectedTeams.length > 0
-                  ? "Directions filtrées"
-                  : "Directions"}
-              </p>
-              {(selectedDirections.length > 0 || selectedTeams.length > 0) && (
-                <p className="text-xs text-slate-500">
-                  sur {directionStats.length} au total
-                </p>
-              )}
-            </div>
-          </div>
-
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
-            <div className="flex items-center justify-between mb-4">
-              <div className="p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl">
-                <Target className="h-5 w-5 text-orange-400" />
-              </div>
-              <div className="text-xs text-slate-400 font-medium">
-                RÉFÉRENTIEL
-              </div>
-            </div>
-            <div className="space-y-1">
-              <p className="text-2xl font-bold text-white">
-                {skillCategories.reduce(
-                  (sum, cat) => sum + (cat.skills?.length || 0),
-                  0
-                )}
-              </p>
-              <p className="text-sm text-slate-400">Compétences suivies</p>
-              <p className="text-xs text-slate-500">
-                {skillCategories.length} catégories
-              </p>
-            </div>
-          </div>
-        </div>
+        <AdminOverviewCards
+          teams={teams}
+          skillCategories={skillCategories}
+          teamStats={teamStats}
+          directionStats={directionStats}
+          selectedDirections={selectedDirections}
+          selectedTeams={selectedTeams}
+          getFilteredTeamStats={getFilteredTeamStats}
+          getFilteredDirectionStats={getFilteredDirectionStats}
+        />
 
         {/* Filtres */}
-        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
-          <div className="flex items-center gap-2 mb-6">
-            <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
-              <Filter className="h-4 w-4 text-blue-400" />
-            </div>
-            <h3 className="text-lg font-semibold text-white">
-              Filtres avancés
-            </h3>
-          </div>
-
-          <div className="flex flex-col lg:flex-row gap-4">
-            <div className="flex-1">
-              <MultiSelectFilter
-                title="Directions"
-                options={directionOptions}
-                selectedValues={selectedDirections}
-                onChange={setSelectedDirections}
-                placeholder="Toutes les directions"
-                icon={<Building2 className="h-4 w-4" />}
+        <AdminFilters
+          teams={teams}
+          teamStats={teamStats}
+          selectedDirections={selectedDirections}
+          selectedTeams={selectedTeams}
+          onDirectionsChange={setSelectedDirections}
+          onTeamsChange={setSelectedTeams}
+          getFilteredTeamStats={getFilteredTeamStats}
         />
-            </div>
-            <div className="flex-1">
-              <MultiSelectFilter
-                title="Équipes"
-                options={teamOptions}
-                selectedValues={selectedTeams}
-                onChange={setSelectedTeams}
-                placeholder="Toutes les équipes"
-                icon={<Users className="h-4 w-4" />}
-              />
-            </div>
-
-            {/* Résumé des filtres actifs */}
-            {(selectedDirections.length > 0 || selectedTeams.length > 0) && (
-              <div className="flex flex-col lg:flex-row items-center gap-3">
-                <div className="bg-blue-500/20 border border-blue-500/30 rounded-xl px-3 py-2">
-                  <div className="flex items-center gap-2">
-                    <Target className="h-3 w-3 text-blue-400" />
-                    <span className="text-sm text-blue-300 font-medium">
-                      {getFilteredTeamStats().reduce(
-                        (sum, t) => sum + t.totalMembers,
-                        0
-                      )}{" "}
-                      membres
-                    </span>
-                  </div>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => {
-                    setSelectedDirections([]);
-                    setSelectedTeams([]);
-                  }}
-                  className="text-xs text-slate-400 hover:text-white hover:bg-white/10"
-                >
-                  Réinitialiser
-                </Button>
-              </div>
-            )}
-          </div>
-        </div>
 
         {/* Main Content Tabs */}
-        <Tabs defaultValue="directions" className="w-full">
-          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1 mb-6 w-fit mx-auto">
-            <TabsList className="grid w-full grid-cols-2 bg-transparent border-0">
-              <TabsTrigger
-                value="directions"
-                className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
-              >
-                Vue par Direction
-              </TabsTrigger>
-              <TabsTrigger
-                value="teams"
-                className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
-              >
-                Vue par Équipe
-              </TabsTrigger>
-            </TabsList>
-          </div>
-
-          <TabsContent value="directions" className="space-y-6">
-            <div className="grid gap-6">
-              {getFilteredDirectionStats().length > 0 ? (
-                getFilteredDirectionStats().map((direction) => (
-                  <DirectionOverview
-                    key={direction.direction}
-                    direction={direction.direction}
-                    teams={direction.teams}
-                    totalMembers={direction.totalMembers}
-                    averageSkillLevel={direction.averageSkillLevel}
-                    topCategories={direction.topCategories}
+        <AdminContentTabs
+          getFilteredDirectionStats={getFilteredDirectionStats}
+          getFilteredTeamStats={getFilteredTeamStats}
           onViewTeamDetails={handleViewTeamDetails}
           onExportTeamReport={handleExportTeamReport}
         />
-                ))
-              ) : (
-                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
-                  <div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
-                    <Building2 className="h-6 w-6 text-slate-400" />
-                  </div>
-                  <h3 className="text-lg font-medium text-white mb-2">
-                    Aucune direction trouvée
-                  </h3>
-                  <p className="text-slate-400 text-sm">
-                    Aucune direction ne correspond aux filtres sélectionnés.
-                  </p>
-                </div>
-              )}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="teams" className="space-y-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {getFilteredTeamStats().length > 0 ? (
-                getFilteredTeamStats().map((team) => (
-                  <TeamStatsCard
-                    key={team.teamId}
-                    teamId={team.teamId}
-                    teamName={team.teamName}
-                    direction={team.direction}
-                    totalMembers={team.totalMembers}
-                    averageSkillLevel={team.averageSkillLevel}
-                    topSkills={team.topSkills}
-                    skillCoverage={team.skillCoverage}
-                    onViewDetails={() => handleViewTeamDetails(team)}
-                    onViewReport={() => handleExportTeamReport(team)}
-                  />
-                ))
-              ) : (
-                <div className="col-span-full">
-                  <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
-                    <div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
-                      <Users className="h-6 w-6 text-slate-400" />
-                    </div>
-                    <h3 className="text-lg font-medium text-white mb-2">
-                      Aucune équipe trouvée
-                    </h3>
-                    <p className="text-slate-400 text-sm">
-                      Aucune équipe ne correspond aux filtres sélectionnés.
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          </TabsContent>
-        </Tabs>
 
         {/* Modale de détails d'équipe */}
         <TeamDetailModal

components/admin/admin-content-tabs.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Users, Building2 } from "lucide-react";
+import { TeamStats, DirectionStats } from "@/services/admin-service";
+import { DirectionOverview, TeamStatsCard } from "@/components/admin";
+
+interface AdminContentTabsProps {
+  getFilteredDirectionStats: () => DirectionStats[];
+  getFilteredTeamStats: () => TeamStats[];
+  onViewTeamDetails: (team: TeamStats) => void;
+  onExportTeamReport: (team: TeamStats) => void;
+}
+
+export function AdminContentTabs({
+  getFilteredDirectionStats,
+  getFilteredTeamStats,
+  onViewTeamDetails,
+  onExportTeamReport,
+}: AdminContentTabsProps) {
+  return (
+    <Tabs defaultValue="directions" className="w-full">
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1 mb-6 w-fit mx-auto">
+        <TabsList className="grid w-full grid-cols-2 bg-transparent border-0">
+          <TabsTrigger
+            value="directions"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
+          >
+            Vue par Direction
+          </TabsTrigger>
+          <TabsTrigger
+            value="teams"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
+          >
+            Vue par Équipe
+          </TabsTrigger>
+        </TabsList>
+      </div>
+
+      <TabsContent value="directions" className="space-y-6">
+        <div className="grid gap-6">
+          {getFilteredDirectionStats().length > 0 ? (
+            getFilteredDirectionStats().map((direction) => (
+              <DirectionOverview
+                key={direction.direction}
+                direction={direction.direction}
+                teams={direction.teams}
+                totalMembers={direction.totalMembers}
+                averageSkillLevel={direction.averageSkillLevel}
+                topCategories={direction.topCategories}
+                onViewTeamDetails={onViewTeamDetails}
+                onExportTeamReport={onExportTeamReport}
+              />
+            ))
+          ) : (
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
+              <div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
+                <Building2 className="h-6 w-6 text-slate-400" />
+              </div>
+              <h3 className="text-lg font-medium text-white mb-2">
+                Aucune direction trouvée
+              </h3>
+              <p className="text-slate-400 text-sm">
+                Aucune direction ne correspond aux filtres sélectionnés.
+              </p>
+            </div>
+          )}
+        </div>
+      </TabsContent>
+
+      <TabsContent value="teams" className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {getFilteredTeamStats().length > 0 ? (
+            getFilteredTeamStats().map((team) => (
+              <TeamStatsCard
+                key={team.teamId}
+                teamId={team.teamId}
+                teamName={team.teamName}
+                direction={team.direction}
+                totalMembers={team.totalMembers}
+                averageSkillLevel={team.averageSkillLevel}
+                topSkills={team.topSkills}
+                skillCoverage={team.skillCoverage}
+                onViewDetails={() => onViewTeamDetails(team)}
+                onViewReport={() => onExportTeamReport(team)}
+              />
+            ))
+          ) : (
+            <div className="col-span-full">
+              <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
+                <div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
+                  <Users className="h-6 w-6 text-slate-400" />
+                </div>
+                <h3 className="text-lg font-medium text-white mb-2">
+                  Aucune équipe trouvée
+                </h3>
+                <p className="text-slate-400 text-sm">
+                  Aucune équipe ne correspond aux filtres sélectionnés.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </TabsContent>
+    </Tabs>
+  );
+}

components/admin/admin-filters.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Users, Target, Building2, Filter } from "lucide-react";
+import { Team } from "@/lib/types";
+import { TeamStats } from "@/services/admin-service";
+import { MultiSelectFilter } from "./multi-select-filter";
+
+interface AdminFiltersProps {
+  teams: Team[];
+  teamStats: TeamStats[];
+  selectedDirections: string[];
+  selectedTeams: string[];
+  onDirectionsChange: (directions: string[]) => void;
+  onTeamsChange: (teams: string[]) => void;
+  getFilteredTeamStats: () => TeamStats[];
+}
+
+export function AdminFilters({
+  teams,
+  teamStats,
+  selectedDirections,
+  selectedTeams,
+  onDirectionsChange,
+  onTeamsChange,
+  getFilteredTeamStats,
+}: AdminFiltersProps) {
+  const hasFilters = selectedDirections.length > 0 || selectedTeams.length > 0;
+
+  const directionOptions = Array.from(
+    new Set(teams.map((team) => team.direction))
+  ).map((direction) => ({
+    id: direction,
+    label: direction,
+    count: teams.filter((team) => team.direction === direction).length,
+  }));
+
+  const teamOptions = teams.map((team) => ({
+    id: team.id,
+    label: `${team.name} (${team.direction})`,
+    count: teamStats.find((stat) => stat.teamId === team.id)?.totalMembers || 0,
+  }));
+
+  const handleReset = () => {
+    onDirectionsChange([]);
+    onTeamsChange([]);
+  };
+
+  return (
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
+          <Filter className="h-4 w-4 text-blue-400" />
+        </div>
+        <h3 className="text-lg font-semibold text-white">Filtres avancés</h3>
+      </div>
+
+      <div className="flex flex-col lg:flex-row gap-4">
+        <div className="flex-1">
+          <MultiSelectFilter
+            title="Directions"
+            options={directionOptions}
+            selectedValues={selectedDirections}
+            onChange={onDirectionsChange}
+            placeholder="Toutes les directions"
+            icon={<Building2 className="h-4 w-4" />}
+          />
+        </div>
+        <div className="flex-1">
+          <MultiSelectFilter
+            title="Équipes"
+            options={teamOptions}
+            selectedValues={selectedTeams}
+            onChange={onTeamsChange}
+            placeholder="Toutes les équipes"
+            icon={<Users className="h-4 w-4" />}
+          />
+        </div>
+
+        {/* Résumé des filtres actifs */}
+        {hasFilters && (
+          <div className="flex flex-col lg:flex-row items-center gap-3">
+            <div className="bg-blue-500/20 border border-blue-500/30 rounded-xl px-3 py-2">
+              <div className="flex items-center gap-2">
+                <Target className="h-3 w-3 text-blue-400" />
+                <span className="text-sm text-blue-300 font-medium">
+                  {getFilteredTeamStats().reduce(
+                    (sum, t) => sum + t.totalMembers,
+                    0
+                  )}{" "}
+                  membres
+                </span>
+              </div>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleReset}
+              className="text-xs text-slate-400 hover:text-white hover:bg-white/10"
+            >
+              Réinitialiser
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

components/admin/admin-header.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Building2 } from "lucide-react";
+
+export function AdminHeader() {
+  return (
+    <div className="text-center space-y-4 mb-12">
+      <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
+        <Building2 className="h-4 w-4 text-blue-400" />
+        <span className="text-sm font-medium text-slate-200">
+          Administration
+        </span>
+      </div>
+
+      <h1 className="text-4xl font-bold text-white">Dashboard Managérial</h1>
+
+      <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
+        Vue d'ensemble des compétences par équipe et direction pour pilotage
+        stratégique
+      </p>
+    </div>
+  );
+}

components/admin/admin-overview-cards.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { Users, Target, Building2, UserCheck } from "lucide-react";
+import { Team, SkillCategory } from "@/lib/types";
+import { TeamStats, DirectionStats } from "@/services/admin-service";
+
+interface AdminOverviewCardsProps {
+  teams: Team[];
+  skillCategories: SkillCategory[];
+  teamStats: TeamStats[];
+  directionStats: DirectionStats[];
+  selectedDirections: string[];
+  selectedTeams: string[];
+  getFilteredTeamStats: () => TeamStats[];
+  getFilteredDirectionStats: () => DirectionStats[];
+}
+
+export function AdminOverviewCards({
+  teams,
+  skillCategories,
+  teamStats,
+  directionStats,
+  selectedDirections,
+  selectedTeams,
+  getFilteredTeamStats,
+  getFilteredDirectionStats,
+}: AdminOverviewCardsProps) {
+  const hasFilters = selectedDirections.length > 0 || selectedTeams.length > 0;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+        <div className="flex items-center justify-between mb-4">
+          <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
+            <Users className="h-5 w-5 text-blue-400" />
+          </div>
+          <div className="text-xs text-slate-400 font-medium">
+            {hasFilters ? "FILTRÉES" : "TOTAL"}
+          </div>
+        </div>
+        <div className="space-y-1">
+          <p className="text-2xl font-bold text-white">
+            {hasFilters ? getFilteredTeamStats().length : teams.length}
+          </p>
+          <p className="text-sm text-slate-400">
+            {hasFilters ? "Équipes filtrées" : "Équipes"}
+          </p>
+          {hasFilters && (
+            <p className="text-xs text-slate-500">
+              sur {teams.length} au total
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+        <div className="flex items-center justify-between mb-4">
+          <div className="p-2 bg-green-500/20 border border-green-500/30 rounded-xl">
+            <UserCheck className="h-5 w-5 text-green-400" />
+          </div>
+          <div className="text-xs text-slate-400 font-medium">
+            {hasFilters ? "FILTRÉS" : "TOTAL"}
+          </div>
+        </div>
+        <div className="space-y-1">
+          <p className="text-2xl font-bold text-white">
+            {hasFilters
+              ? getFilteredTeamStats().reduce(
+                  (sum, t) => sum + t.totalMembers,
+                  0
+                )
+              : teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
+          </p>
+          <p className="text-sm text-slate-400">
+            {hasFilters ? "Membres filtrés" : "Membres"}
+          </p>
+          {hasFilters && (
+            <p className="text-xs text-slate-500">
+              sur {teamStats.reduce((sum, t) => sum + t.totalMembers, 0)} au
+              total
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+        <div className="flex items-center justify-between mb-4">
+          <div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
+            <Building2 className="h-5 w-5 text-purple-400" />
+          </div>
+          <div className="text-xs text-slate-400 font-medium">
+            {hasFilters ? "FILTRÉES" : "TOTAL"}
+          </div>
+        </div>
+        <div className="space-y-1">
+          <p className="text-2xl font-bold text-white">
+            {hasFilters
+              ? getFilteredDirectionStats().length
+              : directionStats.length}
+          </p>
+          <p className="text-sm text-slate-400">
+            {hasFilters ? "Directions filtrées" : "Directions"}
+          </p>
+          {hasFilters && (
+            <p className="text-xs text-slate-500">
+              sur {directionStats.length} au total
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
+        <div className="flex items-center justify-between mb-4">
+          <div className="p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl">
+            <Target className="h-5 w-5 text-orange-400" />
+          </div>
+          <div className="text-xs text-slate-400 font-medium">RÉFÉRENTIEL</div>
+        </div>
+        <div className="space-y-1">
+          <p className="text-2xl font-bold text-white">
+            {skillCategories.reduce(
+              (sum, cat) => sum + (cat.skills?.length || 0),
+              0
+            )}
+          </p>
+          <p className="text-sm text-slate-400">Compétences suivies</p>
+          <p className="text-xs text-slate-500">
+            {skillCategories.length} catégories
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

components/admin/index.ts

@@ -3,3 +3,7 @@ export { DirectionOverview } from "./direction-overview";
 export { MultiSelectFilter } from "./multi-select-filter";
 export { AdminClientWrapper } from "./admin-client-wrapper";
 export { TeamDetailClientWrapper } from "./team-detail-client-wrapper";
+export { AdminHeader } from "./admin-header";
+export { AdminOverviewCards } from "./admin-overview-cards";
+export { AdminFilters } from "./admin-filters";
+export { AdminContentTabs } from "./admin-content-tabs";