feat: update dashboard components and analytics for 7-day summaries
- Modified `ManagerWeeklySummary`, `MetricsTab`, and `ProductivityAnalytics` to reflect a focus on the last 7 days instead of the current week. - Enhanced `ManagerSummaryService` and `MetricsService` to calculate metrics over a sliding 7-day window, improving data relevance. - Added a new utility function `formatDistanceToNow` for better date formatting in French. - Updated comments and documentation to clarify changes in timeframes.
This commit is contained in:
Julien Froidefond
169
src/components/deadline/CriticalDeadlinesCard.tsx
Normal file
169
src/components/deadline/CriticalDeadlinesCard.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
'use client';
|
||||
|
||||
import { DeadlineTask } from '@/services/analytics/deadline-analytics';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
|
||||
interface CriticalDeadlinesCardProps {
|
||||
overdue: DeadlineTask[];
|
||||
critical: DeadlineTask[];
|
||||
warning: DeadlineTask[];
|
||||
}
|
||||
|
||||
export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDeadlinesCardProps) {
|
||||
// Combiner toutes les tâches urgentes et trier par urgence
|
||||
const urgentTasks = [...overdue, ...critical, ...warning]
|
||||
.sort((a, b) => {
|
||||
// En retard d'abord, puis critique, puis attention
|
||||
const urgencyOrder: Record<string, number> = { 'overdue': 0, 'critical': 1, 'warning': 2 };
|
||||
if (urgencyOrder[a.urgencyLevel] !== urgencyOrder[b.urgencyLevel]) {
|
||||
return urgencyOrder[a.urgencyLevel] - urgencyOrder[b.urgencyLevel];
|
||||
}
|
||||
// Si même urgence, trier par jours restants
|
||||
return a.daysRemaining - b.daysRemaining;
|
||||
});
|
||||
|
||||
const getUrgencyStyle = (task: DeadlineTask) => {
|
||||
if (task.urgencyLevel === 'overdue') {
|
||||
return {
|
||||
icon: '🔴',
|
||||
text: task.daysRemaining === -1 ? 'En retard de 1 jour' : `En retard de ${Math.abs(task.daysRemaining)} jours`,
|
||||
style: 'text-red-700 bg-red-50/40 border-red-200/60 dark:bg-red-950/20 dark:border-red-800/40 dark:text-red-300'
|
||||
};
|
||||
} else if (task.urgencyLevel === 'critical') {
|
||||
return {
|
||||
icon: '🟠',
|
||||
text: task.daysRemaining === 0 ? 'Échéance aujourd\'hui' :
|
||||
task.daysRemaining === 1 ? 'Échéance demain' :
|
||||
`Dans ${task.daysRemaining} jours`,
|
||||
style: 'text-orange-700 bg-orange-50/40 border-orange-200/60 dark:bg-orange-950/20 dark:border-orange-800/40 dark:text-orange-300'
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
icon: '🟡',
|
||||
text: `Dans ${task.daysRemaining} jours`,
|
||||
style: 'text-yellow-700 bg-yellow-50/40 border-yellow-200/60 dark:bg-yellow-950/20 dark:border-yellow-800/40 dark:text-yellow-300'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityIcon = (priority: string) => {
|
||||
switch (priority) {
|
||||
case 'urgent': return '🔥';
|
||||
case 'high': return '⬆️';
|
||||
case 'medium': return '➡️';
|
||||
case 'low': return '⬇️';
|
||||
default: return '❓';
|
||||
}
|
||||
};
|
||||
|
||||
const getSourceIcon = (source: string) => {
|
||||
switch (source.toLowerCase()) {
|
||||
case 'jira': return '🔵';
|
||||
case 'tfs': return '🟣';
|
||||
case 'manual': return '✏️';
|
||||
default: return '📋';
|
||||
}
|
||||
};
|
||||
|
||||
if (urgentTasks.length === 0) {
|
||||
return (
|
||||
<Card className="p-6 hover:shadow-lg transition-shadow">
|
||||
<h3 className="text-lg font-semibold mb-4">Tâches Urgentes</h3>
|
||||
<div className="text-center py-8">
|
||||
<div className="text-4xl mb-2">🎉</div>
|
||||
<h4 className="text-lg font-medium text-green-600 dark:text-green-400 mb-2">Excellent !</h4>
|
||||
<p className="text-sm text-[var(--muted-foreground)]">
|
||||
Aucune tâche urgente ou critique
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-6 hover:shadow-lg transition-shadow">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">Tâches Urgentes</h3>
|
||||
<div className="text-sm text-[var(--muted-foreground)]">
|
||||
{urgentTasks.length} tâche{urgentTasks.length > 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent pr-2">
|
||||
{urgentTasks.map((task) => {
|
||||
const urgencyStyle = getUrgencyStyle(task);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
className={`p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01] ${urgencyStyle.style}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-sm">{urgencyStyle.icon}</span>
|
||||
<span className="text-sm">{getSourceIcon(task.source)}</span>
|
||||
<span className="text-sm">{getPriorityIcon(task.priority)}</span>
|
||||
{task.jiraKey && (
|
||||
<span className="text-xs px-1.5 py-0.5 bg-[var(--border)] rounded font-mono">
|
||||
{task.jiraKey}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h4 className="font-medium text-sm leading-tight mb-0.5 truncate" title={task.title}>
|
||||
{task.title}
|
||||
</h4>
|
||||
|
||||
<div className="text-xs opacity-75">
|
||||
{urgencyStyle.text}
|
||||
</div>
|
||||
|
||||
{task.tags.length > 0 && (
|
||||
<div className="flex gap-1 mt-1.5 flex-wrap">
|
||||
{task.tags.slice(0, 2).map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="text-xs px-1.5 py-0.5 bg-[var(--accent)]/60 text-[var(--accent-foreground)] rounded"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{task.tags.length > 2 && (
|
||||
<span className="text-xs text-[var(--muted-foreground)] opacity-70">
|
||||
+{task.tags.length - 2}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{urgentTasks.length > 0 && (
|
||||
<div className="pt-3 border-t border-[var(--border)] mt-4">
|
||||
<div className="flex flex-wrap gap-3 text-xs text-[var(--muted-foreground)] justify-center">
|
||||
{overdue.length > 0 && (
|
||||
<span className="text-red-600/80 dark:text-red-400/80 font-medium">
|
||||
{overdue.length} en retard
|
||||
</span>
|
||||
)}
|
||||
{critical.length > 0 && (
|
||||
<span className="text-orange-600/80 dark:text-orange-400/80 font-medium">
|
||||
{critical.length} critique{critical.length > 1 ? 's' : ''}
|
||||
</span>
|
||||
)}
|
||||
{warning.length > 0 && (
|
||||
<span className="text-yellow-600/80 dark:text-yellow-400/80 font-medium">
|
||||
{warning.length} attention
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user