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

style: update UI components for improved visual consistency and interactivity

Browse Source 
- 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
2025-08-22 14:03:45 +02:00
parent 5c76ec0549
commit 1a05b22242
3 changed files with 116 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/admin/overview/admin-overview-cards.tsx
View File

@@ -29,12 +29,12 @@ export function AdminOverviewCards({
return (
<div className="grid grid-cols-1 md:grid-cols-4 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="bg-gradient-to-br from-blue-900/30 to-blue-800/20 backdrop-blur-sm border border-blue-600/30 rounded-2xl p-6 hover:from-blue-800/40 hover:to-blue-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
<div className="flex items-center justify-between mb-4">
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
<Users className="h-5 w-5 text-blue-400" />
<div className="p-2 bg-blue-500/30 border border-blue-500/40 rounded-xl">
<Users className="h-5 w-5 text-blue-300" />
</div>
<div className="text-xs text-slate-400 font-medium">
<div className="text-xs text-blue-200 font-medium">
{hasFilters ? "FILTRÉES" : "TOTAL"}
</div>
</div>
@@ -42,23 +42,21 @@ export function AdminOverviewCards({
<p className="text-2xl font-bold text-white">
{hasFilters ? getFilteredTeamStats().length : teams.length}
</p>
<p className="text-sm text-slate-400">
<p className="text-sm text-blue-200">
{hasFilters ? "Équipes filtrées" : "Équipes"}
</p>
{hasFilters && (
<p className="text-xs text-slate-500">
sur {teams.length} au total
</p>
<p className="text-xs text-blue-300">sur {teams.length} au total</p>
)}
</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="bg-gradient-to-br from-green-900/30 to-green-800/20 backdrop-blur-sm border border-green-600/30 rounded-2xl p-6 hover:from-green-800/40 hover:to-green-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
<div className="flex items-center justify-between mb-4">
<div className="p-2 bg-green-500/20 border border-green-500/30 rounded-xl">
<UserCheck className="h-5 w-5 text-green-400" />
<div className="p-2 bg-green-500/30 border border-green-500/40 rounded-xl">
<UserCheck className="h-5 w-5 text-green-300" />
</div>
<div className="text-xs text-slate-400 font-medium">
<div className="text-xs text-green-200 font-medium">
{hasFilters ? "FILTRÉS" : "TOTAL"}
</div>
</div>
@@ -71,11 +69,11 @@ export function AdminOverviewCards({
)
: teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
</p>
<p className="text-sm text-slate-400">
<p className="text-sm text-green-200">
{hasFilters ? "Membres filtrés" : "Membres"}
</p>
{hasFilters && (
<p className="text-xs text-slate-500">
<p className="text-xs text-green-300">
sur {teamStats.reduce((sum, t) => sum + t.totalMembers, 0)} au
total
</p>
@@ -83,12 +81,12 @@ export function AdminOverviewCards({
</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="bg-gradient-to-br from-purple-900/30 to-purple-800/20 backdrop-blur-sm border border-purple-600/30 rounded-2xl p-6 hover:from-purple-800/40 hover:to-purple-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
<div className="flex items-center justify-between mb-4">
<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 bg-purple-500/30 border border-purple-500/40 rounded-xl">
<Building2 className="h-5 w-5 text-purple-300" />
</div>
<div className="text-xs text-slate-400 font-medium">
<div className="text-xs text-purple-200 font-medium">
{hasFilters ? "FILTRÉES" : "TOTAL"}
</div>
</div>
@@ -98,23 +96,23 @@ export function AdminOverviewCards({
? getFilteredDirectionStats().length
: directionStats.length}
</p>
<p className="text-sm text-slate-400">
<p className="text-sm text-purple-200">
{hasFilters ? "Directions filtrées" : "Directions"}
</p>
{hasFilters && (
<p className="text-xs text-slate-500">
<p className="text-xs text-purple-300">
sur {directionStats.length} au total
</p>
)}
</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="bg-gradient-to-br from-orange-900/30 to-orange-800/20 backdrop-blur-sm border border-orange-600/30 rounded-2xl p-6 hover:from-orange-800/40 hover:to-orange-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
<div className="flex items-center justify-between mb-4">
<div className="p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl">
<Target className="h-5 w-5 text-orange-400" />
<div className="p-2 bg-orange-500/30 border border-orange-500/40 rounded-xl">
<Target className="h-5 w-5 text-orange-300" />
</div>
<div className="text-xs text-slate-400 font-medium">RÉFÉRENTIEL</div>
<div className="text-xs text-orange-200 font-medium">RÉFÉRENTIEL</div>
</div>
<div className="space-y-1">
<p className="text-2xl font-bold text-white">
@@ -123,8 +121,8 @@ export function AdminOverviewCards({
0
)}
</p>
<p className="text-sm text-slate-400">Compétences suivies</p>
<p className="text-xs text-slate-500">
<p className="text-sm text-orange-200">Compétences suivies</p>
<p className="text-xs text-orange-300">
{skillCategories.length} catégories
</p>
</div>

107
components/admin/overview/direction-overview.tsx
View File

@@ -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

28
components/admin/team-detail/team-stats-row.tsx
View File

@@ -81,7 +81,7 @@ export function TeamStatsRow({
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">
<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 */}
@@ -90,10 +90,10 @@ export function TeamStatsRow({
<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="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-400" />
<span className="text-xs text-slate-300">{totalMembers}</span>
<Users className="h-3 w-3 text-slate-300" />
<span className="text-xs text-slate-200">{totalMembers}</span>
</div>
</div>
</div>
@@ -101,14 +101,14 @@ export function TeamStatsRow({
{/* 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">
<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-white/10 rounded-full h-1.5">
<div className="w-full bg-slate-700/60 rounded-full h-1.5">
<div
className={`h-1.5 rounded-full transition-all duration-300 ${
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
@@ -129,21 +129,21 @@ export function TeamStatsRow({
<div className="text-sm font-bold text-white">
{averageSkillLevel.toFixed(1)}
</div>
<div className="text-xs text-slate-400">/ 3.0</div>
<div className="text-xs text-slate-300">/ 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 className="text-xs text-slate-300">Couv.</div>
</div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div
className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help ${getSkillLevelBadgeClasses(
className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help shadow-sm ${getSkillLevelBadgeClasses(
averageSkillLevel
)}`}
>
@@ -172,7 +172,7 @@ export function TeamStatsRow({
{topSkills.slice(0, 3).map((skill, idx) => (
<div
key={idx}
className={`px-2 py-1 border rounded-md text-center min-w-[60px] ${getSkillLevelBadgeClasses(
className={`px-2 py-1 border rounded-md text-center min-w-[60px] shadow-sm ${getSkillLevelBadgeClasses(
skill.averageLevel
)}`}
>
@@ -192,7 +192,7 @@ export function TeamStatsRow({
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"
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>
@@ -200,7 +200,7 @@ export function TeamStatsRow({
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"
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>