feat: dashboard
This commit is contained in:
Julien Froidefond
950
app/admin/team/[teamId]/page.tsx
Normal file
950
app/admin/team/[teamId]/page.tsx
Normal file
@@ -0,0 +1,950 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Users,
|
||||
TrendingUp,
|
||||
Target,
|
||||
Award,
|
||||
BarChart3,
|
||||
ArrowLeft,
|
||||
Download,
|
||||
UserCheck,
|
||||
GraduationCap,
|
||||
Building2,
|
||||
Star,
|
||||
BookOpen,
|
||||
X,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { TechIcon } from "@/components/icons/tech-icon";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { loadTeams, loadSkillCategories } from "@/lib/data-loader";
|
||||
import { Team, SkillCategory } from "@/lib/types";
|
||||
|
||||
interface TeamMember {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
skills: Array<{
|
||||
skillId: string;
|
||||
skillName: string;
|
||||
category: string;
|
||||
level: number;
|
||||
canMentor: boolean;
|
||||
wantsToLearn: boolean;
|
||||
}>;
|
||||
joinDate: string;
|
||||
}
|
||||
|
||||
interface TeamStats {
|
||||
teamId: string;
|
||||
teamName: string;
|
||||
direction: string;
|
||||
totalMembers: number;
|
||||
averageSkillLevel: number;
|
||||
topSkills: Array<{ skillName: string; averageLevel: number }>;
|
||||
skillCoverage: number;
|
||||
members: TeamMember[];
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
|
||||
// Mock data generation (same as admin page)
|
||||
function generateTeamMembers(
|
||||
teamName: string,
|
||||
memberCount: number,
|
||||
skillCategories: SkillCategory[]
|
||||
) {
|
||||
const firstNames = [
|
||||
"Alice",
|
||||
"Bob",
|
||||
"Claire",
|
||||
"David",
|
||||
"Emma",
|
||||
"Frank",
|
||||
"Grace",
|
||||
"Hugo",
|
||||
"Iris",
|
||||
"Jack",
|
||||
"Kelly",
|
||||
"Liam",
|
||||
"Maya",
|
||||
"Noah",
|
||||
"Olivia",
|
||||
"Paul",
|
||||
"Quinn",
|
||||
"Rose",
|
||||
"Sam",
|
||||
"Tara",
|
||||
];
|
||||
const lastNames = [
|
||||
"Martin",
|
||||
"Bernard",
|
||||
"Dubois",
|
||||
"Thomas",
|
||||
"Robert",
|
||||
"Richard",
|
||||
"Petit",
|
||||
"Durand",
|
||||
"Leroy",
|
||||
"Moreau",
|
||||
"Simon",
|
||||
"Laurent",
|
||||
"Michel",
|
||||
"Garcia",
|
||||
"David",
|
||||
"Bertrand",
|
||||
"Roux",
|
||||
"Vincent",
|
||||
"Fournier",
|
||||
"Morel",
|
||||
];
|
||||
|
||||
const allSkills: Array<{ skillName: string; category: string; id: string }> =
|
||||
[];
|
||||
skillCategories.forEach((category) => {
|
||||
category.skills.forEach((skill) => {
|
||||
allSkills.push({
|
||||
skillName: skill.name,
|
||||
category: category.category,
|
||||
id: skill.id,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return Array.from({ length: memberCount }, (_, index) => {
|
||||
const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
|
||||
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
||||
|
||||
const skillCount = Math.floor(Math.random() * 8) + 8;
|
||||
const memberSkills = allSkills
|
||||
.sort(() => Math.random() - 0.5)
|
||||
.slice(0, skillCount)
|
||||
.map((skill) => ({
|
||||
skillId: skill.id,
|
||||
skillName: skill.skillName,
|
||||
category: skill.category,
|
||||
level: Math.floor(Math.random() * 4),
|
||||
canMentor: Math.random() > 0.7,
|
||||
wantsToLearn: Math.random() > 0.6,
|
||||
}));
|
||||
|
||||
return {
|
||||
id: `${teamName}-member-${index + 1}`,
|
||||
firstName,
|
||||
lastName,
|
||||
skills: memberSkills,
|
||||
joinDate: new Date(
|
||||
Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000 * 3
|
||||
)
|
||||
.toISOString()
|
||||
.split("T")[0],
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function getRandomSkills(skillCategories: SkillCategory[], count: number = 3) {
|
||||
const allSkills: Array<{ skillName: string; category: string }> = [];
|
||||
skillCategories.forEach((category) => {
|
||||
category.skills.forEach((skill) => {
|
||||
allSkills.push({ skillName: skill.name, category: category.category });
|
||||
});
|
||||
});
|
||||
|
||||
const shuffled = allSkills.sort(() => Math.random() - 0.5);
|
||||
const randomSkills = shuffled.slice(0, count).map((skill) => ({
|
||||
skillName: skill.skillName,
|
||||
averageLevel: Math.random() * 3,
|
||||
}));
|
||||
|
||||
return randomSkills.sort((a, b) => b.averageLevel - a.averageLevel);
|
||||
}
|
||||
|
||||
export default function TeamDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const teamId = params.teamId as string;
|
||||
|
||||
const [team, setTeam] = useState<TeamStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [skillAnalysis, setSkillAnalysis] = useState<any[]>([]);
|
||||
const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
|
||||
const [isMemberModalOpen, setIsMemberModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadTeamData() {
|
||||
try {
|
||||
const [teamsData, categoriesData] = await Promise.all([
|
||||
loadTeams(),
|
||||
loadSkillCategories(),
|
||||
]);
|
||||
|
||||
const foundTeam = teamsData.find((t) => t.id === teamId);
|
||||
if (!foundTeam) {
|
||||
router.push("/admin");
|
||||
return;
|
||||
}
|
||||
|
||||
const memberCount = Math.floor(Math.random() * 10) + 3;
|
||||
const members = generateTeamMembers(
|
||||
foundTeam.name,
|
||||
memberCount,
|
||||
categoriesData
|
||||
);
|
||||
|
||||
const teamStats: TeamStats = {
|
||||
teamId: foundTeam.id,
|
||||
teamName: foundTeam.name,
|
||||
direction: foundTeam.direction,
|
||||
totalMembers: memberCount,
|
||||
averageSkillLevel: Math.random() * 3,
|
||||
topSkills: getRandomSkills(categoriesData, 3),
|
||||
skillCoverage: Math.random() * 100,
|
||||
members: members,
|
||||
};
|
||||
|
||||
setTeam(teamStats);
|
||||
|
||||
// Analyser les compétences
|
||||
const skillMap = new Map();
|
||||
members.forEach((member) => {
|
||||
member.skills.forEach((skill) => {
|
||||
if (!skillMap.has(skill.skillName)) {
|
||||
// Trouver l'icône de la compétence dans les données
|
||||
let skillIcon = null;
|
||||
for (const category of categoriesData) {
|
||||
const foundSkill = category.skills.find(
|
||||
(s) => s.name === skill.skillName
|
||||
);
|
||||
if (foundSkill) {
|
||||
skillIcon = foundSkill.icon;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
skillMap.set(skill.skillName, {
|
||||
skillName: skill.skillName,
|
||||
category: skill.category,
|
||||
icon: skillIcon,
|
||||
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) => ({
|
||||
...skill,
|
||||
averageLevel: skill.averageLevel / skill.totalEvaluations,
|
||||
}))
|
||||
.sort((a, b) => b.averageLevel - a.averageLevel);
|
||||
|
||||
setSkillAnalysis(skills);
|
||||
} catch (error) {
|
||||
console.error("Error loading team data:", error);
|
||||
router.push("/admin");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
loadTeamData();
|
||||
}, [teamId, router]);
|
||||
|
||||
const handleMemberClick = (member: TeamMember) => {
|
||||
setSelectedMember(member);
|
||||
setIsMemberModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseMemberModal = () => {
|
||||
setIsMemberModalOpen(false);
|
||||
setSelectedMember(null);
|
||||
};
|
||||
|
||||
const handleExportReport = () => {
|
||||
if (!team) return;
|
||||
|
||||
const reportData = {
|
||||
team: team.teamName,
|
||||
direction: team.direction,
|
||||
exportDate: new Date().toLocaleDateString(),
|
||||
summary: {
|
||||
totalMembers: team.totalMembers,
|
||||
averageSkillLevel: team.averageSkillLevel,
|
||||
skillCoverage: team.skillCoverage,
|
||||
},
|
||||
topSkills: team.topSkills,
|
||||
skillAnalysis: skillAnalysis.slice(0, 15),
|
||||
members: team.members.map((member) => ({
|
||||
name: `${member.firstName} ${member.lastName}`,
|
||||
joinDate: member.joinDate,
|
||||
skillsCount: member.skills.length,
|
||||
averageLevel:
|
||||
member.skills.reduce((sum, s) => sum + s.level, 0) /
|
||||
member.skills.length,
|
||||
skills: member.skills.map((skill) => ({
|
||||
skillName: skill.skillName,
|
||||
category: skill.category,
|
||||
level: skill.level,
|
||||
levelLabel: getSkillLevelLabel(skill.level),
|
||||
canMentor: skill.canMentor,
|
||||
wantsToLearn: skill.wantsToLearn,
|
||||
})),
|
||||
})),
|
||||
mentorshipOpportunities: skillAnalysis
|
||||
.filter(
|
||||
(skill) => skill.experts.length > 0 && skill.learners.length > 0
|
||||
)
|
||||
.map((skill) => ({
|
||||
skillName: skill.skillName,
|
||||
experts: skill.experts.filter((e) => e.canMentor),
|
||||
learners: skill.learners,
|
||||
})),
|
||||
};
|
||||
|
||||
const dataStr = JSON.stringify(reportData, null, 2);
|
||||
const dataUri =
|
||||
"data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
|
||||
|
||||
const exportFileDefaultName = `rapport-complet-${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();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
||||
<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="relative z-10 container mx-auto p-6">
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-white">Chargement...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!team) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
||||
<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="relative z-10 container mx-auto p-6">
|
||||
<div className="text-center text-white">Équipe non trouvée</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
||||
<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="relative z-10 container mx-auto p-6 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.back()}
|
||||
className="text-slate-400 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
||||
<Users className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">
|
||||
Équipe {team.teamName}
|
||||
</h1>
|
||||
<p className="text-slate-400">
|
||||
{team.direction} • {team.totalMembers} membres
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleExportReport}
|
||||
className="bg-blue-500 hover:bg-blue-600 text-white"
|
||||
>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Exporter rapport complet
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats générales */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
|
||||
<Users className="h-8 w-8 text-green-400 mx-auto mb-3" />
|
||||
<div className="text-3xl font-bold text-white">
|
||||
{team.totalMembers}
|
||||
</div>
|
||||
<div className="text-sm text-slate-400">Membres actifs</div>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
|
||||
<BarChart3 className="h-8 w-8 text-blue-400 mx-auto mb-3" />
|
||||
<div className="text-3xl font-bold text-white">
|
||||
{((team.averageSkillLevel / 3) * 100).toFixed(0)}%
|
||||
</div>
|
||||
<div className="text-sm text-slate-400">Niveau moyen</div>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
|
||||
<Target className="h-8 w-8 text-orange-400 mx-auto mb-3" />
|
||||
<div className="text-3xl font-bold text-white">
|
||||
{skillAnalysis.length}
|
||||
</div>
|
||||
<div className="text-sm text-slate-400">Compétences évaluées</div>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 text-center">
|
||||
<Award className="h-8 w-8 text-purple-400 mx-auto mb-3" />
|
||||
<div className="text-3xl font-bold text-white">
|
||||
{skillAnalysis.filter((s) => s.experts.length > 0).length}
|
||||
</div>
|
||||
<div className="text-sm text-slate-400">Expertises disponibles</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
||||
{/* Analyse des compétences */}
|
||||
<div className="xl:col-span-1">
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 h-fit">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
|
||||
<Award className="h-5 w-5 text-purple-400" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
Top Compétences
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{skillAnalysis.slice(0, 15).map((skill, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 hover:border-white/20 transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Icône de la technologie */}
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
{skill.icon ? (
|
||||
<div className="p-2 bg-white/10 border border-white/20 rounded-lg">
|
||||
<TechIcon
|
||||
iconName={skill.icon}
|
||||
className="w-4 h-4 text-white"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-2 bg-slate-500/20 border border-slate-500/30 rounded-lg">
|
||||
<Star className="w-4 h-4 text-slate-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Contenu principal */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-white font-medium truncate pr-2">
|
||||
{skill.skillName}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<span className="text-sm font-semibold text-white">
|
||||
{((skill.averageLevel / 3) * 100).toFixed(0)}%
|
||||
</span>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${getSkillLevelColor(
|
||||
skill.averageLevel
|
||||
)}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Barre de progression */}
|
||||
<div className="w-full bg-white/10 rounded-full h-1.5 mb-3">
|
||||
<div
|
||||
className={`h-1.5 rounded-full transition-all ${
|
||||
skill.averageLevel < 0.5
|
||||
? "bg-gradient-to-r from-red-500 to-red-400"
|
||||
: skill.averageLevel < 1.5
|
||||
? "bg-gradient-to-r from-orange-500 to-orange-400"
|
||||
: skill.averageLevel < 2.5
|
||||
? "bg-gradient-to-r from-blue-500 to-blue-400"
|
||||
: "bg-gradient-to-r from-green-500 to-green-400"
|
||||
}`}
|
||||
style={{
|
||||
width: `${(skill.averageLevel / 3) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Métadonnées */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-slate-400 font-medium">
|
||||
{skill.category}
|
||||
</span>
|
||||
<div className="flex items-center gap-3">
|
||||
{skill.experts.length > 0 && (
|
||||
<div className="flex items-center gap-1 text-green-400">
|
||||
<GraduationCap className="w-3 h-3" />
|
||||
<span className="font-medium">
|
||||
{skill.experts.length}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{skill.learners.length > 0 && (
|
||||
<div className="flex items-center gap-1 text-blue-400">
|
||||
<BookOpen className="w-3 h-3" />
|
||||
<span className="font-medium">
|
||||
{skill.learners.length}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Experts et mentors */}
|
||||
<div className="xl:col-span-1">
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 h-fit">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="p-2 bg-green-500/20 border border-green-500/30 rounded-xl">
|
||||
<GraduationCap className="h-5 w-5 text-green-400" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
Experts & Mentors
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{skillAnalysis
|
||||
.filter((skill) => skill.experts.length > 0)
|
||||
.slice(0, 20)
|
||||
.map((skill, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 hover:border-white/20 transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
{/* Icône de la technologie */}
|
||||
<div className="flex-shrink-0">
|
||||
{skill.icon ? (
|
||||
<div className="p-1.5 bg-white/10 border border-white/20 rounded-lg">
|
||||
<TechIcon
|
||||
iconName={skill.icon}
|
||||
className="w-3.5 h-3.5 text-white"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-1.5 bg-slate-500/20 border border-slate-500/30 rounded-lg">
|
||||
<Star className="w-3.5 h-3.5 text-slate-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Nom de la compétence */}
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-white text-sm">
|
||||
{skill.skillName}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400">
|
||||
{skill.category}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Badge du nombre d'experts */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="px-2 py-1 bg-green-500/20 border border-green-500/30 rounded-lg">
|
||||
<span className="text-xs font-medium text-green-300">
|
||||
{skill.experts.length} expert
|
||||
{skill.experts.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Liste des experts */}
|
||||
<div className="space-y-2 ml-8">
|
||||
{skill.experts.map((expert, expertIdx) => (
|
||||
<div
|
||||
key={expertIdx}
|
||||
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-white">
|
||||
{expert.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm text-slate-200 font-medium">
|
||||
{expert.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`px-2 py-0.5 rounded-md text-xs font-medium ${
|
||||
expert.level >= 3
|
||||
? "bg-green-500/20 text-green-300 border border-green-500/30"
|
||||
: expert.level >= 2
|
||||
? "bg-blue-500/20 text-blue-300 border border-blue-500/30"
|
||||
: "bg-orange-500/20 text-orange-300 border border-orange-500/30"
|
||||
}`}
|
||||
>
|
||||
{getSkillLevelLabel(expert.level)}
|
||||
</div>
|
||||
{expert.canMentor && (
|
||||
<div className="p-1 bg-green-500/20 border border-green-500/30 rounded">
|
||||
<GraduationCap className="w-3 h-3 text-green-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Liste des membres */}
|
||||
<div className="xl:col-span-1">
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 h-fit">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<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>
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
Membres de l'équipe
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{team.members.map((member, idx) => {
|
||||
const avgLevel =
|
||||
member.skills.reduce((sum, s) => sum + s.level, 0) /
|
||||
member.skills.length;
|
||||
const mentorSkills = member.skills.filter(
|
||||
(s) => s.canMentor
|
||||
).length;
|
||||
const learningSkills = member.skills.filter(
|
||||
(s) => s.wantsToLearn
|
||||
).length;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
onClick={() => handleMemberClick(member)}
|
||||
className="group p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 hover:border-white/20 transition-all duration-200 cursor-pointer"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Avatar */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-sm font-bold text-white">
|
||||
{member.firstName[0]}
|
||||
{member.lastName[0]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Informations principales */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-semibold text-white truncate">
|
||||
{member.firstName} {member.lastName}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<span className="text-xs font-semibold text-white">
|
||||
{((avgLevel / 3) * 100).toFixed(0)}%
|
||||
</span>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${getSkillLevelColor(
|
||||
avgLevel
|
||||
)}`}
|
||||
/>
|
||||
<ChevronRight className="w-4 h-4 text-slate-400 group-hover:text-white transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date d'arrivée */}
|
||||
<p className="text-xs text-slate-400 mb-3">
|
||||
Membre depuis{" "}
|
||||
{new Date(member.joinDate).toLocaleDateString(
|
||||
"fr-FR",
|
||||
{
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
|
||||
{/* Barre de progression du niveau */}
|
||||
<div className="w-full bg-white/10 rounded-full h-1.5 mb-3">
|
||||
<div
|
||||
className={`h-1.5 rounded-full transition-all ${
|
||||
avgLevel < 0.5
|
||||
? "bg-gradient-to-r from-red-500 to-red-400"
|
||||
: avgLevel < 1.5
|
||||
? "bg-gradient-to-r from-orange-500 to-orange-400"
|
||||
: avgLevel < 2.5
|
||||
? "bg-gradient-to-r from-blue-500 to-blue-400"
|
||||
: "bg-gradient-to-r from-green-500 to-green-400"
|
||||
}`}
|
||||
style={{ width: `${(avgLevel / 3) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Statistiques */}
|
||||
<div className="grid grid-cols-3 gap-3 text-xs">
|
||||
<div className="text-center p-2 bg-white/5 rounded-lg">
|
||||
<div className="text-white font-semibold">
|
||||
{member.skills.length}
|
||||
</div>
|
||||
<div className="text-slate-400">Compétences</div>
|
||||
</div>
|
||||
<div className="text-center p-2 bg-green-500/10 border border-green-500/20 rounded-lg">
|
||||
<div className="text-green-300 font-semibold">
|
||||
{mentorSkills}
|
||||
</div>
|
||||
<div className="text-green-400">Mentor</div>
|
||||
</div>
|
||||
<div className="text-center p-2 bg-blue-500/10 border border-blue-500/20 rounded-lg">
|
||||
<div className="text-blue-300 font-semibold">
|
||||
{learningSkills}
|
||||
</div>
|
||||
<div className="text-blue-400">Apprend</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal des détails du membre */}
|
||||
<Dialog open={isMemberModalOpen} onOpenChange={setIsMemberModalOpen}>
|
||||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto bg-slate-900 border-slate-700">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-xl font-bold text-white flex items-center gap-3">
|
||||
{selectedMember && (
|
||||
<>
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-sm font-bold text-white">
|
||||
{selectedMember.firstName[0]}
|
||||
{selectedMember.lastName[0]}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-white">
|
||||
{selectedMember.firstName} {selectedMember.lastName}
|
||||
</h2>
|
||||
<p className="text-sm text-slate-400 font-normal">
|
||||
{selectedMember.skills.length} compétences évaluées
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{selectedMember && (
|
||||
<div className="space-y-6 mt-6">
|
||||
{/* Statistiques rapides */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4 text-center">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{selectedMember.skills.length}
|
||||
</div>
|
||||
<div className="text-sm text-slate-400">Compétences</div>
|
||||
</div>
|
||||
<div className="bg-green-500/10 border border-green-500/20 rounded-xl p-4 text-center">
|
||||
<div className="text-2xl font-bold text-green-300">
|
||||
{selectedMember.skills.filter((s) => s.canMentor).length}
|
||||
</div>
|
||||
<div className="text-sm text-green-400">Peut mentorer</div>
|
||||
</div>
|
||||
<div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 text-center">
|
||||
<div className="text-2xl font-bold text-blue-300">
|
||||
{selectedMember.skills.filter((s) => s.wantsToLearn).length}
|
||||
</div>
|
||||
<div className="text-sm text-blue-400">Veut apprendre</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Liste des compétences par catégorie */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Award className="w-5 h-5 text-purple-400" />
|
||||
Compétences détaillées
|
||||
</h3>
|
||||
|
||||
{/* Grouper les compétences par catégorie */}
|
||||
{Object.entries(
|
||||
selectedMember.skills.reduce((acc, skill) => {
|
||||
if (!acc[skill.category]) {
|
||||
acc[skill.category] = [];
|
||||
}
|
||||
acc[skill.category].push(skill);
|
||||
return acc;
|
||||
}, {} as Record<string, typeof selectedMember.skills>)
|
||||
).map(([category, skills]) => (
|
||||
<div
|
||||
key={category}
|
||||
className="bg-white/5 border border-white/10 rounded-xl p-4"
|
||||
>
|
||||
<h4 className="font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
|
||||
{category}
|
||||
<span className="text-sm text-slate-400 font-normal">
|
||||
({skills.length} compétence
|
||||
{skills.length > 1 ? "s" : ""})
|
||||
</span>
|
||||
</h4>
|
||||
|
||||
<div className="space-y-2">
|
||||
{skills
|
||||
.sort((a, b) => b.level - a.level)
|
||||
.map((skill, skillIdx) => {
|
||||
// Trouver l'icône de la compétence
|
||||
let skillIcon = null;
|
||||
if (skillAnalysis.length > 0) {
|
||||
const foundSkill = skillAnalysis.find(
|
||||
(s) => s.skillName === skill.skillName
|
||||
);
|
||||
if (foundSkill) {
|
||||
skillIcon = foundSkill.icon;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={skillIdx}
|
||||
className="flex items-center gap-3 p-2 hover:bg-white/5 rounded-lg transition-colors"
|
||||
>
|
||||
{/* Icône de la technologie */}
|
||||
<div className="flex-shrink-0">
|
||||
{skillIcon ? (
|
||||
<TechIcon
|
||||
iconName={skillIcon}
|
||||
className="w-4 h-4 text-white"
|
||||
/>
|
||||
) : (
|
||||
<Star className="w-4 h-4 text-slate-400" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Nom de la compétence */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-sm font-medium text-white truncate">
|
||||
{skill.skillName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Niveau et badges */}
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{/* Badge de niveau */}
|
||||
<div
|
||||
className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||
skill.level >= 3
|
||||
? "bg-green-500/20 text-green-300"
|
||||
: skill.level >= 2
|
||||
? "bg-blue-500/20 text-blue-300"
|
||||
: skill.level >= 1
|
||||
? "bg-orange-500/20 text-orange-300"
|
||||
: "bg-red-500/20 text-red-300"
|
||||
}`}
|
||||
>
|
||||
{getSkillLevelLabel(skill.level)}
|
||||
</div>
|
||||
|
||||
{/* Icônes mentor/apprenant */}
|
||||
{skill.canMentor && (
|
||||
<div className="p-1 bg-green-500/20 rounded">
|
||||
<GraduationCap className="w-3 h-3 text-green-400" />
|
||||
</div>
|
||||
)}
|
||||
{skill.wantsToLearn && (
|
||||
<div className="p-1 bg-blue-500/20 rounded">
|
||||
<BookOpen className="w-3 h-3 text-blue-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user