@hed-hog/operations 0.0.330 → 0.0.331

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

@@ -1,784 +1,629 @@
-'use client';
-
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-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, Loader2, Paperclip, Plus } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { 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 { ProjectFormScreen } from './project-form-screen';
-import { TaskCommentsSection } from './task-detail-sheet';
-import { TaskFileAttachments } from './task-file-attachments';
-
-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;
-};
-
-const EMPTY_TASK_FORM: TaskFormState = {
-  projectId: '',
-  name: '',
-  description: '',
-  priority: 'medium',
-  status: 'todo',
-  dueDate: '',
-  estimateHours: '',
-  tags: '',
-};
-
-function normalizeDateValue(value?: string | null) {
-  if (!value) return '';
-  const match = String(value)
-    .trim()
-    .match(/^\d{4}-\d{2}-\d{2}/);
-  return match?.[0] ?? '';
-}
-
-function getTaskPriorityLabel(value?: string | null) {
-  const labels: Record<string, string> = {
-    low: 'Baixa',
-    medium: 'Média',
-    high: 'Alta',
-  };
-  return labels[value ?? ''] ?? String(value ?? '');
-}
-
-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: 'info'. */
-  defaultTab?: 'info' | 'comments';
-  onSaved: () => void;
-};
-
-export function TaskFormSheet({
-  open,
-  onOpenChange,
-  request,
-  editingTask,
-  defaultAssigneeCollaboratorId,
-  projectRequired = false,
-  showProject = true,
-  defaultTab = 'info',
-  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<'info' | 'comments'>(defaultTab);
-  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)
-    ),
-  ];
-
-  // 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 ?? '',
-      });
-    } else {
-      setFormData(EMPTY_TASK_FORM);
-    }
-  }, [open, editingTask]);
-
-  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,
-      };
-
-      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);
-        }
-        if (defaultAssigneeCollaboratorId != null) {
-          payload.assigneeCollaboratorId = defaultAssigneeCollaboratorId;
-        }
-        await mutateOperations(request, '/operations/tasks', 'POST', payload);
-      }
-
-      onSaved();
-      close();
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleArchive = async () => {
-    if (!editingTask) return;
-    setArchivingId(editingTask.id);
-    try {
-      await mutateOperations(
-        request,
-        `/operations/tasks/${editingTask.id}`,
-        'PATCH',
-        { archived: true }
-      );
-      onSaved();
-      close();
-    } finally {
-      setArchivingId(null);
-    }
-  };
-
-  return (
-    <>
-      <Sheet
-        open={open}
-        onOpenChange={(value) => {
-          if (!loading) onOpenChange(value);
-        }}
-      >
-        <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
-          <SheetHeader className="shrink-0">
-            <SheetTitle>
-              {editingTask
-                ? taskT('taskForm.titleEdit')
-                : taskT('taskForm.titleNew')}
-            </SheetTitle>
-          </SheetHeader>
-
-          {editingTask ? (
-            <Tabs
-              value={activeTab}
-              onValueChange={(v) => setActiveTab(v as 'info' | 'comments')}
-              className="flex min-h-0 flex-1 flex-col"
-            >
-              <TabsList className="mx-4 shrink-0">
-                <TabsTrigger value="info">Informações</TabsTrigger>
-                <TabsTrigger value="comments">Comentários</TabsTrigger>
-              </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">
-                  {/* Project selector — hidden when showProject=false (project is known from context) */}
-                  {showProject ? (
-                    <div className="space-y-1.5">
-                      <Label htmlFor="task-form-project">
-                        {commonT('labels.project')}
-                        {!editingTask && projectRequired ? ' *' : ''}
-                      </Label>
-                      <div className="flex gap-2">
-                        <Select
-                          value={formData.projectId}
-                          onValueChange={(v) =>
-                            setFormData((prev) => ({ ...prev, projectId: v }))
-                          }
-                        >
-                          <SelectTrigger
-                            className="w-full"
-                            id="task-form-project"
-                          >
-                            <SelectValue
-                              placeholder={commonT('labels.project')}
-                            />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {!projectRequired && !editingTask ? (
-                              <SelectItem value="none">
-                                {commonT('labels.notAssigned')}
-                              </SelectItem>
-                            ) : null}
-                            {editingTask?.projectId &&
-                            !projectOptions.some(
-                              (p) =>
-                                String(p.id) === String(editingTask.projectId)
-                            ) ? (
-                              <SelectItem
-                                key={`fallback-${editingTask.projectId}`}
-                                value={String(editingTask.projectId)}
-                              >
-                                {[
-                                  editingTask.projectCode,
-                                  editingTask.projectName,
-                                ]
-                                  .filter(Boolean)
-                                  .join(' • ') || String(editingTask.projectId)}
-                              </SelectItem>
-                            ) : null}
-                            {projectOptions.map((p) => (
-                              <SelectItem key={p.id} value={String(p.id)}>
-                                {p.label}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          size="icon"
-                          className="shrink-0"
-                          title={projectsT('sheet.createTitle')}
-                          onClick={() => setProjectFormOpen(true)}
-                        >
-                          <Plus className="size-4" />
-                        </Button>
-                      </div>
-                    </div>
-                  ) : null}
-
-                  <div className="space-y-1.5">
-                    <Label htmlFor="task-form-name">
-                      {taskT('taskForm.nameLabel')} *
-                    </Label>
-                    <Input
-                      id="task-form-name"
-                      placeholder={taskT('taskForm.namePlaceholder')}
-                      value={formData.name}
-                      onChange={(e) =>
-                        setFormData((prev) => ({
-                          ...prev,
-                          name: e.target.value,
-                        }))
-                      }
-                    />
-                  </div>
-
-                  <div className="space-y-1.5">
-                    <Label htmlFor="task-form-description">
-                      {taskT('taskForm.descriptionLabel')}
-                    </Label>
-                    <RichTextEditor
-                      value={formData.description}
-                      onChange={(val) =>
-                        setFormData((prev) => ({ ...prev, description: val }))
-                      }
-                      mentions={mentionItems}
-                    />
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-3">
-                    <div className="space-y-1.5">
-                      <Label>{taskT('taskForm.priorityLabel')}</Label>
-                      <Select
-                        value={formData.priority}
-                        onValueChange={(v) =>
-                          setFormData((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>{taskT('taskForm.columnLabel')}</Label>
-                      <Select
-                        value={formData.status}
-                        onValueChange={(v) =>
-                          setFormData((prev) => ({
-                            ...prev,
-                            status: v as TaskColumnId,
-                          }))
-                        }
-                      >
-                        <SelectTrigger className="w-full">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {KANBAN_COLUMNS.map((col) => (
-                            <SelectItem key={col.id} value={col.id}>
-                              {col.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-3">
-                    <div className="space-y-1.5">
-                      <Label htmlFor="task-form-due-date">
-                        {taskT('taskForm.deadlineLabel')}
-                      </Label>
-                      <Input
-                        id="task-form-due-date"
-                        type="date"
-                        value={formData.dueDate}
-                        onChange={(e) =>
-                          setFormData((prev) => ({
-                            ...prev,
-                            dueDate: e.target.value,
-                          }))
-                        }
-                      />
-                    </div>
-
-                    <div className="space-y-1.5">
-                      <Label htmlFor="task-form-estimate">
-                        {taskT('taskForm.estimateLabel')}
-                      </Label>
-                      <Input
-                        id="task-form-estimate"
-                        type="number"
-                        min="0"
-                        step="0.5"
-                        placeholder="0"
-                        value={formData.estimateHours}
-                        onChange={(e) =>
-                          setFormData((prev) => ({
-                            ...prev,
-                            estimateHours: e.target.value,
-                          }))
-                        }
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-1.5">
-                    <Label htmlFor="task-form-tags">
-                      {taskT('taskForm.tagsLabel')}
-                    </Label>
-                    <Input
-                      id="task-form-tags"
-                      placeholder={taskT('taskForm.tagsPlaceholder')}
-                      value={formData.tags}
-                      onChange={(e) =>
-                        setFormData((prev) => ({
-                          ...prev,
-                          tags: e.target.value,
-                        }))
-                      }
-                    />
-                  </div>
-
-                  <div className="space-y-1.5">
-                    <Label className="flex items-center gap-1.5">
-                      <Paperclip className="size-3.5" />
-                      {taskT('taskForm.attachmentsLabel')}
-                    </Label>
-                    <TaskFileAttachments taskId={editingTask.id} />
-                  </div>
-                </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">
-                    <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>
-                  </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>
-              </TabsContent>
-
-              <TabsContent
-                value="comments"
-                className="min-h-0 flex-1 overflow-y-auto px-4 py-2 data-[state=inactive]:hidden"
-              >
-                <TaskCommentsSection taskId={editingTask.id} />
-              </TabsContent>
-            </Tabs>
-          ) : (
-            <>
-              <div className="flex-1 space-y-4 overflow-y-auto px-4 py-2">
-                {/* Project selector — hidden when showProject=false (project is known from context) */}
-                {showProject ? (
-                  <div className="space-y-1.5">
-                    <Label htmlFor="task-form-project">
-                      {commonT('labels.project')}
-                      {projectRequired ? ' *' : ''}
-                    </Label>
-                    <div className="flex gap-2">
-                      <Select
-                        value={formData.projectId}
-                        onValueChange={(v) =>
-                          setFormData((prev) => ({ ...prev, projectId: v }))
-                        }
-                      >
-                        <SelectTrigger
-                          className="w-full"
-                          id="task-form-project"
-                        >
-                          <SelectValue
-                            placeholder={commonT('labels.project')}
-                          />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {!projectRequired ? (
-                            <SelectItem value="none">
-                              {commonT('labels.notAssigned')}
-                            </SelectItem>
-                          ) : null}
-                          {projectOptions.map((p) => (
-                            <SelectItem key={p.id} value={String(p.id)}>
-                              {p.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="icon"
-                        className="shrink-0"
-                        title={projectsT('sheet.createTitle')}
-                        onClick={() => setProjectFormOpen(true)}
-                      >
-                        <Plus className="size-4" />
-                      </Button>
-                    </div>
-                  </div>
-                ) : null}
-
-                <div className="space-y-1.5">
-                  <Label htmlFor="task-form-name">
-                    {taskT('taskForm.nameLabel')} *
-                  </Label>
-                  <Input
-                    id="task-form-name"
-                    placeholder={taskT('taskForm.namePlaceholder')}
-                    value={formData.name}
-                    onChange={(e) =>
-                      setFormData((prev) => ({ ...prev, name: e.target.value }))
-                    }
-                  />
-                </div>
-
-                <div className="space-y-1.5">
-                  <Label htmlFor="task-form-description">
-                    {taskT('taskForm.descriptionLabel')}
-                  </Label>
-                  <RichTextEditor
-                    value={formData.description}
-                    onChange={(val) =>
-                      setFormData((prev) => ({ ...prev, description: val }))
-                    }
-                    mentions={mentionItems}
-                  />
-                </div>
-
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="space-y-1.5">
-                    <Label>{taskT('taskForm.priorityLabel')}</Label>
-                    <Select
-                      value={formData.priority}
-                      onValueChange={(v) =>
-                        setFormData((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>{taskT('taskForm.columnLabel')}</Label>
-                    <Select
-                      value={formData.status}
-                      onValueChange={(v) =>
-                        setFormData((prev) => ({
-                          ...prev,
-                          status: v as TaskColumnId,
-                        }))
-                      }
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {KANBAN_COLUMNS.map((col) => (
-                          <SelectItem key={col.id} value={col.id}>
-                            {col.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="space-y-1.5">
-                    <Label htmlFor="task-form-due-date">
-                      {taskT('taskForm.deadlineLabel')}
-                    </Label>
-                    <Input
-                      id="task-form-due-date"
-                      type="date"
-                      value={formData.dueDate}
-                      onChange={(e) =>
-                        setFormData((prev) => ({
-                          ...prev,
-                          dueDate: e.target.value,
-                        }))
-                      }
-                    />
-                  </div>
-
-                  <div className="space-y-1.5">
-                    <Label htmlFor="task-form-estimate">
-                      {taskT('taskForm.estimateLabel')}
-                    </Label>
-                    <Input
-                      id="task-form-estimate"
-                      type="number"
-                      min="0"
-                      step="0.5"
-                      placeholder="0"
-                      value={formData.estimateHours}
-                      onChange={(e) =>
-                        setFormData((prev) => ({
-                          ...prev,
-                          estimateHours: e.target.value,
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="space-y-1.5">
-                  <Label htmlFor="task-form-tags">
-                    {taskT('taskForm.tagsLabel')}
-                  </Label>
-                  <Input
-                    id="task-form-tags"
-                    placeholder={taskT('taskForm.tagsPlaceholder')}
-                    value={formData.tags}
-                    onChange={(e) =>
-                      setFormData((prev) => ({ ...prev, tags: e.target.value }))
-                    }
-                  />
-                </div>
-              </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>
-    </>
-  );
-}
+'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}
+    </>
+  );
+}