style: update UI components for improved visual consistency and interactivity
- Enhanced AdminOverviewCards with gradient backgrounds and updated hover effects for better user engagement. - Introduced a utility function to dynamically assign colors based on direction in DirectionOverview, improving maintainability. - Updated TeamStatsRow with gradient backgrounds and refined text colors for better readability and aesthetics. - Overall improvements to component styling for a more cohesive look across the admin interface.
This commit is contained in:
Julien Froidefond
@@ -25,6 +25,51 @@ interface DirectionOverviewProps {
|
||||
onExportTeamReport?: (team: any) => void;
|
||||
}
|
||||
|
||||
// Fonction pour obtenir les couleurs de direction
|
||||
function getDirectionColors(direction: string) {
|
||||
const directionLower = direction.toLowerCase();
|
||||
if (directionLower.includes("tech") || directionLower.includes("dev")) {
|
||||
return {
|
||||
header: "from-blue-600/30 to-cyan-600/30",
|
||||
border: "border-blue-500/40",
|
||||
icon: "bg-blue-500/20 border-blue-500/30",
|
||||
};
|
||||
} else if (
|
||||
directionLower.includes("design") ||
|
||||
directionLower.includes("ux")
|
||||
) {
|
||||
return {
|
||||
header: "from-purple-600/30 to-pink-600/30",
|
||||
border: "border-purple-500/40",
|
||||
icon: "bg-purple-500/20 border-purple-500/30",
|
||||
};
|
||||
} else if (
|
||||
directionLower.includes("data") ||
|
||||
directionLower.includes("analytics")
|
||||
) {
|
||||
return {
|
||||
header: "from-emerald-600/30 to-teal-600/30",
|
||||
border: "border-emerald-500/40",
|
||||
icon: "bg-emerald-500/20 border-emerald-500/30",
|
||||
};
|
||||
} else if (
|
||||
directionLower.includes("security") ||
|
||||
directionLower.includes("sec")
|
||||
) {
|
||||
return {
|
||||
header: "from-red-600/30 to-orange-600/30",
|
||||
border: "border-red-500/40",
|
||||
icon: "bg-red-500/20 border-red-500/30",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
header: "from-purple-600/30 to-blue-600/30",
|
||||
border: "border-purple-500/40",
|
||||
icon: "bg-purple-500/20 border-purple-500/30",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function DirectionOverview({
|
||||
direction,
|
||||
teams,
|
||||
@@ -34,27 +79,31 @@ export function DirectionOverview({
|
||||
onViewTeamDetails = () => {},
|
||||
onExportTeamReport = () => {},
|
||||
}: DirectionOverviewProps) {
|
||||
const colors = getDirectionColors(direction);
|
||||
|
||||
return (
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl overflow-hidden">
|
||||
<div className="bg-white/5 border-b border-white/10 p-6">
|
||||
<div className="bg-gradient-to-br from-slate-800/40 to-slate-700/30 backdrop-blur-sm border border-slate-600/30 rounded-2xl overflow-hidden shadow-xl">
|
||||
<div
|
||||
className={`bg-gradient-to-r ${colors.header} border-b ${colors.border} p-6`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl">
|
||||
<Building2 className="h-5 w-5 text-purple-400" />
|
||||
<div className={`p-2 ${colors.icon} rounded-xl`}>
|
||||
<Building2 className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white">
|
||||
Direction {direction}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-green-500/20 border border-green-500/30 rounded-xl">
|
||||
<Users className="h-3 w-3 text-green-400" />
|
||||
<span className="text-sm text-green-300 font-medium">
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-green-500/30 border border-green-500/40 rounded-xl">
|
||||
<Users className="h-3 w-3 text-green-300" />
|
||||
<span className="text-sm text-green-200 font-medium">
|
||||
{totalMembers}
|
||||
</span>
|
||||
</div>
|
||||
<div className="px-3 py-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
||||
<span className="text-sm text-blue-300 font-medium">
|
||||
<div className="px-3 py-2 bg-blue-500/30 border border-blue-500/40 rounded-xl">
|
||||
<span className="text-sm text-blue-200 font-medium">
|
||||
Niveau: {getSkillLevelLabel(averageSkillLevel)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -66,10 +115,10 @@ export function DirectionOverview({
|
||||
{/* Direction Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Top Categories */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4">
|
||||
<div className="bg-gradient-to-br from-slate-800/50 to-slate-700/40 border border-slate-600/40 rounded-xl p-4 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<BarChart3 className="h-4 w-4 text-slate-400" />
|
||||
<h4 className="text-sm font-medium text-slate-300">
|
||||
<BarChart3 className="h-4 w-4 text-slate-300" />
|
||||
<h4 className="text-sm font-medium text-slate-200">
|
||||
Top Catégories
|
||||
</h4>
|
||||
</div>
|
||||
@@ -77,7 +126,7 @@ export function DirectionOverview({
|
||||
{topCategories.slice(0, 4).map((cat, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
|
||||
className="flex items-center justify-between p-2 bg-slate-700/50 rounded-lg border border-slate-600/30"
|
||||
>
|
||||
<span className="text-sm text-white">{cat.category}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -86,7 +135,7 @@ export function DirectionOverview({
|
||||
cat.averageLevel
|
||||
)}`}
|
||||
/>
|
||||
<span className="text-xs font-medium text-slate-300 min-w-8 text-right">
|
||||
<span className="text-xs font-medium text-slate-200 min-w-8 text-right">
|
||||
{cat.averageLevel.toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -96,41 +145,41 @@ export function DirectionOverview({
|
||||
</div>
|
||||
|
||||
{/* Overall Progress */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4">
|
||||
<div className="bg-gradient-to-br from-slate-800/50 to-slate-700/40 border border-slate-600/40 rounded-xl p-4 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<TrendingUp className="h-4 w-4 text-slate-400" />
|
||||
<h4 className="text-sm font-medium text-slate-300">
|
||||
<TrendingUp className="h-4 w-4 text-slate-300" />
|
||||
<h4 className="text-sm font-medium text-slate-200">
|
||||
Progression Globale
|
||||
</h4>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-slate-400">
|
||||
<span className="text-sm text-slate-300">
|
||||
Maîtrise globale:
|
||||
</span>
|
||||
<span className="text-lg font-bold text-white">
|
||||
{((averageSkillLevel / 3) * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-white/10 rounded-full h-2">
|
||||
<div className="w-full bg-slate-700/50 rounded-full h-2">
|
||||
<div
|
||||
className="bg-gradient-to-r from-blue-500 to-blue-400 h-2 rounded-full transition-all"
|
||||
className="bg-gradient-to-r from-blue-500 to-blue-400 h-2 rounded-full transition-all shadow-sm"
|
||||
style={{ width: `${(averageSkillLevel / 3) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-2 text-xs text-slate-500">
|
||||
<div className="pt-2 text-xs text-slate-400">
|
||||
Basé sur {teams.length} équipes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Distribution */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4">
|
||||
<div className="bg-gradient-to-br from-slate-800/50 to-slate-700/40 border border-slate-600/40 rounded-xl p-4 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Target className="h-4 w-4 text-slate-400" />
|
||||
<h4 className="text-sm font-medium text-slate-300">
|
||||
<Target className="h-4 w-4 text-slate-300" />
|
||||
<h4 className="text-sm font-medium text-slate-200">
|
||||
Répartition
|
||||
</h4>
|
||||
</div>
|
||||
@@ -139,17 +188,17 @@ export function DirectionOverview({
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{teams.length}
|
||||
</div>
|
||||
<div className="text-xs text-slate-400">équipes actives</div>
|
||||
<div className="text-xs text-slate-300">équipes actives</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-slate-400">Membres par équipe:</span>
|
||||
<span className="text-slate-300">Membres par équipe:</span>
|
||||
<span className="text-white font-medium">
|
||||
{(totalMembers / teams.length).toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-slate-400">Équipes performantes:</span>
|
||||
<span className="text-slate-300">Équipes performantes:</span>
|
||||
<span className="text-white font-medium">
|
||||
{teams.filter((t) => t.averageSkillLevel > 2).length}
|
||||
</span>
|
||||
@@ -162,8 +211,8 @@ export function DirectionOverview({
|
||||
{/* Teams List */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
|
||||
<Users className="h-4 w-4 text-blue-400" />
|
||||
<div className="p-2 bg-blue-500/30 border border-blue-500/40 rounded-xl">
|
||||
<Users className="h-4 w-4 text-blue-300" />
|
||||
</div>
|
||||
<h4 className="text-lg font-semibold text-white">
|
||||
Équipes de la direction
|
||||
|
||||
Reference in New Issue
Block a user