refactor: update team stats component usage in DirectionOverview
- Replaced TeamStatsCard with TeamStatsRow for better alignment with new design. - Updated comments and layout structure to reflect the change from grid to list format. - Ensured proper export of TeamStatsRow in team-detail index for consistency.
This commit is contained in:
Julien Froidefond
@@ -10,3 +10,4 @@ export { TeamInsightsTab } from "./team-insights-tab";
|
||||
export { TeamMemberModal } from "./team-member-modal";
|
||||
export { TeamMetricsCards } from "./team-metrics-cards";
|
||||
export { TeamStatsCard } from "./team-stats-card";
|
||||
export { TeamStatsRow } from "./team-stats-row";
|
||||
|
||||
211
components/admin/team-detail/team-stats-row.tsx
Normal file
211
components/admin/team-detail/team-stats-row.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
"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,
|
||||
} from "lucide-react";
|
||||
import { TechIcon } from "@/components/icons/tech-icon";
|
||||
|
||||
interface TeamStatsRowProps {
|
||||
teamId: string;
|
||||
teamName: string;
|
||||
direction: string;
|
||||
totalMembers: number;
|
||||
averageSkillLevel: number;
|
||||
topSkills: Array<{
|
||||
skillName: string;
|
||||
averageLevel: number;
|
||||
color?: string;
|
||||
icon?: string;
|
||||
}>;
|
||||
skillCoverage: 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): string {
|
||||
if (percentage < 30) return "bg-red-500";
|
||||
if (percentage < 60) return "bg-orange-500";
|
||||
if (percentage < 80) return "bg-blue-500";
|
||||
return "bg-green-500";
|
||||
}
|
||||
|
||||
export function TeamStatsRow({
|
||||
teamId,
|
||||
teamName,
|
||||
direction,
|
||||
totalMembers,
|
||||
averageSkillLevel,
|
||||
topSkills,
|
||||
skillCoverage,
|
||||
onViewDetails,
|
||||
onViewReport,
|
||||
}: TeamStatsRowProps) {
|
||||
return (
|
||||
<div className="group bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 hover:bg-white/10 hover:border-white/20 transition-all duration-300">
|
||||
{/* 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-white/10 border border-white/20 rounded-md">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Users className="h-3 w-3 text-slate-400" />
|
||||
<span className="text-xs text-slate-300">{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-400">Niveau</span>
|
||||
<span className="text-xs text-slate-300">
|
||||
{((averageSkillLevel / 3) * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-white/10 rounded-full h-1.5">
|
||||
<div
|
||||
className={`h-1.5 rounded-full transition-all duration-300 ${
|
||||
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">
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-bold text-white">
|
||||
{averageSkillLevel.toFixed(1)}
|
||||
</div>
|
||||
<div className="text-xs text-slate-400">/ 3.0</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-sm font-bold text-white">
|
||||
{skillCoverage.toFixed(0)}%
|
||||
</div>
|
||||
<div className="text-xs text-slate-400">Couv.</div>
|
||||
</div>
|
||||
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help ${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) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`px-2 py-1 border rounded-md text-center min-w-[60px] ${getSkillLevelBadgeClasses(
|
||||
skill.averageLevel
|
||||
)}`}
|
||||
>
|
||||
<div className="text-xs font-medium text-white truncate mb-1">
|
||||
{skill.skillName}
|
||||
</div>
|
||||
<div className="text-xs font-bold">
|
||||
{((skill.averageLevel / 3) * 100).toFixed(0)}%
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Actions compactes */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onViewReport}
|
||||
className="h-8 px-3 bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30"
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onViewDetails}
|
||||
className="h-8 px-3 bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30"
|
||||
>
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user