feat: CRUD admin for skills and teams

2025-08-22 08:56:02 +02:00
parent 514b33870b
commit e314a96fae
43 changed files with 2516 additions and 179 deletions
--- a/components/admin/team-detail/team-detail-client-wrapper.tsx
+++ b/components/admin/team-detail/team-detail-client-wrapper.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { TeamStats, TeamMember } from "@/services/admin-service";
+import { TeamDetailHeader } from "./team-detail-header";
+import { TeamMetricsCards } from "./team-metrics-cards";
+import { TeamDetailTabs } from "./team-detail-tabs";
+import { TeamMemberModal } from "@/components/admin";
+
+interface TeamDetailClientWrapperProps {
+  team: TeamStats;
+  teamId: string;
+}
+
+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;
+}
+
+export function TeamDetailClientWrapper({
+  team,
+  teamId,
+}: TeamDetailClientWrapperProps) {
+  const [skillAnalysis, setSkillAnalysis] = useState<SkillAnalysis[]>([]);
+  const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
+  const [isMemberModalOpen, setIsMemberModalOpen] = useState(false);
+
+  useEffect(() => {
+    // Analyser les compétences avec les vraies données
+    const skillMap = new Map<string, any>();
+
+    team.members.forEach((member) => {
+      member.skills.forEach((skill) => {
+        if (!skillMap.has(skill.skillName)) {
+          skillMap.set(skill.skillName, {
+            skillName: skill.skillName,
+            category: skill.category,
+            experts: [],
+            learners: [],
+            averageLevel: 0,
+            totalEvaluations: 0,
+          });
+        }
+
+        const skillData = skillMap.get(skill.skillName);
+        skillData.totalEvaluations++;
+        skillData.averageLevel += skill.level;
+
+        if (skill.level >= 2) {
+          skillData.experts.push({
+            name: `${member.firstName} ${member.lastName}`,
+            level: skill.level,
+            canMentor: skill.canMentor,
+          });
+        }
+
+        if (skill.wantsToLearn) {
+          skillData.learners.push({
+            name: `${member.firstName} ${member.lastName}`,
+            currentLevel: skill.level,
+          });
+        }
+      });
+    });
+
+    const skills = Array.from(skillMap.values())
+      .map(
+        (skill): SkillAnalysis => ({
+          ...skill,
+          averageLevel: skill.averageLevel / skill.totalEvaluations,
+          expertCount: skill.experts.length,
+          learnerCount: skill.learners.length,
+          proficiencyRate:
+            (skill.experts.length / skill.totalEvaluations) * 100,
+        })
+      )
+      .sort((a, b) => b.averageLevel - a.averageLevel);
+
+    setSkillAnalysis(skills);
+  }, [team]);
+
+  const handleExportReport = () => {
+    const reportData = {
+      team: team.teamName,
+      direction: team.direction,
+      exportDate: new Date().toLocaleDateString(),
+      detailedStats: {
+        totalMembers: team.totalMembers,
+        averageSkillLevel: team.averageSkillLevel,
+        skillCoverage: team.skillCoverage,
+      },
+      members: team.members.map((member) => ({
+        name: `${member.firstName} ${member.lastName}`,
+        joinDate: member.joinDate,
+        skillCount: member.skills.length,
+        skills: member.skills,
+      })),
+      skillAnalysis,
+    };
+
+    const dataStr = JSON.stringify(reportData, null, 2);
+    const dataUri =
+      "data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
+
+    const exportFileDefaultName = `rapport-detaille-${team.teamName.toLowerCase()}-${
+      new Date().toISOString().split("T")[0]
+    }.json`;
+
+    const linkElement = document.createElement("a");
+    linkElement.setAttribute("href", dataUri);
+    linkElement.setAttribute("download", exportFileDefaultName);
+    linkElement.click();
+  };
+
+  const teamInsights: TeamInsights = {
+    averageTeamLevel:
+      team.members.reduce((sum, member) => {
+        const memberAvg =
+          member.skills.reduce((s, skill) => s + skill.level, 0) /
+          member.skills.length;
+        return sum + memberAvg;
+      }, 0) / team.members.length,
+    totalExperts: team.members.reduce(
+      (sum, member) =>
+        sum + member.skills.filter((s) => s.level >= 2 && s.canMentor).length,
+      0
+    ),
+    totalLearners: team.members.reduce(
+      (sum, member) => sum + member.skills.filter((s) => s.wantsToLearn).length,
+      0
+    ),
+    skillGaps: skillAnalysis.filter((s) => s.averageLevel < 1.5).length,
+    strongSkills: skillAnalysis.filter((s) => s.averageLevel >= 2.5).length,
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+      {/* Background Effects */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
+      <div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
+      <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />
+
+      <div className="relative z-10 container mx-auto px-6 py-8 max-w-7xl space-y-8">
+        {/* Header */}
+        <TeamDetailHeader
+          teamName={team.teamName}
+          direction={team.direction}
+          onExport={handleExportReport}
+        />
+
+        {/* Métriques principales */}
+        <TeamMetricsCards
+          totalMembers={team.totalMembers}
+          teamInsights={teamInsights}
+          skillCoverage={team.skillCoverage}
+        />
+
+        {/* Contenu principal avec onglets */}
+        <TeamDetailTabs
+          team={team}
+          skillAnalysis={skillAnalysis}
+          teamInsights={teamInsights}
+          onMemberClick={(member) => {
+            setSelectedMember(member);
+            setIsMemberModalOpen(true);
+          }}
+        />
+
+        {/* Modal détail membre */}
+        <TeamMemberModal
+          isOpen={isMemberModalOpen}
+          onClose={() => setIsMemberModalOpen(false)}
+          member={selectedMember}
+        />
+      </div>
+    </div>
+  );
+}