1021 lines
61 KiB
TypeScript
1021 lines
61 KiB
TypeScript
import React, { useRef, useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
CheckIcon,
|
|
XMarkIcon,
|
|
FolderIcon,
|
|
TagIcon,
|
|
ChevronDownIcon,
|
|
PauseCircleIcon,
|
|
PlayCircleIcon,
|
|
CheckCircleIcon,
|
|
ExclamationTriangleIcon,
|
|
CalendarDaysIcon,
|
|
CalendarIcon,
|
|
PlayIcon,
|
|
FireIcon,
|
|
ArrowUpIcon,
|
|
ArrowDownIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import { Link } from 'react-router-dom';
|
|
import { Task, PriorityType } from '../../../entities/Task';
|
|
import { formatDateTime } from '../../../utils/dateUtils';
|
|
|
|
interface TaskDetailsHeaderProps {
|
|
task: Task;
|
|
onTitleUpdate: (newTitle: string) => Promise<void>;
|
|
onStatusUpdate: (newStatus: number) => Promise<void>;
|
|
onPriorityUpdate: (newPriority: PriorityType) => Promise<void>;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
getProjectLink?: (project: any) => string;
|
|
getTagLink?: (tag: any) => string;
|
|
activePill: string;
|
|
onPillChange: (pill: string) => void;
|
|
showOverdueIcon?: boolean;
|
|
showPastDueBadge?: boolean;
|
|
onOverdueIconClick?: () => void;
|
|
isOverdueAlertVisible?: boolean;
|
|
onDismissOverdueAlert?: () => void;
|
|
onToggleTodayPlan?: () => void;
|
|
onQuickStatusToggle?: () => void;
|
|
attachmentCount?: number;
|
|
subtasksCount?: number;
|
|
}
|
|
|
|
const TaskDetailsHeader: React.FC<TaskDetailsHeaderProps> = ({
|
|
task,
|
|
onTitleUpdate,
|
|
onStatusUpdate,
|
|
onPriorityUpdate,
|
|
onEdit,
|
|
onDelete,
|
|
getProjectLink,
|
|
getTagLink,
|
|
activePill,
|
|
onPillChange,
|
|
showOverdueIcon = false,
|
|
showPastDueBadge = false,
|
|
onOverdueIconClick,
|
|
isOverdueAlertVisible = false,
|
|
onDismissOverdueAlert,
|
|
onToggleTodayPlan,
|
|
onQuickStatusToggle,
|
|
attachmentCount = 0,
|
|
subtasksCount = 0,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [isEditingTitle, setIsEditingTitle] = useState(false);
|
|
const [editedTitle, setEditedTitle] = useState(task.name);
|
|
const [actionsMenuOpen, setActionsMenuOpen] = useState(false);
|
|
const [statusDropdownOpen, setStatusDropdownOpen] = useState(false);
|
|
const [priorityDropdownOpen, setPriorityDropdownOpen] = useState(false);
|
|
const titleInputRef = useRef<HTMLInputElement>(null);
|
|
const actionsMenuRef = useRef<HTMLDivElement>(null);
|
|
const statusDropdownRef = useRef<HTMLDivElement>(null);
|
|
const priorityDropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
setEditedTitle(task.name);
|
|
}, [task.name]);
|
|
|
|
useEffect(() => {
|
|
if (isEditingTitle && titleInputRef.current) {
|
|
titleInputRef.current.focus();
|
|
titleInputRef.current.select();
|
|
}
|
|
}, [isEditingTitle]);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (
|
|
actionsMenuOpen &&
|
|
actionsMenuRef.current &&
|
|
!actionsMenuRef.current.contains(e.target as Node)
|
|
) {
|
|
setActionsMenuOpen(false);
|
|
}
|
|
if (
|
|
statusDropdownOpen &&
|
|
statusDropdownRef.current &&
|
|
!statusDropdownRef.current.contains(e.target as Node)
|
|
) {
|
|
setStatusDropdownOpen(false);
|
|
}
|
|
if (
|
|
priorityDropdownOpen &&
|
|
priorityDropdownRef.current &&
|
|
!priorityDropdownRef.current.contains(e.target as Node)
|
|
) {
|
|
setPriorityDropdownOpen(false);
|
|
}
|
|
};
|
|
|
|
if (actionsMenuOpen || statusDropdownOpen || priorityDropdownOpen) {
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () =>
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
}
|
|
}, [actionsMenuOpen, statusDropdownOpen, priorityDropdownOpen]);
|
|
|
|
const handleStartTitleEdit = () => {
|
|
setIsEditingTitle(true);
|
|
};
|
|
|
|
const handleSaveTitle = async () => {
|
|
if (editedTitle.trim() && editedTitle !== task.name) {
|
|
await onTitleUpdate(editedTitle.trim());
|
|
}
|
|
setIsEditingTitle(false);
|
|
};
|
|
|
|
const handleCancelTitleEdit = () => {
|
|
setEditedTitle(task.name);
|
|
setIsEditingTitle(false);
|
|
};
|
|
|
|
const handleTitleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter') {
|
|
handleSaveTitle();
|
|
} else if (e.key === 'Escape') {
|
|
handleCancelTitleEdit();
|
|
}
|
|
};
|
|
|
|
const getStatusLabel = () => {
|
|
const status = task.status;
|
|
if (status === 'not_started' || status === 0) {
|
|
return t('task.status.notStarted', 'Not started');
|
|
} else if (status === 'in_progress' || status === 1) {
|
|
return t('task.status.inProgress', 'In progress');
|
|
} else if (status === 'done' || status === 2) {
|
|
return t('task.status.done', 'Done');
|
|
} else if (status === 'archived' || status === 3) {
|
|
return t('task.status.archived', 'Archived');
|
|
} else if (status === 'waiting' || status === 4) {
|
|
return t('task.status.waiting', 'Waiting');
|
|
}
|
|
return t('task.status.notStarted', 'Not started');
|
|
};
|
|
|
|
const getStatusButtonClass = () => {
|
|
const status = task.status;
|
|
|
|
if (status === 'not_started' || status === 0) {
|
|
return 'px-2 sm:px-2.5 py-1 rounded-md text-xs font-medium transition-colors flex items-center gap-1 sm:gap-2 sm:ml-2 border border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/60';
|
|
}
|
|
|
|
const baseClass =
|
|
'px-2 sm:px-2.5 py-1 rounded-md text-xs font-medium transition-colors flex items-center gap-1 sm:gap-2 sm:ml-2 border';
|
|
|
|
if (status === 'in_progress' || status === 1) {
|
|
return `${baseClass} border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/30`;
|
|
} else if (status === 'done' || status === 2) {
|
|
return `${baseClass} border-green-500 text-green-600 dark:border-green-400 dark:text-green-300 hover:bg-green-50 dark:hover:bg-green-900/30`;
|
|
} else if (status === 'archived' || status === 3) {
|
|
return `${baseClass} border-purple-500 text-purple-600 dark:border-purple-400 dark:text-purple-300 hover:bg-purple-50 dark:hover:bg-purple-900/30`;
|
|
} else if (status === 'waiting' || status === 4) {
|
|
return `${baseClass} border-yellow-500 text-yellow-600 dark:border-yellow-400 dark:text-yellow-300 hover:bg-yellow-50 dark:hover:bg-yellow-900/30`;
|
|
}
|
|
return `${baseClass} border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/60`;
|
|
};
|
|
|
|
const handleStatusChange = async (newStatus: number | string) => {
|
|
setStatusDropdownOpen(false);
|
|
const statusNum =
|
|
typeof newStatus === 'string' ? parseInt(newStatus) : newStatus;
|
|
await onStatusUpdate(statusNum);
|
|
};
|
|
|
|
const getStatusIcon = (
|
|
statusOverride?: number | string
|
|
): React.ElementType => {
|
|
const status =
|
|
typeof statusOverride !== 'undefined'
|
|
? statusOverride
|
|
: task.status;
|
|
|
|
if (status === 'in_progress' || status === 1) {
|
|
return PlayCircleIcon;
|
|
} else if (status === 'done' || status === 2) {
|
|
return CheckCircleIcon;
|
|
}
|
|
return PauseCircleIcon;
|
|
};
|
|
|
|
const getStatusIconClass = (statusOverride?: number | string) => {
|
|
const status =
|
|
typeof statusOverride !== 'undefined'
|
|
? statusOverride
|
|
: task.status;
|
|
|
|
if (status === 'in_progress' || status === 1) {
|
|
return 'text-blue-500 dark:text-blue-400';
|
|
} else if (status === 'done' || status === 2) {
|
|
return 'text-green-500 dark:text-green-400';
|
|
}
|
|
return 'text-gray-500 dark:text-gray-400';
|
|
};
|
|
|
|
const getPriorityLabel = (priorityOverride?: PriorityType) => {
|
|
const priority =
|
|
typeof priorityOverride !== 'undefined'
|
|
? priorityOverride
|
|
: task.priority;
|
|
|
|
if (priority === 'low' || priority === 0) {
|
|
return t('priority.low', 'Low');
|
|
} else if (priority === 'medium' || priority === 1) {
|
|
return t('priority.medium', 'Medium');
|
|
} else if (priority === 'high' || priority === 2) {
|
|
return t('priority.high', 'High');
|
|
}
|
|
return t('priority.none', 'None');
|
|
};
|
|
|
|
const getPriorityButtonClass = () => {
|
|
const priority = task.priority;
|
|
|
|
if (priority === null || priority === undefined) {
|
|
return 'px-2 sm:px-2.5 py-1 rounded-md text-xs font-medium transition-colors flex items-center gap-1 sm:gap-2 sm:ml-1 border border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/60';
|
|
}
|
|
|
|
const baseClass =
|
|
'px-2 sm:px-2.5 py-1 rounded-md text-xs font-medium transition-colors flex items-center gap-1 sm:gap-2 sm:ml-1 border';
|
|
|
|
if (priority === 'low' || priority === 0) {
|
|
return `${baseClass} border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/30`;
|
|
} else if (priority === 'medium' || priority === 1) {
|
|
return `${baseClass} border-yellow-500 text-yellow-600 dark:border-yellow-400 dark:text-yellow-300 hover:bg-yellow-50 dark:hover:bg-yellow-900/30`;
|
|
} else if (priority === 'high' || priority === 2) {
|
|
return `${baseClass} border-red-500 text-red-600 dark:border-red-400 dark:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/30`;
|
|
}
|
|
return `${baseClass} border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/60`;
|
|
};
|
|
|
|
const handlePriorityChange = async (newPriority: PriorityType) => {
|
|
setPriorityDropdownOpen(false);
|
|
await onPriorityUpdate(newPriority);
|
|
};
|
|
|
|
const getPriorityIcon = (
|
|
priorityOverride?: PriorityType
|
|
): React.ElementType => {
|
|
const priority =
|
|
typeof priorityOverride !== 'undefined'
|
|
? priorityOverride
|
|
: task.priority;
|
|
|
|
if (priority === 'low' || priority === 0) {
|
|
return ArrowDownIcon;
|
|
} else if (priority === 'medium' || priority === 1) {
|
|
return ArrowUpIcon;
|
|
} else if (priority === 'high' || priority === 2) {
|
|
return FireIcon;
|
|
}
|
|
return XMarkIcon;
|
|
};
|
|
|
|
const getPriorityIconClass = (priorityOverride?: PriorityType) => {
|
|
const priority =
|
|
typeof priorityOverride !== 'undefined'
|
|
? priorityOverride
|
|
: task.priority;
|
|
|
|
if (priority === 'low' || priority === 0) {
|
|
return 'text-blue-500 dark:text-blue-400';
|
|
} else if (priority === 'medium' || priority === 1) {
|
|
return 'text-yellow-500 dark:text-yellow-400';
|
|
} else if (priority === 'high' || priority === 2) {
|
|
return 'text-red-500 dark:text-red-400';
|
|
}
|
|
return 'text-gray-500 dark:text-gray-400';
|
|
};
|
|
|
|
const formattedUpdatedAt = task.updated_at
|
|
? formatDateTime(new Date(task.updated_at))
|
|
: null;
|
|
|
|
return (
|
|
<div className="mb-6">
|
|
<div className="rounded-lg shadow-sm bg-white dark:bg-gray-900 border-2 border-gray-50 dark:border-gray-800 px-6 py-5">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
{isEditingTitle ? (
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
ref={titleInputRef}
|
|
type="text"
|
|
value={editedTitle}
|
|
onChange={(e) =>
|
|
setEditedTitle(e.target.value)
|
|
}
|
|
onKeyDown={handleTitleKeyDown}
|
|
onBlur={handleSaveTitle}
|
|
className="text-2xl font-normal text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border-2 border-blue-500 dark:border-blue-400 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 w-full"
|
|
placeholder={t(
|
|
'task.titlePlaceholder',
|
|
'Enter task title'
|
|
)}
|
|
/>
|
|
<button
|
|
onClick={handleSaveTitle}
|
|
className="p-1.5 text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 rounded-full transition-colors duration-200"
|
|
title={t('common.save', 'Save')}
|
|
>
|
|
<CheckIcon className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
onClick={handleCancelTitleEdit}
|
|
className="p-1.5 text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 rounded-full transition-colors duration-200"
|
|
title={t('common.cancel', 'Cancel')}
|
|
>
|
|
<XMarkIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<h2
|
|
onClick={handleStartTitleEdit}
|
|
className="text-2xl font-normal text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded px-2 py-1 -mx-2 transition-colors"
|
|
title={t(
|
|
'task.clickToEditTitle',
|
|
'Click to edit title'
|
|
)}
|
|
>
|
|
{task.name}
|
|
</h2>
|
|
|
|
{/* Status Dropdown Button - Next to title */}
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<div
|
|
className="relative flex-shrink-0"
|
|
ref={statusDropdownRef}
|
|
>
|
|
<button
|
|
className={getStatusButtonClass()}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setStatusDropdownOpen(
|
|
!statusDropdownOpen
|
|
);
|
|
}}
|
|
aria-haspopup="true"
|
|
aria-expanded={
|
|
statusDropdownOpen
|
|
}
|
|
>
|
|
{React.createElement(
|
|
getStatusIcon(),
|
|
{
|
|
className: `h-4 w-4 ${getStatusIconClass()}`,
|
|
}
|
|
)}
|
|
<span className="capitalize hidden sm:inline">
|
|
{getStatusLabel()}
|
|
</span>
|
|
<ChevronDownIcon className="h-4 w-4" />
|
|
</button>
|
|
{statusDropdownOpen && (
|
|
<div className="absolute left-0 sm:right-0 sm:left-auto mt-2 w-48 rounded-lg shadow-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 z-20">
|
|
<button
|
|
className={`w-full text-left px-3 py-2 text-sm rounded-t-lg flex items-center gap-2 ${
|
|
task.status === 0 ||
|
|
task.status ===
|
|
'not_started'
|
|
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium'
|
|
: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|
}`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleStatusChange(
|
|
0
|
|
);
|
|
}}
|
|
>
|
|
<PauseCircleIcon
|
|
className={`h-4 w-4 ${getStatusIconClass(0)}`}
|
|
/>
|
|
<span className="capitalize flex-1">
|
|
{t(
|
|
'task.status.notStarted',
|
|
'Not started'
|
|
)}
|
|
</span>
|
|
{(task.status === 0 ||
|
|
task.status ===
|
|
'not_started') && (
|
|
<CheckIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 ${
|
|
task.status === 1 ||
|
|
task.status ===
|
|
'in_progress'
|
|
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium'
|
|
: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|
}`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleStatusChange(
|
|
1
|
|
);
|
|
}}
|
|
>
|
|
<PlayCircleIcon
|
|
className={`h-4 w-4 ${getStatusIconClass(1)}`}
|
|
/>
|
|
<span className="capitalize flex-1">
|
|
{t(
|
|
'task.status.inProgress',
|
|
'In progress'
|
|
)}
|
|
</span>
|
|
{(task.status === 1 ||
|
|
task.status ===
|
|
'in_progress') && (
|
|
<CheckIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
className={`w-full text-left px-3 py-2 text-sm rounded-b-lg flex items-center gap-2 ${
|
|
task.status === 2 ||
|
|
task.status ===
|
|
'done'
|
|
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium'
|
|
: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|
}`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleStatusChange(
|
|
2
|
|
);
|
|
}}
|
|
>
|
|
<CheckCircleIcon
|
|
className={`h-4 w-4 ${getStatusIconClass(2)}`}
|
|
/>
|
|
<span className="capitalize flex-1">
|
|
{t(
|
|
'task.status.setAsDone',
|
|
'Set as done'
|
|
)}
|
|
</span>
|
|
{(task.status === 2 ||
|
|
task.status ===
|
|
'done') && (
|
|
<CheckIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Priority Dropdown Button - Next to status */}
|
|
<div
|
|
className="relative flex-shrink-0"
|
|
ref={priorityDropdownRef}
|
|
>
|
|
<button
|
|
className={getPriorityButtonClass()}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setPriorityDropdownOpen(
|
|
!priorityDropdownOpen
|
|
);
|
|
}}
|
|
aria-haspopup="true"
|
|
aria-expanded={
|
|
priorityDropdownOpen
|
|
}
|
|
>
|
|
{React.createElement(
|
|
getPriorityIcon(),
|
|
{
|
|
className: `h-4 w-4 ${getPriorityIconClass()}`,
|
|
}
|
|
)}
|
|
<span className="capitalize hidden sm:inline">
|
|
{getPriorityLabel()}
|
|
</span>
|
|
<ChevronDownIcon className="h-4 w-4" />
|
|
</button>
|
|
{priorityDropdownOpen && (
|
|
<div className="absolute left-0 sm:right-0 sm:left-auto mt-2 w-48 rounded-lg shadow-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 z-20">
|
|
<button
|
|
className={`w-full text-left px-3 py-2 text-sm rounded-t-lg flex items-center gap-2 ${
|
|
task.priority ===
|
|
null ||
|
|
task.priority ===
|
|
undefined
|
|
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium'
|
|
: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|
}`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handlePriorityChange(
|
|
null
|
|
);
|
|
}}
|
|
>
|
|
<XMarkIcon
|
|
className={`h-4 w-4 ${getPriorityIconClass(null)}`}
|
|
/>
|
|
<span className="capitalize flex-1">
|
|
{t(
|
|
'priority.none',
|
|
'None'
|
|
)}
|
|
</span>
|
|
{(task.priority ===
|
|
null ||
|
|
task.priority ===
|
|
undefined) && (
|
|
<CheckIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 ${
|
|
task.priority ===
|
|
'low' ||
|
|
task.priority === 0
|
|
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium'
|
|
: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|
}`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handlePriorityChange(
|
|
'low'
|
|
);
|
|
}}
|
|
>
|
|
<ArrowDownIcon
|
|
className={`h-4 w-4 ${getPriorityIconClass('low')}`}
|
|
/>
|
|
<span className="capitalize flex-1">
|
|
{t(
|
|
'priority.low',
|
|
'Low'
|
|
)}
|
|
</span>
|
|
{(task.priority ===
|
|
'low' ||
|
|
task.priority ===
|
|
0) && (
|
|
<CheckIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 ${
|
|
task.priority ===
|
|
'medium' ||
|
|
task.priority === 1
|
|
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium'
|
|
: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|
}`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handlePriorityChange(
|
|
'medium'
|
|
);
|
|
}}
|
|
>
|
|
<ArrowUpIcon
|
|
className={`h-4 w-4 ${getPriorityIconClass('medium')}`}
|
|
/>
|
|
<span className="capitalize flex-1">
|
|
{t(
|
|
'priority.medium',
|
|
'Medium'
|
|
)}
|
|
</span>
|
|
{(task.priority ===
|
|
'medium' ||
|
|
task.priority ===
|
|
1) && (
|
|
<CheckIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
className={`w-full text-left px-3 py-2 text-sm rounded-b-lg flex items-center gap-2 ${
|
|
task.priority ===
|
|
'high' ||
|
|
task.priority === 2
|
|
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium'
|
|
: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|
}`}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handlePriorityChange(
|
|
'high'
|
|
);
|
|
}}
|
|
>
|
|
<FireIcon
|
|
className={`h-4 w-4 ${getPriorityIconClass('high')}`}
|
|
/>
|
|
<span className="capitalize flex-1">
|
|
{t(
|
|
'priority.high',
|
|
'High'
|
|
)}
|
|
</span>
|
|
{(task.priority ===
|
|
'high' ||
|
|
task.priority ===
|
|
2) && (
|
|
<CheckIcon className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Past Due Badge - Right of priority button */}
|
|
{showPastDueBadge && (
|
|
<div className="flex items-center gap-1 px-2 py-1 rounded-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 flex-shrink-0">
|
|
<ExclamationTriangleIcon className="h-3 w-3 text-red-600 dark:text-red-400" />
|
|
<span className="text-xs font-medium text-red-700 dark:text-red-300 hidden sm:inline">
|
|
{t(
|
|
'task.pastDue',
|
|
'Past Due'
|
|
)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{formattedUpdatedAt && (
|
|
<span className="text-xs text-gray-400 dark:text-gray-500 sm:pl-1 mt-1 sm:mt-0">
|
|
{t(
|
|
'task.lastUpdatedAt',
|
|
'Updated at'
|
|
)}
|
|
:{' '}
|
|
<span className="text-gray-500 dark:text-gray-400">
|
|
{formattedUpdatedAt}
|
|
</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* Project and tags display below title */}
|
|
{(task.Project ||
|
|
(task.tags && task.tags.length > 0)) && (
|
|
<div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mt-2 px-2 -mx-2 gap-2 flex-wrap">
|
|
{task.Project && (
|
|
<Link
|
|
to={
|
|
getProjectLink
|
|
? getProjectLink(
|
|
task.Project
|
|
)
|
|
: '#'
|
|
}
|
|
className="flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-200 hover:underline transition-colors"
|
|
onClick={(e) =>
|
|
e.stopPropagation()
|
|
}
|
|
>
|
|
<FolderIcon className="h-4 w-4" />
|
|
<span>{task.Project.name}</span>
|
|
</Link>
|
|
)}
|
|
{task.tags && task.tags.length > 0 && (
|
|
<div className="flex items-center gap-1 flex-wrap">
|
|
<TagIcon className="h-4 w-4" />
|
|
<div className="flex flex-wrap">
|
|
{task.tags.map(
|
|
(
|
|
tag: any,
|
|
index: number
|
|
) => (
|
|
<React.Fragment
|
|
key={
|
|
tag.uid ||
|
|
tag.id ||
|
|
tag.name
|
|
}
|
|
>
|
|
<Link
|
|
to={
|
|
getTagLink
|
|
? getTagLink(
|
|
tag
|
|
)
|
|
: '#'
|
|
}
|
|
className="hover:text-gray-900 dark:hover:text-gray-200 hover:underline transition-colors"
|
|
onClick={(
|
|
e
|
|
) =>
|
|
e.stopPropagation()
|
|
}
|
|
>
|
|
{tag.name}
|
|
</Link>
|
|
{index <
|
|
task.tags!
|
|
.length -
|
|
1 && (
|
|
<span>
|
|
{', '}
|
|
</span>
|
|
)}
|
|
</React.Fragment>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Divider - Edge to edge */}
|
|
<div className="mt-4 mb-4 -mx-6 border-t border-gray-200 dark:border-gray-700"></div>
|
|
|
|
{/* Pills Navigation */}
|
|
<div className="flex items-center justify-between gap-3 flex-wrap">
|
|
<div className="flex gap-2 flex-wrap">
|
|
<button
|
|
onClick={() => onPillChange('overview')}
|
|
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
|
|
activePill === 'overview'
|
|
? 'bg-blue-500 dark:bg-blue-600 text-white'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
{t('task.overview', 'Overview')}
|
|
</button>
|
|
<button
|
|
onClick={() => onPillChange('subtasks')}
|
|
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors relative ${
|
|
activePill === 'subtasks'
|
|
? 'bg-blue-500 dark:bg-blue-600 text-white'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
{t('task.subtasks', 'Subtasks')}
|
|
{subtasksCount > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-blue-500 dark:bg-blue-400 rounded-full border border-white dark:border-gray-900"></span>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => onPillChange('recurrence')}
|
|
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors relative ${
|
|
activePill === 'recurrence'
|
|
? 'bg-blue-500 dark:bg-blue-600 text-white'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
{t('task.recurrence', 'Recurrence')}
|
|
{task.recurrence_type &&
|
|
task.recurrence_type !== 'none' && (
|
|
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-blue-500 dark:bg-blue-400 rounded-full border border-white dark:border-gray-900"></span>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => onPillChange('attachments')}
|
|
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors relative ${
|
|
activePill === 'attachments'
|
|
? 'bg-blue-500 dark:bg-blue-600 text-white'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
{t('task.attachments', 'Attachments')}
|
|
{attachmentCount > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-blue-500 dark:bg-blue-400 rounded-full border border-white dark:border-gray-900"></span>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => onPillChange('activity')}
|
|
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
|
|
activePill === 'activity'
|
|
? 'bg-blue-500 dark:bg-blue-600 text-white'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
|
}`}
|
|
>
|
|
{t('task.activity', 'Activity')}
|
|
</button>
|
|
</div>
|
|
{(showOverdueIcon ||
|
|
onToggleTodayPlan ||
|
|
onQuickStatusToggle) && (
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
{showOverdueIcon && (
|
|
<div
|
|
className="relative flex items-center z-20"
|
|
data-overdue-toggle
|
|
>
|
|
<button
|
|
data-overdue-toggle
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onOverdueIconClick?.();
|
|
}}
|
|
className={`flex items-center justify-center w-8 h-8 rounded-full border text-xs transition-colors ${
|
|
isOverdueAlertVisible
|
|
? 'border-amber-500 bg-amber-50 text-amber-700 dark:border-amber-400 dark:bg-amber-900/30 dark:text-amber-300'
|
|
: 'border-amber-200 text-amber-600 hover:bg-amber-50 dark:border-amber-500/40 dark:text-amber-300 dark:hover:bg-amber-900/40'
|
|
}`}
|
|
title={t(
|
|
'task.showOverdueWarning',
|
|
'Show overdue warning'
|
|
)}
|
|
aria-label={t(
|
|
'task.showOverdueWarning',
|
|
'Show overdue warning'
|
|
)}
|
|
>
|
|
<ExclamationTriangleIcon className="h-4 w-4" />
|
|
</button>
|
|
{isOverdueAlertVisible && (
|
|
<div
|
|
data-overdue-toggle
|
|
className="absolute right-0 top-full translate-y-2 w-[30rem] max-w-lg z-30"
|
|
>
|
|
<div className="relative rounded-lg shadow-2xl bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-600 px-4 py-3 text-xs text-amber-800 dark:text-amber-100">
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onDismissOverdueAlert?.();
|
|
}}
|
|
className="absolute top-2 right-2 text-amber-600 dark:text-amber-300 hover:text-amber-800 dark:hover:text-amber-100 transition-colors"
|
|
aria-label={t(
|
|
'common.close',
|
|
'Close'
|
|
)}
|
|
>
|
|
<XMarkIcon className="h-3.5 w-3.5" />
|
|
</button>
|
|
<div className="flex items-start space-x-2 pr-4">
|
|
<ExclamationTriangleIcon className="h-4 w-4 text-amber-600 dark:text-amber-300 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<p className="font-medium">
|
|
{t(
|
|
'task.overdueAlert',
|
|
"This task was in your plan yesterday and wasn't completed."
|
|
)}
|
|
</p>
|
|
<p className="mt-1 text-[11px] text-amber-700 dark:text-amber-200">
|
|
{t(
|
|
'task.overdueYesterday',
|
|
'Consider prioritizing this task or breaking it into smaller steps.'
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{onToggleTodayPlan && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onToggleTodayPlan();
|
|
}}
|
|
className={`inline-flex items-center justify-center rounded-full transition-all duration-200 ${
|
|
Number(task.today_move_count || 0) > 1
|
|
? 'px-3 h-8'
|
|
: 'w-8 h-8'
|
|
} ${
|
|
task.today
|
|
? 'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-800'
|
|
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
|
|
}`}
|
|
title={
|
|
task.today
|
|
? t(
|
|
'tasks.removeFromToday',
|
|
'Remove from today plan'
|
|
)
|
|
: t(
|
|
'tasks.addToToday',
|
|
'Add to today plan'
|
|
)
|
|
}
|
|
>
|
|
{task.today ? (
|
|
<CalendarDaysIcon className="h-4 w-4" />
|
|
) : (
|
|
<CalendarIcon className="h-4 w-4" />
|
|
)}
|
|
{Number(task.today_move_count || 0) > 1 && (
|
|
<span className="ml-1 text-xs font-medium">
|
|
{Number(task.today_move_count || 0)}
|
|
</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
{onQuickStatusToggle &&
|
|
(task.status === 'not_started' ||
|
|
task.status === 'in_progress' ||
|
|
task.status === 0 ||
|
|
task.status === 1) && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onQuickStatusToggle();
|
|
}}
|
|
className={`flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200 ${
|
|
task.status === 'in_progress' ||
|
|
task.status === 1
|
|
? 'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-800 animate-pulse'
|
|
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
|
|
}`}
|
|
title={
|
|
task.status === 'in_progress' ||
|
|
task.status === 1
|
|
? t(
|
|
'tasks.setNotStarted',
|
|
'Set to not started'
|
|
)
|
|
: t(
|
|
'tasks.setInProgress',
|
|
'Set in progress'
|
|
)
|
|
}
|
|
>
|
|
<PlayIcon className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
<div
|
|
className="relative flex items-center"
|
|
ref={actionsMenuRef}
|
|
>
|
|
<button
|
|
className="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center justify-center"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setActionsMenuOpen(!actionsMenuOpen);
|
|
}}
|
|
aria-haspopup="true"
|
|
aria-expanded={actionsMenuOpen}
|
|
aria-label={t(
|
|
'common.moreActions',
|
|
'More actions'
|
|
)}
|
|
>
|
|
<span className="text-lg leading-none">
|
|
...
|
|
</span>
|
|
</button>
|
|
{actionsMenuOpen && (
|
|
<div className="absolute right-0 top-full translate-y-2 w-40 rounded-lg shadow-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 z-30">
|
|
<button
|
|
className="w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-t-lg"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setActionsMenuOpen(false);
|
|
onEdit();
|
|
}}
|
|
>
|
|
{t('common.edit', 'Edit')}
|
|
</button>
|
|
<button
|
|
className="w-full text-left px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-b-lg"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setActionsMenuOpen(false);
|
|
onDelete();
|
|
}}
|
|
>
|
|
{t('common.delete', 'Delete')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskDetailsHeader;
|