@hed-hog/operations 0.0.332 → 0.0.347

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

@@ -1,629 +1,629 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Archive, History, Loader2, MessageSquare, Timer } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useCallback, useEffect, useState } from 'react';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useMentionItems } from '../_lib/hooks/use-mention-items';
-import type {
-  OperationsProjectDetails,
-  OperationsProjectOption,
-  OperationsTaskOption,
-  PaginatedResponse,
-} from '../_lib/types';
-import { getElapsedDoingMinutes } from '../_lib/utils/task-ui';
-import { ProjectFormScreen } from './project-form-screen';
-import {
-  TaskActivitiesSection,
-  TaskCommentsSection,
-} from './task-detail-sheet';
-import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
-import { TaskFormFields } from './task-form-fields';
-
-const ASIDE_WIDTH_LS_KEY = 'task-form-sheet:aside-width';
-const DEFAULT_ASIDE_WIDTH = 288;
-const MIN_ASIDE_WIDTH = 180;
-const MAX_ASIDE_WIDTH = 560;
-
-type TaskColumnId = 'todo' | 'doing' | 'review' | 'done';
-
-const KANBAN_COLUMNS: Array<{ id: TaskColumnId; label: string }> = [
-  { id: 'todo', label: 'Backlog' },
-  { id: 'doing', label: 'Em execução' },
-  { id: 'review', label: 'Revisão' },
-  { id: 'done', label: 'Concluído' },
-];
-
-type TaskFormState = {
-  projectId: string;
-  name: string;
-  description: string;
-  priority: 'low' | 'medium' | 'high';
-  status: TaskColumnId;
-  dueDate: string;
-  estimateHours: string;
-  tags: string;
-  assigneeCollaboratorId: string;
-};
-
-const EMPTY_TASK_FORM: TaskFormState = {
-  projectId: '',
-  name: '',
-  description: '',
-  priority: 'medium',
-  status: 'todo',
-  dueDate: '',
-  estimateHours: '',
-  tags: '',
-  assigneeCollaboratorId: '',
-};
-
-function normalizeDateValue(value?: string | null) {
-  if (!value) return '';
-  const match = String(value)
-    .trim()
-    .match(/^\d{4}-\d{2}-\d{2}/);
-  return match?.[0] ?? '';
-}
-
-export type TaskFormSheetProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  request: Parameters<typeof mutateOperations>[0];
-  /** When provided, the form enters edit mode. */
-  editingTask?: OperationsTaskOption | null;
-  /** Pre-assigns this collaborator on new task creation. */
-  defaultAssigneeCollaboratorId?: number | null;
-  /** When true the project field is required for creation. Default: false. */
-  projectRequired?: boolean;
-  /** When false the project selector is hidden (e.g. when the project is already known from context). Default: true. */
-  showProject?: boolean;
-  /** Default active tab when opening in edit mode. Default: 'comments'. */
-  defaultTab?: 'comments' | 'activities';
-  /** When false the assignee field is hidden entirely. Default: true. */
-  showAssignee?: boolean;
-  /** When provided, renders a static Select for assignee instead of the CollaboratorPicker API widget. */
-  assigneeOptions?: Array<{ id: string; label: string }>;
-  /** When provided, called instead of the internal PATCH archive. The sheet still closes and calls onSaved after. */
-  onArchive?: (taskId: number) => Promise<void> | void;
-  /** When provided, called on "Log hours" click instead of opening the internal timesheet sheet. */
-  onLogHours?: () => void;
-  /** Pre-populate projectId on create (useful when showProject=false but project is known from context). */
-  defaultProjectId?: number;
-  /** Pre-populate status on create. Default: 'todo'. */
-  defaultStatus?: string;
-  /** Called when a file or comment is added/removed, so parent can refresh card counts. */
-  onCountChanged?: () => void;
-  onSaved: () => void;
-};
-
-export function TaskFormSheet({
-  open,
-  onOpenChange,
-  request,
-  editingTask,
-  defaultAssigneeCollaboratorId,
-  projectRequired = false,
-  showProject = true,
-  defaultTab = 'comments',
-  showAssignee = true,
-  assigneeOptions,
-  onArchive,
-  onLogHours,
-  defaultProjectId,
-  defaultStatus,
-  onCountChanged,
-  onSaved,
-}: TaskFormSheetProps) {
-  const { currentLocaleCode, request: appRequest } = useApp();
-  const commonT = useTranslations('operations.Common');
-  const taskT = useTranslations('operations.ProjectDetailsPage');
-  const projectsT = useTranslations('operations.ProjectsPage');
-
-  const mentionItems = useMentionItems(appRequest);
-
-  const [formData, setFormData] = useState<TaskFormState>(EMPTY_TASK_FORM);
-  const [loading, setLoading] = useState(false);
-  const [archivingId, setArchivingId] = useState<number | null>(null);
-  const [projectFormOpen, setProjectFormOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState<'comments' | 'activities'>(
-    defaultTab
-  );
-  const [doingTick, setDoingTick] = useState(0);
-  const [isTimesheetOpen, setIsTimesheetOpen] = useState(false);
-  const [asideWidth, setAsideWidth] = useState(DEFAULT_ASIDE_WIDTH);
-
-  useEffect(() => {
-    const stored = localStorage.getItem(ASIDE_WIDTH_LS_KEY);
-    if (stored) {
-      const v = Number(stored);
-      if (!isNaN(v) && v >= MIN_ASIDE_WIDTH && v <= MAX_ASIDE_WIDTH)
-        setAsideWidth(v);
-    }
-  }, []);
-
-  const handleResizeMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      const startX = e.clientX;
-      let width = asideWidth;
-
-      document.body.style.cursor = 'col-resize';
-      document.body.style.userSelect = 'none';
-
-      const onMouseMove = (ev: MouseEvent) => {
-        width = Math.min(
-          MAX_ASIDE_WIDTH,
-          Math.max(MIN_ASIDE_WIDTH, asideWidth + (startX - ev.clientX))
-        );
-        setAsideWidth(width);
-      };
-
-      const onMouseUp = () => {
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-        localStorage.setItem(ASIDE_WIDTH_LS_KEY, String(width));
-        document.removeEventListener('mousemove', onMouseMove);
-        document.removeEventListener('mouseup', onMouseUp);
-      };
-
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
-    },
-    [asideWidth]
-  );
-  const [localProjectOptions, setLocalProjectOptions] = useState<
-    OperationsProjectOption[]
-  >([]);
-
-  const { data: projectOptionsResponse } = useQuery<
-    PaginatedResponse<OperationsProjectOption>
-  >({
-    queryKey: ['task-form-project-options', currentLocaleCode],
-    queryFn: () =>
-      fetchOperations<PaginatedResponse<OperationsProjectOption>>(
-        request,
-        '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc'
-      ),
-    enabled: open,
-    placeholderData: (previous) => previous,
-  });
-
-  const remoteProjectOptions = projectOptionsResponse?.data ?? [];
-  const projectOptions = [
-    ...localProjectOptions,
-    ...remoteProjectOptions.filter(
-      (r) => !localProjectOptions.some((l) => l.id === r.id)
-    ),
-  ];
-  const projectOptionsWithFallback =
-    editingTask?.projectId &&
-    !projectOptions.some((p) => String(p.id) === String(editingTask.projectId))
-      ? [
-          {
-            id: editingTask.projectId,
-            label:
-              [editingTask.projectCode, editingTask.projectName]
-                .filter(Boolean)
-                .join(' • ') || String(editingTask.projectId),
-            name: editingTask.projectName ?? String(editingTask.projectId),
-            code: editingTask.projectCode,
-            status: editingTask.status,
-          },
-          ...projectOptions,
-        ]
-      : projectOptions;
-
-  // Sync form state when editingTask or open changes.
-  useEffect(() => {
-    if (!open) return;
-    setActiveTab(defaultTab);
-    if (editingTask) {
-      setFormData({
-        projectId: String(editingTask.projectId ?? ''),
-        name: editingTask.name,
-        description: editingTask.description ?? '',
-        priority:
-          (editingTask.priority as TaskFormState['priority']) ?? 'medium',
-        status: KANBAN_COLUMNS.some((c) => c.id === editingTask.status)
-          ? (editingTask.status as TaskColumnId)
-          : 'todo',
-        dueDate: normalizeDateValue(editingTask.dueDate),
-        estimateHours:
-          editingTask.estimateHours != null
-            ? String(editingTask.estimateHours)
-            : '',
-        tags: editingTask.tags ?? '',
-        assigneeCollaboratorId:
-          editingTask.assigneeCollaboratorId != null
-            ? String(editingTask.assigneeCollaboratorId)
-            : '',
-      });
-    } else {
-      setFormData({
-        ...EMPTY_TASK_FORM,
-        status: (defaultStatus as TaskFormState['status']) ?? 'todo',
-        projectId: defaultProjectId ? String(defaultProjectId) : '',
-      });
-    }
-  }, [open, editingTask, defaultTab, defaultStatus, defaultProjectId]);
-
-  useEffect(() => {
-    if (!open || editingTask?.status !== 'doing' || !editingTask.doingStartedAt)
-      return;
-    const timer = setInterval(() => setDoingTick((value) => value + 1), 30000);
-    return () => clearInterval(timer);
-  }, [editingTask?.doingStartedAt, editingTask?.status, open]);
-
-  const close = () => {
-    onOpenChange(false);
-  };
-
-  const isSubmitDisabled = () => {
-    if (!formData.name.trim()) return true;
-    if (!editingTask && projectRequired && !formData.projectId) return true;
-    return false;
-  };
-
-  const handleSubmit = async () => {
-    if (isSubmitDisabled()) return;
-    setLoading(true);
-    try {
-      const selectedProject = projectOptions.find(
-        (p) => String(p.id) === formData.projectId
-      );
-
-      const payload: Record<string, unknown> = {
-        name: formData.name.trim(),
-        description: formData.description.trim() || null,
-        priority: formData.priority,
-        status: formData.status,
-        dueDate: formData.dueDate || null,
-        estimateHours: formData.estimateHours
-          ? Number(formData.estimateHours)
-          : null,
-        tags: formData.tags.trim() || null,
-        assigneeCollaboratorId: formData.assigneeCollaboratorId
-          ? Number(formData.assigneeCollaboratorId)
-          : null,
-      };
-
-      if (editingTask) {
-        await mutateOperations(
-          request,
-          `/operations/tasks/${editingTask.id}`,
-          'PATCH',
-          payload
-        );
-      } else {
-        if (selectedProject) {
-          payload.projectId = selectedProject.id;
-          if (selectedProject.projectAssignmentId != null) {
-            payload.projectAssignmentId = selectedProject.projectAssignmentId;
-          }
-        } else if (formData.projectId) {
-          payload.projectId = Number(formData.projectId);
-        }
-        // Form selection takes priority over the default prop
-        if (
-          !payload.assigneeCollaboratorId &&
-          defaultAssigneeCollaboratorId != null
-        ) {
-          payload.assigneeCollaboratorId = defaultAssigneeCollaboratorId;
-        }
-        await mutateOperations(request, '/operations/tasks', 'POST', payload);
-      }
-
-      onSaved();
-      close();
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleTagsChange = useCallback(
-    async (tags: string) => {
-      if (!editingTask) return;
-      try {
-        await mutateOperations(request, `/operations/tasks/${editingTask.id}`, 'PATCH', {
-          tags: tags || null,
-        });
-      } catch {
-        // auto-save failure is silent; the value stays in form state
-      }
-    },
-    [editingTask, request]
-  );
-
-  const handleArchive = async () => {
-    if (!editingTask) return;
-    setArchivingId(editingTask.id);
-    try {
-      if (onArchive) {
-        await onArchive(editingTask.id);
-      } else {
-        await mutateOperations(
-          request,
-          `/operations/tasks/${editingTask.id}`,
-          'PATCH',
-          { archived: true }
-        );
-      }
-      onSaved();
-      close();
-    } finally {
-      setArchivingId(null);
-    }
-  };
-
-  const timesheetProject =
-    editingTask?.projectId
-      ? {
-          id: editingTask.projectId,
-          label:
-            [editingTask.projectName, editingTask.projectCode]
-              .filter(Boolean)
-              .join(' • ') || String(editingTask.projectId),
-          projectAssignmentId: editingTask.projectAssignmentId,
-        }
-      : null;
-
-  return (
-    <>
-      <Sheet
-        open={open}
-        onOpenChange={(value) => {
-          if (!loading) onOpenChange(value);
-        }}
-      >
-        <SheetContent className="flex w-full flex-col gap-0 overflow-hidden sm:max-w-5xl">
-          <SheetHeader className="shrink-0 border-b px-5 pb-3 pt-4">
-            <SheetTitle>
-              {editingTask
-                ? taskT('taskForm.titleEdit')
-                : taskT('taskForm.titleNew')}
-            </SheetTitle>
-            <SheetDescription className="sr-only">
-              {editingTask
-                ? taskT('taskForm.titleEdit')
-                : taskT('taskForm.titleNew')}
-            </SheetDescription>
-          </SheetHeader>
-
-          {editingTask ? (
-            <>
-              <div className="flex flex-1 min-h-0 overflow-hidden">
-                {/* ── Coluna esquerda ── */}
-                <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
-                  <div className="shrink-0 space-y-4 overflow-y-auto border-b px-5 py-4">
-                    <TaskFormFields
-                      formData={formData}
-                      setFormData={setFormData}
-                      statusOptions={KANBAN_COLUMNS}
-                      mentionItems={mentionItems}
-                      projectOptions={projectOptionsWithFallback}
-                      showProject={showProject}
-                      projectRequired={projectRequired}
-                      onOpenCreateProject={() => setProjectFormOpen(true)}
-                      section="main"
-                    />
-                  </div>
-
-                  <Tabs
-                    value={activeTab}
-                    onValueChange={(v) =>
-                      setActiveTab(v as 'comments' | 'activities')
-                    }
-                    className="flex flex-1 min-h-0 flex-col"
-                  >
-                    <div className="shrink-0 border-b px-5 py-2">
-                      <TabsList className="grid grid-cols-2">
-                        <TabsTrigger value="comments">
-                          <MessageSquare className="mr-1.5 size-3.5" />
-                          {taskT('taskForm.tabComments')}
-                        </TabsTrigger>
-                        <TabsTrigger value="activities">
-                          <History className="mr-1.5 size-3.5" />
-                          {taskT('taskForm.tabActivities')}
-                        </TabsTrigger>
-                      </TabsList>
-                    </div>
-                    <TabsContent
-                      value="comments"
-                      className="mt-0 flex-1 overflow-y-auto px-5 py-4 data-[state=inactive]:hidden"
-                    >
-                      <TaskCommentsSection taskId={editingTask.id} onChanged={onCountChanged} />
-                    </TabsContent>
-                    <TabsContent
-                      value="activities"
-                      className="mt-0 flex-1 overflow-y-auto px-5 py-4 data-[state=inactive]:hidden"
-                    >
-                      <TaskActivitiesSection
-                        taskId={editingTask.id}
-                        task={editingTask}
-                        statusLabel={(status) =>
-                          KANBAN_COLUMNS.find((column) => column.id === status)
-                            ?.label ?? status
-                        }
-                      />
-                    </TabsContent>
-                  </Tabs>
-                </div>
-
-                {/* ── Resize handle ── */}
-                <div
-                  className="group relative w-px shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary/40"
-                  onMouseDown={handleResizeMouseDown}
-                >
-                  <div className="absolute inset-y-0 -left-1.5 -right-1.5" />
-                  <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col gap-0.75 opacity-0 transition-opacity group-hover:opacity-100">
-                    <div className="size-0.75 rounded-full bg-primary/60" />
-                    <div className="size-0.75 rounded-full bg-primary/60" />
-                    <div className="size-0.75 rounded-full bg-primary/60" />
-                    <div className="size-0.75 rounded-full bg-primary/60" />
-                    <div className="size-0.75 rounded-full bg-primary/60" />
-                  </div>
-                </div>
-
-                {/* ── Aside direito ── */}
-                <aside
-                  className="flex shrink-0 flex-col gap-4 overflow-y-auto px-4 py-4"
-                  style={{ width: asideWidth }}
-                >
-                  <TaskFormFields
-                    formData={formData}
-                    setFormData={setFormData}
-                    statusOptions={KANBAN_COLUMNS}
-                    mentionItems={mentionItems}
-                    projectOptions={projectOptionsWithFallback}
-                    showDoingTime
-                    doingMinutes={getElapsedDoingMinutes(editingTask, doingTick)}
-                    showAttachments
-                    attachmentTaskId={editingTask.id}
-                    section="aside"
-                    showAssignee={showAssignee}
-                    assigneeOptions={assigneeOptions}
-                    onTagsChange={(tags) => void handleTagsChange(tags)}
-                    onFileChanged={onCountChanged}
-                  />
-                </aside>
-              </div>
-
-              <div className="flex flex-wrap items-center justify-between gap-2 border-t px-5 py-3">
-                <div className="flex gap-2">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    disabled={loading || archivingId === editingTask.id}
-                    onClick={() => void handleArchive()}
-                  >
-                    {archivingId === editingTask.id ? (
-                      <Loader2 className="mr-2 size-4 animate-spin" />
-                    ) : (
-                      <Archive className="mr-2 size-4" />
-                    )}
-                    {commonT('actions.archive')}
-                  </Button>
-                  {timesheetProject ? (
-                    <Button
-                      type="button"
-                      variant="outline"
-                      disabled={loading}
-                      onClick={() =>
-                        onLogHours ? onLogHours() : setIsTimesheetOpen(true)
-                      }
-                    >
-                      <Timer className="mr-2 size-4" />
-                      {commonT('actions.logHours')}
-                    </Button>
-                  ) : null}
-                </div>
-                <div className="flex gap-2">
-                  <Button variant="outline" onClick={close} disabled={loading}>
-                    {commonT('actions.cancel')}
-                  </Button>
-                  <Button
-                    onClick={() => void handleSubmit()}
-                    disabled={loading || isSubmitDisabled()}
-                  >
-                    {loading ? (
-                      <Loader2 className="mr-2 size-4 animate-spin" />
-                    ) : null}
-                    {commonT('actions.save')}
-                  </Button>
-                </div>
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="flex-1 space-y-4 overflow-y-auto px-4 py-2">
-                <TaskFormFields
-                  formData={formData}
-                  setFormData={setFormData}
-                  statusOptions={KANBAN_COLUMNS}
-                  mentionItems={mentionItems}
-                  projectOptions={projectOptions}
-                  showProject={showProject}
-                  projectRequired={projectRequired}
-                  allowUnassignedProject={!projectRequired}
-                  onOpenCreateProject={() => setProjectFormOpen(true)}
-                  showAssignee={showAssignee}
-                  assigneeOptions={assigneeOptions}
-                />
-              </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" />
-                <div className="flex gap-2">
-                  <Button variant="outline" onClick={close} disabled={loading}>
-                    {commonT('actions.cancel')}
-                  </Button>
-                  <Button
-                    onClick={() => void handleSubmit()}
-                    disabled={loading || isSubmitDisabled()}
-                  >
-                    {loading ? (
-                      <Loader2 className="mr-2 size-4 animate-spin" />
-                    ) : null}
-                    {commonT('actions.create')}
-                  </Button>
-                </div>
-              </div>
-            </>
-          )}
-        </SheetContent>
-      </Sheet>
-
-      <Sheet open={projectFormOpen} onOpenChange={setProjectFormOpen}>
-        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
-          <SheetHeader>
-            <SheetTitle>{projectsT('sheet.createTitle')}</SheetTitle>
-            <SheetDescription>
-              {projectsT('sheet.description')}
-            </SheetDescription>
-          </SheetHeader>
-          <ProjectFormScreen
-            onCancel={() => setProjectFormOpen(false)}
-            onSaved={(project: OperationsProjectDetails) => {
-              const newOption: OperationsProjectOption = {
-                id: project.id,
-                label: project.name,
-                name: project.name,
-                code: project.code,
-                clientName: project.clientName,
-                status: project.status,
-              };
-              setLocalProjectOptions((prev) => [newOption, ...prev]);
-              setFormData((prev) => ({
-                ...prev,
-                projectId: String(project.id),
-              }));
-              setProjectFormOpen(false);
-            }}
-          />
-        </SheetContent>
-      </Sheet>
-
-      {!onLogHours ? (
-        <TimesheetEntryCreateSheet
-          open={isTimesheetOpen}
-          onOpenChange={setIsTimesheetOpen}
-          project={timesheetProject}
-          task={
-            editingTask ? { id: editingTask.id, label: editingTask.name } : null
-          }
-        />
-      ) : null}
-    </>
-  );
-}
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Archive, History, Loader2, MessageSquare, Timer } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useMentionItems } from '../_lib/hooks/use-mention-items';
+import type {
+  OperationsProjectDetails,
+  OperationsProjectOption,
+  OperationsTaskOption,
+  PaginatedResponse,
+} from '../_lib/types';
+import { getElapsedDoingMinutes } from '../_lib/utils/task-ui';
+import { ProjectFormScreen } from './project-form-screen';
+import {
+  TaskActivitiesSection,
+  TaskCommentsSection,
+} from './task-detail-sheet';
+import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
+import { TaskFormFields } from './task-form-fields';
+
+const ASIDE_WIDTH_LS_KEY = 'task-form-sheet:aside-width';
+const DEFAULT_ASIDE_WIDTH = 288;
+const MIN_ASIDE_WIDTH = 180;
+const MAX_ASIDE_WIDTH = 560;
+
+type TaskColumnId = 'todo' | 'doing' | 'review' | 'done';
+
+const KANBAN_COLUMNS: Array<{ id: TaskColumnId; label: string }> = [
+  { id: 'todo', label: 'Backlog' },
+  { id: 'doing', label: 'Em execução' },
+  { id: 'review', label: 'Revisão' },
+  { id: 'done', label: 'Concluído' },
+];
+
+type TaskFormState = {
+  projectId: string;
+  name: string;
+  description: string;
+  priority: 'low' | 'medium' | 'high';
+  status: TaskColumnId;
+  dueDate: string;
+  estimateHours: string;
+  tags: string;
+  assigneeCollaboratorId: string;
+};
+
+const EMPTY_TASK_FORM: TaskFormState = {
+  projectId: '',
+  name: '',
+  description: '',
+  priority: 'medium',
+  status: 'todo',
+  dueDate: '',
+  estimateHours: '',
+  tags: '',
+  assigneeCollaboratorId: '',
+};
+
+function normalizeDateValue(value?: string | null) {
+  if (!value) return '';
+  const match = String(value)
+    .trim()
+    .match(/^\d{4}-\d{2}-\d{2}/);
+  return match?.[0] ?? '';
+}
+
+export type TaskFormSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  request: Parameters<typeof mutateOperations>[0];
+  /** When provided, the form enters edit mode. */
+  editingTask?: OperationsTaskOption | null;
+  /** Pre-assigns this collaborator on new task creation. */
+  defaultAssigneeCollaboratorId?: number | null;
+  /** When true the project field is required for creation. Default: false. */
+  projectRequired?: boolean;
+  /** When false the project selector is hidden (e.g. when the project is already known from context). Default: true. */
+  showProject?: boolean;
+  /** Default active tab when opening in edit mode. Default: 'comments'. */
+  defaultTab?: 'comments' | 'activities';
+  /** When false the assignee field is hidden entirely. Default: true. */
+  showAssignee?: boolean;
+  /** When provided, renders a static Select for assignee instead of the CollaboratorPicker API widget. */
+  assigneeOptions?: Array<{ id: string; label: string }>;
+  /** When provided, called instead of the internal PATCH archive. The sheet still closes and calls onSaved after. */
+  onArchive?: (taskId: number) => Promise<void> | void;
+  /** When provided, called on "Log hours" click instead of opening the internal timesheet sheet. */
+  onLogHours?: () => void;
+  /** Pre-populate projectId on create (useful when showProject=false but project is known from context). */
+  defaultProjectId?: number;
+  /** Pre-populate status on create. Default: 'todo'. */
+  defaultStatus?: string;
+  /** Called when a file or comment is added/removed, so parent can refresh card counts. */
+  onCountChanged?: () => void;
+  onSaved: () => void;
+};
+
+export function TaskFormSheet({
+  open,
+  onOpenChange,
+  request,
+  editingTask,
+  defaultAssigneeCollaboratorId,
+  projectRequired = false,
+  showProject = true,
+  defaultTab = 'comments',
+  showAssignee = true,
+  assigneeOptions,
+  onArchive,
+  onLogHours,
+  defaultProjectId,
+  defaultStatus,
+  onCountChanged,
+  onSaved,
+}: TaskFormSheetProps) {
+  const { currentLocaleCode, request: appRequest } = useApp();
+  const commonT = useTranslations('operations.Common');
+  const taskT = useTranslations('operations.ProjectDetailsPage');
+  const projectsT = useTranslations('operations.ProjectsPage');
+
+  const mentionItems = useMentionItems(appRequest);
+
+  const [formData, setFormData] = useState<TaskFormState>(EMPTY_TASK_FORM);
+  const [loading, setLoading] = useState(false);
+  const [archivingId, setArchivingId] = useState<number | null>(null);
+  const [projectFormOpen, setProjectFormOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<'comments' | 'activities'>(
+    defaultTab
+  );
+  const [doingTick, setDoingTick] = useState(0);
+  const [isTimesheetOpen, setIsTimesheetOpen] = useState(false);
+  const [asideWidth, setAsideWidth] = useState(DEFAULT_ASIDE_WIDTH);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(ASIDE_WIDTH_LS_KEY);
+    if (stored) {
+      const v = Number(stored);
+      if (!isNaN(v) && v >= MIN_ASIDE_WIDTH && v <= MAX_ASIDE_WIDTH)
+        setAsideWidth(v);
+    }
+  }, []);
+
+  const handleResizeMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      let width = asideWidth;
+
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+
+      const onMouseMove = (ev: MouseEvent) => {
+        width = Math.min(
+          MAX_ASIDE_WIDTH,
+          Math.max(MIN_ASIDE_WIDTH, asideWidth + (startX - ev.clientX))
+        );
+        setAsideWidth(width);
+      };
+
+      const onMouseUp = () => {
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        localStorage.setItem(ASIDE_WIDTH_LS_KEY, String(width));
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      };
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    },
+    [asideWidth]
+  );
+  const [localProjectOptions, setLocalProjectOptions] = useState<
+    OperationsProjectOption[]
+  >([]);
+
+  const { data: projectOptionsResponse } = useQuery<
+    PaginatedResponse<OperationsProjectOption>
+  >({
+    queryKey: ['task-form-project-options', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<PaginatedResponse<OperationsProjectOption>>(
+        request,
+        '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc'
+      ),
+    enabled: open,
+    placeholderData: (previous) => previous,
+  });
+
+  const remoteProjectOptions = projectOptionsResponse?.data ?? [];
+  const projectOptions = [
+    ...localProjectOptions,
+    ...remoteProjectOptions.filter(
+      (r) => !localProjectOptions.some((l) => l.id === r.id)
+    ),
+  ];
+  const projectOptionsWithFallback =
+    editingTask?.projectId &&
+    !projectOptions.some((p) => String(p.id) === String(editingTask.projectId))
+      ? [
+          {
+            id: editingTask.projectId,
+            label:
+              [editingTask.projectCode, editingTask.projectName]
+                .filter(Boolean)
+                .join(' • ') || String(editingTask.projectId),
+            name: editingTask.projectName ?? String(editingTask.projectId),
+            code: editingTask.projectCode,
+            status: editingTask.status,
+          },
+          ...projectOptions,
+        ]
+      : projectOptions;
+
+  // Sync form state when editingTask or open changes.
+  useEffect(() => {
+    if (!open) return;
+    setActiveTab(defaultTab);
+    if (editingTask) {
+      setFormData({
+        projectId: String(editingTask.projectId ?? ''),
+        name: editingTask.name,
+        description: editingTask.description ?? '',
+        priority:
+          (editingTask.priority as TaskFormState['priority']) ?? 'medium',
+        status: KANBAN_COLUMNS.some((c) => c.id === editingTask.status)
+          ? (editingTask.status as TaskColumnId)
+          : 'todo',
+        dueDate: normalizeDateValue(editingTask.dueDate),
+        estimateHours:
+          editingTask.estimateHours != null
+            ? String(editingTask.estimateHours)
+            : '',
+        tags: editingTask.tags ?? '',
+        assigneeCollaboratorId:
+          editingTask.assigneeCollaboratorId != null
+            ? String(editingTask.assigneeCollaboratorId)
+            : '',
+      });
+    } else {
+      setFormData({
+        ...EMPTY_TASK_FORM,
+        status: (defaultStatus as TaskFormState['status']) ?? 'todo',
+        projectId: defaultProjectId ? String(defaultProjectId) : '',
+      });
+    }
+  }, [open, editingTask, defaultTab, defaultStatus, defaultProjectId]);
+
+  useEffect(() => {
+    if (!open || editingTask?.status !== 'doing' || !editingTask.doingStartedAt)
+      return;
+    const timer = setInterval(() => setDoingTick((value) => value + 1), 30000);
+    return () => clearInterval(timer);
+  }, [editingTask?.doingStartedAt, editingTask?.status, open]);
+
+  const close = () => {
+    onOpenChange(false);
+  };
+
+  const isSubmitDisabled = () => {
+    if (!formData.name.trim()) return true;
+    if (!editingTask && projectRequired && !formData.projectId) return true;
+    return false;
+  };
+
+  const handleSubmit = async () => {
+    if (isSubmitDisabled()) return;
+    setLoading(true);
+    try {
+      const selectedProject = projectOptions.find(
+        (p) => String(p.id) === formData.projectId
+      );
+
+      const payload: Record<string, unknown> = {
+        name: formData.name.trim(),
+        description: formData.description.trim() || null,
+        priority: formData.priority,
+        status: formData.status,
+        dueDate: formData.dueDate || null,
+        estimateHours: formData.estimateHours
+          ? Number(formData.estimateHours)
+          : null,
+        tags: formData.tags.trim() || null,
+        assigneeCollaboratorId: formData.assigneeCollaboratorId
+          ? Number(formData.assigneeCollaboratorId)
+          : null,
+      };
+
+      if (editingTask) {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${editingTask.id}`,
+          'PATCH',
+          payload
+        );
+      } else {
+        if (selectedProject) {
+          payload.projectId = selectedProject.id;
+          if (selectedProject.projectAssignmentId != null) {
+            payload.projectAssignmentId = selectedProject.projectAssignmentId;
+          }
+        } else if (formData.projectId) {
+          payload.projectId = Number(formData.projectId);
+        }
+        // Form selection takes priority over the default prop
+        if (
+          !payload.assigneeCollaboratorId &&
+          defaultAssigneeCollaboratorId != null
+        ) {
+          payload.assigneeCollaboratorId = defaultAssigneeCollaboratorId;
+        }
+        await mutateOperations(request, '/operations/tasks', 'POST', payload);
+      }
+
+      onSaved();
+      close();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleTagsChange = useCallback(
+    async (tags: string) => {
+      if (!editingTask) return;
+      try {
+        await mutateOperations(request, `/operations/tasks/${editingTask.id}`, 'PATCH', {
+          tags: tags || null,
+        });
+      } catch {
+        // auto-save failure is silent; the value stays in form state
+      }
+    },
+    [editingTask, request]
+  );
+
+  const handleArchive = async () => {
+    if (!editingTask) return;
+    setArchivingId(editingTask.id);
+    try {
+      if (onArchive) {
+        await onArchive(editingTask.id);
+      } else {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${editingTask.id}`,
+          'PATCH',
+          { archived: true }
+        );
+      }
+      onSaved();
+      close();
+    } finally {
+      setArchivingId(null);
+    }
+  };
+
+  const timesheetProject =
+    editingTask?.projectId
+      ? {
+          id: editingTask.projectId,
+          label:
+            [editingTask.projectName, editingTask.projectCode]
+              .filter(Boolean)
+              .join(' • ') || String(editingTask.projectId),
+          projectAssignmentId: editingTask.projectAssignmentId,
+        }
+      : null;
+
+  return (
+    <>
+      <Sheet
+        open={open}
+        onOpenChange={(value) => {
+          if (!loading) onOpenChange(value);
+        }}
+      >
+        <SheetContent className="flex w-full flex-col gap-0 overflow-hidden sm:max-w-5xl">
+          <SheetHeader className="shrink-0 border-b px-5 pb-3 pt-4">
+            <SheetTitle>
+              {editingTask
+                ? taskT('taskForm.titleEdit')
+                : taskT('taskForm.titleNew')}
+            </SheetTitle>
+            <SheetDescription className="sr-only">
+              {editingTask
+                ? taskT('taskForm.titleEdit')
+                : taskT('taskForm.titleNew')}
+            </SheetDescription>
+          </SheetHeader>
+
+          {editingTask ? (
+            <>
+              <div className="flex flex-1 min-h-0 overflow-hidden">
+                {/* ── Coluna esquerda ── */}
+                <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
+                  <div className="shrink-0 space-y-4 overflow-y-auto border-b px-5 py-4">
+                    <TaskFormFields
+                      formData={formData}
+                      setFormData={setFormData}
+                      statusOptions={KANBAN_COLUMNS}
+                      mentionItems={mentionItems}
+                      projectOptions={projectOptionsWithFallback}
+                      showProject={showProject}
+                      projectRequired={projectRequired}
+                      onOpenCreateProject={() => setProjectFormOpen(true)}
+                      section="main"
+                    />
+                  </div>
+
+                  <Tabs
+                    value={activeTab}
+                    onValueChange={(v) =>
+                      setActiveTab(v as 'comments' | 'activities')
+                    }
+                    className="flex flex-1 min-h-0 flex-col"
+                  >
+                    <div className="shrink-0 border-b px-5 py-2">
+                      <TabsList className="grid grid-cols-2">
+                        <TabsTrigger value="comments">
+                          <MessageSquare className="mr-1.5 size-3.5" />
+                          {taskT('taskForm.tabComments')}
+                        </TabsTrigger>
+                        <TabsTrigger value="activities">
+                          <History className="mr-1.5 size-3.5" />
+                          {taskT('taskForm.tabActivities')}
+                        </TabsTrigger>
+                      </TabsList>
+                    </div>
+                    <TabsContent
+                      value="comments"
+                      className="mt-0 flex-1 overflow-y-auto px-5 py-4 data-[state=inactive]:hidden"
+                    >
+                      <TaskCommentsSection taskId={editingTask.id} onChanged={onCountChanged} />
+                    </TabsContent>
+                    <TabsContent
+                      value="activities"
+                      className="mt-0 flex-1 overflow-y-auto px-5 py-4 data-[state=inactive]:hidden"
+                    >
+                      <TaskActivitiesSection
+                        taskId={editingTask.id}
+                        task={editingTask}
+                        statusLabel={(status) =>
+                          KANBAN_COLUMNS.find((column) => column.id === status)
+                            ?.label ?? status
+                        }
+                      />
+                    </TabsContent>
+                  </Tabs>
+                </div>
+
+                {/* ── Resize handle ── */}
+                <div
+                  className="group relative w-px shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary/40"
+                  onMouseDown={handleResizeMouseDown}
+                >
+                  <div className="absolute inset-y-0 -left-1.5 -right-1.5" />
+                  <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col gap-0.75 opacity-0 transition-opacity group-hover:opacity-100">
+                    <div className="size-0.75 rounded-full bg-primary/60" />
+                    <div className="size-0.75 rounded-full bg-primary/60" />
+                    <div className="size-0.75 rounded-full bg-primary/60" />
+                    <div className="size-0.75 rounded-full bg-primary/60" />
+                    <div className="size-0.75 rounded-full bg-primary/60" />
+                  </div>
+                </div>
+
+                {/* ── Aside direito ── */}
+                <aside
+                  className="flex shrink-0 flex-col gap-4 overflow-y-auto px-4 py-4"
+                  style={{ width: asideWidth }}
+                >
+                  <TaskFormFields
+                    formData={formData}
+                    setFormData={setFormData}
+                    statusOptions={KANBAN_COLUMNS}
+                    mentionItems={mentionItems}
+                    projectOptions={projectOptionsWithFallback}
+                    showDoingTime
+                    doingMinutes={getElapsedDoingMinutes(editingTask, doingTick)}
+                    showAttachments
+                    attachmentTaskId={editingTask.id}
+                    section="aside"
+                    showAssignee={showAssignee}
+                    assigneeOptions={assigneeOptions}
+                    onTagsChange={(tags) => void handleTagsChange(tags)}
+                    onFileChanged={onCountChanged}
+                  />
+                </aside>
+              </div>
+
+              <div className="flex flex-wrap items-center justify-between gap-2 border-t px-5 py-3">
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={loading || archivingId === editingTask.id}
+                    onClick={() => void handleArchive()}
+                  >
+                    {archivingId === editingTask.id ? (
+                      <Loader2 className="mr-2 size-4 animate-spin" />
+                    ) : (
+                      <Archive className="mr-2 size-4" />
+                    )}
+                    {commonT('actions.archive')}
+                  </Button>
+                  {timesheetProject ? (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      disabled={loading}
+                      onClick={() =>
+                        onLogHours ? onLogHours() : setIsTimesheetOpen(true)
+                      }
+                    >
+                      <Timer className="mr-2 size-4" />
+                      {commonT('actions.logHours')}
+                    </Button>
+                  ) : null}
+                </div>
+                <div className="flex gap-2">
+                  <Button variant="outline" onClick={close} disabled={loading}>
+                    {commonT('actions.cancel')}
+                  </Button>
+                  <Button
+                    onClick={() => void handleSubmit()}
+                    disabled={loading || isSubmitDisabled()}
+                  >
+                    {loading ? (
+                      <Loader2 className="mr-2 size-4 animate-spin" />
+                    ) : null}
+                    {commonT('actions.save')}
+                  </Button>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="flex-1 space-y-4 overflow-y-auto px-4 py-2">
+                <TaskFormFields
+                  formData={formData}
+                  setFormData={setFormData}
+                  statusOptions={KANBAN_COLUMNS}
+                  mentionItems={mentionItems}
+                  projectOptions={projectOptions}
+                  showProject={showProject}
+                  projectRequired={projectRequired}
+                  allowUnassignedProject={!projectRequired}
+                  onOpenCreateProject={() => setProjectFormOpen(true)}
+                  showAssignee={showAssignee}
+                  assigneeOptions={assigneeOptions}
+                />
+              </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" />
+                <div className="flex gap-2">
+                  <Button variant="outline" onClick={close} disabled={loading}>
+                    {commonT('actions.cancel')}
+                  </Button>
+                  <Button
+                    onClick={() => void handleSubmit()}
+                    disabled={loading || isSubmitDisabled()}
+                  >
+                    {loading ? (
+                      <Loader2 className="mr-2 size-4 animate-spin" />
+                    ) : null}
+                    {commonT('actions.create')}
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={projectFormOpen} onOpenChange={setProjectFormOpen}>
+        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
+          <SheetHeader>
+            <SheetTitle>{projectsT('sheet.createTitle')}</SheetTitle>
+            <SheetDescription>
+              {projectsT('sheet.description')}
+            </SheetDescription>
+          </SheetHeader>
+          <ProjectFormScreen
+            onCancel={() => setProjectFormOpen(false)}
+            onSaved={(project: OperationsProjectDetails) => {
+              const newOption: OperationsProjectOption = {
+                id: project.id,
+                label: project.name,
+                name: project.name,
+                code: project.code,
+                clientName: project.clientName,
+                status: project.status,
+              };
+              setLocalProjectOptions((prev) => [newOption, ...prev]);
+              setFormData((prev) => ({
+                ...prev,
+                projectId: String(project.id),
+              }));
+              setProjectFormOpen(false);
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+
+      {!onLogHours ? (
+        <TimesheetEntryCreateSheet
+          open={isTimesheetOpen}
+          onOpenChange={setIsTimesheetOpen}
+          project={timesheetProject}
+          task={
+            editingTask ? { id: editingTask.id, label: editingTask.name } : null
+          }
+        />
+      ) : null}
+    </>
+  );
+}