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-members-tab.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { User, Award, BookOpen } from "lucide-react";
+import { TeamMember } from "@/services/admin-service";
+
+interface TeamMembersTabProps {
+  members: TeamMember[];
+  onMemberClick: (member: TeamMember) => void;
+}
+
+function getSkillLevelLabel(level: number): string {
+  if (level < 0.5) return "Débutant";
+  if (level < 1.5) return "Intermé.";
+  if (level < 2.5) return "Avancé";
+  return "Expert";
+}
+
+function getSkillLevelColor(level: number): string {
+  if (level < 0.5) return "bg-red-500";
+  if (level < 1.5) return "bg-orange-500";
+  if (level < 2.5) return "bg-blue-500";
+  return "bg-green-500";
+}
+
+function getSkillLevelBadgeClasses(level: number): string {
+  if (level < 0.5) return "bg-red-500/20 border-red-500/30 text-red-300";
+  if (level < 1.5)
+    return "bg-orange-500/20 border-orange-500/30 text-orange-300";
+  if (level < 2.5) return "bg-blue-500/20 border-blue-500/30 text-blue-300";
+  return "bg-green-500/20 border-green-500/30 text-green-300";
+}
+
+export function TeamMembersTab({
+  members,
+  onMemberClick,
+}: TeamMembersTabProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {members.map((member) => {
+        const memberAvg =
+          member.skills.reduce((sum, skill) => sum + skill.level, 0) /
+          member.skills.length;
+        const expertSkills = member.skills.filter(
+          (s) => s.level >= 2 && s.canMentor
+        ).length;
+        const learningGoals = member.skills.filter(
+          (s) => s.wantsToLearn
+        ).length;
+
+        return (
+          <div
+            key={member.uuid}
+            className="bg-white/5 border border-white/10 rounded-xl p-4 hover:bg-white/10 transition-colors cursor-pointer group"
+            onClick={() => onMemberClick(member)}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
+                  <User className="h-4 w-4 text-blue-400" />
+                </div>
+                <div>
+                  <div className="font-medium text-white group-hover:text-blue-300 transition-colors">
+                    {member.firstName} {member.lastName}
+                  </div>
+                  <div className="text-sm text-slate-400">
+                    {new Date(member.joinDate).toLocaleDateString()}
+                  </div>
+                </div>
+              </div>
+              <div
+                className={`px-2 py-1 border rounded-lg ${getSkillLevelBadgeClasses(
+                  memberAvg
+                )}`}
+              >
+                <span className="text-xs font-medium">
+                  {getSkillLevelLabel(memberAvg)}
+                </span>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-slate-300">Niveau moyen:</span>
+                <span className="text-white font-semibold">
+                  {memberAvg.toFixed(1)}/3
+                </span>
+              </div>
+
+              <div className="w-full bg-white/10 rounded-full h-2">
+                <div
+                  className={`h-2 rounded-full transition-all ${getSkillLevelColor(
+                    memberAvg
+                  )
+                    .replace("bg-", "bg-gradient-to-r from-")
+                    .replace("-500", "-400")}`}
+                  style={{ width: `${(memberAvg / 3) * 100}%` }}
+                />
+              </div>
+
+              <div className="grid grid-cols-3 gap-2 text-xs">
+                <div className="text-center">
+                  <div className="text-white font-semibold">
+                    {member.skills.length}
+                  </div>
+                  <div className="text-slate-400">Compétences</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-green-300 font-semibold">
+                    {expertSkills}
+                  </div>
+                  <div className="text-slate-400">Expertises</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-blue-300 font-semibold">
+                    {learningGoals}
+                  </div>
+                  <div className="text-slate-400">Objectifs</div>
+                </div>
+              </div>
+
+              {expertSkills > 0 && (
+                <div className="flex items-center gap-2 text-xs">
+                  <Award className="h-3 w-3 text-green-400" />
+                  <span className="text-green-300">
+                    Peut mentorer {expertSkills} compétence
+                    {expertSkills > 1 ? "s" : ""}
+                  </span>
+                </div>
+              )}
+
+              {learningGoals > 0 && (
+                <div className="flex items-center gap-2 text-xs">
+                  <BookOpen className="h-3 w-3 text-blue-400" />
+                  <span className="text-blue-300">
+                    Souhaite apprendre {learningGoals} compétence
+                    {learningGoals > 1 ? "s" : ""}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}