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