julienfroidefond/peakskills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update TeamDetailPage and modularize components

Browse Source 
- 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.
This commit is contained in:
Julien Froidefond
2025-08-21 14:42:38 +02:00
parent 747b0189a6
commit 2faa998cbe
11 changed files with 1266 additions and 1023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
components/admin/team-metrics-cards.tsx Normal file
View File

@@ -0,0 +1,107 @@
"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>
);
}