feat: my team page

2025-08-27 10:53:11 +02:00
parent b7e6fa257e
commit c7a5b25501
11 changed files with 1529 additions and 0 deletions
--- a/components/team-review/mentorship-section.tsx
+++ b/components/team-review/mentorship-section.tsx
@@ -0,0 +1,126 @@
+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>
+  );
+}