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

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

@@ -25,6 +25,51 @@ interface DirectionOverviewProps {
onExportTeamReport?: (team: any) => void; 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({ export function DirectionOverview({
direction, direction,
teams, teams,
@@ -34,27 +79,31 @@ export function DirectionOverview({
onViewTeamDetails = () => {}, onViewTeamDetails = () => {},
onExportTeamReport = () => {}, onExportTeamReport = () => {},
}: DirectionOverviewProps) { }: DirectionOverviewProps) {
const colors = getDirectionColors(direction);
return ( return (
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl overflow-hidden"> <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-white/5 border-b border-white/10 p-6"> <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 justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-500/20 border border-purple-500/30 rounded-xl"> <div className={`p-2 ${colors.icon} rounded-xl`}>
<Building2 className="h-5 w-5 text-purple-400" /> <Building2 className="h-5 w-5 text-white" />
</div> </div>
<h2 className="text-xl font-bold text-white"> <h2 className="text-xl font-bold text-white">
Direction {direction} Direction {direction}
</h2> </h2>
</div> </div>
<div className="flex items-center gap-3"> <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"> <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-400" /> <Users className="h-3 w-3 text-green-300" />
<span className="text-sm text-green-300 font-medium"> <span className="text-sm text-green-200 font-medium">
{totalMembers} {totalMembers}
</span> </span>
</div> </div>
<div className="px-3 py-2 bg-blue-500/20 border border-blue-500/30 rounded-xl"> <div className="px-3 py-2 bg-blue-500/30 border border-blue-500/40 rounded-xl">
<span className="text-sm text-blue-300 font-medium"> <span className="text-sm text-blue-200 font-medium">
Niveau: {getSkillLevelLabel(averageSkillLevel)} Niveau: {getSkillLevelLabel(averageSkillLevel)}
</span> </span>
</div> </div>
@@ -66,10 +115,10 @@ export function DirectionOverview({
{/* Direction Metrics */} {/* Direction Metrics */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Top Categories */} {/* 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"> <div className="flex items-center gap-2 mb-4">
<BarChart3 className="h-4 w-4 text-slate-400" /> <BarChart3 className="h-4 w-4 text-slate-300" />
<h4 className="text-sm font-medium text-slate-300"> <h4 className="text-sm font-medium text-slate-200">
Top Catégories Top Catégories
</h4> </h4>
</div> </div>
@@ -77,7 +126,7 @@ export function DirectionOverview({
{topCategories.slice(0, 4).map((cat, idx) => ( {topCategories.slice(0, 4).map((cat, idx) => (
<div <div
key={idx} 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> <span className="text-sm text-white">{cat.category}</span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -86,7 +135,7 @@ export function DirectionOverview({
cat.averageLevel 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)} {cat.averageLevel.toFixed(1)}
</span> </span>
</div> </div>
@@ -96,41 +145,41 @@ export function DirectionOverview({
</div> </div>
{/* Overall Progress */} {/* 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"> <div className="flex items-center gap-2 mb-4">
<TrendingUp className="h-4 w-4 text-slate-400" /> <TrendingUp className="h-4 w-4 text-slate-300" />
<h4 className="text-sm font-medium text-slate-300"> <h4 className="text-sm font-medium text-slate-200">
Progression Globale Progression Globale
</h4> </h4>
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-sm text-slate-400"> <span className="text-sm text-slate-300">
Maîtrise globale: Maîtrise globale:
</span> </span>
<span className="text-lg font-bold text-white"> <span className="text-lg font-bold text-white">
{((averageSkillLevel / 3) * 100).toFixed(0)}% {((averageSkillLevel / 3) * 100).toFixed(0)}%
</span> </span>
</div> </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 <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}%` }} style={{ width: `${(averageSkillLevel / 3) * 100}%` }}
/> />
</div> </div>
</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 Basé sur {teams.length} équipes
</div> </div>
</div> </div>
</div> </div>
{/* Team Distribution */} {/* 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"> <div className="flex items-center gap-2 mb-4">
<Target className="h-4 w-4 text-slate-400" /> <Target className="h-4 w-4 text-slate-300" />
<h4 className="text-sm font-medium text-slate-300"> <h4 className="text-sm font-medium text-slate-200">
Répartition Répartition
</h4> </h4>
</div> </div>
@@ -139,17 +188,17 @@ export function DirectionOverview({
<div className="text-2xl font-bold text-white"> <div className="text-2xl font-bold text-white">
{teams.length} {teams.length}
</div> </div>
<div className="text-xs text-slate-400">équipes actives</div> <div className="text-xs text-slate-300">équipes actives</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<div className="flex justify-between text-xs"> <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"> <span className="text-white font-medium">
{(totalMembers / teams.length).toFixed(1)} {(totalMembers / teams.length).toFixed(1)}
</span> </span>
</div> </div>
<div className="flex justify-between text-xs"> <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"> <span className="text-white font-medium">
{teams.filter((t) => t.averageSkillLevel > 2).length} {teams.filter((t) => t.averageSkillLevel > 2).length}
</span> </span>
@@ -162,8 +211,8 @@ export function DirectionOverview({
{/* Teams List */} {/* Teams List */}
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl"> <div className="p-2 bg-blue-500/30 border border-blue-500/40 rounded-xl">
<Users className="h-4 w-4 text-blue-400" /> <Users className="h-4 w-4 text-blue-300" />
</div> </div>
<h4 className="text-lg font-semibold text-white"> <h4 className="text-lg font-semibold text-white">
Équipes de la direction Équipes de la direction

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

@@ -81,7 +81,7 @@ export function TeamStatsRow({
onViewReport, onViewReport,
}: TeamStatsRowProps) { }: TeamStatsRowProps) {
return ( 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 */} {/* Layout horizontal compact */}
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
{/* Informations de base */} {/* Informations de base */}
@@ -90,10 +90,10 @@ export function TeamStatsRow({
<h3 className="text-lg font-semibold text-white truncate"> <h3 className="text-lg font-semibold text-white truncate">
{teamName} {teamName}
</h3> </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"> <div className="flex items-center gap-1.5">
<Users className="h-3 w-3 text-slate-400" /> <Users className="h-3 w-3 text-slate-300" />
<span className="text-xs text-slate-300">{totalMembers}</span> <span className="text-xs text-slate-200">{totalMembers}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -101,14 +101,14 @@ export function TeamStatsRow({
{/* Mini barre de progression */} {/* Mini barre de progression */}
<div className="w-full max-w-xs"> <div className="w-full max-w-xs">
<div className="flex items-center justify-between mb-1"> <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">Niveau</span>
<span className="text-xs text-slate-300"> <span className="text-xs text-slate-200">
{((averageSkillLevel / 3) * 100).toFixed(0)}% {((averageSkillLevel / 3) * 100).toFixed(0)}%
</span> </span>
</div> </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 <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 averageSkillLevel < 0.5
? "bg-gradient-to-r from-red-500 to-red-400" ? "bg-gradient-to-r from-red-500 to-red-400"
: averageSkillLevel < 1.5 : averageSkillLevel < 1.5
@@ -129,21 +129,21 @@ export function TeamStatsRow({
<div className="text-sm font-bold text-white"> <div className="text-sm font-bold text-white">
{averageSkillLevel.toFixed(1)} {averageSkillLevel.toFixed(1)}
</div> </div>
<div className="text-xs text-slate-400">/ 3.0</div> <div className="text-xs text-slate-300">/ 3.0</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="text-sm font-bold text-white"> <div className="text-sm font-bold text-white">
{skillCoverage.toFixed(0)}% {skillCoverage.toFixed(0)}%
</div> </div>
<div className="text-xs text-slate-400">Couv.</div> <div className="text-xs text-slate-300">Couv.</div>
</div> </div>
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <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 averageSkillLevel
)}`} )}`}
> >
@@ -172,7 +172,7 @@ export function TeamStatsRow({
{topSkills.slice(0, 3).map((skill, idx) => ( {topSkills.slice(0, 3).map((skill, idx) => (
<div <div
key={idx} 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 skill.averageLevel
)}`} )}`}
> >
@@ -192,7 +192,7 @@ export function TeamStatsRow({
variant="outline" variant="outline"
size="sm" size="sm"
onClick={onViewReport} 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" /> <ExternalLink className="h-3 w-3" />
</Button> </Button>
@@ -200,7 +200,7 @@ export function TeamStatsRow({
variant="outline" variant="outline"
size="sm" size="sm"
onClick={onViewDetails} 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" /> <ChevronRight className="h-3 w-3" />
</Button> </Button>