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

fix: light mode : review some styles

Browse Source
This commit is contained in:
Julien Froidefond
2025-09-23 21:36:50 +02:00
parent fd3827214f
commit 34b9aff6e7
5 changed files with 160 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/app/globals.css
View File

@@ -69,6 +69,92 @@ body {
background: var(--primary); background: var(--primary);
} }
/* Outline card styles pour meilleure lisibilité */
.outline-card-blue {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--primary);
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}
.outline-card-green {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--success);
background-color: color-mix(in srgb, var(--success) 8%, transparent);
border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}
.outline-card-orange {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 8%, transparent);
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.outline-card-red {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--destructive);
background-color: color-mix(in srgb, var(--destructive) 8%, transparent);
border-color: color-mix(in srgb, var(--destructive) 25%, var(--border));
}
.outline-card-purple {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: #8b5cf6; /* purple-500 */
background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
}
.outline-card-yellow {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: #eab308; /* yellow-500 */
background-color: color-mix(in srgb, #eab308 8%, transparent);
border-color: color-mix(in srgb, #eab308 25%, var(--border));
}
.outline-card-gray {
@apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--muted-foreground);
background-color: color-mix(in srgb, var(--muted) 8%, transparent);
border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
}
/* Variantes pour les métriques (padding plus large) */
.outline-metric-blue {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--primary);
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}
.outline-metric-green {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--success);
background-color: color-mix(in srgb, var(--success) 8%, transparent);
border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}
.outline-metric-orange {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 8%, transparent);
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.outline-metric-purple {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: #8b5cf6; /* purple-500 */
background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
}
.outline-metric-gray {
@apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
color: var(--muted-foreground);
background-color: color-mix(in srgb, var(--muted) 8%, transparent);
border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
}
/* Animations tech */ /* Animations tech */
@keyframes glow { @keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.3); } 0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.3); }

70
src/components/dashboard/ManagerWeeklySummary.tsx
View File

@@ -32,19 +32,19 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
const getPriorityBadgeStyle = (priority: 'low' | 'medium' | 'high') => { const getPriorityBadgeStyle = (priority: 'low' | 'medium' | 'high') => {
const config = getPriorityConfig(priority); const config = getPriorityConfig(priority);
const baseClasses = 'text-xs px-2 py-0.5 rounded font-medium'; const baseClasses = 'text-xs px-2 py-0.5 rounded font-medium border';
switch (config.color) { switch (config.color) {
case 'blue': case 'blue':
return `${baseClasses} bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400`; return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border-[var(--primary)]/20`;
case 'yellow': case 'yellow':
return `${baseClasses} bg-yellow-100 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400`; return `${baseClasses} text-[var(--accent)] bg-[var(--accent)]/10 border-[var(--accent)]/20`;
case 'purple': case 'purple':
return `${baseClasses} bg-purple-100 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400`; return `${baseClasses} text-[#8b5cf6] bg-[#8b5cf6]/10 border-[#8b5cf6]/20`;
case 'red': case 'red':
return `${baseClasses} bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400`; return `${baseClasses} text-[var(--destructive)] bg-[var(--destructive)]/10 border-[var(--destructive)]/20`;
default: default:
return `${baseClasses} bg-gray-100 dark:bg-gray-900/20 text-gray-600 dark:text-gray-400`; return `${baseClasses} text-[var(--muted-foreground)] bg-[var(--muted)]/10 border-[var(--muted)]/20`;
} }
}; };
@@ -123,19 +123,19 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
</h2> </h2>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-400"> <div className="outline-card-blue p-4">
<h3 className="font-medium text-blue-900 mb-2">🎯 Points clés accomplis</h3> <h3 className="font-medium mb-2">🎯 Points clés accomplis</h3>
<p className="text-blue-800">{summary.narrative.weekHighlight}</p> <p>{summary.narrative.weekHighlight}</p>
</div> </div>
<div className="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-400"> <div className="outline-card-yellow p-4">
<h3 className="font-medium text-yellow-900 mb-2">⚡ Défis traités</h3> <h3 className="font-medium mb-2">⚡ Défis traités</h3>
<p className="text-yellow-800">{summary.narrative.mainChallenges}</p> <p>{summary.narrative.mainChallenges}</p>
</div> </div>
<div className="bg-green-50 p-4 rounded-lg border-l-4 border-green-400"> <div className="outline-card-green p-4">
<h3 className="font-medium text-green-900 mb-2">🔮 Focus 7 prochains jours</h3> <h3 className="font-medium mb-2">🔮 Focus 7 prochains jours</h3>
<p className="text-green-800">{summary.narrative.nextWeekFocus}</p> <p>{summary.narrative.nextWeekFocus}</p>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -147,42 +147,42 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div className="text-center p-4 bg-blue-50 rounded-lg"> <div className="outline-metric-blue">
<div className="text-2xl font-bold text-blue-600"> <div className="text-2xl font-bold">
{summary.metrics.totalTasksCompleted} {summary.metrics.totalTasksCompleted}
</div> </div>
<div className="text-sm text-blue-600">Tâches complétées</div> <div className="text-sm">Tâches complétées</div>
<div className="text-xs text-blue-500"> <div className="text-xs opacity-75">
dont {summary.metrics.highPriorityTasksCompleted} priorité haute dont {summary.metrics.highPriorityTasksCompleted} priorité haute
</div> </div>
</div> </div>
<div className="text-center p-4 bg-green-50 rounded-lg"> <div className="outline-metric-green">
<div className="text-2xl font-bold text-green-600"> <div className="text-2xl font-bold">
{summary.metrics.totalCheckboxesCompleted} {summary.metrics.totalCheckboxesCompleted}
</div> </div>
<div className="text-sm text-green-600">Todos complétés</div> <div className="text-sm">Todos complétés</div>
<div className="text-xs text-green-500"> <div className="text-xs opacity-75">
dont {summary.metrics.meetingCheckboxesCompleted} meetings dont {summary.metrics.meetingCheckboxesCompleted} meetings
</div> </div>
</div> </div>
<div className="text-center p-4 bg-purple-50 rounded-lg"> <div className="outline-metric-purple">
<div className="text-2xl font-bold text-purple-600"> <div className="text-2xl font-bold">
{summary.keyAccomplishments.filter(a => a.impact === 'high').length} {summary.keyAccomplishments.filter(a => a.impact === 'high').length}
</div> </div>
<div className="text-sm text-purple-600">Items à fort impact</div> <div className="text-sm">Items à fort impact</div>
<div className="text-xs text-purple-500"> <div className="text-xs opacity-75">
/ {summary.keyAccomplishments.length} accomplissements / {summary.keyAccomplishments.length} accomplissements
</div> </div>
</div> </div>
<div className="text-center p-4 bg-orange-50 rounded-lg"> <div className="outline-metric-orange">
<div className="text-2xl font-bold text-orange-600"> <div className="text-2xl font-bold">
{summary.upcomingChallenges.filter(c => c.priority === 'high').length} {summary.upcomingChallenges.filter(c => c.priority === 'high').length}
</div> </div>
<div className="text-sm text-orange-600">Priorités critiques</div> <div className="text-sm">Priorités critiques</div>
<div className="text-xs text-orange-500"> <div className="text-xs opacity-75">
/ {summary.upcomingChallenges.length} enjeux / {summary.upcomingChallenges.length} enjeux
</div> </div>
</div> </div>
@@ -214,7 +214,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
{/* Header compact */} {/* Header compact */}
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-5 h-5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-xs font-bold flex items-center justify-center"> <span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--success)] bg-[var(--success)]/15 border border-[var(--success)]/25">
#{index + 1} #{index + 1}
</span> </span>
<span className={getPriorityBadgeStyle(accomplishment.impact)}> <span className={getPriorityBadgeStyle(accomplishment.impact)}>
@@ -288,7 +288,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
{/* Header compact */} {/* Header compact */}
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-5 h-5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-bold flex items-center justify-center"> <span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--accent)] bg-[var(--accent)]/15 border border-[var(--accent)]/25">
#{index + 1} #{index + 1}
</span> </span>
<span className={getPriorityBadgeStyle(challenge.priority)}> <span className={getPriorityBadgeStyle(challenge.priority)}>
@@ -364,7 +364,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
{/* Header compact */} {/* Header compact */}
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-5 h-5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-xs font-bold flex items-center justify-center"> <span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--success)] bg-[var(--success)]/15 border border-[var(--success)]/25">
#{index + 1} #{index + 1}
</span> </span>
<span className={getPriorityBadgeStyle(accomplishment.impact)}> <span className={getPriorityBadgeStyle(accomplishment.impact)}>
@@ -436,7 +436,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
{/* Header compact */} {/* Header compact */}
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-5 h-5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-bold flex items-center justify-center"> <span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--accent)] bg-[var(--accent)]/15 border border-[var(--accent)]/25">
#{index + 1} #{index + 1}
</span> </span>
<span className={getPriorityBadgeStyle(challenge.priority)}> <span className={getPriorityBadgeStyle(challenge.priority)}>

30
src/components/dashboard/charts/MetricsOverview.tsx
View File

@@ -33,41 +33,41 @@ export function MetricsOverview({ metrics }: MetricsOverviewProps) {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="grid grid-cols-2 lg:grid-cols-5 gap-4"> <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
<div className="text-center p-4 bg-green-50 dark:bg-green-950/20 rounded-lg"> <div className="outline-metric-green">
<div className="text-2xl font-bold text-green-600"> <div className="text-2xl font-bold">
{metrics.summary.totalTasksCompleted} {metrics.summary.totalTasksCompleted}
</div> </div>
<div className="text-sm text-green-600">Terminées</div> <div className="text-sm">Terminées</div>
</div> </div>
<div className="text-center p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg"> <div className="outline-metric-blue">
<div className="text-2xl font-bold text-blue-600"> <div className="text-2xl font-bold">
{metrics.summary.totalTasksCreated} {metrics.summary.totalTasksCreated}
</div> </div>
<div className="text-sm text-blue-600">Créées</div> <div className="text-sm">Créées</div>
</div> </div>
<div className="text-center p-4 bg-purple-50 dark:bg-purple-950/20 rounded-lg"> <div className="outline-metric-purple">
<div className="text-2xl font-bold text-purple-600"> <div className="text-2xl font-bold">
{metrics.summary.averageCompletionRate.toFixed(1)}% {metrics.summary.averageCompletionRate.toFixed(1)}%
</div> </div>
<div className="text-sm text-purple-600">Taux moyen</div> <div className="text-sm">Taux moyen</div>
</div> </div>
<div className="text-center p-4 bg-orange-50 dark:bg-orange-950/20 rounded-lg"> <div className="outline-metric-orange">
<div className="text-2xl font-bold text-orange-600"> <div className="text-2xl font-bold">
{getTrendIcon(metrics.summary.trendsAnalysis.completionTrend)} {getTrendIcon(metrics.summary.trendsAnalysis.completionTrend)}
</div> </div>
<div className="text-sm text-orange-600 capitalize"> <div className="text-sm capitalize">
{metrics.summary.trendsAnalysis.completionTrend} {metrics.summary.trendsAnalysis.completionTrend}
</div> </div>
</div> </div>
<div className="text-center p-4 bg-gray-50 dark:bg-gray-950/20 rounded-lg"> <div className="outline-metric-gray">
<div className="text-2xl font-bold text-gray-600"> <div className="text-2xl font-bold">
{getPatternIcon(metrics.summary.trendsAnalysis.productivityPattern)} {getPatternIcon(metrics.summary.trendsAnalysis.productivityPattern)}
</div> </div>
<div className="text-sm text-gray-600"> <div className="text-sm">
{metrics.summary.trendsAnalysis.productivityPattern === 'consistent' ? 'Régulier' : {metrics.summary.trendsAnalysis.productivityPattern === 'consistent' ? 'Régulier' :
metrics.summary.trendsAnalysis.productivityPattern === 'variable' ? 'Variable' : 'Weekend+'} metrics.summary.trendsAnalysis.productivityPattern === 'variable' ? 'Variable' : 'Weekend+'}
</div> </div>

26
src/components/dashboard/charts/ProductivityInsights.tsx
View File

@@ -76,37 +76,37 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
{/* Insights principaux */} {/* Insights principaux */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Jour le plus productif */} {/* Jour le plus productif */}
<div className="p-4 bg-green-50 dark:bg-green-950/20 rounded-lg"> <div className="outline-card-green p-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<h4 className="font-medium text-green-900 dark:text-green-100"> <h4 className="font-medium">
🏆 Jour champion 🏆 Jour champion
</h4> </h4>
<span className="text-2xl font-bold text-green-600"> <span className="text-2xl font-bold">
{mostProductiveDay.completed} {mostProductiveDay.completed}
</span> </span>
</div> </div>
<p className="text-sm text-green-800 dark:text-green-200"> <p className="text-sm">
{mostProductiveDay.dayName} - {mostProductiveDay.completed} tâches terminées {mostProductiveDay.dayName} - {mostProductiveDay.completed} tâches terminées
</p> </p>
<p className="text-xs text-green-600 mt-1"> <p className="text-xs opacity-75 mt-1">
Taux: {mostProductiveDay.completionRate.toFixed(1)}% Taux: {mostProductiveDay.completionRate.toFixed(1)}%
</p> </p>
</div> </div>
{/* Jour le plus créatif */} {/* Jour le plus créatif */}
<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg"> <div className="outline-card-blue p-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<h4 className="font-medium text-blue-900 dark:text-blue-100"> <h4 className="font-medium">
💡 Jour créatif 💡 Jour créatif
</h4> </h4>
<span className="text-2xl font-bold text-blue-600"> <span className="text-2xl font-bold">
{mostCreativeDay.newTasks} {mostCreativeDay.newTasks}
</span> </span>
</div> </div>
<p className="text-sm text-blue-800 dark:text-blue-200"> <p className="text-sm">
{mostCreativeDay.dayName} - {mostCreativeDay.newTasks} nouvelles tâches {mostCreativeDay.dayName} - {mostCreativeDay.newTasks} nouvelles tâches
</p> </p>
<p className="text-xs text-blue-600 mt-1"> <p className="text-xs opacity-75 mt-1">
{mostCreativeDay.dayName === mostProductiveDay.dayName ? {mostCreativeDay.dayName === mostProductiveDay.dayName ?
'Également jour le plus productif!' : 'Également jour le plus productif!' :
'Journée de planification'} 'Journée de planification'}
@@ -162,11 +162,11 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
</div> </div>
{/* Recommandations */} {/* Recommandations */}
<div className="p-4 bg-yellow-50 dark:bg-yellow-950/20 rounded-lg"> <div className="outline-card-yellow p-4">
<h4 className="font-medium text-yellow-900 dark:text-yellow-100 mb-2 flex items-center gap-2"> <h4 className="font-medium mb-2 flex items-center gap-2">
💡 Recommandations 💡 Recommandations
</h4> </h4>
<div className="space-y-1 text-sm text-yellow-800 dark:text-yellow-200"> <div className="space-y-1 text-sm">
{trend === 'down' && ( {trend === 'down' && (
<p>• Essayez de retrouver votre rythme du début de semaine</p> <p>• Essayez de retrouver votre rythme du début de semaine</p>
)} )}

12
src/components/deadline/CriticalDeadlinesCard.tsx
View File

@@ -93,10 +93,20 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
{urgentTasks.map((task) => { {urgentTasks.map((task) => {
const urgencyStyle = getUrgencyStyle(task); const urgencyStyle = getUrgencyStyle(task);
const getStyleClass = (urgencyLevel: string) => {
if (urgencyLevel === 'overdue') {
return 'outline-card-red';
} else if (urgencyLevel === 'critical') {
return 'outline-card-orange';
} else {
return 'outline-card-yellow';
}
};
return ( return (
<div <div
key={task.id} key={task.id}
className={`p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01] ${urgencyStyle.style}`} className={getStyleClass(task.urgencyLevel)}
> >
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">