@hed-hog/operations 0.0.330 → 0.0.332

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
-import { RichTextEditor } from '@/components/rich-text-editor';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -14,10 +13,12 @@ import {
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
@@ -95,10 +96,12 @@ import {
   Plus,
   Rocket,
   Search,
+  Send,
   SlidersHorizontal,
   Timer,
   Trash2,
   TrendingUp,
+  UserPlus,
   Users,
   type LucideIcon,
 } from 'lucide-react';
@@ -125,15 +128,17 @@ import {
   YAxis,
 } from 'recharts';
 import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useMentionItems } from '../_lib/hooks/use-mention-items';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import {
   MASKED_VALUE,
   useValuesVisibility,
 } from '../_lib/hooks/use-values-visibility';
 import type {
+  OperationsCollaborator,
+  OperationsCollaboratorDetails,
   OperationsProjectDetails,
   OperationsTaskOption,
+  PaginatedResponse,
 } from '../_lib/types';
 import {
   formatCurrency,
@@ -144,17 +149,16 @@ import {
   formatPercent,
   getStatusBadgeClass,
 } from '../_lib/utils/format';
+import { parseNumberInput } from '../_lib/utils/forms';
 import { OperationsHeader } from './operations-header';
 import { ProjectCostsSection } from './project-costs-section';
+import { ProjectFileAttachments } from './project-file-attachments';
 import { ProjectFormScreen } from './project-form-screen';
 import { SectionCard } from './section-card';
 import { StatusBadge } from './status-badge';
-import {
-  TaskCommentsSection,
-  TaskDetailSheet,
-  type TaskDetailSheetData,
-} from './task-detail-sheet';
-import { TaskFileAttachments } from './task-file-attachments';
+import { TaskDetailSheet, type TaskDetailSheetData } from './task-detail-sheet';
+import { TaskFormSheet } from './task-form-sheet';
+import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
 
@@ -175,6 +179,8 @@ type BoardTask = {
   createdAt: string | null;
   commentCount: number;
   fileCount: number;
+  doingStartedAt: string | null;
+  totalDoingMinutes: number;
 };
 
 type ApiBoardTask = Partial<BoardTask> & {
@@ -184,28 +190,6 @@ type ApiBoardTask = Partial<BoardTask> & {
   priority?: BoardTask['priority'] | null;
 };
 
-type TaskFormState = {
-  name: string;
-  description: string;
-  priority: 'low' | 'medium' | 'high';
-  status: BoardColumnId;
-  assigneeCollaboratorId: string;
-  dueDate: string;
-  estimateHours: string;
-  tags: string;
-};
-
-const EMPTY_TASK_FORM: TaskFormState = {
-  name: '',
-  description: '',
-  priority: 'medium',
-  status: 'todo',
-  assigneeCollaboratorId: 'none',
-  dueDate: '',
-  estimateHours: '',
-  tags: '',
-};
-
 type BoardColumns = Record<BoardColumnId, BoardTask[]>;
 
 type BoardState = {
@@ -213,6 +197,23 @@ type BoardState = {
   columns: BoardColumns;
 };
 
+type TimesheetEntryPrefill = {
+  projectId: number;
+  projectAssignmentId?: number | null;
+  projectLabel: string;
+  taskId: number;
+  taskLabel: string;
+};
+
+function formatAssignmentNumericValue(value: number) {
+  if (!Number.isFinite(value)) {
+    return '';
+  }
+
+  const roundedValue = Math.round(value * 100) / 100;
+  return String(roundedValue);
+}
+
 const KANBAN_COLUMNS: Array<{ id: BoardColumnId; label: string }> = [
   { id: 'todo', label: 'Backlog' },
   { id: 'doing', label: 'Em execução' },
@@ -252,6 +253,8 @@ function apiTaskToBoardTask(row: ApiBoardTask): BoardTask {
       0,
     fileCount:
       ((row as BoardTask & Record<string, unknown>).fileCount as number) ?? 0,
+    doingStartedAt: row.doingStartedAt ?? null,
+    totalDoingMinutes: row.totalDoingMinutes ?? 0,
   };
 }
 
@@ -264,6 +267,23 @@ function splitTasksByColumn(tasks: BoardTask[]): BoardColumns {
   };
 }
 
+function replaceTaskInColumns(
+  columns: BoardColumns,
+  task: BoardTask
+): BoardColumns {
+  const nextColumns = {
+    todo: columns.todo.filter((item) => item.id !== task.id),
+    doing: columns.doing.filter((item) => item.id !== task.id),
+    review: columns.review.filter((item) => item.id !== task.id),
+    done: columns.done.filter((item) => item.id !== task.id),
+  };
+
+  return {
+    ...nextColumns,
+    [task.status]: [task, ...nextColumns[task.status]],
+  };
+}
+
 const boardChartConfig = {
   allocation: { label: 'Alocacao', color: 'hsl(201 96% 32%)' },
   loggedHours: { label: 'Horas', color: 'hsl(166 72% 28%)' },
@@ -376,7 +396,7 @@ function getInitials(value?: string | null) {
 function getPersonAvatarUrl(avatarId?: number | null) {
   return typeof avatarId === 'number' && avatarId > 0
     ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : '/placeholder.png';
+    : undefined;
 }
 
 function getUserPhotoUrl(photoId?: number | null) {
@@ -385,26 +405,6 @@ function getUserPhotoUrl(photoId?: number | null) {
     : 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 clampPercent(value?: number | null) {
   if (typeof value !== 'number' || Number.isNaN(value)) {
     return 0;
@@ -1102,9 +1102,9 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const commonT = useTranslations('operations.Common');
   const formT = useTranslations('operations.ProjectFormPage');
   const contractT = useTranslations('operations.ContractFormPage');
+  const collaboratorFormT = useTranslations('operations.CollaboratorFormPage');
   const { request, currentLocaleCode, getSettingValue } = useApp();
   const access = useOperationsAccess();
-  const mentionItems = useMentionItems(request);
   const isLimitedView = !access.isDirector && !access.isSupervisor;
   const { valuesVisible, toggleValuesVisible } = useValuesVisibility();
   const router = useRouter();
@@ -1281,11 +1281,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   );
   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 [createDefaultStatus, setCreateDefaultStatus] =
+    useState<BoardColumnId>('todo');
   const [deletePromptTask, setDeletePromptTask] =
     useState<TaskDetailSheetData | null>(null);
+  const [deleteProjectDialogOpen, setDeleteProjectDialogOpen] = useState(false);
+  const [deleteProjectConfirmText, setDeleteProjectConfirmText] = useState('');
+  const [deletingProject, setDeletingProject] = useState(false);
   const [inlineCreateColumn, setInlineCreateColumn] =
     useState<BoardColumnId | null>(null);
   const [inlineCreateName, setInlineCreateName] = useState('');
@@ -1303,6 +1305,30 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const [restoringTaskId, setRestoringTaskId] = useState<number | null>(null);
   const [deletingTaskId, setDeletingTaskId] = useState<number | null>(null);
   const [activeDragTask, setActiveDragTask] = useState<BoardTask | null>(null);
+  const [isTimesheetEntrySheetOpen, setIsTimesheetEntrySheetOpen] =
+    useState(false);
+  const [timesheetPrefill, setTimesheetPrefill] =
+    useState<TimesheetEntryPrefill | null>(null);
+
+  // Assignment management state
+  const [assignmentSheetOpen, setAssignmentSheetOpen] = useState(false);
+  const [editingAssignment, setEditingAssignment] = useState<
+    OperationsProjectDetails['assignments'][0] | null
+  >(null);
+  const [assignmentFormData, setAssignmentFormData] = useState({
+    collaboratorId: '',
+    weeklyHours: '',
+    allocationPercent: '',
+    status: 'active',
+    startDate: '',
+    endDate: '',
+  });
+  const [selectedAssignmentCollaborator, setSelectedAssignmentCollaborator] =
+    useState<OperationsCollaborator | null>(null);
+  const [savingAssignment, setSavingAssignment] = useState(false);
+  const [removingAssignmentId, setRemovingAssignmentId] = useState<
+    number | null
+  >(null);
 
   const apiTasks = useMemo(() => rawTasks.map(apiTaskToBoardTask), [rawTasks]);
   const archivedTasks = useMemo(
@@ -1320,6 +1346,29 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     return splitTasksByColumn(apiTasks);
   }, [project, boardState, apiTasks]);
 
+  const editingTask = useMemo(() => {
+    if (!editingTaskId) return null;
+    return (
+      Object.values(taskColumns)
+        .flat()
+        .find((task) => task.id === editingTaskId) ??
+      apiTasks.find((task) => task.id === editingTaskId) ??
+      archivedTasks.find((task) => task.id === editingTaskId) ??
+      null
+    );
+  }, [apiTasks, archivedTasks, editingTaskId, taskColumns]);
+
+  const editingTaskAsOption = useMemo(() => {
+    if (!editingTask) return null;
+    return {
+      ...editingTask,
+      label: editingTask.name,
+      projectId,
+      projectName: project?.name ?? '',
+      projectCode: project?.code,
+    };
+  }, [editingTask, projectId, project]);
+
   const filteredTaskColumns: BoardColumns = useMemo(() => {
     const normalizedSearch = boardSearch.trim().toLocaleLowerCase();
     const filterTask = (task: BoardTask) => {
@@ -1373,8 +1422,8 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
   const openCreateTaskForm = useCallback(
     (defaultStatus: BoardColumnId = 'todo') => {
+      setCreateDefaultStatus(defaultStatus);
       setEditingTaskId(null);
-      setTaskFormData({ ...EMPTY_TASK_FORM, status: defaultStatus });
       setTaskFormOpen(true);
     },
     []
@@ -1382,73 +1431,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
   const openEditTaskForm = useCallback((task: BoardTask) => {
     setEditingTaskId(task.id);
-    setTaskFormData({
-      name: task.name,
-      description: task.description ?? '',
-      priority: task.priority,
-      status: task.status,
-      assigneeCollaboratorId: task.assigneeCollaboratorId
-        ? String(task.assigneeCollaboratorId)
-        : 'none',
-      dueDate: normalizeDateInputValue(task.dueDate),
-      estimateHours:
-        task.estimateHours != null ? String(task.estimateHours) : '',
-      tags: task.tags ?? '',
-    });
     setSelectedTask(null);
     setTaskFormOpen(true);
   }, []);
 
-  const handleTaskFormSubmit = useCallback(async () => {
-    if (!taskFormData.name.trim()) return;
-    setTaskFormLoading(true);
-    try {
-      const payload: Record<string, unknown> = {
-        name: taskFormData.name.trim(),
-        description: taskFormData.description || null,
-        priority: taskFormData.priority,
-        status: taskFormData.status,
-        assigneeCollaboratorId:
-          taskFormData.assigneeCollaboratorId !== 'none'
-            ? Number(taskFormData.assigneeCollaboratorId)
-            : null,
-        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', {
-          projectId,
-          ...payload,
-        });
-      }
-      setBoardState(null);
-      await refetchTasks();
-      await refetchArchivedTasks();
-      setTaskFormOpen(false);
-      setEditingTaskId(null);
-      setTaskFormData(EMPTY_TASK_FORM);
-    } finally {
-      setTaskFormLoading(false);
-    }
-  }, [
-    taskFormData,
-    editingTaskId,
-    projectId,
-    request,
-    refetchTasks,
-    refetchArchivedTasks,
-  ]);
-
   const handleArchiveTask = useCallback(
     async (taskId: number) => {
       setArchivingTaskId(taskId);
@@ -1548,6 +1534,286 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     [request, refetchTasks, refetchArchivedTasks]
   );
 
+  const handleDeleteProject = useCallback(async () => {
+    setDeletingProject(true);
+    try {
+      await mutateOperations(
+        request,
+        `/operations/projects/${projectId}`,
+        'DELETE'
+      );
+      router.push('/operations/projects');
+    } catch {
+      // ignore
+    } finally {
+      setDeletingProject(false);
+      setDeleteProjectDialogOpen(false);
+      setDeleteProjectConfirmText('');
+    }
+  }, [request, projectId, router]);
+
+  const openTimesheetEntrySheet = useCallback(
+    (task: TaskDetailSheetData) => {
+      if (!project) {
+        return;
+      }
+
+      const projectLabel = [project.name, project.code]
+        .filter(Boolean)
+        .join(' • ');
+
+      setTimesheetPrefill({
+        projectId,
+        projectAssignmentId: task.projectAssignmentId ?? null,
+        projectLabel: projectLabel || commonT('labels.notAssigned'),
+        taskId: task.id,
+        taskLabel: task.name,
+      });
+      setSelectedTask(null);
+      setIsTimesheetEntrySheetOpen(true);
+    },
+    [commonT, project, projectId]
+  );
+
+  const loadCollaboratorOptions = useCallback(
+    async ({
+      page,
+      pageSize,
+      search,
+    }: {
+      page: number;
+      pageSize: number;
+      search: string;
+    }) => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+        sortField: 'displayName',
+        sortOrder: 'asc',
+      });
+      if (search.trim()) params.set('search', search.trim());
+      const result = await fetchOperations<
+        PaginatedResponse<OperationsCollaborator>
+      >(request, `/operations/collaborators?${params.toString()}`);
+      const items = result?.data ?? [];
+      const total = result?.total ?? 0;
+      return { items, hasMore: page * pageSize < total };
+    },
+    [request]
+  );
+
+  const loadAssignmentCollaboratorById = useCallback(
+    async (collaboratorId: number) => {
+      const collaborator = await fetchOperations<OperationsCollaboratorDetails>(
+        request,
+        `/operations/collaborators/${collaboratorId}`
+      );
+      setSelectedAssignmentCollaborator(collaborator);
+      return collaborator;
+    },
+    [request]
+  );
+
+  const createAssignmentCollaborator = useCallback(
+    async (values: Record<string, string>) => {
+      const displayName = values.displayName?.trim() ?? '';
+      const weeklyCapacityHours = parseNumberInput(
+        values.weeklyCapacityHours ?? ''
+      );
+
+      if (!displayName) {
+        return null;
+      }
+
+      return mutateOperations<OperationsCollaborator>(
+        request,
+        '/operations/collaborators',
+        'POST',
+        {
+          displayName,
+          weeklyCapacityHours,
+          status: 'active',
+          autoGenerateContractDraft: false,
+        }
+      );
+    },
+    [request]
+  );
+
+  const syncAssignmentFromWeeklyHours = useCallback(
+    (
+      weeklyHours: string,
+      currentFormData: typeof assignmentFormData,
+      collaborator?: OperationsCollaborator | null
+    ) => {
+      const capacity = collaborator?.weeklyCapacityHours;
+      if (!capacity || capacity <= 0) {
+        return {
+          weeklyHours,
+          allocationPercent: currentFormData.allocationPercent,
+        };
+      }
+
+      const parsedHours = parseNumberInput(weeklyHours);
+      if (parsedHours == null) {
+        return { weeklyHours, allocationPercent: '' };
+      }
+
+      return {
+        weeklyHours,
+        allocationPercent: formatAssignmentNumericValue(
+          (parsedHours / capacity) * 100
+        ),
+      };
+    },
+    []
+  );
+
+  const syncAssignmentFromAllocation = useCallback(
+    (
+      allocationPercent: string,
+      currentFormData: typeof assignmentFormData,
+      collaborator?: OperationsCollaborator | null
+    ) => {
+      const capacity = collaborator?.weeklyCapacityHours;
+      if (!capacity || capacity <= 0) {
+        return {
+          weeklyHours: currentFormData.weeklyHours,
+          allocationPercent,
+        };
+      }
+
+      const parsedPercent = parseNumberInput(allocationPercent);
+      if (parsedPercent == null) {
+        return { weeklyHours: '', allocationPercent };
+      }
+
+      return {
+        weeklyHours: formatAssignmentNumericValue(
+          (parsedPercent / 100) * capacity
+        ),
+        allocationPercent,
+      };
+    },
+    []
+  );
+
+  const openAddAssignment = useCallback(() => {
+    setEditingAssignment(null);
+    setSelectedAssignmentCollaborator(null);
+    setAssignmentFormData({
+      collaboratorId: '',
+      weeklyHours: '',
+      allocationPercent: '',
+      status: 'active',
+      startDate: '',
+      endDate: '',
+    });
+    setAssignmentSheetOpen(true);
+  }, []);
+
+  const openEditAssignment = useCallback(
+    (assignment: OperationsProjectDetails['assignments'][0]) => {
+      setEditingAssignment(assignment);
+      setSelectedAssignmentCollaborator(null);
+      setAssignmentFormData({
+        collaboratorId: String(assignment.collaboratorId),
+        weeklyHours:
+          assignment.weeklyHours != null ? String(assignment.weeklyHours) : '',
+        allocationPercent:
+          assignment.allocationPercent != null
+            ? String(assignment.allocationPercent)
+            : '',
+        status: assignment.status,
+        startDate: assignment.startDate?.slice(0, 10) ?? '',
+        endDate: assignment.endDate?.slice(0, 10) ?? '',
+      });
+      void loadAssignmentCollaboratorById(assignment.collaboratorId);
+      setAssignmentSheetOpen(true);
+    },
+    [loadAssignmentCollaboratorById]
+  );
+
+  const handleSaveAssignment = useCallback(async () => {
+    if (!project) return;
+    const collabId = Number(assignmentFormData.collaboratorId);
+    if (!collabId) return;
+    setSavingAssignment(true);
+    const newEntry = {
+      collaboratorId: collabId,
+      weeklyHours: assignmentFormData.weeklyHours
+        ? Number(assignmentFormData.weeklyHours)
+        : null,
+      allocationPercent: assignmentFormData.allocationPercent
+        ? Number(assignmentFormData.allocationPercent)
+        : null,
+      status: assignmentFormData.status,
+      startDate: assignmentFormData.startDate || null,
+      endDate: assignmentFormData.endDate || null,
+    };
+    const existingMapped = project.assignments.map((a) => ({
+      collaboratorId: a.collaboratorId,
+      weeklyHours: a.weeklyHours ?? null,
+      allocationPercent: a.allocationPercent ?? null,
+      status: a.status,
+      startDate: a.startDate ?? null,
+      endDate: a.endDate ?? null,
+    }));
+    const updatedAssignments = editingAssignment
+      ? existingMapped.map((a) =>
+          a.collaboratorId === editingAssignment.collaboratorId ? newEntry : a
+        )
+      : [...existingMapped, newEntry];
+    try {
+      await mutateOperations(
+        request,
+        `/operations/projects/${projectId}`,
+        'PATCH',
+        { teamAssignments: updatedAssignments }
+      );
+      await refetch();
+      setAssignmentSheetOpen(false);
+    } catch {
+      // ignore
+    } finally {
+      setSavingAssignment(false);
+    }
+  }, [
+    project,
+    assignmentFormData,
+    editingAssignment,
+    request,
+    projectId,
+    refetch,
+  ]);
+
+  const handleConfirmRemoveAssignment = useCallback(async () => {
+    if (!project || removingAssignmentId === null) return;
+    const updatedAssignments = project.assignments
+      .filter((a) => a.collaboratorId !== removingAssignmentId)
+      .map((a) => ({
+        collaboratorId: a.collaboratorId,
+        weeklyHours: a.weeklyHours ?? null,
+        allocationPercent: a.allocationPercent ?? null,
+        status: a.status,
+        startDate: a.startDate ?? null,
+        endDate: a.endDate ?? null,
+      }));
+    try {
+      await mutateOperations(
+        request,
+        `/operations/projects/${projectId}`,
+        'PATCH',
+        { teamAssignments: updatedAssignments }
+      );
+      await refetch();
+    } catch {
+      // ignore
+    } finally {
+      setRemovingAssignmentId(null);
+    }
+  }, [project, removingAssignmentId, request, projectId, refetch]);
+
   const allocationChartData = useMemo(() => {
     if (projectStats?.allocationByCollaborator?.length) {
       return projectStats.allocationByCollaborator;
@@ -1621,14 +1887,33 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         },
       });
 
-      // Persist to API
-      mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
-        status: targetColumn,
-      }).catch(() => {
-        // Rollback optimistic update on error
-        setBoardState(null);
-        void refetchTasks();
-      });
+      mutateOperations<ApiBoardTask>(
+        request,
+        `/operations/tasks/${taskId}`,
+        'PATCH',
+        {
+          status: targetColumn,
+        }
+      )
+        .then((updatedTask) => {
+          if (!updatedTask) {
+            return;
+          }
+
+          const updatedBoardTask = apiTaskToBoardTask(updatedTask);
+          setBoardState((current) => ({
+            projectId: current?.projectId ?? project.id,
+            columns: replaceTaskInColumns(
+              current?.columns ?? taskColumns,
+              updatedBoardTask
+            ),
+          }));
+        })
+        .catch(() => {
+          // Rollback optimistic update on error
+          setBoardState(null);
+          void refetchTasks();
+        });
     },
     [findColumnByTask, taskColumns, project, request, refetchTasks]
   );
@@ -2109,6 +2394,17 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                 {commonT('actions.edit')}
               </Button>
             ) : null}
+            {access.isDirector && project?.status === 'archived' ? (
+              <Button
+                size="sm"
+                variant="destructive"
+                className="cursor-pointer gap-1.5"
+                onClick={() => setDeleteProjectDialogOpen(true)}
+              >
+                <Trash2 className="size-3.5" />
+                {t('deleteProjectButton')}
+              </Button>
+            ) : null}
           </div>
         </div>
 
@@ -2118,10 +2414,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             <TooltipTrigger asChild>
               <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
                 <Avatar className="size-5 shrink-0 border bg-muted">
-                  <AvatarImage
-                    src={getPersonAvatarUrl(project.clientAvatarId)}
-                    alt={project.clientName || ''}
-                  />
+                    <AvatarImage
+                      src={
+                        getUserPhotoUrl(project.clientUserPhotoId) ||
+                        getPersonAvatarUrl(project.clientAvatarId)
+                      }
+                      alt={project.clientName || ''}
+                    />
                   <AvatarFallback className="text-[9px]">
                     {getInitials(project.clientName)}
                   </AvatarFallback>
@@ -2406,6 +2705,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
           <TabsTrigger value="team">{t('tabs.team')}</TabsTrigger>
           <TabsTrigger value="timeline">{t('tabs.timeline')}</TabsTrigger>
           <TabsTrigger value="archive">{t('tabs.archive')}</TabsTrigger>
+          <TabsTrigger value="files">{t('tabs.files')}</TabsTrigger>
           <TabsTrigger value="costs">{t('tabs.costs')}</TabsTrigger>
         </TabsList>
 
@@ -2439,7 +2739,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                       <div className="flex items-center gap-2">
                         <Avatar className="h-8 w-8 border border-border/60 bg-muted">
                           <AvatarImage
-                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            src={
+                              getUserPhotoUrl(project.clientUserPhotoId) ||
+                              getPersonAvatarUrl(project.clientAvatarId)
+                            }
                             alt={project.clientName || commonT('labels.client')}
                           />
                           <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
@@ -2581,13 +2884,32 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                           <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 className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <span className="truncate">
+                              {project.relatedContract.code || '—'}
+                            </span>
+                            {project.relatedContract.clientName ? (
+                              <>
+                                <span>•</span>
+                                <Avatar className="h-4 w-4 shrink-0">
+                                  <AvatarImage
+                                    src={
+                                      getUserPhotoUrl(project.clientUserPhotoId) ||
+                                      getPersonAvatarUrl(project.clientAvatarId)
+                                    }
+                                    alt={project.relatedContract.clientName}
+                                  />
+                                  <AvatarFallback className="text-[8px] font-medium">
+                                    {getInitials(
+                                      project.relatedContract.clientName
+                                    )}
+                                  </AvatarFallback>
+                                </Avatar>
+                                <span className="truncate">
+                                  {project.relatedContract.clientName}
+                                </span>
+                              </>
+                            ) : null}
                           </div>
                         </div>
                         <div className="flex items-center gap-3">
@@ -3059,7 +3381,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                       {(isOver) => (
                         <div
                           className={[
-                            'flex min-h-128 flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
+                            'flex min-h-48 max-h-160 flex-col rounded-3xl border bg-linear-to-b p-3 transition-all',
                             getColumnClassName(column.id),
                             isOver
                               ? 'border-primary shadow-lg ring-2 ring-primary/15'
@@ -3102,7 +3424,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                             </div>
                           </div>
 
-                          <div className="flex flex-1 flex-col gap-2">
+                          <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pb-1 pr-0.5">
                             <AnimatePresence initial={false}>
                               {filteredTaskColumns[column.id].map((task) => {
                                 const tags = getTaskTags(task);
@@ -3830,6 +4152,19 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                 'rounded-2xl border bg-card p-4 shadow-sm',
                 isLimitedView ? 'xl:col-span-12' : 'xl:col-span-8',
               ].join(' ')}
+              actions={
+                !isLimitedView ? (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="cursor-pointer"
+                    onClick={openAddAssignment}
+                  >
+                    <UserPlus className="mr-1.5 size-4" />
+                    {t('teamPanel.addCollaborator')}
+                  </Button>
+                ) : undefined
+              }
             >
               {project.assignments.length > 0 ? (
                 <div className="space-y-4">
@@ -3937,6 +4272,34 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                                   <ToneIcon className="size-3" />
                                   {t(`teamPanel.status.${tone.labelKey}`)}
                                 </span>
+                                {!isLimitedView ? (
+                                  <div className="flex items-center gap-1">
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      className="size-7 cursor-pointer"
+                                      onClick={() =>
+                                        openEditAssignment(assignment)
+                                      }
+                                    >
+                                      <Pencil className="size-3.5" />
+                                    </Button>
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      className="size-7 cursor-pointer text-destructive hover:text-destructive"
+                                      onClick={() =>
+                                        setRemovingAssignmentId(
+                                          assignment.collaboratorId
+                                        )
+                                      }
+                                    >
+                                      <Trash2 className="size-3.5" />
+                                    </Button>
+                                  </div>
+                                ) : null}
                               </div>
                             </div>
                           </div>
@@ -4152,6 +4515,16 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             />
           </SectionCard>
         </TabsContent>
+
+        <TabsContent value="files">
+          <SectionCard
+            title={t('sections.files')}
+            description={t('sections.filesDescription')}
+            className="rounded-2xl border bg-card p-4 shadow-sm"
+          >
+            <ProjectFileAttachments projectId={projectId} />
+          </SectionCard>
+        </TabsContent>
       </Tabs>
 
       <TaskDetailSheet
@@ -4168,13 +4541,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         }
         footer={
           selectedTask && !isLimitedView ? (
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
               {archivedTasks.some((task) => task.id === selectedTask.id) ? (
                 <>
                   <Button
                     variant="outline"
                     size="sm"
-                    className="h-10 gap-2"
+                    className="h-10 gap-2 sm:col-span-2"
                     disabled={restoringTaskId === selectedTask.id}
                     onClick={() => void handleRestoreTask(selectedTask.id)}
                   >
@@ -4196,26 +4569,408 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   </Button>
                 </>
               ) : (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="col-span-2 h-10 gap-2"
-                  disabled={archivingTaskId === selectedTask.id}
-                  onClick={() => void handleArchiveTask(selectedTask.id)}
-                >
-                  {archivingTaskId === selectedTask.id ? (
-                    <Loader2 className="size-3.5 animate-spin" />
-                  ) : (
-                    <Archive className="size-3.5" />
-                  )}
-                  {commonT('actions.archive')}
-                </Button>
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-10 gap-2"
+                    onClick={() => openTimesheetEntrySheet(selectedTask)}
+                  >
+                    <Send className="size-3.5" />
+                    {commonT('actions.logHours')}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-10 gap-2 sm:col-span-2"
+                    disabled={archivingTaskId === selectedTask.id}
+                    onClick={() => void handleArchiveTask(selectedTask.id)}
+                  >
+                    {archivingTaskId === selectedTask.id ? (
+                      <Loader2 className="size-3.5 animate-spin" />
+                    ) : (
+                      <Archive className="size-3.5" />
+                    )}
+                    {commonT('actions.archive')}
+                  </Button>
+                </>
               )}
             </div>
           ) : null
         }
       />
 
+      {/* Assignment Add/Edit Sheet */}
+      <Sheet
+        open={assignmentSheetOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setAssignmentSheetOpen(false);
+            setSelectedAssignmentCollaborator(null);
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-[min(92vw,28rem)]">
+          <SheetHeader>
+            <SheetTitle>
+              {editingAssignment
+                ? t('teamPanel.editTitle')
+                : t('teamPanel.addTitle')}
+            </SheetTitle>
+            <SheetDescription>
+              {t('teamPanel.formDescription')}
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-6 space-y-4 px-1 sm:px-4">
+            {!editingAssignment ? (
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">
+                  {commonT('labels.collaborator')}
+                </Label>
+                <EntityPicker<OperationsCollaborator>
+                  value={
+                    assignmentFormData.collaboratorId
+                      ? Number(assignmentFormData.collaboratorId)
+                      : null
+                  }
+                  onChange={(val, option) => {
+                    const collaborator = option ?? null;
+                    setSelectedAssignmentCollaborator(collaborator);
+                    setAssignmentFormData((prev) => {
+                      const collaboratorId = val ? String(val) : '';
+                      if (!collaboratorId) {
+                        return {
+                          ...prev,
+                          collaboratorId: '',
+                          weeklyHours: '',
+                          allocationPercent: '',
+                        };
+                      }
+
+                      const capacity = collaborator?.weeklyCapacityHours;
+                      if (!capacity || capacity <= 0) {
+                        return {
+                          ...prev,
+                          collaboratorId,
+                        };
+                      }
+
+                      const parsedHours = parseNumberInput(prev.weeklyHours);
+                      const parsedPercent = parseNumberInput(
+                        prev.allocationPercent
+                      );
+
+                      if (parsedHours != null) {
+                        return {
+                          ...prev,
+                          collaboratorId,
+                          ...syncAssignmentFromWeeklyHours(
+                            prev.weeklyHours,
+                            prev,
+                            collaborator
+                          ),
+                        };
+                      }
+
+                      if (parsedPercent != null) {
+                        return {
+                          ...prev,
+                          collaboratorId,
+                          ...syncAssignmentFromAllocation(
+                            prev.allocationPercent,
+                            prev,
+                            collaborator
+                          ),
+                        };
+                      }
+
+                      return {
+                        ...prev,
+                        collaboratorId,
+                        weeklyHours: formatAssignmentNumericValue(capacity),
+                        allocationPercent: '100',
+                      };
+                    });
+                  }}
+                  placeholder={commonT('labels.collaborator')}
+                  searchPlaceholder={commonT('labels.collaborator')}
+                  loadOptions={loadCollaboratorOptions}
+                  getOptionValue={(opt) => opt.id}
+                  getOptionLabel={(opt) => opt.displayName}
+                  renderOption={({ option }) => (
+                    <div className="flex min-w-0 items-center gap-2.5">
+                      <Avatar className="size-6 shrink-0">
+                        <AvatarImage
+                          src={
+                            getUserPhotoUrl(option.userPhotoId) ||
+                            getPersonAvatarUrl(option.personAvatarId)
+                          }
+                          alt={option.displayName}
+                        />
+                        <AvatarFallback className="text-[9px]">
+                          {getInitials(option.displayName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0">
+                        <div className="truncate text-sm">
+                          {option.displayName}
+                        </div>
+                        {option.department ? (
+                          <div className="truncate text-xs text-muted-foreground">
+                            {option.department}
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  )}
+                  valueType="number"
+                  clearable
+                  allowEmptySelection
+                  showCreateButton
+                  entityLabel={commonT('labels.collaborator').toLowerCase()}
+                  createActionLabel={`${commonT('actions.create')} ${commonT(
+                    'labels.collaborator'
+                  ).toLowerCase()}`}
+                  createTitle={`${commonT('actions.create')} ${commonT(
+                    'labels.collaborator'
+                  ).toLowerCase()}`}
+                  createDescription={t('teamPanel.formDescription')}
+                  createFields={[
+                    {
+                      name: 'displayName',
+                      label: collaboratorFormT('fields.displayName'),
+                      placeholder: collaboratorFormT('fields.displayName'),
+                      required: true,
+                    },
+                    {
+                      name: 'weeklyCapacityHours',
+                      label: collaboratorFormT('fields.weeklyCapacityHours'),
+                      placeholder: '40',
+                      type: 'number',
+                    },
+                  ]}
+                  mapSearchToCreateValues={(search) => ({
+                    displayName: search,
+                    weeklyCapacityHours: '40',
+                  })}
+                  onCreate={createAssignmentCollaborator}
+                />
+              </div>
+            ) : (
+              <div className="flex items-center gap-3 rounded-xl border bg-muted/30 p-3">
+                <Avatar className="size-10 border bg-muted">
+                  <AvatarImage
+                    src={
+                      getUserPhotoUrl(editingAssignment.userPhotoId) ||
+                      getPersonAvatarUrl(editingAssignment.personAvatarId)
+                    }
+                    alt={editingAssignment.collaboratorName}
+                  />
+                  <AvatarFallback className="text-xs">
+                    {getInitials(editingAssignment.collaboratorName)}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-semibold">
+                    {editingAssignment.collaboratorName}
+                  </div>
+                  {editingAssignment.roleLabel ? (
+                    <div className="truncate text-xs text-muted-foreground">
+                      {editingAssignment.roleLabel}
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">
+                {commonT('labels.allocationPercent')}
+              </Label>
+              <Input
+                type="number"
+                min="0"
+                max="200"
+                value={assignmentFormData.allocationPercent}
+                onChange={(e) =>
+                  setAssignmentFormData((prev) => ({
+                    ...prev,
+                    ...syncAssignmentFromAllocation(
+                      e.target.value,
+                      prev,
+                      selectedAssignmentCollaborator
+                    ),
+                  }))
+                }
+                placeholder="100"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">
+                {commonT('labels.weeklyCapacity')}
+              </Label>
+              <Input
+                type="number"
+                min="0"
+                value={assignmentFormData.weeklyHours}
+                onChange={(e) =>
+                  setAssignmentFormData((prev) => ({
+                    ...prev,
+                    ...syncAssignmentFromWeeklyHours(
+                      e.target.value,
+                      prev,
+                      selectedAssignmentCollaborator
+                    ),
+                  }))
+                }
+                placeholder="40"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">
+                {commonT('labels.status')}
+              </Label>
+              <Select
+                value={assignmentFormData.status}
+                onValueChange={(val) =>
+                  setAssignmentFormData((prev) => ({ ...prev, status: val }))
+                }
+              >
+                <SelectTrigger className="cursor-pointer">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="active">
+                    {formatEnumLabel('active')}
+                  </SelectItem>
+                  <SelectItem value="inactive">
+                    {formatEnumLabel('inactive')}
+                  </SelectItem>
+                  <SelectItem value="completed">
+                    {formatEnumLabel('completed')}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">
+                  {commonT('labels.startDate')}
+                </Label>
+                <Input
+                  type="date"
+                  value={assignmentFormData.startDate}
+                  onChange={(e) =>
+                    setAssignmentFormData((prev) => ({
+                      ...prev,
+                      startDate: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">
+                  {commonT('labels.endDate')}
+                </Label>
+                <Input
+                  type="date"
+                  value={assignmentFormData.endDate}
+                  onChange={(e) =>
+                    setAssignmentFormData((prev) => ({
+                      ...prev,
+                      endDate: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+            </div>
+            <div className="flex gap-2 pt-2">
+              <Button
+                variant="outline"
+                className="flex-1 cursor-pointer"
+                onClick={() => setAssignmentSheetOpen(false)}
+                disabled={savingAssignment}
+              >
+                {commonT('actions.cancel')}
+              </Button>
+              <Button
+                className="flex-1 cursor-pointer"
+                disabled={
+                  savingAssignment ||
+                  (!editingAssignment && !assignmentFormData.collaboratorId)
+                }
+                onClick={() => void handleSaveAssignment()}
+              >
+                {savingAssignment ? (
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                ) : null}
+                {commonT('actions.save')}
+              </Button>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* Remove Assignment Confirm Dialog */}
+      <Dialog
+        open={removingAssignmentId !== null}
+        onOpenChange={(open) => {
+          if (!open) setRemovingAssignmentId(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t('teamPanel.removeTitle')}</DialogTitle>
+            <DialogDescription>
+              {t('teamPanel.removeDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="mt-4">
+            <Button
+              variant="outline"
+              onClick={() => setRemovingAssignmentId(null)}
+            >
+              {commonT('actions.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => void handleConfirmRemoveAssignment()}
+            >
+              {commonT('actions.delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <TimesheetEntryCreateSheet
+        open={isTimesheetEntrySheetOpen}
+        onOpenChange={(open) => {
+          setIsTimesheetEntrySheetOpen(open);
+          if (!open) {
+            setTimesheetPrefill(null);
+          }
+        }}
+        project={
+          timesheetPrefill
+            ? {
+                id: timesheetPrefill.projectId,
+                label: timesheetPrefill.projectLabel,
+                projectAssignmentId: timesheetPrefill.projectAssignmentId,
+              }
+            : null
+        }
+        task={
+          timesheetPrefill
+            ? {
+                id: timesheetPrefill.taskId,
+                label: timesheetPrefill.taskLabel,
+              }
+            : null
+        }
+        onCreated={() => {
+          void refetchTasks();
+        }}
+      />
+
       {!isLimitedView ? (
         <Sheet
           open={isEditSheetOpen}
@@ -4244,284 +4999,39 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
       ) : null}
 
       {!isLimitedView ? (
-        <Sheet
+        <TaskFormSheet
           open={taskFormOpen}
           onOpenChange={(open) => {
             if (!open) {
               setTaskFormOpen(false);
               setEditingTaskId(null);
-              setTaskFormData(EMPTY_TASK_FORM);
             }
           }}
-        >
-          <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
-            <SheetHeader className="shrink-0">
-              <SheetTitle>
-                {editingTaskId
-                  ? t('taskForm.titleEdit')
-                  : t('taskForm.titleNew')}
-              </SheetTitle>
-            </SheetHeader>
-
-            <Tabs defaultValue="info" className="flex min-h-0 flex-1 flex-col">
-              <TabsList className="mx-4 grid w-[calc(100%-2rem)] shrink-0 grid-cols-2">
-                <TabsTrigger value="info">{t('taskForm.tabInfo')}</TabsTrigger>
-                {editingTaskId ? (
-                  <TabsTrigger value="comments">
-                    {t('taskForm.tabComments')}
-                  </TabsTrigger>
-                ) : null}
-              </TabsList>
-              <TabsContent
-                value="info"
-                className="flex min-h-0 flex-1 flex-col data-[state=inactive]:hidden"
-              >
-                <div className="flex-1 space-y-4 overflow-y-auto px-4 py-2">
-                  <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>
-                    <RichTextEditor
-                      value={taskFormData.description}
-                      onChange={(val) =>
-                        setTaskFormData((prev) => ({
-                          ...prev,
-                          description: val,
-                        }))
-                      }
-                      mentions={mentionItems}
-                    />
-                  </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>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="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>
-
-                  {editingTaskId ? (
-                    <div className="space-y-1.5">
-                      <Label className="flex items-center gap-1.5">
-                        <Paperclip className="size-3.5" />
-                        {t('taskForm.attachmentsLabel')}
-                      </Label>
-                      <TaskFileAttachments taskId={editingTaskId} />
-                    </div>
-                  ) : null}
-                </div>
-
-                <div className="mt-4 flex flex-wrap items-center justify-between gap-2 border-t px-4 pb-4 pt-4">
-                  <div className="flex gap-2">
-                    {editingTaskId ? (
-                      <Button
-                        type="button"
-                        variant="outline"
-                        disabled={
-                          taskFormLoading || archivingTaskId === editingTaskId
-                        }
-                        onClick={() => {
-                          if (!editingTaskId) return;
-                          const id = editingTaskId;
-                          setTaskFormOpen(false);
-                          setEditingTaskId(null);
-                          setTaskFormData(EMPTY_TASK_FORM);
-                          void handleArchiveTask(id);
-                        }}
-                      >
-                        {archivingTaskId === editingTaskId ? (
-                          <Loader2 className="mr-2 size-4 animate-spin" />
-                        ) : (
-                          <Archive className="mr-2 size-4" />
-                        )}
-                        {commonT('actions.archive')}
-                      </Button>
-                    ) : null}
-                  </div>
-                  <div className="flex gap-2">
-                    <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>
-                  </div>
-                </div>
-              </TabsContent>
-
-              {editingTaskId ? (
-                <TabsContent
-                  value="comments"
-                  className="min-h-0 flex-1 overflow-y-auto px-4 py-2 data-[state=inactive]:hidden"
-                >
-                  <TaskCommentsSection taskId={editingTaskId} />
-                </TabsContent>
-              ) : null}
-            </Tabs>
-          </SheetContent>
-        </Sheet>
+          request={request}
+          editingTask={editingTaskAsOption}
+          showProject={false}
+          defaultProjectId={projectId}
+          defaultStatus={createDefaultStatus}
+          assigneeOptions={taskAssigneeOptions}
+          onArchive={handleArchiveTask}
+          onLogHours={
+            editingTask
+              ? () =>
+                  openTimesheetEntrySheet(
+                    editingTask as unknown as TaskDetailSheetData
+                  )
+              : undefined
+          }
+          onCountChanged={() => {
+            setBoardState(null);
+            void refetchTasks();
+          }}
+          onSaved={() => {
+            setBoardState(null);
+            void refetchTasks();
+            void refetchArchivedTasks();
+          }}
+        />
       ) : null}
 
       {!isLimitedView ? (
@@ -4535,10 +5045,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             <DialogContent className="sm:max-w-sm">
               <DialogHeader>
                 <DialogTitle>{t('dialogs.deleteTitle')}</DialogTitle>
+                <DialogDescription>
+                  {t('dialogs.deleteDescription')}
+                </DialogDescription>
               </DialogHeader>
-              <p className="text-sm text-muted-foreground">
-                {t('dialogs.deleteDescription')}
-              </p>
               <DialogFooter className="mt-4">
                 <Button
                   variant="outline"
@@ -4561,6 +5071,57 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               </DialogFooter>
             </DialogContent>
           </Dialog>
+
+          <Dialog
+            open={deleteProjectDialogOpen}
+            onOpenChange={(open) => {
+              if (!open) {
+                setDeleteProjectDialogOpen(false);
+                setDeleteProjectConfirmText('');
+              }
+            }}
+          >
+            <DialogContent className="sm:max-w-md">
+              <DialogHeader>
+                <DialogTitle>{t('deleteConfirmTitle')}</DialogTitle>
+              </DialogHeader>
+              <p className="text-sm text-muted-foreground">
+                {t('deleteConfirmDescription')}
+              </p>
+              <div className="space-y-1.5">
+                <Label className="text-xs">{t('deleteConfirmLabel')}</Label>
+                <Input
+                  value={deleteProjectConfirmText}
+                  onChange={(e) => setDeleteProjectConfirmText(e.target.value)}
+                  placeholder={project?.name ?? ''}
+                />
+              </div>
+              <DialogFooter className="mt-2">
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setDeleteProjectDialogOpen(false);
+                    setDeleteProjectConfirmText('');
+                  }}
+                >
+                  {commonT('actions.cancel')}
+                </Button>
+                <Button
+                  variant="destructive"
+                  disabled={
+                    deletingProject ||
+                    deleteProjectConfirmText !== (project?.name ?? '')
+                  }
+                  onClick={() => void handleDeleteProject()}
+                >
+                  {deletingProject ? (
+                    <Loader2 className="mr-2 size-3.5 animate-spin" />
+                  ) : null}
+                  {t('deleteConfirmButton')}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         </>
       ) : null}
     </Page>