254 lines
10 KiB
TypeScript
254 lines
10 KiB
TypeScript
import React from 'react'
|
|
import { Play, Square, Clock, Folder, Tag, MoreVertical, CircleDot, ExternalLink, Trash2 } from 'lucide-react'
|
|
import type { Task } from '../../types/task'
|
|
import { isTaskRunning, calculateTaskTotalSeconds, formatSecondsToTimer } from '../../lib/timeUtils'
|
|
import { useAuth } from '../../contexts/AuthContext'
|
|
import { canDeleteTask } from '../../lib/taskPermissions'
|
|
|
|
interface TaskCardProps {
|
|
task: Task
|
|
onToggleTimer: (task: Task) => void
|
|
onEdit?: (task: Task) => void
|
|
onOpenHistory?: (task: Task) => void
|
|
onDelete?: (task: Task) => void
|
|
isTrackingThis?: boolean
|
|
currentSeconds?: number
|
|
}
|
|
|
|
export const TaskCard: React.FC<TaskCardProps> = ({
|
|
task,
|
|
onToggleTimer,
|
|
onEdit,
|
|
onOpenHistory,
|
|
onDelete,
|
|
isTrackingThis,
|
|
currentSeconds,
|
|
}) => {
|
|
const { user, activeOrg } = useAuth()
|
|
const running = isTrackingThis ?? isTaskRunning(task)
|
|
const totalSeconds = currentSeconds !== undefined ? currentSeconds : calculateTaskTotalSeconds(task)
|
|
const [menuOpen, setMenuOpen] = React.useState(false)
|
|
|
|
const handleDragStart = (e: React.DragEvent) => {
|
|
e.dataTransfer.setData('text/plain', String(task.id))
|
|
e.dataTransfer.effectAllowed = 'move'
|
|
}
|
|
|
|
return (
|
|
<div
|
|
draggable
|
|
onDragStart={handleDragStart}
|
|
className={`group relative rounded-2xl border bg-surface/90 backdrop-blur-md p-4 transition-all duration-200 cursor-grab active:cursor-grabbing hover:shadow-xl hover:-translate-y-0.5 hover:border-brand/40 ${
|
|
running
|
|
? 'border-brand/60 shadow-[0_0_25px_rgba(15,118,110,0.22)] ring-1 ring-brand/40 bg-brand/5'
|
|
: 'border-border-soft shadow-panel'
|
|
}`}
|
|
>
|
|
{/* Top Row: Project & Quick Status Menu */}
|
|
<div className="flex items-center justify-between gap-2 mb-2.5">
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
{task.project ? (
|
|
<span
|
|
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] font-medium border"
|
|
style={{
|
|
backgroundColor: task.project.color ? `${task.project.color}15` : 'rgba(255,255,255,0.05)',
|
|
color: task.project.color || '#94a3b8',
|
|
borderColor: task.project.color ? `${task.project.color}35` : 'rgba(255,255,255,0.1)',
|
|
}}
|
|
>
|
|
<Folder className="w-3 h-3" />
|
|
{task.project.name}
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] text-muted border border-border bg-surface-raised">
|
|
Geral
|
|
</span>
|
|
)}
|
|
|
|
{task.category && (
|
|
<span
|
|
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] font-medium border"
|
|
style={{
|
|
backgroundColor: task.category.color ? `${task.category.color}15` : 'rgba(217,119,6,0.1)',
|
|
color: task.category.color || '#d97706',
|
|
borderColor: task.category.color ? `${task.category.color}35` : 'rgba(217,119,6,0.2)',
|
|
}}
|
|
>
|
|
<Tag className="w-3 h-3" />
|
|
{task.category.name}
|
|
</span>
|
|
)}
|
|
|
|
{task.externalUrl && (
|
|
<a
|
|
href={task.externalUrl.startsWith('http') ? task.externalUrl : `https://${task.externalUrl}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={(e) => e.stopPropagation()}
|
|
title={task.externalUrl}
|
|
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[11px] font-medium border border-border bg-surface-raised text-muted hover:text-brand hover:border-brand/40 transition-colors cursor-pointer"
|
|
>
|
|
<ExternalLink className="w-3 h-3 text-brand" />
|
|
<span>Link</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
{/* More Actions Menu */}
|
|
{(onEdit || onOpenHistory || (onDelete && canDeleteTask(task, user, activeOrg))) && (
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setMenuOpen(!menuOpen)
|
|
}}
|
|
className="p-1 rounded-md text-muted hover:text-foreground hover:bg-surface-raised transition-colors"
|
|
title="Ações"
|
|
>
|
|
<MoreVertical className="w-4 h-4" />
|
|
</button>
|
|
|
|
{menuOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-40"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setMenuOpen(false)
|
|
}}
|
|
/>
|
|
<div className="absolute right-0 top-6 z-50 w-44 rounded-xl border border-border bg-surface-raised p-1.5 shadow-xl">
|
|
{onEdit && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onEdit(task)
|
|
setMenuOpen(false)
|
|
}}
|
|
className="w-full px-2 py-1.5 rounded-lg text-xs text-left text-foreground/80 hover:bg-surface-sunken hover:text-foreground transition-colors"
|
|
>
|
|
Editar Detalhes
|
|
</button>
|
|
)}
|
|
|
|
{onOpenHistory && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onOpenHistory(task)
|
|
setMenuOpen(false)
|
|
}}
|
|
className="w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-xs text-left text-foreground/80 hover:bg-surface-sunken hover:text-foreground transition-colors"
|
|
>
|
|
<span>Histórico de Tempo</span>
|
|
<Clock className="w-3.5 h-3.5 text-muted" />
|
|
</button>
|
|
)}
|
|
|
|
{onDelete && canDeleteTask(task, user, activeOrg) && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setMenuOpen(false)
|
|
if (window.confirm(`Tem certeza que deseja excluir a tarefa "${task.title}"?`)) {
|
|
onDelete(task)
|
|
}
|
|
}}
|
|
className="w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-xs text-left text-rose-500 hover:bg-rose-500/10 transition-colors"
|
|
>
|
|
<span>Excluir Tarefa</span>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3
|
|
onClick={() => onEdit?.(task)}
|
|
className="font-semibold text-sm text-foreground hover:text-brand transition-colors cursor-pointer line-clamp-2 mb-1.5"
|
|
>
|
|
{task.title}
|
|
</h3>
|
|
|
|
{/* Description preview */}
|
|
{task.description && (
|
|
<p className="text-xs text-muted line-clamp-2 mb-3 leading-relaxed">
|
|
{task.description}
|
|
</p>
|
|
)}
|
|
|
|
{/* Footer: User Avatar & Live Timer Controls */}
|
|
<div className="flex items-center justify-between pt-3 border-t border-border/60 mt-2">
|
|
{/* Assignee / Creator */}
|
|
<div className="flex items-center gap-1.5">
|
|
{task.user ? (
|
|
<div
|
|
className="w-6 h-6 rounded-full bg-brand/20 border border-brand/30 flex items-center justify-center text-[10px] font-bold text-brand uppercase"
|
|
title={task.user.name || task.user.email}
|
|
>
|
|
{task.user.name ? task.user.name.charAt(0) : task.user.email.charAt(0)}
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="w-6 h-6 rounded-full bg-surface-raised border border-border-soft flex items-center justify-center text-[10px] text-muted"
|
|
title="Sem responsável"
|
|
>
|
|
<CircleDot className="w-3 h-3" />
|
|
</div>
|
|
)}
|
|
<span className="text-[11px] text-muted max-w-[90px] truncate">
|
|
{task.user?.name || task.user?.email?.split('@')[0] || 'Livre'}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Timer button & display */}
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onOpenHistory?.(task)
|
|
}}
|
|
title="Clique para ver o histórico de tempo"
|
|
className={`flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-mono transition-colors cursor-pointer hover:opacity-85 ${
|
|
running
|
|
? 'bg-teal-500/15 text-teal-700 dark:bg-brand/20 dark:text-teal-300 font-semibold'
|
|
: 'bg-surface-sunken text-muted'
|
|
}`}
|
|
>
|
|
<Clock className={`w-3 h-3 ${running ? 'animate-pulse text-teal-700 dark:text-brand' : ''}`} />
|
|
<span>{formatSecondsToTimer(totalSeconds)}</span>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onToggleTimer(task)
|
|
}}
|
|
title={running ? 'Parar cronômetro' : 'Iniciar cronômetro'}
|
|
className={`p-1.5 rounded-lg transition-all duration-200 ${
|
|
running
|
|
? 'bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 ring-1 ring-rose-500/40'
|
|
: 'bg-teal-500/10 text-teal-700 hover:bg-teal-500/20 dark:bg-brand/15 dark:text-teal-300 dark:hover:bg-brand/25 ring-1 ring-teal-600/20 dark:ring-brand/30'
|
|
}`}
|
|
>
|
|
{running ? (
|
|
<Square className="w-3.5 h-3.5 fill-rose-300" />
|
|
) : (
|
|
<Play className="w-3.5 h-3.5 fill-teal-700 dark:fill-teal-300" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|