2faa998cbe
- 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.
108 lines
4.0 KiB
TypeScript
108 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { Users, BarChart3, Award, BookOpen, Target } from "lucide-react";
|
|
|
|
interface TeamInsights {
|
|
averageTeamLevel: number;
|
|
totalExperts: number;
|
|
totalLearners: number;
|
|
skillGaps: number;
|
|
strongSkills: number;
|
|
}
|
|
|
|
interface TeamMetricsCardsProps {
|
|
totalMembers: number;
|
|
teamInsights: TeamInsights;
|
|
skillCoverage: number;
|
|
}
|
|
|
|
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";
|
|
}
|
|
|
|
export function TeamMetricsCards({
|
|
totalMembers,
|
|
teamInsights,
|
|
skillCoverage,
|
|
}: TeamMetricsCardsProps) {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
|
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 bg-green-500/20 border border-green-500/30 rounded-xl">
|
|
<Users className="h-4 w-4 text-green-400" />
|
|
</div>
|
|
<span className="text-slate-300 font-medium text-sm">Membres</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">{totalMembers}</div>
|
|
<div className="text-xs text-slate-400 mt-1">personnes actives</div>
|
|
</div>
|
|
|
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
|
<BarChart3 className="h-4 w-4 text-blue-400" />
|
|
</div>
|
|
<span className="text-slate-300 font-medium text-sm">
|
|
Niveau équipe
|
|
</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">
|
|
{((teamInsights.averageTeamLevel / 3) * 100).toFixed(0)}%
|
|
</div>
|
|
<div className="text-xs text-slate-400 mt-1">
|
|
{getSkillLevelLabel(teamInsights.averageTeamLevel)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl">
|
|
<Award className="h-4 w-4 text-orange-400" />
|
|
</div>
|
|
<span className="text-slate-300 font-medium text-sm">Expertises</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">
|
|
{teamInsights.totalExperts}
|
|
</div>
|
|
<div className="text-xs text-slate-400 mt-1">compétences expertes</div>
|
|
</div>
|
|
|
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
|
|
<BookOpen className="h-4 w-4 text-purple-400" />
|
|
</div>
|
|
<span className="text-slate-300 font-medium text-sm">
|
|
Apprentissages
|
|
</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">
|
|
{teamInsights.totalLearners}
|
|
</div>
|
|
<div className="text-xs text-slate-400 mt-1">
|
|
objectifs d'apprentissage
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 bg-red-500/20 border border-red-500/30 rounded-xl">
|
|
<Target className="h-4 w-4 text-red-400" />
|
|
</div>
|
|
<span className="text-slate-300 font-medium text-sm">Lacunes</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">
|
|
{teamInsights.skillGaps}
|
|
</div>
|
|
<div className="text-xs text-slate-400 mt-1">
|
|
compétences à renforcer
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|