feat: update CriticalDeadlinesCard to use TaskCard and add disableHover prop

- Replaced custom task rendering with TaskCard component for better consistency and maintainability.
- Introduced disableHover prop to control hover effects on task cards.
- Updated DeadlineOverview to pass disableHover prop as true.
This commit is contained in:
Julien Froidefond
2025-10-03 08:44:14 +02:00
parent 1dfb8f8ac1
commit 1a670cb392
2 changed files with 30 additions and 68 deletions

View File

@@ -2,14 +2,18 @@
import { DeadlineTask } from '@/services/analytics/deadline-analytics';
import { Card } from '@/components/ui/Card';
import { TaskCard } from '@/components/ui/TaskCard';
import { useTasksContext } from '@/contexts/TasksContext';
interface CriticalDeadlinesCardProps {
overdue: DeadlineTask[];
critical: DeadlineTask[];
warning: DeadlineTask[];
disableHover?: boolean;
}
export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDeadlinesCardProps) {
export function CriticalDeadlinesCard({ overdue, critical, warning, disableHover = false }: CriticalDeadlinesCardProps) {
const { tags: availableTags } = useTasksContext();
// Combiner toutes les tâches urgentes et trier par urgence
const urgentTasks = [...overdue, ...critical, ...warning]
.sort((a, b) => {
@@ -46,24 +50,6 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
}
};
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 (
@@ -93,62 +79,37 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
{urgentTasks.map((task) => {
const urgencyStyle = getUrgencyStyle(task);
const getStyleClass = (urgencyLevel: string) => {
const getCardClassName = (urgencyLevel: string) => {
let baseClass = '';
if (urgencyLevel === 'overdue') {
return 'outline-card-red';
baseClass = 'border-[var(--destructive)]/60 shadow-[var(--destructive)]/20';
} else if (urgencyLevel === 'critical') {
return 'outline-card-orange';
baseClass = 'border-[var(--accent)]/60 shadow-[var(--accent)]/20';
} else {
return 'outline-card-yellow';
baseClass = 'border-[var(--yellow)]/60 shadow-[var(--yellow)]/20';
}
if (disableHover) {
baseClass += ' hover:scale-100 hover:shadow-none hover:border-current hover:-translate-y-0';
}
return baseClass;
};
return (
<div
<TaskCard
key={task.id}
className={getStyleClass(task.urgencyLevel)}
>
<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>
variant="detailed"
source={task.source as 'manual' | 'jira' | 'tfs' | 'reminders'}
title={`${urgencyStyle.icon} ${task.title}`}
tags={task.tags}
priority={task.priority as 'low' | 'medium' | 'high' | 'urgent'}
dueDate={task.dueDate}
jiraKey={task.jiraKey}
fontSize="small"
availableTags={availableTags}
className={getCardClassName(task.urgencyLevel)}
/>
);
})}
</div>

View File

@@ -27,6 +27,7 @@ export function DeadlineOverview({ metrics }: DeadlineOverviewProps) {
overdue={metrics.overdue}
critical={metrics.critical}
warning={metrics.warning}
disableHover={true}
/>
</div>
</div>