127 lines
4.5 KiB
TypeScript
127 lines
4.5 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { TeamMemberProfile, SkillGap } from "@/lib/team-review-types";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { UserCheck } from "lucide-react";
|
|
|
|
interface MentorshipSectionProps {
|
|
members: TeamMemberProfile[];
|
|
skillGaps: SkillGap[];
|
|
}
|
|
|
|
export function MentorshipSection({
|
|
members,
|
|
skillGaps,
|
|
}: MentorshipSectionProps) {
|
|
// Trouver les mentors potentiels
|
|
const mentors = members.filter((member) => member.mentorSkills > 0);
|
|
|
|
// Organiser les opportunités de mentorat par mentor
|
|
const mentorshipOpportunities = mentors.map((mentor) => {
|
|
const opportunities = mentor.skills
|
|
.filter((skill) => skill.canMentor)
|
|
.map((skill) => {
|
|
const gap = skillGaps.find((g) => g.skillId === skill.skillId);
|
|
if (!gap) return null;
|
|
|
|
const learners = members.filter((member) =>
|
|
member.skills.some(
|
|
(s) =>
|
|
s.skillId === skill.skillId &&
|
|
s.wantsToLearn &&
|
|
["never", "not-autonomous"].includes(s.level)
|
|
)
|
|
);
|
|
|
|
return {
|
|
skill: skill.skillName,
|
|
category: skill.category,
|
|
learners,
|
|
};
|
|
})
|
|
.filter(Boolean);
|
|
|
|
return {
|
|
mentor,
|
|
opportunities,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<Card className="bg-white/5 border-white/10 backdrop-blur">
|
|
<CardHeader>
|
|
<CardTitle className="text-slate-200">
|
|
Opportunités de mentorat
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScrollArea className="h-[400px]">
|
|
<div className="space-y-6">
|
|
{mentorshipOpportunities.map(({ mentor, opportunities }) => (
|
|
<div key={mentor.member.uuid} className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="bg-white/10 border border-white/20">
|
|
<AvatarFallback className="text-slate-200 bg-transparent">
|
|
{mentor.member.firstName[0]}
|
|
{mentor.member.lastName[0]}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<h3 className="font-semibold text-slate-200">
|
|
{mentor.member.firstName} {mentor.member.lastName}
|
|
</h3>
|
|
<p className="text-sm text-slate-400">
|
|
{mentor.mentorSkills} compétences en mentorat
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pl-12 space-y-3">
|
|
{opportunities.map(
|
|
(opp, idx) =>
|
|
opp && (
|
|
<div key={idx} className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Badge
|
|
variant="outline"
|
|
className="bg-white/5 text-slate-300 border-white/20"
|
|
>
|
|
{opp.category}
|
|
</Badge>
|
|
<span className="font-medium text-slate-300">
|
|
{opp.skill}
|
|
</span>
|
|
</div>
|
|
{opp.learners.length > 0 && (
|
|
<div className="pl-4">
|
|
<p className="text-sm text-slate-400 mb-2">
|
|
Apprenants potentiels :
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{opp.learners.map((learner) => (
|
|
<Badge
|
|
key={learner.member.uuid}
|
|
variant="outline"
|
|
className="bg-blue-500/10 text-blue-200 border-blue-500/30"
|
|
>
|
|
{learner.member.firstName}{" "}
|
|
{learner.member.lastName}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|