@hed-hog/operations 0.0.318 → 0.0.319

package/hedhog/frontend/app/_components/my-project-summary-screen.tsx.ejs

@@ -0,0 +1,1185 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  closestCenter,
+  DndContext,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
+} from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  AlarmClock,
+  Archive,
+  ArchiveRestore,
+  FolderKanban,
+  Pencil,
+  Plus,
+  Rows3,
+  Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo, useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import type {
+  OperationsMyProjectSummary,
+  OperationsTaskOption,
+  PaginatedResponse,
+} from '../_lib/types';
+import {
+  formatDate,
+  formatEnumLabel,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
+import { OperationsHeader } from './operations-header';
+import { SectionCard } from './section-card';
+import { StatusBadge } from './status-badge';
+import { TaskDetailSheet, type TaskDetailSheetData } from './task-detail-sheet';
+
+type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
+
+type BoardTask = {
+  id: number;
+  name: string;
+  description: string | null;
+  status: BoardColumnId;
+  priority: string;
+  dueDate: string | null;
+  estimateHours: number | null;
+  tags: string | null;
+  assigneeCollaboratorId: number | null;
+  assigneeName: string | null;
+  assigneeUserPhotoId: number | null;
+  assigneePersonAvatarId: number | null;
+};
+
+type TaskFormState = {
+  name: string;
+  description: string;
+  priority: 'low' | 'medium' | 'high';
+  status: BoardColumnId;
+  dueDate: string;
+  estimateHours: string;
+  tags: string;
+};
+
+const EMPTY_TASK_FORM: TaskFormState = {
+  name: '',
+  description: '',
+  priority: 'medium',
+  status: 'todo',
+  dueDate: '',
+  estimateHours: '',
+  tags: '',
+};
+
+type BoardColumns = Record<BoardColumnId, BoardTask[]>;
+
+type BoardState = {
+  projectId: number;
+  columns: BoardColumns;
+};
+
+const KANBAN_COLUMNS: Array<{ id: BoardColumnId; label: string }> = [
+  { id: 'todo', label: 'Backlog' },
+  { id: 'doing', label: 'Em execução' },
+  { id: 'review', label: 'Revisão' },
+  { id: 'done', label: 'Concluído' },
+];
+
+function taskDragId(taskId: number) {
+  return `task-${taskId}`;
+}
+
+function columnDropId(columnId: BoardColumnId) {
+  return `col-${columnId}`;
+}
+
+function parseTaskId(value: UniqueIdentifier | null | undefined) {
+  if (!value) return null;
+  const match = String(value).match(/^task-(\d+)$/);
+  return match ? Number(match[1]) : null;
+}
+
+function parseColumnId(
+  value: UniqueIdentifier | null | undefined
+): BoardColumnId | null {
+  if (!value) return null;
+  const match = String(value).match(/^col-(.+)$/);
+  const id = match?.[1];
+  return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
+}
+
+function apiTaskToBoardTask(
+  row: OperationsMyProjectSummary['tasks'][number]
+): BoardTask {
+  const status = KANBAN_COLUMNS.some((c) => c.id === row.status)
+    ? (row.status as BoardColumnId)
+    : 'todo';
+  return {
+    id: row.id,
+    name: row.name,
+    description: row.description ?? null,
+    status,
+    priority: row.priority ?? 'medium',
+    dueDate: row.dueDate ?? null,
+    estimateHours: row.estimateHours ?? null,
+    tags: row.tags ?? null,
+    assigneeCollaboratorId: row.assigneeCollaboratorId ?? null,
+    assigneeName: row.assigneeName ?? null,
+    assigneeUserPhotoId: row.assigneeUserPhotoId ?? null,
+    assigneePersonAvatarId: row.assigneePersonAvatarId ?? null,
+  };
+}
+
+function splitTasksByColumn(tasks: BoardTask[]): BoardColumns {
+  return {
+    todo: tasks.filter((t) => t.status === 'todo'),
+    doing: tasks.filter((t) => t.status === 'doing'),
+    review: tasks.filter((t) => t.status === 'review'),
+    done: tasks.filter((t) => t.status === 'done'),
+  };
+}
+
+function getInitials(value?: string | null) {
+  const parts = String(value ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+  if (!parts.length) return '??';
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
+}
+
+function getPersonAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : '/placeholder.png';
+}
+
+function getUserPhotoUrl(photoId?: number | null) {
+  return typeof photoId === 'number' && photoId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${photoId}`
+    : null;
+}
+
+function normalizeDateInputValue(value?: string | null) {
+  if (!value) {
+    return '';
+  }
+
+  const normalizedValue = String(value).trim();
+  const directMatch = normalizedValue.match(/^\d{4}-\d{2}-\d{2}/);
+
+  if (directMatch?.[0]) {
+    return directMatch[0];
+  }
+
+  const parsedDate = new Date(normalizedValue);
+  if (Number.isNaN(parsedDate.getTime())) {
+    return '';
+  }
+
+  return parsedDate.toISOString().slice(0, 10);
+}
+
+function getTaskPriorityLabel(value?: string | null) {
+  const labels: Record<string, string> = {
+    low: 'Baixa',
+    medium: 'Média',
+    high: 'Alta',
+  };
+  return labels[value ?? ''] ?? String(value ?? '');
+}
+
+function DraggableTaskCard({
+  task,
+  children,
+}: {
+  task: BoardTask;
+  children: (isDragging: boolean) => React.ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: taskDragId(task.id),
+    });
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Translate.toString(transform) }}
+      {...listeners}
+      {...attributes}
+      className={isDragging ? 'z-20' : undefined}
+    >
+      {children(isDragging)}
+    </div>
+  );
+}
+
+function DroppableColumn({
+  columnId,
+  children,
+}: {
+  columnId: BoardColumnId;
+  children: (isOver: boolean) => React.ReactNode;
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: columnDropId(columnId) });
+  return <div ref={setNodeRef}>{children(isOver)}</div>;
+}
+
+export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
+  const t = useTranslations('operations.ProjectDetailsPage');
+  const commonT = useTranslations('operations.Common');
+  const formT = useTranslations('operations.ProjectFormPage');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+
+  const getProjectStatusLabel = (value?: string | null) => {
+    if (!value) return commonT('labels.notAvailable');
+    try {
+      return formT(`options.statuses.${value}`);
+    } catch {
+      return value;
+    }
+  };
+
+  const { data: project, refetch } = useQuery<OperationsMyProjectSummary>({
+    queryKey: ['operations-my-project-summary', projectId],
+    queryFn: () =>
+      fetchOperations<OperationsMyProjectSummary>(
+        request,
+        `/operations/my-projects/${projectId}/summary`
+      ),
+  });
+  const { data: archivedTasksResponse, refetch: refetchArchivedTasks } =
+    useQuery<PaginatedResponse<OperationsTaskOption>>({
+      queryKey: [
+        'operations-my-project-archived-tasks',
+        projectId,
+        currentLocaleCode,
+      ],
+      queryFn: () =>
+        fetchOperations<PaginatedResponse<OperationsTaskOption>>(
+          request,
+          `/operations/tasks?projectId=${projectId}&archived=true&pageSize=200&sortField=createdAt&sortOrder=desc`
+        ),
+      placeholderData: (previous) => previous,
+    });
+
+  const [boardState, setBoardState] = useState<BoardState | null>(null);
+  const [selectedTask, setSelectedTask] = useState<TaskDetailSheetData | null>(
+    null
+  );
+  const [deletePromptTask, setDeletePromptTask] =
+    useState<TaskDetailSheetData | null>(null);
+  const [taskFormOpen, setTaskFormOpen] = useState(false);
+  const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
+  const [taskFormData, setTaskFormData] =
+    useState<TaskFormState>(EMPTY_TASK_FORM);
+  const [taskFormLoading, setTaskFormLoading] = useState(false);
+
+  const apiTasks = useMemo(
+    () => (project?.tasks ?? []).map(apiTaskToBoardTask),
+    [project]
+  );
+  const archivedTasks = useMemo(
+    () =>
+      (archivedTasksResponse?.data ?? []).filter((task) =>
+        Boolean(task.deletedAt)
+      ),
+    [archivedTasksResponse]
+  );
+  const currentCollaboratorId = useMemo(() => {
+    if (!project?.myAssignmentId) {
+      return null;
+    }
+
+    return (
+      project.assignments.find(
+        (assignment) => assignment.id === project.myAssignmentId
+      )?.collaboratorId ?? null
+    );
+  }, [project]);
+
+  const taskColumns: BoardColumns = useMemo(() => {
+    if (project && boardState?.projectId === project.id) {
+      return boardState.columns;
+    }
+    return splitTasksByColumn(apiTasks);
+  }, [project, boardState, apiTasks]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
+  );
+
+  const findColumnByTask = (taskId: number) => {
+    const match = KANBAN_COLUMNS.find((column) =>
+      taskColumns[column.id].some((task) => task.id === taskId)
+    );
+    return match?.id ?? null;
+  };
+
+  const moveTaskToColumn = useCallback(
+    (taskId: number, targetColumn: BoardColumnId) => {
+      const originColumn = findColumnByTask(taskId);
+      if (!originColumn || originColumn === targetColumn || !project) return;
+
+      const sourceTask = taskColumns[originColumn].find(
+        (task) => task.id === taskId
+      );
+      if (!sourceTask) return;
+
+      setBoardState({
+        projectId: project.id,
+        columns: {
+          ...taskColumns,
+          [originColumn]: taskColumns[originColumn].filter(
+            (task) => task.id !== taskId
+          ),
+          [targetColumn]: [
+            { ...sourceTask, status: targetColumn },
+            ...taskColumns[targetColumn],
+          ],
+        },
+      });
+
+      mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
+        status: targetColumn,
+      }).catch(() => {
+        setBoardState(null);
+        void refetch();
+      });
+    },
+    [taskColumns, project, request, refetch] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const onBoardDragEnd = (event: DragEndEvent) => {
+    const taskId = parseTaskId(event.active.id);
+    const targetColumn = parseColumnId(event.over?.id);
+    if (!taskId || !targetColumn) return;
+    moveTaskToColumn(taskId, targetColumn);
+  };
+
+  const openCreateTaskForm = useCallback(
+    (defaultStatus: BoardColumnId = 'todo') => {
+      setEditingTaskId(null);
+      setTaskFormData({ ...EMPTY_TASK_FORM, status: defaultStatus });
+      setSelectedTask(null);
+      setTaskFormOpen(true);
+    },
+    []
+  );
+
+  const openEditTaskForm = useCallback((task: BoardTask) => {
+    setEditingTaskId(task.id);
+    setTaskFormData({
+      name: task.name,
+      description: task.description ?? '',
+      priority: task.priority as TaskFormState['priority'],
+      status: task.status,
+      dueDate: normalizeDateInputValue(task.dueDate),
+      estimateHours:
+        task.estimateHours != null ? String(task.estimateHours) : '',
+      tags: task.tags ?? '',
+    });
+    setSelectedTask(null);
+    setTaskFormOpen(true);
+  }, []);
+
+  const refetchAll = useCallback(async () => {
+    await Promise.all([refetch(), refetchArchivedTasks()]);
+  }, [refetch, refetchArchivedTasks]);
+
+  const handleTaskFormSubmit = useCallback(async () => {
+    if (!taskFormData.name.trim()) return;
+
+    setTaskFormLoading(true);
+    try {
+      const payload: Record<string, unknown> = {
+        projectId,
+        projectAssignmentId: project?.myAssignmentId ?? null,
+        assigneeCollaboratorId: currentCollaboratorId,
+        name: taskFormData.name.trim(),
+        description: taskFormData.description || null,
+        priority: taskFormData.priority,
+        status: taskFormData.status,
+        dueDate: taskFormData.dueDate || null,
+        estimateHours: taskFormData.estimateHours
+          ? Number(taskFormData.estimateHours)
+          : null,
+        tags: taskFormData.tags || null,
+      };
+
+      if (editingTaskId) {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${editingTaskId}`,
+          'PATCH',
+          payload
+        );
+      } else {
+        await mutateOperations(request, '/operations/tasks', 'POST', payload);
+      }
+
+      setBoardState(null);
+      setTaskFormOpen(false);
+      setEditingTaskId(null);
+      setTaskFormData(EMPTY_TASK_FORM);
+      await refetchAll();
+    } finally {
+      setTaskFormLoading(false);
+    }
+  }, [
+    currentCollaboratorId,
+    editingTaskId,
+    project,
+    projectId,
+    refetchAll,
+    request,
+    taskFormData,
+  ]);
+
+  const handleArchiveTask = useCallback(
+    async (taskId: number) => {
+      await mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
+        archived: true,
+      });
+      setBoardState(null);
+      setSelectedTask(null);
+      await refetchAll();
+    },
+    [request, refetchAll]
+  );
+
+  const handleRestoreTask = useCallback(
+    async (taskId: number) => {
+      await mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
+        archived: false,
+      });
+      setBoardState(null);
+      setSelectedTask(null);
+      setDeletePromptTask(null);
+      await refetchAll();
+    },
+    [request, refetchAll]
+  );
+
+  const handleDeleteTask = useCallback(
+    async (taskId: number) => {
+      await mutateOperations(
+        request,
+        `/operations/tasks/${taskId}?permanent=true`,
+        'DELETE'
+      );
+      setBoardState(null);
+      setSelectedTask(null);
+      setDeletePromptTask(null);
+      await refetchAll();
+    },
+    [request, refetchAll]
+  );
+
+  if (!project) {
+    return (
+      <Page>
+        <OperationsHeader
+          title="—"
+          description=""
+          current={commonT('labels.loading') || 'Carregando...'}
+        />
+        <EmptyState
+          icon={<FolderKanban className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('notFound')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => void refetch()}
+        />
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={project.name}
+        description={
+          [project.code, project.myRoleLabel].filter(Boolean).join(' • ') || ''
+        }
+        current={project.name}
+      />
+
+      <div className="rounded-xl border bg-muted/20 p-4">
+        <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-4">
+          <div>
+            <dt className="text-muted-foreground">
+              {commonT('labels.status')}
+            </dt>
+            <dd className="mt-0.5 font-medium">
+              <StatusBadge
+                label={getProjectStatusLabel(project.status)}
+                className={getStatusBadgeClass(project.status)}
+              />
+            </dd>
+          </div>
+          <div>
+            <dt className="text-muted-foreground">
+              {commonT('labels.startDate')}
+            </dt>
+            <dd className="mt-0.5 font-medium">
+              {formatDate(
+                project.startDate,
+                getSettingValue,
+                currentLocaleCode
+              )}
+            </dd>
+          </div>
+          <div>
+            <dt className="text-muted-foreground">
+              {commonT('labels.endDate')}
+            </dt>
+            <dd className="mt-0.5 font-medium">
+              {formatDate(project.endDate, getSettingValue, currentLocaleCode)}
+            </dd>
+          </div>
+          {project.myRoleLabel ? (
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.role')}
+              </dt>
+              <dd className="mt-0.5 font-medium">{project.myRoleLabel}</dd>
+            </div>
+          ) : null}
+        </dl>
+        {project.summary ? (
+          <p className="mt-3 rounded-lg border border-border/70 bg-background/60 p-3 text-sm text-muted-foreground">
+            {project.summary}
+          </p>
+        ) : null}
+      </div>
+
+      <SectionCard
+        title={t('sections.taskBoard')}
+        description={t('sections.taskBoardDescription')}
+        className="rounded-xl border bg-card p-4 shadow-sm"
+        actions={
+          <Button
+            size="sm"
+            className="gap-2"
+            onClick={() => openCreateTaskForm()}
+          >
+            <Plus className="size-4" />
+            {commonT('actions.create')}
+          </Button>
+        }
+      >
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={onBoardDragEnd}
+        >
+          <div className="grid gap-4 xl:grid-cols-4">
+            {KANBAN_COLUMNS.map((column) => (
+              <DroppableColumn key={column.id} columnId={column.id}>
+                {(isOver) => (
+                  <div
+                    className={[
+                      'rounded-xl border bg-muted/20 p-3 transition-colors',
+                      isOver ? 'border-primary bg-primary/5' : 'border-border',
+                    ].join(' ')}
+                  >
+                    <div className="mb-3 flex items-center justify-between">
+                      <div className="flex items-center gap-2 text-sm font-semibold">
+                        <Rows3 className="size-4 text-muted-foreground" />
+                        {column.label}
+                      </div>
+                      <span className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">
+                        {taskColumns[column.id].length}
+                      </span>
+                    </div>
+
+                    <div className="space-y-2">
+                      {taskColumns[column.id].map((task) => (
+                        <DraggableTaskCard key={task.id} task={task}>
+                          {(isDragging) => (
+                            <div
+                              onClick={() =>
+                                !isDragging && setSelectedTask(task)
+                              }
+                              className={[
+                                'w-full cursor-grab rounded-lg border bg-card p-3 text-left shadow-xs transition',
+                                isDragging
+                                  ? 'border-primary/50 opacity-75'
+                                  : 'hover:border-primary/40 hover:shadow-sm',
+                              ].join(' ')}
+                            >
+                              <div className="mb-2 flex items-start justify-between gap-2">
+                                <p className="text-sm font-medium leading-snug">
+                                  {task.name}
+                                </p>
+                                <div className="flex items-start gap-2">
+                                  <span
+                                    className={[
+                                      'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                                      task.priority === 'high'
+                                        ? 'bg-rose-100 text-rose-700'
+                                        : task.priority === 'medium'
+                                          ? 'bg-amber-100 text-amber-700'
+                                          : 'bg-emerald-100 text-emerald-700',
+                                    ].join(' ')}
+                                  >
+                                    {getTaskPriorityLabel(task.priority)}
+                                  </span>
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="size-7 shrink-0 rounded-full"
+                                    onPointerDown={(event) =>
+                                      event.stopPropagation()
+                                    }
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      openEditTaskForm(task);
+                                    }}
+                                  >
+                                    <Pencil className="size-3.5" />
+                                  </Button>
+                                </div>
+                              </div>
+
+                              {task.tags ? (
+                                <div className="mb-2 flex flex-wrap gap-1">
+                                  {task.tags.split(',').map((tag) => (
+                                    <span
+                                      key={`${task.id}-${tag.trim()}`}
+                                      className="rounded-md bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
+                                    >
+                                      {tag.trim()}
+                                    </span>
+                                  ))}
+                                </div>
+                              ) : null}
+
+                              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                                <span className="inline-flex items-center gap-1">
+                                  <AlarmClock className="size-3.5" />
+                                  {formatDate(
+                                    task.dueDate,
+                                    getSettingValue,
+                                    currentLocaleCode
+                                  )}
+                                </span>
+                                <span>
+                                  {task.estimateHours != null
+                                    ? `${task.estimateHours}h`
+                                    : ''}
+                                </span>
+                              </div>
+
+                              {task.assigneeName ? (
+                                <div className="mt-2 flex items-center gap-1.5">
+                                  <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[9px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                                    {(() => {
+                                      const photoUrl = getUserPhotoUrl(
+                                        task.assigneeUserPhotoId
+                                      );
+                                      const avatarUrl =
+                                        task.assigneePersonAvatarId
+                                          ? getPersonAvatarUrl(
+                                              task.assigneePersonAvatarId
+                                            )
+                                          : null;
+                                      const imgSrc = photoUrl ?? avatarUrl;
+                                      return imgSrc ? (
+                                        // eslint-disable-next-line @next/next/no-img-element
+                                        <img
+                                          src={imgSrc}
+                                          alt={task.assigneeName}
+                                          className="size-full object-cover"
+                                        />
+                                      ) : (
+                                        getInitials(task.assigneeName)
+                                      );
+                                    })()}
+                                  </div>
+                                  <span className="truncate text-[11px] text-muted-foreground">
+                                    {task.assigneeName}
+                                  </span>
+                                </div>
+                              ) : null}
+                            </div>
+                          )}
+                        </DraggableTaskCard>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </DroppableColumn>
+            ))}
+          </div>
+        </DndContext>
+      </SectionCard>
+
+      <SectionCard
+        title={t('sections.archivedTasks')}
+        description={t('sections.archivedTasksDescription')}
+        className="rounded-xl border bg-card p-4 shadow-sm"
+      >
+        {archivedTasks.length > 0 ? (
+          <div className="overflow-x-auto rounded-lg border bg-muted/10">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{commonT('labels.name')}</TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead>{commonT('labels.deadline')}</TableHead>
+                  <TableHead className="text-right">
+                    {commonT('labels.actions')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {archivedTasks.map((task) => (
+                  <TableRow
+                    key={task.id}
+                    className="cursor-pointer hover:bg-muted/30"
+                    onClick={() => setSelectedTask(task)}
+                  >
+                    <TableCell>
+                      <div className="min-w-0">
+                        <div className="truncate font-medium">{task.name}</div>
+                        {task.description ? (
+                          <div className="truncate text-xs text-muted-foreground">
+                            {task.description}
+                          </div>
+                        ) : null}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={
+                          KANBAN_COLUMNS.find(
+                            (column) => column.id === task.status
+                          )?.label ?? formatEnumLabel(task.status)
+                        }
+                        className={getStatusBadgeClass(task.status)}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      {formatDate(
+                        task.dueDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="gap-2"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void handleRestoreTask(task.id);
+                          }}
+                        >
+                          <ArchiveRestore className="size-4" />
+                          {commonT('actions.unarchive')}
+                        </Button>
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          className="gap-2"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setDeletePromptTask(task);
+                          }}
+                        >
+                          <Trash2 className="size-4" />
+                          {commonT('actions.delete')}
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            {t('emptyArchivedDescription')}
+          </p>
+        )}
+      </SectionCard>
+
+      <SectionCard
+        title={t('sections.team')}
+        description={t('sections.teamDescription')}
+        className="rounded-xl border bg-card p-4 shadow-sm"
+      >
+        {project.assignments.length > 0 ? (
+          <div className="overflow-x-auto rounded-lg border bg-muted/10">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{commonT('labels.collaborator')}</TableHead>
+                  <TableHead>{commonT('labels.role')}</TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {project.assignments.map((assignment) => (
+                  <TableRow key={assignment.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Avatar className="h-8 w-8 border border-border/60 bg-muted">
+                          <AvatarImage
+                            src={
+                              getUserPhotoUrl(assignment.userPhotoId) ||
+                              getPersonAvatarUrl(assignment.avatarId)
+                            }
+                            alt={assignment.collaboratorName}
+                          />
+                          <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
+                            {getInitials(assignment.collaboratorName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span>{assignment.collaboratorName}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      {assignment.roleLabel || commonT('labels.notAssigned')}
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={assignment.status}
+                        className={getStatusBadgeClass(assignment.status)}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">{t('noAssignments')}</p>
+        )}
+      </SectionCard>
+
+      <TaskDetailSheet
+        task={selectedTask}
+        open={selectedTask !== null}
+        onOpenChange={(open) => {
+          if (!open) setSelectedTask(null);
+        }}
+        statusLabel={(status) => {
+          const map: Record<string, string> = {
+            todo: 'Backlog',
+            doing: 'Em execução',
+            review: 'Revisão',
+            done: 'Concluído',
+          };
+          return map[status] ?? status;
+        }}
+        footer={
+          selectedTask ? (
+            <div className="grid grid-cols-2 gap-3">
+              {archivedTasks.some((task) => task.id === selectedTask.id) ? (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-10 gap-2"
+                    onClick={() => void handleRestoreTask(selectedTask.id)}
+                  >
+                    <ArchiveRestore className="size-3.5" />
+                    {commonT('actions.unarchive')}
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    className="h-10 gap-2"
+                    onClick={() => setDeletePromptTask(selectedTask)}
+                  >
+                    <Trash2 className="size-3.5" />
+                    {commonT('actions.delete')}
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-10 gap-2"
+                    onClick={() => openEditTaskForm(selectedTask as BoardTask)}
+                  >
+                    <Pencil className="size-3.5" />
+                    {commonT('actions.edit')}
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    className="h-10 gap-2"
+                    onClick={() => void handleArchiveTask(selectedTask.id)}
+                  >
+                    <Archive className="size-3.5" />
+                    {commonT('actions.archive')}
+                  </Button>
+                </>
+              )}
+            </div>
+          ) : null
+        }
+      />
+
+      <Dialog
+        open={taskFormOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setTaskFormOpen(false);
+            setEditingTaskId(null);
+            setTaskFormData(EMPTY_TASK_FORM);
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>
+              {editingTaskId ? t('taskForm.titleEdit') : t('taskForm.titleNew')}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="task-name">{t('taskForm.nameLabel')} *</Label>
+              <Input
+                id="task-name"
+                placeholder={t('taskForm.namePlaceholder')}
+                value={taskFormData.name}
+                onChange={(e) =>
+                  setTaskFormData((prev) => ({
+                    ...prev,
+                    name: e.target.value,
+                  }))
+                }
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="task-description">
+                {t('taskForm.descriptionLabel')}
+              </Label>
+              <Textarea
+                id="task-description"
+                placeholder={t('taskForm.descriptionPlaceholder')}
+                rows={3}
+                value={taskFormData.description}
+                onChange={(e) =>
+                  setTaskFormData((prev) => ({
+                    ...prev,
+                    description: e.target.value,
+                  }))
+                }
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label>{t('taskForm.priorityLabel')}</Label>
+                <Select
+                  value={taskFormData.priority}
+                  onValueChange={(v) =>
+                    setTaskFormData((prev) => ({
+                      ...prev,
+                      priority: v as TaskFormState['priority'],
+                    }))
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="low">
+                      {getTaskPriorityLabel('low')}
+                    </SelectItem>
+                    <SelectItem value="medium">
+                      {getTaskPriorityLabel('medium')}
+                    </SelectItem>
+                    <SelectItem value="high">
+                      {getTaskPriorityLabel('high')}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label>{t('taskForm.columnLabel')}</Label>
+                <Select
+                  value={taskFormData.status}
+                  onValueChange={(v) =>
+                    setTaskFormData((prev) => ({
+                      ...prev,
+                      status: v as BoardColumnId,
+                    }))
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {KANBAN_COLUMNS.map((col) => (
+                      <SelectItem key={col.id} value={col.id}>
+                        {col.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label htmlFor="task-due-date">
+                  {t('taskForm.deadlineLabel')}
+                </Label>
+                <Input
+                  id="task-due-date"
+                  type="date"
+                  value={taskFormData.dueDate}
+                  onChange={(e) =>
+                    setTaskFormData((prev) => ({
+                      ...prev,
+                      dueDate: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="task-estimate">
+                  {t('taskForm.estimateLabel')}
+                </Label>
+                <Input
+                  id="task-estimate"
+                  type="number"
+                  min="0"
+                  step="0.5"
+                  placeholder="0"
+                  value={taskFormData.estimateHours}
+                  onChange={(e) =>
+                    setTaskFormData((prev) => ({
+                      ...prev,
+                      estimateHours: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="task-tags">{t('taskForm.tagsLabel')}</Label>
+              <Input
+                id="task-tags"
+                placeholder={t('taskForm.tagsPlaceholder')}
+                value={taskFormData.tags}
+                onChange={(e) =>
+                  setTaskFormData((prev) => ({
+                    ...prev,
+                    tags: e.target.value,
+                  }))
+                }
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="mt-4">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setTaskFormOpen(false);
+                setEditingTaskId(null);
+                setTaskFormData(EMPTY_TASK_FORM);
+              }}
+              disabled={taskFormLoading}
+            >
+              {commonT('actions.cancel')}
+            </Button>
+            <Button
+              onClick={() => void handleTaskFormSubmit()}
+              disabled={taskFormLoading || !taskFormData.name.trim()}
+            >
+              {taskFormLoading
+                ? t('taskForm.saving')
+                : editingTaskId
+                  ? commonT('actions.save')
+                  : commonT('actions.create')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={deletePromptTask !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeletePromptTask(null);
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{t('dialogs.deleteTitle')}</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-muted-foreground">
+            {t('dialogs.deleteDescription')}
+          </p>
+          <DialogFooter className="gap-2 sm:justify-between">
+            <Button variant="ghost" onClick={() => setDeletePromptTask(null)}>
+              {commonT('actions.cancel')}
+            </Button>
+            {deletePromptTask ? (
+              <Button
+                variant="destructive"
+                onClick={() => void handleDeleteTask(deletePromptTask.id)}
+              >
+                {commonT('actions.delete')}
+              </Button>
+            ) : null}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Page>
+  );
+}