@hed-hog/operations 0.0.318 → 0.0.319

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

@@ -57,6 +57,8 @@ import { CSS } from '@dnd-kit/utilities';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   AlarmClock,
+  Archive,
+  ArchiveRestore,
   BarChart3,
   FileText,
   FolderKanban,
@@ -81,7 +83,10 @@ import {
 } from 'recharts';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type { OperationsProjectDetails } from '../_lib/types';
+import type {
+  OperationsProjectDetails,
+  OperationsTaskOption,
+} from '../_lib/types';
 import {
   formatCurrency,
   formatDate,
@@ -95,6 +100,7 @@ import { OperationsHeader } from './operations-header';
 import { ProjectFormScreen } from './project-form-screen';
 import { SectionCard } from './section-card';
 import { StatusBadge } from './status-badge';
+import { TaskDetailSheet, type TaskDetailSheetData } from './task-detail-sheet';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
 
@@ -237,11 +243,17 @@ function DroppableColumn({
 
 function DraggableTaskCard({
   task,
+  disabled = false,
   children,
 }: {
   task: BoardTask;
+  disabled?: boolean;
   children: (isDragging: boolean) => React.ReactNode;
 }) {
+  if (disabled) {
+    return <div>{children(false)}</div>;
+  }
+
   const { attributes, listeners, setNodeRef, transform, isDragging } =
     useDraggable({ id: taskDragId(task.id) });
 
@@ -319,6 +331,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const contractT = useTranslations('operations.ContractFormPage');
   const { request, currentLocaleCode, getSettingValue } = useApp();
   const access = useOperationsAccess();
+  const isLimitedView = !access.isDirector && !access.isSupervisor;
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -365,8 +378,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   };
 
   const isEditSheetOpen = useMemo(
-    () => shouldOpenEditSheet(searchParams.get('edit'), projectId),
-    [projectId, searchParams]
+    () =>
+      !isLimitedView &&
+      shouldOpenEditSheet(searchParams.get('edit'), projectId),
+    [isLimitedView, projectId, searchParams]
   );
 
   const updateSheetQuery = (open: boolean) => {
@@ -443,6 +458,17 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     enabled: Boolean(project),
   });
 
+  const { data: archivedTasksResponse, refetch: refetchArchivedTasks } =
+    useQuery<{ data: OperationsTaskOption[] }>({
+      queryKey: ['operations-project-archived-tasks', projectId],
+      queryFn: () =>
+        fetchOperations<{ data: OperationsTaskOption[] }>(
+          request,
+          `/operations/tasks?projectId=${projectId}&pageSize=100&sortField=createdAt&sortOrder=desc&archived=true`
+        ),
+      enabled: Boolean(project),
+    });
+
   const { data: projectStats } = useQuery<{
     weeklyVelocity: Array<{ weekLabel: string; loggedHours: number }>;
     allocationByCollaborator: Array<{ name: string; allocation: number }>;
@@ -455,19 +481,29 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     queryKey: ['operations-project-stats', projectId],
     queryFn: () =>
       fetchOperations(request, `/operations/projects/${projectId}/stats`),
-    enabled: Boolean(project),
+    enabled: Boolean(project) && !isLimitedView,
   });
 
   const [boardState, setBoardState] = useState<BoardState | null>(null);
-  const [selectedTaskId, setSelectedTaskId] = useState<number | null>(null);
+  const [selectedTask, setSelectedTask] = 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 [deleteConfirmId, setDeleteConfirmId] = useState<number | null>(null);
+  const [deletePromptTask, setDeletePromptTask] =
+    useState<TaskDetailSheetData | null>(null);
 
   const apiTasks = useMemo(() => rawTasks.map(apiTaskToBoardTask), [rawTasks]);
+  const archivedTasks = useMemo(
+    () =>
+      (archivedTasksResponse?.data ?? []).filter((task) =>
+        Boolean(task.deletedAt)
+      ),
+    [archivedTasksResponse]
+  );
 
   const taskColumns: BoardColumns = useMemo(() => {
     if (project && boardState?.projectId === project.id) {
@@ -476,21 +512,6 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     return splitTasksByColumn(apiTasks);
   }, [project, boardState, apiTasks]);
 
-  const allTasks = useMemo(
-    () => [
-      ...taskColumns.todo,
-      ...taskColumns.doing,
-      ...taskColumns.review,
-      ...taskColumns.done,
-    ],
-    [taskColumns]
-  );
-
-  const selectedTask = useMemo(
-    () => allTasks.find((task) => task.id === selectedTaskId) ?? null,
-    [allTasks, selectedTaskId]
-  );
-
   const taskAssigneeOptions = useMemo(() => {
     const seen = new Set<number>();
     return (
@@ -536,7 +557,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         task.estimateHours != null ? String(task.estimateHours) : '',
       tags: task.tags ?? '',
     });
-    setSelectedTaskId(null);
+    setSelectedTask(null);
     setTaskFormOpen(true);
   }, []);
 
@@ -572,31 +593,83 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
       }
       setBoardState(null);
       await refetchTasks();
+      await refetchArchivedTasks();
       setTaskFormOpen(false);
       setEditingTaskId(null);
       setTaskFormData(EMPTY_TASK_FORM);
     } finally {
       setTaskFormLoading(false);
     }
-  }, [taskFormData, editingTaskId, projectId, request, refetchTasks]);
+  }, [
+    taskFormData,
+    editingTaskId,
+    projectId,
+    request,
+    refetchTasks,
+    refetchArchivedTasks,
+  ]);
+
+  const handleArchiveTask = useCallback(
+    async (taskId: number) => {
+      try {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${taskId}`,
+          'PATCH',
+          {
+            archived: true,
+          }
+        );
+        setBoardState(null);
+        setSelectedTask(null);
+        await refetchTasks();
+        await refetchArchivedTasks();
+      } catch {
+        // ignore
+      }
+    },
+    [request, refetchTasks, refetchArchivedTasks]
+  );
 
-  const handleDeleteTask = useCallback(
+  const handleRestoreTask = useCallback(
     async (taskId: number) => {
       try {
         await mutateOperations(
           request,
           `/operations/tasks/${taskId}`,
+          'PATCH',
+          {
+            archived: false,
+          }
+        );
+        setSelectedTask(null);
+        await refetchTasks();
+        await refetchArchivedTasks();
+      } catch {
+        // ignore
+      }
+    },
+    [request, refetchTasks, refetchArchivedTasks]
+  );
+
+  const handleDeleteTask = useCallback(
+    async (taskId: number) => {
+      try {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${taskId}?permanent=true`,
           'DELETE'
         );
         setBoardState(null);
-        setSelectedTaskId(null);
-        setDeleteConfirmId(null);
+        setSelectedTask(null);
+        setDeletePromptTask(null);
         await refetchTasks();
+        await refetchArchivedTasks();
       } catch {
         // ignore
       }
     },
-    [request, refetchTasks]
+    [request, refetchTasks, refetchArchivedTasks]
   );
 
   const allocationChartData = useMemo(() => {
@@ -772,232 +845,91 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         }
       />
 
-      <div className="rounded-xl border bg-linear-to-b from-muted/40 to-background p-3 sm:p-4">
-        <KpiCardsGrid items={cards} />
-      </div>
+      {!isLimitedView ? (
+        <>
+          <div className="rounded-xl border bg-linear-to-b from-muted/40 to-background p-3 sm:p-4">
+            <KpiCardsGrid items={cards} />
+          </div>
 
-      <div className="grid gap-4 xl:grid-cols-12">
-        <SectionCard
-          title={t('sections.overview')}
-          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-7"
-        >
-          <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-3">
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.project')}
-              </dt>
-              <dd className="font-medium">{project.name}</dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.code')}
-              </dt>
-              <dd className="font-medium">
-                {project.code || commonT('labels.notAvailable')}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.client')}
-              </dt>
-              <dd className="font-medium">
-                <div className="flex items-center gap-2">
-                  <Avatar className="h-8 w-8 border border-border/60 bg-muted">
-                    <AvatarImage
-                      src={getPersonAvatarUrl(project.clientAvatarId)}
-                      alt={project.clientName || commonT('labels.client')}
-                    />
-                    <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
-                      {getInitials(
-                        project.clientName || commonT('labels.client')
-                      )}
-                    </AvatarFallback>
-                  </Avatar>
-                  <span>
-                    {project.clientName || commonT('labels.notAvailable')}
-                  </span>
+          <div className="grid gap-4 xl:grid-cols-12">
+            <SectionCard
+              title={t('sections.overview')}
+              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-7"
+            >
+              <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-3">
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.project')}
+                  </dt>
+                  <dd className="font-medium">{project.name}</dd>
                 </div>
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.manager')}
-              </dt>
-              <dd className="font-medium">
-                {project.managerName || commonT('labels.notAssigned')}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.status')}
-              </dt>
-              <dd className="font-medium">
-                <StatusBadge
-                  label={getProjectStatusLabel(project.status)}
-                  className={getStatusBadgeClass(project.status)}
-                />
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.deliveryModel')}
-              </dt>
-              <dd className="font-medium">
-                {project.deliveryModel
-                  ? getDeliveryModelLabel(project.deliveryModel)
-                  : commonT('labels.notAvailable')}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.startDate')}
-              </dt>
-              <dd className="font-medium">
-                {formatDate(
-                  project.startDate,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.endDate')}
-              </dt>
-              <dd className="font-medium">
-                {formatDate(
-                  project.endDate,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.budget')}
-              </dt>
-              <dd className="font-medium">
-                {project.budgetAmount
-                  ? formatCurrency(
-                      project.budgetAmount,
-                      getSettingValue,
-                      currentLocaleCode
-                    )
-                  : commonT('labels.notAvailable')}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.progress')}
-              </dt>
-              <dd className="font-medium">
-                {formatPercent(project.progressPercent)}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.timeline')}
-              </dt>
-              <dd className="font-medium">
-                {formatDateRange(
-                  project.startDate,
-                  project.endDate,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.contractStatus')}
-              </dt>
-              <dd className="font-medium">
-                {project.contractStatus ? (
-                  <StatusBadge
-                    label={getContractStatusLabel(project.contractStatus)}
-                    className={getStatusBadgeClass(project.contractStatus)}
-                  />
-                ) : (
-                  commonT('labels.notAssigned')
-                )}
-              </dd>
-            </div>
-          </dl>
-          {project.summary ? (
-            <div className="mt-4 rounded-lg border border-border/70 bg-muted/30 p-3 text-sm text-muted-foreground">
-              {project.summary}
-            </div>
-          ) : null}
-        </SectionCard>
-
-        <SectionCard
-          title={t('sections.contract')}
-          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-5"
-        >
-          {project.relatedContract ? (
-            <div className="space-y-3">
-              <div className="flex items-center justify-between rounded-lg border bg-muted/20 px-4 py-3">
                 <div>
-                  <div className="font-medium">
-                    {project.relatedContract.name}
-                  </div>
-                  <div className="text-sm text-muted-foreground">
-                    {[
-                      project.relatedContract.code,
-                      project.relatedContract.clientName,
-                    ]
-                      .filter(Boolean)
-                      .join(' • ') || commonT('labels.notAvailable')}
-                  </div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.code')}
+                  </dt>
+                  <dd className="font-medium">
+                    {project.code || commonT('labels.notAvailable')}
+                  </dd>
                 </div>
-                <StatusBadge
-                  label={getContractStatusLabel(project.relatedContract.status)}
-                  className={getStatusBadgeClass(
-                    project.relatedContract.status
-                  )}
-                />
-              </div>
-              <dl className="grid gap-3 text-sm md:grid-cols-2">
                 <div>
                   <dt className="text-muted-foreground">
-                    {commonT('labels.contractCategory')}
+                    {commonT('labels.client')}
                   </dt>
                   <dd className="font-medium">
-                    {project.relatedContract.contractCategory
-                      ? getContractCategoryLabel(
-                          project.relatedContract.contractCategory
-                        )
-                      : commonT('labels.notAvailable')}
+                    <div className="flex items-center gap-2">
+                      <Avatar className="h-8 w-8 border border-border/60 bg-muted">
+                        <AvatarImage
+                          src={getPersonAvatarUrl(project.clientAvatarId)}
+                          alt={project.clientName || commonT('labels.client')}
+                        />
+                        <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
+                          {getInitials(
+                            project.clientName || commonT('labels.client')
+                          )}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span>
+                        {project.clientName || commonT('labels.notAvailable')}
+                      </span>
+                    </div>
                   </dd>
                 </div>
                 <div>
                   <dt className="text-muted-foreground">
-                    {commonT('labels.contractType')}
+                    {commonT('labels.manager')}
                   </dt>
                   <dd className="font-medium">
-                    {project.relatedContract.contractType
-                      ? getContractTypeLabel(
-                          project.relatedContract.contractType
-                        )
-                      : commonT('labels.notAvailable')}
+                    {project.managerName || commonT('labels.notAssigned')}
                   </dd>
                 </div>
                 <div>
                   <dt className="text-muted-foreground">
-                    {commonT('labels.billingModel')}
+                    {commonT('labels.status')}
                   </dt>
                   <dd className="font-medium">
-                    {getBillingModelLabel(project.relatedContract.billingModel)}
+                    <StatusBadge
+                      label={getProjectStatusLabel(project.status)}
+                      className={getStatusBadgeClass(project.status)}
+                    />
                   </dd>
                 </div>
                 <div>
                   <dt className="text-muted-foreground">
-                    {commonT('labels.timeline')}
+                    {commonT('labels.deliveryModel')}
                   </dt>
                   <dd className="font-medium">
-                    {formatDateRange(
-                      project.relatedContract.startDate,
-                      project.relatedContract.endDate,
+                    {project.deliveryModel
+                      ? getDeliveryModelLabel(project.deliveryModel)
+                      : commonT('labels.notAvailable')}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.startDate')}
+                  </dt>
+                  <dd className="font-medium">
+                    {formatDate(
+                      project.startDate,
                       getSettingValue,
                       currentLocaleCode
                     )}
@@ -1005,14 +937,14 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                 </div>
                 <div>
                   <dt className="text-muted-foreground">
-                    {commonT('labels.signatureStatus')}
+                    {commonT('labels.endDate')}
                   </dt>
                   <dd className="font-medium">
-                    {project.relatedContract.signatureStatus
-                      ? getSignatureStatusLabel(
-                          project.relatedContract.signatureStatus
-                        )
-                      : commonT('labels.notAvailable')}
+                    {formatDate(
+                      project.endDate,
+                      getSettingValue,
+                      currentLocaleCode
+                    )}
                   </dd>
                 </div>
                 <div>
@@ -1020,148 +952,309 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                     {commonT('labels.budget')}
                   </dt>
                   <dd className="font-medium">
-                    {project.relatedContract.budgetAmount
+                    {project.budgetAmount
                       ? formatCurrency(
-                          project.relatedContract.budgetAmount,
+                          project.budgetAmount,
                           getSettingValue,
                           currentLocaleCode
                         )
                       : commonT('labels.notAvailable')}
                   </dd>
                 </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.progress')}
+                  </dt>
+                  <dd className="font-medium">
+                    {formatPercent(project.progressPercent)}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.timeline')}
+                  </dt>
+                  <dd className="font-medium">
+                    {formatDateRange(
+                      project.startDate,
+                      project.endDate,
+                      getSettingValue,
+                      currentLocaleCode
+                    )}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.contractStatus')}
+                  </dt>
+                  <dd className="font-medium">
+                    {project.contractStatus ? (
+                      <StatusBadge
+                        label={getContractStatusLabel(project.contractStatus)}
+                        className={getStatusBadgeClass(project.contractStatus)}
+                      />
+                    ) : (
+                      commonT('labels.notAssigned')
+                    )}
+                  </dd>
+                </div>
               </dl>
+              {project.summary ? (
+                <div className="mt-4 rounded-lg border border-border/70 bg-muted/30 p-3 text-sm text-muted-foreground">
+                  {project.summary}
+                </div>
+              ) : null}
+            </SectionCard>
 
-              <Button variant="outline" size="sm" asChild className="w-fit">
-                <Link
-                  href={`/operations/contracts?edit=${project.relatedContract.id}`}
-                >
-                  <FileText className="size-4" />
-                  {commonT('actions.openContract')}
-                </Link>
-              </Button>
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">{t('noContract')}</p>
-          )}
-        </SectionCard>
-      </div>
+            <SectionCard
+              title={t('sections.contract')}
+              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-5"
+            >
+              {project.relatedContract ? (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between rounded-lg border bg-muted/20 px-4 py-3">
+                    <div>
+                      <div className="font-medium">
+                        {project.relatedContract.name}
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        {[
+                          project.relatedContract.code,
+                          project.relatedContract.clientName,
+                        ]
+                          .filter(Boolean)
+                          .join(' • ') || commonT('labels.notAvailable')}
+                      </div>
+                    </div>
+                    <StatusBadge
+                      label={getContractStatusLabel(
+                        project.relatedContract.status
+                      )}
+                      className={getStatusBadgeClass(
+                        project.relatedContract.status
+                      )}
+                    />
+                  </div>
+                  <dl className="grid gap-3 text-sm md:grid-cols-2">
+                    <div>
+                      <dt className="text-muted-foreground">
+                        {commonT('labels.contractCategory')}
+                      </dt>
+                      <dd className="font-medium">
+                        {project.relatedContract.contractCategory
+                          ? getContractCategoryLabel(
+                              project.relatedContract.contractCategory
+                            )
+                          : commonT('labels.notAvailable')}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-muted-foreground">
+                        {commonT('labels.contractType')}
+                      </dt>
+                      <dd className="font-medium">
+                        {project.relatedContract.contractType
+                          ? getContractTypeLabel(
+                              project.relatedContract.contractType
+                            )
+                          : commonT('labels.notAvailable')}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-muted-foreground">
+                        {commonT('labels.billingModel')}
+                      </dt>
+                      <dd className="font-medium">
+                        {getBillingModelLabel(
+                          project.relatedContract.billingModel
+                        )}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-muted-foreground">
+                        {commonT('labels.timeline')}
+                      </dt>
+                      <dd className="font-medium">
+                        {formatDateRange(
+                          project.relatedContract.startDate,
+                          project.relatedContract.endDate,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-muted-foreground">
+                        {commonT('labels.signatureStatus')}
+                      </dt>
+                      <dd className="font-medium">
+                        {project.relatedContract.signatureStatus
+                          ? getSignatureStatusLabel(
+                              project.relatedContract.signatureStatus
+                            )
+                          : commonT('labels.notAvailable')}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-muted-foreground">
+                        {commonT('labels.budget')}
+                      </dt>
+                      <dd className="font-medium">
+                        {project.relatedContract.budgetAmount
+                          ? formatCurrency(
+                              project.relatedContract.budgetAmount,
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : commonT('labels.notAvailable')}
+                      </dd>
+                    </div>
+                  </dl>
+
+                  <Button variant="outline" size="sm" asChild className="w-fit">
+                    <Link
+                      href={`/operations/contracts?edit=${project.relatedContract.id}`}
+                    >
+                      <FileText className="size-4" />
+                      {commonT('actions.openContract')}
+                    </Link>
+                  </Button>
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  {t('noContract')}
+                </p>
+              )}
+            </SectionCard>
+          </div>
 
-      <div className="grid gap-4 xl:grid-cols-12">
-        <SectionCard
-          title={t('sections.deliveryHealth')}
-          description={t('sections.deliveryHealthDescription')}
-          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-7"
-        >
-          <div className="grid gap-4 lg:grid-cols-2">
-            <div className="rounded-lg border bg-muted/10 p-3">
-              <div className="mb-2 flex items-center gap-2 text-sm font-medium">
-                <BarChart3 className="size-4 text-sky-700" />
-                {t('charts.allocationByCollaborator')}
-              </div>
-              <ChartContainer className="h-60 w-full" config={boardChartConfig}>
-                <BarChart data={allocationChartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis dataKey="name" tickLine={false} axisLine={false} />
-                  <YAxis tickLine={false} axisLine={false} width={28} />
-                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-                  <Bar
-                    dataKey="allocation"
-                    radius={6}
-                    fill="var(--color-allocation)"
-                  />
-                </BarChart>
-              </ChartContainer>
-            </div>
+          <div className="grid gap-4 xl:grid-cols-12">
+            <SectionCard
+              title={t('sections.deliveryHealth')}
+              description={t('sections.deliveryHealthDescription')}
+              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-7"
+            >
+              <div className="grid gap-4 lg:grid-cols-2">
+                <div className="rounded-lg border bg-muted/10 p-3">
+                  <div className="mb-2 flex items-center gap-2 text-sm font-medium">
+                    <BarChart3 className="size-4 text-sky-700" />
+                    {t('charts.allocationByCollaborator')}
+                  </div>
+                  <ChartContainer
+                    className="h-60 w-full"
+                    config={boardChartConfig}
+                  >
+                    <BarChart data={allocationChartData}>
+                      <CartesianGrid vertical={false} />
+                      <XAxis dataKey="name" tickLine={false} axisLine={false} />
+                      <YAxis tickLine={false} axisLine={false} width={28} />
+                      <ChartTooltip
+                        content={<ChartTooltipContent hideLabel />}
+                      />
+                      <Bar
+                        dataKey="allocation"
+                        radius={6}
+                        fill="var(--color-allocation)"
+                      />
+                    </BarChart>
+                  </ChartContainer>
+                </div>
 
-            <div className="rounded-lg border bg-muted/10 p-3">
-              <div className="mb-2 flex items-center gap-2 text-sm font-medium">
-                <Rocket className="size-4 text-emerald-700" />
-                {t('charts.weeklyVelocity')}
+                <div className="rounded-lg border bg-muted/10 p-3">
+                  <div className="mb-2 flex items-center gap-2 text-sm font-medium">
+                    <Rocket className="size-4 text-emerald-700" />
+                    {t('charts.weeklyVelocity')}
+                  </div>
+                  <ChartContainer
+                    className="h-60 w-full"
+                    config={boardChartConfig}
+                  >
+                    <LineChart data={velocityChartData}>
+                      <CartesianGrid vertical={false} />
+                      <XAxis dataKey="week" tickLine={false} axisLine={false} />
+                      <YAxis tickLine={false} axisLine={false} width={28} />
+                      <ChartTooltip content={<ChartTooltipContent />} />
+                      <Line
+                        type="monotone"
+                        dataKey="loggedHours"
+                        stroke="var(--color-loggedHours)"
+                        strokeWidth={2.5}
+                        dot={{ r: 3 }}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="completedTasks"
+                        stroke="var(--color-allocation)"
+                        strokeWidth={2}
+                        dot={{ r: 3 }}
+                      />
+                    </LineChart>
+                  </ChartContainer>
+                </div>
               </div>
-              <ChartContainer className="h-60 w-full" config={boardChartConfig}>
-                <LineChart data={velocityChartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis dataKey="week" tickLine={false} axisLine={false} />
-                  <YAxis tickLine={false} axisLine={false} width={28} />
-                  <ChartTooltip content={<ChartTooltipContent />} />
-                  <Line
-                    type="monotone"
-                    dataKey="loggedHours"
-                    stroke="var(--color-loggedHours)"
-                    strokeWidth={2.5}
-                    dot={{ r: 3 }}
-                  />
-                  <Line
-                    type="monotone"
-                    dataKey="completedTasks"
-                    stroke="var(--color-allocation)"
-                    strokeWidth={2}
-                    dot={{ r: 3 }}
-                  />
-                </LineChart>
-              </ChartContainer>
-            </div>
-          </div>
-        </SectionCard>
+            </SectionCard>
 
-        <SectionCard
-          title={t('sections.quickRadar')}
-          description={t('sections.quickRadarDescription')}
-          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-5"
-        >
-          <div className="space-y-3">
-            <div className="rounded-lg border bg-emerald-50/50 p-3">
-              <div className="flex items-center justify-between text-sm">
-                <span className="text-muted-foreground">
-                  {t('quickRadar.activeAssignments')}
-                </span>
-                <span className="font-semibold text-emerald-700">
-                  {projectStats?.quickRadar?.activeAssignments ??
-                    project.operationalIndicators.activeAssignments}
-                </span>
-              </div>
-            </div>
-            <div className="rounded-lg border bg-amber-50/50 p-3">
-              <div className="flex items-center justify-between text-sm">
-                <span className="text-muted-foreground">
-                  {t('quickRadar.timesheetPendencies')}
-                </span>
-                <span className="font-semibold text-amber-700">
-                  {projectStats?.quickRadar?.pendingTimesheets ??
-                    project.timesheetSummary.pendingTimesheets}
-                </span>
-              </div>
-            </div>
-            <div className="rounded-lg border bg-sky-50/50 p-3">
-              <div className="flex items-center justify-between text-sm">
-                <span className="text-muted-foreground">
-                  {t('quickRadar.plannedWeeklyHours')}
-                </span>
-                <span className="font-semibold text-sky-700">
-                  {formatHours(
-                    projectStats?.quickRadar?.totalWeeklyHours ??
-                      project.operationalIndicators.totalWeeklyHours
-                  )}
-                </span>
+            <SectionCard
+              title={t('sections.quickRadar')}
+              description={t('sections.quickRadarDescription')}
+              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-5"
+            >
+              <div className="space-y-3">
+                <div className="rounded-lg border bg-emerald-50/50 p-3">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">
+                      {t('quickRadar.activeAssignments')}
+                    </span>
+                    <span className="font-semibold text-emerald-700">
+                      {projectStats?.quickRadar?.activeAssignments ??
+                        project.operationalIndicators.activeAssignments}
+                    </span>
+                  </div>
+                </div>
+                <div className="rounded-lg border bg-amber-50/50 p-3">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">
+                      {t('quickRadar.timesheetPendencies')}
+                    </span>
+                    <span className="font-semibold text-amber-700">
+                      {projectStats?.quickRadar?.pendingTimesheets ??
+                        project.timesheetSummary.pendingTimesheets}
+                    </span>
+                  </div>
+                </div>
+                <div className="rounded-lg border bg-sky-50/50 p-3">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">
+                      {t('quickRadar.plannedWeeklyHours')}
+                    </span>
+                    <span className="font-semibold text-sky-700">
+                      {formatHours(
+                        projectStats?.quickRadar?.totalWeeklyHours ??
+                          project.operationalIndicators.totalWeeklyHours
+                      )}
+                    </span>
+                  </div>
+                </div>
               </div>
-            </div>
+            </SectionCard>
           </div>
-        </SectionCard>
-      </div>
+        </>
+      ) : null}
 
       <SectionCard
         title={t('sections.taskBoard')}
         description={t('sections.taskBoardDescription')}
         className="rounded-xl border bg-card p-4 shadow-sm"
         actions={
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => openCreateTaskForm()}
-          >
-            <Plus className="size-4" />
-            {t('taskForm.titleNew')}
-          </Button>
+          !isLimitedView ? (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => openCreateTaskForm()}
+            >
+              <Plus className="size-4" />
+              {t('taskForm.titleNew')}
+            </Button>
+          ) : undefined
         }
       >
         <DndContext
@@ -1193,34 +1286,65 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
                     <div className="space-y-2">
                       {taskColumns[column.id].map((task) => (
-                        <DraggableTaskCard key={task.id} task={task}>
+                        <DraggableTaskCard
+                          key={task.id}
+                          task={task}
+                          disabled={false}
+                        >
                           {(isDragging) => (
-                            <button
-                              type="button"
+                            <div
+                              role="button"
+                              tabIndex={0}
                               className={[
                                 'w-full cursor-pointer 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(' ')}
-                              onClick={() => setSelectedTaskId(task.id)}
+                              onClick={() => setSelectedTask(task)}
+                              onKeyDown={(event) => {
+                                if (
+                                  event.key === 'Enter' ||
+                                  event.key === ' '
+                                ) {
+                                  event.preventDefault();
+                                  setSelectedTask(task);
+                                }
+                              }}
                             >
                               <div className="mb-2 flex items-start justify-between gap-2">
                                 <p className="text-sm font-medium leading-snug">
                                   {task.name}
                                 </p>
-                                <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>
+                                <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 ? (
@@ -1283,7 +1407,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                                   </span>
                                 </div>
                               ) : null}
-                            </button>
+                            </div>
                           )}
                         </DraggableTaskCard>
                       ))}
@@ -1296,11 +1420,106 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         </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.task')}</TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead>{t('taskForm.deadlineLabel')}</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>
+
       <div className="grid gap-4 xl:grid-cols-12">
         <SectionCard
           title={t('sections.team')}
           description={t('sections.teamDescription')}
-          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-8"
+          className={[
+            'rounded-xl border bg-card p-4 shadow-sm',
+            isLimitedView ? 'xl:col-span-12' : 'xl:col-span-8',
+          ].join(' ')}
         >
           {project.assignments.length > 0 ? (
             <div className="overflow-x-auto rounded-lg border bg-muted/10">
@@ -1376,190 +1595,118 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
           )}
         </SectionCard>
 
-        <SectionCard
-          title={t('sections.indicators')}
-          description={t('sections.indicatorsDescription')}
-          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-4"
-        >
-          <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-1">
-            <div>
-              <dt className="text-muted-foreground">
-                {t('indicators.activeAssignments')}
-              </dt>
-              <dd className="font-medium">
-                {project.operationalIndicators.activeAssignments}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {t('indicators.completedAssignments')}
-              </dt>
-              <dd className="font-medium">
-                {project.operationalIndicators.completedAssignments}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {t('indicators.averageAllocation')}
-              </dt>
-              <dd className="font-medium">
-                {formatPercent(project.operationalIndicators.averageAllocation)}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {t('indicators.totalWeeklyHours')}
-              </dt>
-              <dd className="font-medium">
-                {formatHours(project.operationalIndicators.totalWeeklyHours)}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">{t('cards.timesheets')}</dt>
-              <dd className="font-medium">
-                {project.timesheetSummary.totalTimesheets}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {commonT('labels.pending')}
-              </dt>
-              <dd className="font-medium">
-                {project.timesheetSummary.pendingTimesheets}
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {t('cards.loggedHours')}
-              </dt>
-              <dd className="font-medium">
-                {formatHours(project.timesheetSummary.totalHours)}
-              </dd>
-            </div>
-          </dl>
-        </SectionCard>
+        {!isLimitedView ? (
+          <SectionCard
+            title={t('sections.indicators')}
+            description={t('sections.indicatorsDescription')}
+            className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-4"
+          >
+            <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-1">
+              <div>
+                <dt className="text-muted-foreground">
+                  {t('indicators.activeAssignments')}
+                </dt>
+                <dd className="font-medium">
+                  {project.operationalIndicators.activeAssignments}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {t('indicators.completedAssignments')}
+                </dt>
+                <dd className="font-medium">
+                  {project.operationalIndicators.completedAssignments}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {t('indicators.averageAllocation')}
+                </dt>
+                <dd className="font-medium">
+                  {formatPercent(
+                    project.operationalIndicators.averageAllocation
+                  )}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {t('indicators.totalWeeklyHours')}
+                </dt>
+                <dd className="font-medium">
+                  {formatHours(project.operationalIndicators.totalWeeklyHours)}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {t('cards.timesheets')}
+                </dt>
+                <dd className="font-medium">
+                  {project.timesheetSummary.totalTimesheets}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {commonT('labels.pending')}
+                </dt>
+                <dd className="font-medium">
+                  {project.timesheetSummary.pendingTimesheets}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {t('cards.loggedHours')}
+                </dt>
+                <dd className="font-medium">
+                  {formatHours(project.timesheetSummary.totalHours)}
+                </dd>
+              </div>
+            </dl>
+          </SectionCard>
+        ) : null}
       </div>
 
-      <Sheet
-        open={Boolean(selectedTask)}
+      <TaskDetailSheet
+        task={selectedTask}
+        open={selectedTask !== null}
         onOpenChange={(open) => {
           if (!open) {
-            setSelectedTaskId(null);
+            setSelectedTask(null);
           }
         }}
-      >
-        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-lg">
-          {selectedTask ? (
-            <>
-              <SheetHeader>
-                <SheetTitle>{selectedTask.name}</SheetTitle>
-                <SheetDescription>
-                  Detalhes da tarefa e contexto de execução.
-                </SheetDescription>
-              </SheetHeader>
-
-              <div className="mt-4 space-y-4">
-                {selectedTask.description ? (
-                  <div className="rounded-lg border bg-muted/10 p-3 text-sm text-muted-foreground">
-                    {selectedTask.description}
-                  </div>
-                ) : null}
-
-                <div className="grid grid-cols-2 gap-3 text-sm">
-                  <div className="rounded-lg border p-3">
-                    <div className="mb-1 text-xs text-muted-foreground">
-                      Prioridade
-                    </div>
-                    <div className="font-medium">
-                      {getTaskPriorityLabel(selectedTask.priority)}
-                    </div>
-                  </div>
-                  <div className="rounded-lg border p-3">
-                    <div className="mb-1 text-xs text-muted-foreground">
-                      Estimativa
-                    </div>
-                    <div className="font-medium">
-                      {selectedTask.estimateHours != null
-                        ? `${selectedTask.estimateHours} horas`
-                        : '—'}
-                    </div>
-                  </div>
-                  <div className="rounded-lg border p-3">
-                    <div className="mb-1 text-xs text-muted-foreground">
-                      Prazo
-                    </div>
-                    <div className="font-medium">
-                      {formatDate(
-                        selectedTask.dueDate,
-                        getSettingValue,
-                        currentLocaleCode
-                      )}
-                    </div>
-                  </div>
-                  <div className="rounded-lg border p-3">
-                    <div className="mb-1 text-xs text-muted-foreground">
-                      Status
-                    </div>
-                    <div className="font-medium">
-                      {
-                        KANBAN_COLUMNS.find(
-                          (column) => column.id === selectedTask.status
-                        )?.label
-                      }
-                    </div>
-                  </div>
-                </div>
-
-                <div className="rounded-lg border p-3">
-                  <div className="mb-2 text-xs text-muted-foreground">
-                    Responsavel
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <Avatar className="h-8 w-8 border border-border/60 bg-muted">
-                      <AvatarImage
-                        src={
-                          getUserPhotoUrl(selectedTask.assigneeUserPhotoId) ||
-                          getPersonAvatarUrl(
-                            selectedTask.assigneePersonAvatarId
-                          )
-                        }
-                        alt={selectedTask.assigneeName || 'Responsavel'}
-                      />
-                      <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
-                        {getInitials(selectedTask.assigneeName || 'N/A')}
-                      </AvatarFallback>
-                    </Avatar>
-                    <span>
-                      {selectedTask.assigneeName ||
-                        commonT('labels.notAssigned')}
-                    </span>
-                  </div>
-                </div>
-
-                {selectedTask.tags ? (
-                  <div className="rounded-lg border p-3">
-                    <div className="mb-2 text-xs text-muted-foreground">
-                      Etiquetas
-                    </div>
-                    <div className="flex flex-wrap gap-1.5">
-                      {selectedTask.tags.split(',').map((tag) => (
-                        <span
-                          key={`${selectedTask.id}-sheet-${tag.trim()}`}
-                          className="rounded-md bg-muted px-2 py-1 text-xs"
-                        >
-                          {tag.trim()}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                ) : null}
-
-                <div className="grid grid-cols-2 gap-3 border-t pt-5">
+        statusLabel={(status) =>
+          KANBAN_COLUMNS.find((column) => column.id === status)?.label ?? status
+        }
+        footer={
+          selectedTask && !isLimitedView ? (
+            <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={() => openEditTaskForm(selectedTask)}
+                    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')}
@@ -1567,284 +1714,298 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   <Button
                     variant="outline"
                     size="sm"
-                    className="h-10 gap-2 text-destructive hover:bg-destructive/10"
-                    onClick={() => setDeleteConfirmId(selectedTask.id)}
+                    className="h-10 gap-2"
+                    onClick={() => void handleArchiveTask(selectedTask.id)}
                   >
-                    <Trash2 className="size-3.5" />
-                    {commonT('actions.delete')}
+                    <Archive className="size-3.5" />
+                    {commonT('actions.archive')}
                   </Button>
-                </div>
-              </div>
-            </>
-          ) : null}
-        </SheetContent>
-      </Sheet>
-
-      <Sheet
-        open={isEditSheetOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            closeEditSheet();
-          }
-        }}
-      >
-        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
-          <SheetHeader>
-            <SheetTitle>{formT('editTitle')}</SheetTitle>
-            <SheetDescription>{formT('description')}</SheetDescription>
-          </SheetHeader>
-
-          <ProjectFormScreen
-            projectId={projectId}
-            onCancel={closeEditSheet}
-            onSaved={async () => {
-              closeEditSheet();
-              await refetch();
-            }}
-          />
-        </SheetContent>
-      </Sheet>
-
-      {/* Task form dialog */}
-      <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>
+          ) : null
+        }
+      />
 
-            <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>
+      {!isLimitedView ? (
+        <Sheet
+          open={isEditSheetOpen}
+          onOpenChange={(open) => {
+            if (!open) {
+              closeEditSheet();
+            }
+          }}
+        >
+          <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
+            <SheetHeader>
+              <SheetTitle>{formT('editTitle')}</SheetTitle>
+              <SheetDescription>{formT('description')}</SheetDescription>
+            </SheetHeader>
+
+            <ProjectFormScreen
+              projectId={projectId}
+              onCancel={closeEditSheet}
+              onSaved={async () => {
+                closeEditSheet();
+                await refetch();
+              }}
+            />
+          </SheetContent>
+        </Sheet>
+      ) : null}
+
+      {!isLimitedView ? (
+        <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="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <Label>{t('taskForm.priorityLabel')}</Label>
-                <Select
-                  value={taskFormData.priority}
-                  onValueChange={(v) =>
+                <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,
-                      priority: v as TaskFormState['priority'],
+                      description: e.target.value,
                     }))
                   }
-                >
-                  <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="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="space-y-1.5">
-                <Label>{t('taskForm.columnLabel')}</Label>
+                <Label>Responsável</Label>
                 <Select
-                  value={taskFormData.status}
-                  onValueChange={(v) =>
+                  value={taskFormData.assigneeCollaboratorId}
+                  onValueChange={(value) =>
                     setTaskFormData((prev) => ({
                       ...prev,
-                      status: v as BoardColumnId,
+                      assigneeCollaboratorId: value,
                     }))
                   }
                 >
                   <SelectTrigger className="w-full">
-                    <SelectValue />
+                    <SelectValue placeholder={commonT('labels.notAssigned')} />
                   </SelectTrigger>
                   <SelectContent>
-                    {KANBAN_COLUMNS.map((col) => (
-                      <SelectItem key={col.id} value={col.id}>
-                        {col.label}
+                    <SelectItem value="none">
+                      {commonT('labels.notAssigned')}
+                    </SelectItem>
+                    {taskAssigneeOptions.map((option) => (
+                      <SelectItem key={option.id} value={option.id}>
+                        {option.label}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
               </div>
-            </div>
 
-            <div className="space-y-1.5">
-              <Label>Responsável</Label>
-              <Select
-                value={taskFormData.assigneeCollaboratorId}
-                onValueChange={(value) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    assigneeCollaboratorId: value,
-                  }))
-                }
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder={commonT('labels.notAssigned')} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">
-                    {commonT('labels.notAssigned')}
-                  </SelectItem>
-                  {taskAssigneeOptions.map((option) => (
-                    <SelectItem key={option.id} value={option.id}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </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="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 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-estimate">
-                  {t('taskForm.estimateLabel')}
-                </Label>
+                <Label htmlFor="task-tags">{t('taskForm.tagsLabel')}</Label>
                 <Input
-                  id="task-estimate"
-                  type="number"
-                  min="0"
-                  step="0.5"
-                  placeholder="0"
-                  value={taskFormData.estimateHours}
+                  id="task-tags"
+                  placeholder={t('taskForm.tagsPlaceholder')}
+                  value={taskFormData.tags}
                   onChange={(e) =>
                     setTaskFormData((prev) => ({
                       ...prev,
-                      estimateHours: e.target.value,
+                      tags: 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>
-
-      {/* Delete confirmation dialog */}
-      <Dialog
-        open={deleteConfirmId !== null}
-        onOpenChange={(open) => {
-          if (!open) setDeleteConfirmId(null);
-        }}
-      >
-        <DialogContent className="sm:max-w-sm">
-          <DialogHeader>
-            <DialogTitle>Excluir tarefa</DialogTitle>
-          </DialogHeader>
-          <p className="text-sm text-muted-foreground">
-            Tem certeza que deseja excluir esta tarefa? Esta acao nao pode ser
-            desfeita.
-          </p>
-          <DialogFooter className="mt-4">
-            <Button variant="outline" onClick={() => setDeleteConfirmId(null)}>
-              Cancelar
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={() => {
-                if (deleteConfirmId !== null) {
-                  void handleDeleteTask(deleteConfirmId);
-                }
-              }}
-            >
-              Excluir
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+            <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>
+      ) : null}
+
+      {!isLimitedView ? (
+        <>
+          <Dialog
+            open={deletePromptTask !== null}
+            onOpenChange={(open) => {
+              if (!open) setDeletePromptTask(null);
+            }}
+          >
+            <DialogContent className="sm:max-w-sm">
+              <DialogHeader>
+                <DialogTitle>{t('dialogs.deleteTitle')}</DialogTitle>
+              </DialogHeader>
+              <p className="text-sm text-muted-foreground">
+                {t('dialogs.deleteDescription')}
+              </p>
+              <DialogFooter className="mt-4">
+                <Button
+                  variant="outline"
+                  onClick={() => setDeletePromptTask(null)}
+                >
+                  {commonT('actions.cancel')}
+                </Button>
+                {deletePromptTask ? (
+                  <Button
+                    variant="destructive"
+                    onClick={() => void handleDeleteTask(deletePromptTask.id)}
+                  >
+                    {commonT('actions.delete')}
+                  </Button>
+                ) : null}
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </>
+      ) : null}
     </Page>
   );
 }