feat: review my team page with importance

This commit is contained in:
Julien Froidefond
2025-08-27 12:56:48 +02:00
parent 88dc00a44b
commit 94a18b0ca5
8 changed files with 544 additions and 151 deletions

View File

@@ -2,6 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { CategoryCoverage } from "@/lib/team-review-types";
import { Progress } from "@/components/ui/progress";
import { AlertTriangle, AlertCircle } from "lucide-react";
interface TeamInsightsProps {
recommendations: string[];
@@ -22,9 +23,27 @@ export function TeamInsights({
<CardContent className="space-y-6">
<div className="space-y-4">
{recommendations.map((recommendation, index) => (
<Alert key={index} className="bg-white/5 border-white/10">
<AlertDescription className="text-slate-300">
{recommendation}
<Alert
key={index}
className={`${
recommendation.includes("⚠️")
? "bg-red-500/10 border-red-500/30"
: "bg-white/5 border-white/10"
}`}
>
<AlertDescription
className={`${
recommendation.includes("⚠️")
? "text-red-200"
: "text-slate-300"
} flex items-start gap-2`}
>
{recommendation.includes("⚠️") ? (
<AlertTriangle className="h-5 w-5 text-red-400 shrink-0" />
) : (
<AlertCircle className="h-5 w-5 text-blue-400 shrink-0" />
)}
<span>{recommendation.replace("⚠️ ", "")}</span>
</AlertDescription>
</Alert>
))}
@@ -79,6 +98,52 @@ export function TeamInsights({
app.
</div>
</div>
{/* Couverture des compétences critiques */}
<div className="grid grid-cols-2 gap-2 pt-2">
<div className="space-y-1">
<div className="flex justify-between items-center">
<span className="text-xs text-slate-400">
Incontournables
</span>
<span className="text-xs font-medium text-red-300">
{category.criticalSkillsCoverage.incontournable}
</span>
</div>
<div className="h-1 w-full bg-white/10 rounded-full overflow-hidden">
<div
className="h-full bg-red-500/50 rounded-full transition-all"
style={{
width: `${Math.min(
100,
Math.max(
0,
category.criticalSkillsCoverage.incontournable
)
)}%`,
}}
/>
</div>
</div>
<div className="space-y-1">
<div className="flex justify-between items-center">
<span className="text-xs text-slate-400">Majeures</span>
<span className="text-xs font-medium text-orange-300">
{category.criticalSkillsCoverage.majeure}
</span>
</div>
<div className="h-1 w-full bg-white/10 rounded-full overflow-hidden">
<div
className="h-full bg-orange-500/50 rounded-full transition-all"
style={{
width: `${Math.min(
100,
Math.max(0, category.criticalSkillsCoverage.majeure)
)}%`,
}}
/>
</div>
</div>
</div>
</div>
))}
</div>