@hed-hog/operations 0.0.330 → 0.0.331

package/hedhog/frontend/app/_components/task-detail-sheet.tsx.ejs

@@ -1,581 +1,803 @@
-'use client';
-
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { Button } from '@/components/ui/button';
-import { CommentContent } from '@/components/ui/comment-rich-editor';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  AlarmClock,
-  Calendar,
-  MessageSquare,
-  Pencil,
-  Tag,
-  Trash2,
-  User,
-  X,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import type { ReactNode } from 'react';
-import { useEffect, useRef, useState } from 'react';
-import {
-  createTaskComment,
-  deleteTaskComment,
-  fetchTaskComments,
-  updateTaskComment,
-} from '../_lib/api';
-import { useMentionItems } from '../_lib/hooks/use-mention-items';
-import type { OperationsTaskComment } from '../_lib/types';
-import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
-import { StatusBadge } from './status-badge';
-
-export type TaskDetailSheetData = {
-  id: number;
-  name: string;
-  description?: string | null;
-  status: string;
-  priority?: string | null;
-  dueDate?: string | null;
-  estimateHours?: number | null;
-  tags?: string | null;
-  projectName?: string | null;
-  projectCode?: string | null;
-  assigneeName?: string | null;
-  assigneeUserPhotoId?: number | null;
-  assigneePersonAvatarId?: number | null;
-};
-
-type Props = {
-  task: TaskDetailSheetData | null;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  statusLabel?: (status: string) => string;
-  footer?: ReactNode;
-  defaultTab?: 'info' | 'comments';
-};
-
-function getPriorityLabel(value?: string | null) {
-  const labels: Record<string, string> = {
-    low: 'Baixa',
-    medium: 'Média',
-    high: 'Alta',
-  };
-  return labels[value ?? ''] ?? value ?? '—';
-}
-
-function getPriorityClassName(value?: string | null) {
-  if (value === 'high') return 'bg-rose-100 text-rose-700 border-rose-200';
-  if (value === 'medium') return 'bg-amber-100 text-amber-700 border-amber-200';
-  return 'bg-emerald-100 text-emerald-700 border-emerald-200';
-}
-
-function getAvatarSrc(task: TaskDetailSheetData | null) {
-  if (!task) return null;
-  if (
-    typeof task.assigneeUserPhotoId === 'number' &&
-    task.assigneeUserPhotoId > 0
-  )
-    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${task.assigneeUserPhotoId}`;
-  if (
-    typeof task.assigneePersonAvatarId === 'number' &&
-    task.assigneePersonAvatarId > 0
-  )
-    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${task.assigneePersonAvatarId}`;
-  return null;
-}
-
-function getCommentAvatarSrc(comment: OperationsTaskComment) {
-  if (
-    typeof comment.actorUserPhotoId === 'number' &&
-    comment.actorUserPhotoId > 0
-  )
-    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${comment.actorUserPhotoId}`;
-  if (
-    typeof comment.actorPersonAvatarId === 'number' &&
-    comment.actorPersonAvatarId > 0
-  )
-    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${comment.actorPersonAvatarId}`;
-  return null;
-}
-
-function getInitials(value?: string | null) {
-  const parts = String(value ?? '')
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, 2);
-  if (!parts.length) return '??';
-  return parts.map((p) => p[0]?.toUpperCase() ?? '').join('');
-}
-
-function formatCommentDate(value?: string | null) {
-  if (!value) return '';
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return '';
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  if (diffMins < 1) return 'agora';
-  if (diffMins < 60) return `${diffMins}min atrás`;
-  const diffHours = Math.floor(diffMins / 60);
-  if (diffHours < 24) return `${diffHours}h atrás`;
-  const diffDays = Math.floor(diffHours / 24);
-  if (diffDays < 7) return `${diffDays}d atrás`;
-  return date.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' });
-}
-
-export type TaskCommentsSectionProps = {
-  taskId: number;
-};
-
-export function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
-  const { request, showToastHandler, getSettingValue } = useApp();
-  const ct = useTranslations('operations.ProjectDetailsPage.commentsSection');
-  const editWindowMinutes = Number(
-    getSettingValue('operations.comment-edit-window') ?? 5
-  );
-  const [newComment, setNewComment] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [editingId, setEditingId] = useState<number | null>(null);
-  const [editContent, setEditContent] = useState('');
-  const [savingEditId, setSavingEditId] = useState<number | null>(null);
-  const [deletingId, setDeletingId] = useState<number | null>(null);
-  const [localComments, setLocalComments] = useState<
-    OperationsTaskComment[] | null
-  >(null);
-
-  // Force re-render precisely when each comment's edit window expires
-  const [, setTick] = useState(0);
-  const comments_ref = useRef<OperationsTaskComment[]>([]);
-
-  const mentionItems = useMentionItems(request);
-
-  const { data: fetchedComments = [], refetch } = useQuery<
-    OperationsTaskComment[]
-  >({
-    queryKey: ['task-comments', taskId],
-    queryFn: () =>
-      fetchTaskComments(request, taskId) as Promise<OperationsTaskComment[]>,
-  });
-
-  const comments = localComments ?? fetchedComments;
-
-  // Keep ref in sync so the timeout effect always sees current comments
-  comments_ref.current = comments;
-
-  // Schedule one precise re-render for each comment that is still within the
-  // edit window, so the buttons disappear at the exact moment they expire.
-  useEffect(() => {
-    if (editWindowMinutes <= 0) return;
-    const windowMs = editWindowMinutes * 60_000;
-    const timers: ReturnType<typeof setTimeout>[] = [];
-    for (const c of comments_ref.current) {
-      const ageMs = Date.now() - new Date(c.createdAt).getTime();
-      const msUntilExpiry = windowMs - ageMs;
-      if (msUntilExpiry > 0) {
-        timers.push(setTimeout(() => setTick((t) => t + 1), msUntilExpiry));
-      }
-    }
-    return () => timers.forEach(clearTimeout);
-    // Re-schedule whenever the comment list or the window setting changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [comments, editWindowMinutes]);
-
-  const handleSubmit = async () => {
-    const stripped = newComment.replace(/<[^>]*>/g, '').trim();
-    if (!stripped) return;
-    setSubmitting(true);
-    try {
-      const created = (await createTaskComment(
-        request,
-        taskId,
-        newComment
-      )) as OperationsTaskComment;
-      setLocalComments([...(localComments ?? fetchedComments), created]);
-      setNewComment('');
-    } catch {
-      showToastHandler?.('error', ct('errors.addComment'));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleStartEdit = (comment: OperationsTaskComment) => {
-    setEditingId(comment.id);
-    setEditContent(comment.content);
-  };
-
-  const handleCancelEdit = () => {
-    setEditingId(null);
-    setEditContent('');
-  };
-
-  const handleSaveEdit = async (comment: OperationsTaskComment) => {
-    const trimmed = editContent.replace(/<[^>]*>/g, '').trim();
-    if (!trimmed) return;
-    setSavingEditId(comment.id);
-    try {
-      const updated = (await updateTaskComment(
-        request,
-        taskId,
-        comment.id,
-        editContent
-      )) as OperationsTaskComment;
-      if (updated) {
-        setLocalComments(
-          (localComments ?? fetchedComments).map((c) =>
-            c.id === comment.id ? updated : c
-          )
-        );
-      }
-      setEditingId(null);
-      setEditContent('');
-    } catch {
-      showToastHandler?.('error', ct('errors.editComment'));
-    } finally {
-      setSavingEditId(null);
-    }
-  };
-
-  const handleDelete = async (comment: OperationsTaskComment) => {
-    setDeletingId(comment.id);
-    try {
-      await deleteTaskComment(request, taskId, comment.id);
-      setLocalComments(
-        (localComments ?? fetchedComments).filter((c) => c.id !== comment.id)
-      );
-    } catch {
-      showToastHandler?.('error', ct('errors.deleteComment'));
-    } finally {
-      setDeletingId(null);
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-        <MessageSquare className="size-3" />
-        {ct('title')}
-        {comments.length > 0 ? (
-          <span className="ml-0.5 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
-            {comments.length}
-          </span>
-        ) : null}
-      </div>
-
-      {comments.length > 0 ? (
-        <div className="flex flex-col gap-3">
-          {comments.map((comment) => {
-            const avatarSrc = getCommentAvatarSrc(comment);
-            const isEditing = editingId === comment.id;
-            const isDeleting = deletingId === comment.id;
-            const isSaving = savingEditId === comment.id;
-            const ageMinutes =
-              (Date.now() - new Date(comment.createdAt).getTime()) / 60000;
-            const canModify =
-              editWindowMinutes === 0 || ageMinutes < editWindowMinutes;
-
-            return (
-              <div key={comment.id} className="flex gap-2.5">
-                <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
-                  {avatarSrc ? (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                      src={avatarSrc}
-                      alt={comment.actorName ?? ''}
-                      className="size-full object-cover"
-                    />
-                  ) : (
-                    getInitials(comment.actorName)
-                  )}
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="truncate text-xs font-semibold">
-                      {comment.actorName ?? ct('defaultUser')}
-                    </span>
-                    <div className="flex shrink-0 items-center gap-1">
-                      <span className="text-[10px] text-muted-foreground">
-                        {formatCommentDate(comment.createdAt)}
-                      </span>
-                      {!isEditing ? (
-                        <>
-                          {canModify ? (
-                            <>
-                              <button
-                                type="button"
-                                aria-label={ct('ariaEditComment')}
-                                disabled={isDeleting}
-                                onClick={() => handleStartEdit(comment)}
-                                className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
-                              >
-                                <Pencil className="size-3" />
-                              </button>
-                              <button
-                                type="button"
-                                aria-label={ct('ariaDeleteComment')}
-                                disabled={isDeleting}
-                                onClick={() => void handleDelete(comment)}
-                                className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
-                              >
-                                <Trash2 className="size-3" />
-                              </button>
-                            </>
-                          ) : null}
-                        </>
-                      ) : null}
-                    </div>
-                  </div>
-                  {isEditing ? (
-                    <div className="mt-1 flex flex-col gap-1.5">
-                      <RichTextEditor
-                        value={editContent}
-                        onChange={setEditContent}
-                        mentions={mentionItems}
-                      />
-                      <div className="flex gap-1.5">
-                        <Button
-                          size="sm"
-                          className="h-7 px-2 text-xs"
-                          disabled={
-                            isSaving ||
-                            !editContent.replace(/<[^>]*>/g, '').trim()
-                          }
-                          onClick={() => void handleSaveEdit(comment)}
-                        >
-                          {ct('saveButton')}
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          className="h-7 px-2 text-xs"
-                          disabled={isSaving}
-                          onClick={handleCancelEdit}
-                        >
-                          <X className="size-3" />
-                          {ct('cancelButton')}
-                        </Button>
-                      </div>
-                    </div>
-                  ) : (
-                    <CommentContent content={comment.content} />
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      ) : (
-        <p className="text-xs text-muted-foreground">{ct('noComments')}</p>
-      )}
-
-      <div className="flex flex-col gap-1.5 pt-1">
-        <RichTextEditor
-          value={newComment}
-          onChange={setNewComment}
-          mentions={mentionItems}
-        />
-        <div className="flex justify-end">
-          <Button
-            size="sm"
-            className="gap-1.5"
-            disabled={submitting || !newComment.replace(/<[^>]*>/g, '').trim()}
-            onClick={() => void handleSubmit()}
-          >
-            {ct('submitButton')}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function TaskDetailSheet({
-  task,
-  open,
-  onOpenChange,
-  statusLabel,
-  footer,
-  defaultTab = 'comments',
-}: Props) {
-  const commonT = useTranslations('operations.Common');
-  const detailT = useTranslations('operations.ProjectDetailsPage');
-  const { getSettingValue, currentLocaleCode } = useApp();
-
-  const [tab, setTab] = useState<'info' | 'comments'>(defaultTab);
-
-  useEffect(() => {
-    if (open) setTab(defaultTab);
-  }, [open, defaultTab]);
-
-  const avatarSrc = getAvatarSrc(task);
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="flex w-full flex-col gap-0 overflow-hidden sm:max-w-md">
-        {task ? (
-          <>
-            <SheetHeader className="shrink-0 px-4 pb-2 pt-4">
-              <SheetTitle className="pr-6 text-base font-semibold leading-snug">
-                {task.name}
-              </SheetTitle>
-              <div className="flex flex-wrap gap-2 pt-1">
-                <StatusBadge
-                  label={statusLabel?.(task.status) ?? task.status}
-                  className={getStatusBadgeClass(task.status)}
-                />
-                {task.priority ? (
-                  <span
-                    className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ${getPriorityClassName(task.priority)}`}
-                  >
-                    {getPriorityLabel(task.priority)}
-                  </span>
-                ) : null}
-              </div>
-            </SheetHeader>
-
-            <Tabs
-              value={tab}
-              onValueChange={(v) => setTab(v as 'info' | 'comments')}
-              className="flex min-h-0 flex-1 flex-col"
-            >
-              <TabsList className="mx-4 mb-1 mt-2 grid shrink-0 grid-cols-2">
-                <TabsTrigger value="info">
-                  {detailT('taskForm.tabInfo')}
-                </TabsTrigger>
-                <TabsTrigger value="comments">
-                  <MessageSquare className="mr-1.5 size-3.5" />
-                  {detailT('taskForm.tabComments')}
-                </TabsTrigger>
-              </TabsList>
-
-              <TabsContent
-                value="info"
-                className="flex-1 overflow-y-auto px-4 pb-4 pt-2 data-[state=inactive]:hidden"
-              >
-                <div className="flex flex-col gap-5">
-                  {task.description ? (
-                    <div>
-                      <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                        {detailT('taskForm.descriptionLabel')}
-                      </p>
-                      <p className="text-sm leading-relaxed">
-                        {task.description}
-                      </p>
-                    </div>
-                  ) : null}
-
-                  {task.dueDate || task.estimateHours != null ? (
-                    <div className="grid grid-cols-2 gap-3">
-                      {task.dueDate ? (
-                        <div className="flex items-start gap-2 text-sm">
-                          <Calendar className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-                          <div>
-                            <p className="text-[11px] text-muted-foreground">
-                              {detailT('taskForm.deadlineLabel')}
-                            </p>
-                            <p className="font-medium">
-                              {formatDate(
-                                task.dueDate,
-                                getSettingValue,
-                                currentLocaleCode
-                              )}
-                            </p>
-                          </div>
-                        </div>
-                      ) : null}
-                      {task.estimateHours != null ? (
-                        <div className="flex items-start gap-2 text-sm">
-                          <AlarmClock className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-                          <div>
-                            <p className="text-[11px] text-muted-foreground">
-                              {detailT('taskForm.estimateLabel')}
-                            </p>
-                            <p className="font-medium">{task.estimateHours}h</p>
-                          </div>
-                        </div>
-                      ) : null}
-                    </div>
-                  ) : null}
-
-                  {task.tags ? (
-                    <div>
-                      <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                        <Tag className="size-3" />
-                        {detailT('taskForm.tagsLabel')}
-                      </div>
-                      <div className="flex flex-wrap gap-1.5">
-                        {task.tags.split(',').map((tag) => (
-                          <span
-                            key={tag.trim()}
-                            className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
-                          >
-                            {tag.trim()}
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  ) : null}
-
-                  {task.assigneeName ? (
-                    <div>
-                      <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                        <User className="size-3" />
-                        {commonT('labels.collaborator')}
-                      </div>
-                      <div className="flex items-center gap-2.5">
-                        <div className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-xs font-semibold uppercase text-muted-foreground ring-1 ring-border">
-                          {avatarSrc ? (
-                            // eslint-disable-next-line @next/next/no-img-element
-                            <img
-                              src={avatarSrc}
-                              alt={task.assigneeName}
-                              className="size-full object-cover"
-                            />
-                          ) : (
-                            getInitials(task.assigneeName)
-                          )}
-                        </div>
-                        <span className="text-sm">{task.assigneeName}</span>
-                      </div>
-                    </div>
-                  ) : null}
-
-                  {task.projectName || task.projectCode ? (
-                    <div className="rounded-lg border bg-muted/20 px-3 py-2.5">
-                      <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-                        {commonT('labels.project')}
-                      </p>
-                      <p className="mt-0.5 text-sm font-medium">
-                        {[task.projectName, task.projectCode]
-                          .filter(Boolean)
-                          .join(' • ')}
-                      </p>
-                    </div>
-                  ) : null}
-
-                  {footer ? (
-                    <div className="border-t pt-5">{footer}</div>
-                  ) : null}
-                </div>
-              </TabsContent>
-
-              <TabsContent
-                value="comments"
-                className="flex-1 overflow-y-auto px-4 pb-4 pt-2 data-[state=inactive]:hidden"
-              >
-                <TaskCommentsSection taskId={task.id} />
-              </TabsContent>
-            </Tabs>
-          </>
-        ) : null}
-      </SheetContent>
-    </Sheet>
-  );
-}
+'use client';
+
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { Button } from '@/components/ui/button';
+import { CommentContent } from '@/components/ui/comment-rich-editor';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Activity,
+  AlarmClock,
+  Calendar,
+  Clock3,
+  History,
+  MessageSquare,
+  Pencil,
+  Timer,
+  Trash2,
+  Users,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  createTaskComment,
+  deleteTaskComment,
+  fetchTaskActivities,
+  fetchTaskComments,
+  updateTaskComment,
+} from '../_lib/api';
+import { useMentionItems } from '../_lib/hooks/use-mention-items';
+import type {
+  OperationsTaskActivity,
+  OperationsTaskComment,
+} from '../_lib/types';
+import { formatDate, formatDateTime, getStatusBadgeClass } from '../_lib/utils/format';
+import {
+  formatDurationMinutes,
+  getElapsedDoingMinutes,
+  getInitials,
+  getTaskPriorityLabel,
+} from '../_lib/utils/task-ui';
+
+import { StatusBadge } from './status-badge';
+import { TaskFileAttachments } from './task-file-attachments';
+import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
+
+export type TaskDetailSheetData = {
+  id: number;
+  name: string;
+  projectId?: number | null;
+  projectAssignmentId?: number | null;
+  description?: string | null;
+  status: string;
+  priority?: string | null;
+  dueDate?: string | null;
+  estimateHours?: number | null;
+  tags?: string | null;
+  projectName?: string | null;
+  projectCode?: string | null;
+  assigneeName?: string | null;
+  assigneeUserPhotoId?: number | null;
+  assigneePersonAvatarId?: number | null;
+  doingStartedAt?: string | null;
+  totalDoingMinutes?: number | null;
+};
+
+type Props = {
+  task: TaskDetailSheetData | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  statusLabel?: (status: string) => string;
+  footer?: ReactNode;
+  defaultTab?: 'comments' | 'activities';
+};
+
+function getPriorityClassName(value?: string | null) {
+  if (value === 'high') return 'bg-rose-100 text-rose-700 border-rose-200';
+  if (value === 'medium') return 'bg-amber-100 text-amber-700 border-amber-200';
+  return 'bg-emerald-100 text-emerald-700 border-emerald-200';
+}
+
+function getAvatarSrc(task: TaskDetailSheetData | null) {
+  if (!task) return null;
+  if (
+    typeof task.assigneeUserPhotoId === 'number' &&
+    task.assigneeUserPhotoId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${task.assigneeUserPhotoId}`;
+  if (
+    typeof task.assigneePersonAvatarId === 'number' &&
+    task.assigneePersonAvatarId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${task.assigneePersonAvatarId}`;
+  return null;
+}
+
+function getCommentAvatarSrc(comment: OperationsTaskComment) {
+  if (
+    typeof comment.actorUserPhotoId === 'number' &&
+    comment.actorUserPhotoId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${comment.actorUserPhotoId}`;
+  if (
+    typeof comment.actorPersonAvatarId === 'number' &&
+    comment.actorPersonAvatarId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${comment.actorPersonAvatarId}`;
+  return null;
+}
+
+function formatCommentDate(value?: string | null) {
+  if (!value) return '';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 1) return 'agora';
+  if (diffMins < 60) return `${diffMins}min atrás`;
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h atrás`;
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) return `${diffDays}d atrás`;
+  return date.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' });
+}
+
+export type TaskCommentsSectionProps = {
+  taskId: number;
+  onChanged?: () => void;
+};
+
+export function TaskCommentsSection({ taskId, onChanged }: TaskCommentsSectionProps) {
+  const { request, showToastHandler, getSettingValue } = useApp();
+  const ct = useTranslations('operations.ProjectDetailsPage.commentsSection');
+  const editWindowMinutes = Number(
+    getSettingValue('operations.comment-edit-window') ?? 5
+  );
+  const [newComment, setNewComment] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editContent, setEditContent] = useState('');
+  const [savingEditId, setSavingEditId] = useState<number | null>(null);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [localComments, setLocalComments] = useState<
+    OperationsTaskComment[] | null
+  >(null);
+
+  // Force re-render precisely when each comment's edit window expires
+  const [, setTick] = useState(0);
+  const comments_ref = useRef<OperationsTaskComment[]>([]);
+
+  const mentionItems = useMentionItems(request);
+
+  const { data: fetchedComments = [] } = useQuery<OperationsTaskComment[]>({
+    queryKey: ['task-comments', taskId],
+    queryFn: () =>
+      fetchTaskComments(request, taskId) as Promise<OperationsTaskComment[]>,
+  });
+
+  const comments = localComments ?? fetchedComments;
+
+  // Keep ref in sync so the timeout effect always sees current comments
+  comments_ref.current = comments;
+
+  // Schedule one precise re-render for each comment that is still within the
+  // edit window, so the buttons disappear at the exact moment they expire.
+  useEffect(() => {
+    if (editWindowMinutes <= 0) return;
+    const windowMs = editWindowMinutes * 60_000;
+    const timers: ReturnType<typeof setTimeout>[] = [];
+    for (const c of comments_ref.current) {
+      const ageMs = Date.now() - new Date(c.createdAt).getTime();
+      const msUntilExpiry = windowMs - ageMs;
+      if (msUntilExpiry > 0) {
+        timers.push(setTimeout(() => setTick((t) => t + 1), msUntilExpiry));
+      }
+    }
+    return () => timers.forEach(clearTimeout);
+  }, [comments, editWindowMinutes]);
+
+  const handleSubmit = async () => {
+    const stripped = newComment.replace(/<[^>]*>/g, '').trim();
+    if (!stripped) return;
+    setSubmitting(true);
+    try {
+      const created = (await createTaskComment(
+        request,
+        taskId,
+        newComment
+      )) as OperationsTaskComment;
+      setLocalComments([...(localComments ?? fetchedComments), created]);
+      setNewComment('');
+      onChanged?.();
+    } catch {
+      showToastHandler?.('error', ct('errors.addComment'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleStartEdit = (comment: OperationsTaskComment) => {
+    setEditingId(comment.id);
+    setEditContent(comment.content);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingId(null);
+    setEditContent('');
+  };
+
+  const handleSaveEdit = async (comment: OperationsTaskComment) => {
+    const trimmed = editContent.replace(/<[^>]*>/g, '').trim();
+    if (!trimmed) return;
+    setSavingEditId(comment.id);
+    try {
+      const updated = (await updateTaskComment(
+        request,
+        taskId,
+        comment.id,
+        editContent
+      )) as OperationsTaskComment;
+      if (updated) {
+        setLocalComments(
+          (localComments ?? fetchedComments).map((c) =>
+            c.id === comment.id ? updated : c
+          )
+        );
+      }
+      setEditingId(null);
+      setEditContent('');
+    } catch {
+      showToastHandler?.('error', ct('errors.editComment'));
+    } finally {
+      setSavingEditId(null);
+    }
+  };
+
+  const handleDelete = async (comment: OperationsTaskComment) => {
+    setDeletingId(comment.id);
+    try {
+      await deleteTaskComment(request, taskId, comment.id);
+      setLocalComments(
+        (localComments ?? fetchedComments).filter((c) => c.id !== comment.id)
+      );
+      onChanged?.();
+    } catch {
+      showToastHandler?.('error', ct('errors.deleteComment'));
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        <MessageSquare className="size-3" />
+        {ct('title')}
+        {comments.length > 0 ? (
+          <span className="ml-0.5 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
+            {comments.length}
+          </span>
+        ) : null}
+      </div>
+
+      {comments.length > 0 ? (
+        <div className="flex flex-col gap-3">
+          {comments.map((comment) => {
+            const avatarSrc = getCommentAvatarSrc(comment);
+            const isEditing = editingId === comment.id;
+            const isDeleting = deletingId === comment.id;
+            const isSaving = savingEditId === comment.id;
+            const ageMinutes =
+              (Date.now() - new Date(comment.createdAt).getTime()) / 60000;
+            const canModify =
+              editWindowMinutes === 0 || ageMinutes < editWindowMinutes;
+
+            return (
+              <div key={comment.id} className="flex gap-2.5">
+                <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                  {avatarSrc ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={avatarSrc}
+                      alt={comment.actorName ?? ''}
+                      className="size-full object-cover"
+                    />
+                  ) : (
+                    getInitials(comment.actorName)
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="truncate text-xs font-semibold">
+                      {comment.actorName ?? ct('defaultUser')}
+                    </span>
+                    <div className="flex shrink-0 items-center gap-1">
+                      <span className="text-[10px] text-muted-foreground">
+                        {formatCommentDate(comment.createdAt)}
+                      </span>
+                      {!isEditing ? (
+                        <>
+                          {canModify ? (
+                            <>
+                              <button
+                                type="button"
+                                aria-label={ct('ariaEditComment')}
+                                disabled={isDeleting}
+                                onClick={() => handleStartEdit(comment)}
+                                className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
+                              >
+                                <Pencil className="size-3" />
+                              </button>
+                              <button
+                                type="button"
+                                aria-label={ct('ariaDeleteComment')}
+                                disabled={isDeleting}
+                                onClick={() => void handleDelete(comment)}
+                                className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
+                              >
+                                <Trash2 className="size-3" />
+                              </button>
+                            </>
+                          ) : null}
+                        </>
+                      ) : null}
+                    </div>
+                  </div>
+                  {isEditing ? (
+                    <div className="mt-1 flex flex-col gap-1.5">
+                      <RichTextEditor
+                        value={editContent}
+                        onChange={setEditContent}
+                        mentions={mentionItems}
+                      />
+                      <div className="flex gap-1.5">
+                        <Button
+                          size="sm"
+                          className="h-7 px-2 text-xs"
+                          disabled={
+                            isSaving ||
+                            !editContent.replace(/<[^>]*>/g, '').trim()
+                          }
+                          onClick={() => void handleSaveEdit(comment)}
+                        >
+                          {ct('saveButton')}
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="h-7 px-2 text-xs"
+                          disabled={isSaving}
+                          onClick={handleCancelEdit}
+                        >
+                          <X className="size-3" />
+                          {ct('cancelButton')}
+                        </Button>
+                      </div>
+                    </div>
+                  ) : (
+                    <CommentContent content={comment.content} />
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="text-xs text-muted-foreground">{ct('noComments')}</p>
+      )}
+
+      <div className="flex flex-col gap-1.5 pt-1">
+        <RichTextEditor
+          value={newComment}
+          onChange={setNewComment}
+          mentions={mentionItems}
+          onCtrlEnter={() => void handleSubmit()}
+        />
+        <div className="flex items-center justify-end gap-2">
+          <span className="text-[10px] text-muted-foreground select-none">
+            <kbd className="rounded border bg-muted px-1 py-0.5 font-mono text-[10px]">Ctrl</kbd>
+            {' + '}
+            <kbd className="rounded border bg-muted px-1 py-0.5 font-mono text-[10px]">↵</kbd>
+          </span>
+          <Button
+            size="sm"
+            className="gap-1.5"
+            disabled={submitting || !newComment.replace(/<[^>]*>/g, '').trim()}
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => void handleSubmit()}
+          >
+            {ct('submitButton')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export type TaskActivitiesSectionProps = {
+  taskId: number;
+  task?: {
+    status?: string | null;
+    doingStartedAt?: string | null;
+    totalDoingMinutes?: number | null;
+  } | null;
+  statusLabel?: (status: string) => string;
+};
+
+function getActivityAvatarSrc(activity: OperationsTaskActivity) {
+  if (
+    typeof activity.actorUserPhotoId === 'number' &&
+    activity.actorUserPhotoId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${activity.actorUserPhotoId}`;
+  if (
+    typeof activity.actorPersonAvatarId === 'number' &&
+    activity.actorPersonAvatarId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${activity.actorPersonAvatarId}`;
+  return null;
+}
+
+export function TaskActivitiesSection({
+  taskId,
+  task,
+  statusLabel,
+}: TaskActivitiesSectionProps) {
+  const { request, getSettingValue, currentLocaleCode } = useApp();
+  const at = useTranslations('operations.ProjectDetailsPage.activitiesSection');
+  const [doingTick, setDoingTick] = useState(0);
+
+  const { data: activities = [] } = useQuery<OperationsTaskActivity[]>({
+    queryKey: ['task-activities', taskId],
+    queryFn: () =>
+      fetchTaskActivities(request, taskId) as Promise<OperationsTaskActivity[]>,
+  });
+
+  useEffect(() => {
+    if (task?.status !== 'doing' || !task.doingStartedAt) return;
+    const timer = setInterval(() => setDoingTick((value) => value + 1), 30000);
+    return () => clearInterval(timer);
+  }, [task?.doingStartedAt, task?.status]);
+
+  const uniqueCollaborators = useMemo(() => {
+    const collaborators = new Set<string>();
+    for (const activity of activities) {
+      if (activity.actorCollaboratorId != null) {
+        collaborators.add(`id:${activity.actorCollaboratorId}`);
+      } else if (activity.actorName) {
+        collaborators.add(`name:${activity.actorName}`);
+      }
+    }
+    return collaborators.size;
+  }, [activities]);
+
+  const totalDoingMinutes = getElapsedDoingMinutes(task, doingTick);
+
+  const kpiItems: KpiCardItem[] = [
+    {
+      key: 'activities',
+      title: at('kpis.activities'),
+      value: activities.length,
+      description: at('kpis.activitiesDescription'),
+      icon: Activity,
+      layout: 'compact',
+      accentClassName: 'from-sky-500/30 via-cyan-500/10 to-transparent',
+      iconContainerClassName: 'bg-sky-500/10 text-sky-700',
+    },
+    {
+      key: 'collaborators',
+      title: at('kpis.collaborators'),
+      value: uniqueCollaborators,
+      description: at('kpis.collaboratorsDescription'),
+      icon: Users,
+      layout: 'compact',
+      accentClassName: 'from-violet-500/30 via-fuchsia-500/10 to-transparent',
+      iconContainerClassName: 'bg-violet-500/10 text-violet-700',
+    },
+    {
+      key: 'doing-time',
+      title: at('kpis.executionTime'),
+      value: formatDurationMinutes(totalDoingMinutes),
+      description: at('kpis.executionTimeDescription'),
+      icon: Clock3,
+      layout: 'compact',
+      accentClassName: 'from-emerald-500/30 via-teal-500/10 to-transparent',
+      iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+    },
+  ];
+
+  const getActivityDescription = (activity: OperationsTaskActivity) => {
+    if (activity.action === 'status_changed') {
+      return at('statusChanged', {
+        from: statusLabel?.(activity.fromStatus) ?? activity.fromStatus,
+        to: statusLabel?.(activity.toStatus) ?? activity.toStatus,
+      });
+    }
+    return at('fallbackAction');
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        <History className="size-3" />
+        {at('title')}
+        {activities.length > 0 ? (
+          <span className="ml-0.5 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
+            {activities.length}
+          </span>
+        ) : null}
+      </div>
+
+      <KpiCardsGrid items={kpiItems} columns={3} className="gap-2" />
+
+      {activities.length > 0 ? (
+        <div className="relative flex flex-col">
+          {activities.map((activity, index) => {
+            const avatarSrc = getActivityAvatarSrc(activity);
+            const isLast = index === activities.length - 1;
+            return (
+              <div
+                key={activity.id}
+                className="relative flex gap-3 pb-4 last:pb-0"
+              >
+                <div className="relative flex shrink-0 justify-center">
+                  {!isLast ? (
+                    <span className="absolute bottom-0 top-9 w-px bg-border" />
+                  ) : null}
+                  <div className="relative z-10 flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-background bg-muted text-[11px] font-semibold uppercase text-muted-foreground shadow-sm ring-1 ring-border">
+                    {avatarSrc ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={avatarSrc}
+                        alt={activity.actorName ?? ''}
+                        className="size-full object-cover"
+                      />
+                    ) : (
+                      getInitials(activity.actorName)
+                    )}
+                  </div>
+                </div>
+                <div className="min-w-0 flex-1 rounded-md border bg-background px-3 py-2 shadow-sm">
+                  <div className="flex flex-wrap items-start justify-between gap-x-2 gap-y-1">
+                    <span className="min-w-0 truncate text-xs font-semibold">
+                      {activity.actorName ?? at('defaultUser')}
+                    </span>
+                    <span className="shrink-0 text-[10px] font-medium text-muted-foreground">
+                      {formatDateTime(
+                        activity.createdAt,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </span>
+                  </div>
+                  <p className="mt-1.5 text-xs leading-relaxed text-muted-foreground">
+                    {getActivityDescription(activity)}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="text-xs text-muted-foreground">{at('noActivities')}</p>
+      )}
+    </div>
+  );
+}
+
+export function TaskDetailSheet({
+  task,
+  open,
+  onOpenChange,
+  statusLabel,
+  defaultTab = 'comments',
+}: Props) {
+  const detailT = useTranslations('operations.ProjectDetailsPage');
+  const commonT = useTranslations('operations.Common');
+  const { getSettingValue, currentLocaleCode } = useApp();
+
+  const [tab, setTab] = useState<'comments' | 'activities'>(defaultTab);
+  const [isTimesheetOpen, setIsTimesheetOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setIsTimesheetOpen(false);
+      return;
+    }
+    const timer = setTimeout(() => setTab(defaultTab), 0);
+    return () => clearTimeout(timer);
+  }, [open, defaultTab]);
+
+  const avatarSrc = getAvatarSrc(task);
+
+  const timesheetProject =
+    task && task.projectId
+      ? {
+          id: task.projectId,
+          label:
+            [task.projectName, task.projectCode].filter(Boolean).join(' • ') ||
+            commonT('labels.notAssigned'),
+          projectAssignmentId: task.projectAssignmentId,
+        }
+      : null;
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent className="flex w-full flex-col gap-0 overflow-hidden sm:max-w-5xl">
+          {task ? (
+            <>
+              <SheetHeader className="shrink-0 border-b px-5 pb-3 pt-4">
+                <div className="flex items-start justify-between gap-3 pr-8">
+                  <SheetTitle className="text-base font-semibold leading-snug">
+                    {task.name}
+                  </SheetTitle>
+                  {task.projectId ? (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 shrink-0 gap-1.5 text-xs"
+                      onClick={() => setIsTimesheetOpen(true)}
+                    >
+                      <Timer className="size-3.5" />
+                      {commonT('actions.logHours')}
+                    </Button>
+                  ) : null}
+                </div>
+                <SheetDescription className="sr-only">
+                  {task.description || task.name}
+                </SheetDescription>
+              </SheetHeader>
+
+              <div className="flex flex-1 min-h-0 overflow-hidden">
+                {/* ── Coluna esquerda ── */}
+                <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
+                  {task.description ? (
+                    <div className="shrink-0 border-b px-5 py-4">
+                      <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        {detailT('taskForm.descriptionLabel')}
+                      </p>
+                      <p className="text-sm leading-relaxed">{task.description}</p>
+                    </div>
+                  ) : null}
+
+                  <Tabs
+                    value={tab}
+                    onValueChange={(v) => setTab(v as 'comments' | 'activities')}
+                    className="flex flex-1 min-h-0 flex-col"
+                  >
+                    <div className="shrink-0 border-b px-5 py-2">
+                      <TabsList className="grid grid-cols-2">
+                        <TabsTrigger value="comments">
+                          <MessageSquare className="mr-1.5 size-3.5" />
+                          {detailT('taskForm.tabComments')}
+                        </TabsTrigger>
+                        <TabsTrigger value="activities">
+                          <History className="mr-1.5 size-3.5" />
+                          {detailT('taskForm.tabActivities')}
+                        </TabsTrigger>
+                      </TabsList>
+                    </div>
+                    <TabsContent
+                      value="comments"
+                      className="mt-0 flex-1 overflow-y-auto px-5 py-4 data-[state=inactive]:hidden"
+                    >
+                      <TaskCommentsSection taskId={task.id} />
+                    </TabsContent>
+                    <TabsContent
+                      value="activities"
+                      className="mt-0 flex-1 overflow-y-auto px-5 py-4 data-[state=inactive]:hidden"
+                    >
+                      <TaskActivitiesSection
+                        taskId={task.id}
+                        task={task}
+                        statusLabel={statusLabel}
+                      />
+                    </TabsContent>
+                  </Tabs>
+                </div>
+
+                {/* ── Aside direito ── */}
+                <aside className="flex w-72 shrink-0 flex-col gap-4 overflow-y-auto border-l px-4 py-4">
+                  <div>
+                    <p className="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                      {detailT('taskForm.columnLabel')}
+                    </p>
+                    <StatusBadge
+                      label={statusLabel?.(task.status) ?? task.status}
+                      className={getStatusBadgeClass(task.status)}
+                    />
+                  </div>
+
+                  {task.priority ? (
+                    <div>
+                      <p className="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        {detailT('taskForm.priorityLabel')}
+                      </p>
+                      <span
+                        className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ${getPriorityClassName(task.priority)}`}
+                      >
+                        {getTaskPriorityLabel(task.priority)}
+                      </span>
+                    </div>
+                  ) : null}
+
+                  {task.assigneeName ? (
+                    <div>
+                      <p className="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        {detailT('taskForm.assigneeLabel')}
+                      </p>
+                      <div className="flex items-center gap-2">
+                        <div className="flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                          {avatarSrc ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            <img
+                              src={avatarSrc}
+                              alt={task.assigneeName}
+                              className="size-full object-cover"
+                            />
+                          ) : (
+                            getInitials(task.assigneeName)
+                          )}
+                        </div>
+                        <span className="text-sm">{task.assigneeName}</span>
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {task.dueDate ? (
+                    <div>
+                      <p className="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        {detailT('taskForm.deadlineLabel')}
+                      </p>
+                      <div className="flex items-center gap-1.5 text-sm">
+                        <Calendar className="size-3.5 shrink-0 text-muted-foreground" />
+                        <span>
+                          {formatDate(task.dueDate, getSettingValue, currentLocaleCode)}
+                        </span>
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {task.estimateHours != null ? (
+                    <div>
+                      <p className="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        {detailT('taskForm.estimateLabel')}
+                      </p>
+                      <div className="flex items-center gap-1.5 text-sm">
+                        <AlarmClock className="size-3.5 shrink-0 text-muted-foreground" />
+                        <span>{task.estimateHours}h</span>
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {task.tags ? (
+                    <div>
+                      <p className="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        {detailT('taskForm.tagsLabel')}
+                      </p>
+                      <div className="flex flex-wrap gap-1.5">
+                        {task.tags.split(',').map((tag) => (
+                          <span
+                            key={tag.trim()}
+                            className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+                          >
+                            {tag.trim()}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  ) : null}
+
+                  <div className="border-t pt-2">
+                    <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                      {detailT('taskForm.attachmentsLabel')}
+                    </p>
+                    <TaskFileAttachments taskId={task.id} />
+                  </div>
+                </aside>
+              </div>
+            </>
+          ) : null}
+        </SheetContent>
+      </Sheet>
+      <TimesheetEntryCreateSheet
+        open={isTimesheetOpen}
+        onOpenChange={setIsTimesheetOpen}
+        project={timesheetProject}
+        task={task ? { id: task.id, label: task.name } : null}
+      />
+    </>
+  );
+}