@hed-hog/operations 0.0.330 → 0.0.331

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,6 +13,7 @@ import {
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -87,6 +87,7 @@ import {
   Gauge,
   GitCommitHorizontal,
   HeartPulse,
+  History,
   LineChart as LineChartIcon,
   Loader2,
   MessageSquare,
@@ -95,6 +96,7 @@ import {
   Plus,
   Rocket,
   Search,
+  Send,
   SlidersHorizontal,
   Timer,
   Trash2,
@@ -125,7 +127,6 @@ 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,
@@ -150,11 +151,13 @@ 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 { ProjectFileAttachments } from './project-file-attachments';
+import { TaskFileAttachments } from './task-file-attachments';
+import { TaskFormSheet } from './task-form-sheet';
+import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
 
@@ -175,6 +178,8 @@ type BoardTask = {
   createdAt: string | null;
   commentCount: number;
   fileCount: number;
+  doingStartedAt: string | null;
+  totalDoingMinutes: number;
 };
 
 type ApiBoardTask = Partial<BoardTask> & {
@@ -184,28 +189,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 +196,14 @@ type BoardState = {
   columns: BoardColumns;
 };
 
+type TimesheetEntryPrefill = {
+  projectId: number;
+  projectAssignmentId?: number | null;
+  projectLabel: string;
+  taskId: number;
+  taskLabel: string;
+};
+
 const KANBAN_COLUMNS: Array<{ id: BoardColumnId; label: string }> = [
   { id: 'todo', label: 'Backlog' },
   { id: 'doing', label: 'Em execução' },
@@ -252,6 +243,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 +257,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%)' },
@@ -385,26 +395,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;
@@ -1104,7 +1094,6 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const contractT = useTranslations('operations.ContractFormPage');
   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 +1270,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 +1294,10 @@ 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);
 
   const apiTasks = useMemo(() => rawTasks.map(apiTaskToBoardTask), [rawTasks]);
   const archivedTasks = useMemo(
@@ -1320,6 +1315,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 +1391,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 +1400,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 +1503,43 @@ 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 allocationChartData = useMemo(() => {
     if (projectStats?.allocationByCollaborator?.length) {
       return projectStats.allocationByCollaborator;
@@ -1621,14 +1613,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 +2120,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>
 
@@ -2406,6 +2428,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>
 
@@ -4152,6 +4175,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 +4201,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 +4229,67 @@ 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
         }
       />
 
+      <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 +4318,36 @@ 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 +4361,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 +4387,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>