325 lines
11 KiB
TypeScript
325 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import {
|
|
Users,
|
|
TrendingUp,
|
|
BarChart3,
|
|
ExternalLink,
|
|
Target,
|
|
Award,
|
|
Star,
|
|
ChevronRight,
|
|
Baby,
|
|
User,
|
|
Zap,
|
|
Crown,
|
|
AlertTriangle,
|
|
} from "lucide-react";
|
|
import { TechIcon } from "@/components/icons/tech-icon";
|
|
import { getImportanceColors } from "@/lib/tech-colors";
|
|
import {
|
|
COVERAGE_OBJECTIVES,
|
|
isCoverageBelowObjective,
|
|
} from "@/lib/evaluation-utils";
|
|
|
|
interface TeamStatsRowProps {
|
|
teamId: string;
|
|
teamName: string;
|
|
direction: string;
|
|
totalMembers: number;
|
|
averageSkillLevel: number;
|
|
topSkills: Array<{
|
|
skillName: string;
|
|
averageLevel: number;
|
|
color?: string;
|
|
icon?: string;
|
|
importance: "incontournable" | "majeure" | "standard";
|
|
coverage: number;
|
|
}>;
|
|
skillCoverage: number;
|
|
criticalSkillsCoverage: {
|
|
incontournable: number;
|
|
majeure: number;
|
|
};
|
|
onViewDetails?: () => void;
|
|
onViewReport?: () => void;
|
|
}
|
|
|
|
export function getSkillLevelLabel(level: number): string {
|
|
if (level < 0.5) return "Débutant";
|
|
if (level < 1.5) return "Intermédiaire";
|
|
if (level < 2.5) return "Avancé";
|
|
return "Expert";
|
|
}
|
|
|
|
export 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";
|
|
}
|
|
|
|
export function getSkillLevelBadgeClasses(level: number): string {
|
|
if (level < 0.5) return "bg-red-500/20 border-red-500/30 text-red-300";
|
|
if (level < 1.5)
|
|
return "bg-orange-500/20 border-orange-500/30 text-orange-300";
|
|
if (level < 2.5) return "bg-blue-500/20 border-blue-500/30 text-blue-300";
|
|
return "bg-green-500/20 border-green-500/30 text-green-300";
|
|
}
|
|
|
|
export function getProgressColor(
|
|
percentage: number,
|
|
importance: "incontournable" | "majeure" | "standard"
|
|
): string {
|
|
if (isCoverageBelowObjective(percentage, importance)) return "bg-red-500";
|
|
return "bg-green-500";
|
|
}
|
|
|
|
export function TeamStatsRow({
|
|
teamId,
|
|
teamName,
|
|
direction,
|
|
totalMembers,
|
|
averageSkillLevel,
|
|
topSkills,
|
|
skillCoverage,
|
|
criticalSkillsCoverage,
|
|
onViewDetails,
|
|
onViewReport,
|
|
}: TeamStatsRowProps) {
|
|
// Calculer les alertes sur les compétences critiques
|
|
const hasIncontournableAlert = isCoverageBelowObjective(
|
|
criticalSkillsCoverage.incontournable,
|
|
"incontournable"
|
|
);
|
|
const hasMajeureAlert = isCoverageBelowObjective(
|
|
criticalSkillsCoverage.majeure,
|
|
"majeure"
|
|
);
|
|
|
|
return (
|
|
<div className="group bg-gradient-to-r from-slate-800/50 to-slate-700/40 backdrop-blur-sm border border-slate-600/40 rounded-xl p-4 hover:from-slate-700/60 hover:to-slate-600/50 hover:border-slate-500/50 transition-all duration-300 shadow-lg hover:shadow-xl">
|
|
{/* Layout horizontal compact */}
|
|
<div className="flex items-center gap-6">
|
|
{/* Informations de base */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h3 className="text-lg font-semibold text-white truncate">
|
|
{teamName}
|
|
</h3>
|
|
<div className="px-2 py-1 bg-slate-700/60 border border-slate-500/40 rounded-md">
|
|
<div className="flex items-center gap-1.5">
|
|
<Users className="h-3 w-3 text-slate-300" />
|
|
<span className="text-xs text-slate-200">{totalMembers}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mini barre de progression */}
|
|
<div className="w-full max-w-xs">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-xs text-slate-300">Niveau</span>
|
|
<span className="text-xs text-slate-200">
|
|
{((averageSkillLevel / 3) * 100).toFixed(0)}%
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-slate-700/60 rounded-full h-1.5">
|
|
<div
|
|
className={`h-1.5 rounded-full transition-all duration-300 shadow-sm ${
|
|
averageSkillLevel < 0.5
|
|
? "bg-gradient-to-r from-red-500 to-red-400"
|
|
: averageSkillLevel < 1.5
|
|
? "bg-gradient-to-r from-orange-500 to-orange-400"
|
|
: averageSkillLevel < 2.5
|
|
? "bg-gradient-to-r from-blue-500 to-blue-400"
|
|
: "bg-gradient-to-r from-green-500 to-green-400"
|
|
}`}
|
|
style={{ width: `${(averageSkillLevel / 3) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Indicateurs clés compacts */}
|
|
<div className="flex items-center gap-4">
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="text-center">
|
|
<div
|
|
className={`text-sm font-bold ${
|
|
isCoverageBelowObjective(
|
|
criticalSkillsCoverage.incontournable,
|
|
"incontournable"
|
|
)
|
|
? "text-red-400"
|
|
: "text-green-400"
|
|
}`}
|
|
>
|
|
{criticalSkillsCoverage.incontournable.toFixed(0)}%
|
|
</div>
|
|
<div className="text-xs text-slate-300">Incont.</div>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p className="text-xs">
|
|
Couverture des compétences incontournables
|
|
<br />
|
|
Objectif : {COVERAGE_OBJECTIVES.incontournable}%
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="text-center">
|
|
<div
|
|
className={`text-sm font-bold ${
|
|
isCoverageBelowObjective(
|
|
criticalSkillsCoverage.majeure,
|
|
"majeure"
|
|
)
|
|
? "text-red-400"
|
|
: "text-green-400"
|
|
}`}
|
|
>
|
|
{criticalSkillsCoverage.majeure.toFixed(0)}%
|
|
</div>
|
|
<div className="text-xs text-slate-300">Maj.</div>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p className="text-xs">
|
|
Couverture des compétences majeures
|
|
<br />
|
|
Objectif : {COVERAGE_OBJECTIVES.majeure}%
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help shadow-sm ${getSkillLevelBadgeClasses(
|
|
averageSkillLevel
|
|
)}`}
|
|
>
|
|
<span className="text-xs font-semibold">
|
|
{averageSkillLevel < 0.5
|
|
? "D"
|
|
: averageSkillLevel < 1.5
|
|
? "I"
|
|
: averageSkillLevel < 2.5
|
|
? "A"
|
|
: "E"}
|
|
</span>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p className="text-xs">
|
|
{getSkillLevelLabel(averageSkillLevel)}
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
|
|
{/* Top skills mini */}
|
|
<div className="flex items-center gap-2">
|
|
{topSkills.slice(0, 3).map((skill, idx) => {
|
|
const colors = getImportanceColors(skill.importance);
|
|
const target = COVERAGE_OBJECTIVES[skill.importance];
|
|
const isUnderTarget = isCoverageBelowObjective(
|
|
skill.coverage,
|
|
skill.importance
|
|
);
|
|
|
|
return (
|
|
<TooltipProvider key={idx}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className={`relative px-2 py-1 border rounded-md text-center min-w-[60px] shadow-sm ${
|
|
isUnderTarget
|
|
? "bg-red-500/20 border-red-500/30"
|
|
: "bg-green-500/20 border-green-500/30"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`text-xs font-medium truncate mb-1 ${
|
|
isUnderTarget ? "text-red-400" : "text-green-400"
|
|
}`}
|
|
>
|
|
{skill.skillName}
|
|
</div>
|
|
<div
|
|
className={`text-xs font-bold ${
|
|
isUnderTarget ? "text-red-400" : "text-green-400"
|
|
}`}
|
|
>
|
|
{skill.coverage.toFixed(0)}%
|
|
</div>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<div className="text-xs">
|
|
<p className="font-medium">{skill.skillName}</p>
|
|
<p className="text-slate-400">
|
|
{skill.importance === "incontournable"
|
|
? "Compétence incontournable"
|
|
: skill.importance === "majeure"
|
|
? "Compétence majeure"
|
|
: "Compétence standard"}
|
|
</p>
|
|
{target > 0 && (
|
|
<p
|
|
className={
|
|
isUnderTarget ? "text-red-400" : "text-green-400"
|
|
}
|
|
>
|
|
Objectif : {target}%
|
|
</p>
|
|
)}
|
|
</div>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Actions compactes */}
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onViewReport}
|
|
className="h-8 px-3 bg-slate-700/50 border-slate-500/40 text-white hover:bg-slate-600/60 hover:border-slate-400/50 shadow-sm"
|
|
>
|
|
<ExternalLink className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onViewDetails}
|
|
className="h-8 px-3 bg-slate-700/50 border-slate-500/40 text-white hover:bg-slate-600/60 hover:border-slate-400/50 shadow-sm"
|
|
>
|
|
<ChevronRight className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|