feat: update TeamDetailPage and modularize components

- Changed params in TeamDetailPage to be a Promise, ensuring proper async handling.
- Updated data fetching logic to use awaited teamId for better clarity.
- Modularized TeamDetailClientWrapper by extracting TeamDetailHeader, TeamMetricsCards, TeamDetailTabs, and TeamMemberModal for improved organization and readability.
- Removed unused imports and streamlined the component structure, enhancing maintainability.

components/admin/team-detail-tabs.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { TeamOverviewTab } from "./team-overview-tab";
+import { TeamSkillsTab } from "./team-skills-tab";
+import { TeamMembersTab } from "./team-members-tab";
+import { TeamInsightsTab } from "./team-insights-tab";
+import { TeamStats, TeamMember } from "@/services/admin-service";
+
+interface SkillAnalysis {
+  skillName: string;
+  category: string;
+  experts: Array<{
+    name: string;
+    level: number;
+    canMentor: boolean;
+  }>;
+  learners: Array<{
+    name: string;
+    currentLevel: number;
+  }>;
+  averageLevel: number;
+  totalEvaluations: number;
+  expertCount: number;
+  learnerCount: number;
+  proficiencyRate: number;
+}
+
+interface TeamInsights {
+  averageTeamLevel: number;
+  totalExperts: number;
+  totalLearners: number;
+  skillGaps: number;
+  strongSkills: number;
+}
+
+interface TeamDetailTabsProps {
+  team: TeamStats;
+  skillAnalysis: SkillAnalysis[];
+  teamInsights: TeamInsights;
+  onMemberClick: (member: TeamMember) => void;
+}
+
+export function TeamDetailTabs({
+  team,
+  skillAnalysis,
+  teamInsights,
+  onMemberClick,
+}: TeamDetailTabsProps) {
+  return (
+    <Tabs defaultValue="overview" 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-4 bg-transparent border-0">
+          <TabsTrigger
+            value="overview"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
+          >
+            Vue d'ensemble
+          </TabsTrigger>
+          <TabsTrigger
+            value="skills"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
+          >
+            Compétences
+          </TabsTrigger>
+          <TabsTrigger
+            value="members"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
+          >
+            Membres
+          </TabsTrigger>
+          <TabsTrigger
+            value="insights"
+            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
+          >
+            Insights
+          </TabsTrigger>
+        </TabsList>
+      </div>
+
+      <TabsContent value="overview" className="space-y-6">
+        <TeamOverviewTab
+          team={team}
+          teamInsights={teamInsights}
+          skillAnalysis={skillAnalysis}
+        />
+      </TabsContent>
+
+      <TabsContent value="skills" className="space-y-6">
+        <TeamSkillsTab skillAnalysis={skillAnalysis} />
+      </TabsContent>
+
+      <TabsContent value="members" className="space-y-6">
+        <TeamMembersTab members={team.members} onMemberClick={onMemberClick} />
+      </TabsContent>
+
+      <TabsContent value="insights" className="space-y-6">
+        <TeamInsightsTab
+          skillAnalysis={skillAnalysis}
+          teamInsights={teamInsights}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}