@hed-hog/operations 0.0.325 → 0.0.326

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

@@ -123,6 +123,7 @@ import {
   YAxis,
 } from 'recharts';
 import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useMentionItems } from '../_lib/hooks/use-mention-items';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type {
   OperationsProjectDetails,
@@ -142,7 +143,11 @@ import { ProjectCostsSection } from './project-costs-section';
 import { ProjectFormScreen } from './project-form-screen';
 import { SectionCard } from './section-card';
 import { StatusBadge } from './status-badge';
-import { TaskDetailSheet, type TaskDetailSheetData } from './task-detail-sheet';
+import {
+  TaskCommentsSection,
+  TaskDetailSheet,
+  type TaskDetailSheetData,
+} from './task-detail-sheet';
 import { TaskFileAttachments } from './task-file-attachments';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
@@ -873,7 +878,7 @@ function ProjectDetailsSkeleton() {
                   <Skeleton className="h-8 w-72" />
                   <Skeleton className="h-4 w-full max-w-md" />
                 </div>
-                <div className="hidden flex-shrink-0 gap-2 lg:flex">
+                <div className="hidden shrink-0 gap-2 lg:flex">
                   <Skeleton className="h-9 w-20 rounded-lg" />
                   <Skeleton className="h-9 w-28 rounded-lg" />
                   <Skeleton className="h-9 w-9 rounded-lg" />
@@ -1093,6 +1098,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const contractT = useTranslations('operations.ContractFormPage');
   const { request, currentLocaleCode, getSettingValue } = useApp();
   const access = useOperationsAccess();
+  const mentionItems = useMentionItems(request);
   const isLimitedView = !access.isDirector && !access.isSupervisor;
   const router = useRouter();
   const pathname = usePathname();
@@ -3028,7 +3034,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                       {(isOver) => (
                         <div
                           className={[
-                            'flex min-h-[32rem] flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
+                            'flex min-h-128 flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
                             getColumnClassName(column.id),
                             isOver
                               ? 'border-primary shadow-lg ring-2 ring-primary/15'
@@ -3103,11 +3109,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                                             : 'hover:border-primary/40 hover:shadow-lg',
                                         ].join(' ')}
                                         onClick={() =>
-                                          setSelectedTask({
-                                            ...task,
-                                            projectName: project?.name,
-                                            projectCode: project?.code,
-                                          })
+                                          !isDragging && openEditTaskForm(task)
                                         }
                                         onKeyDown={(event) => {
                                           if (
@@ -3115,11 +3117,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                                             event.key === ' '
                                           ) {
                                             event.preventDefault();
-                                            setSelectedTask({
-                                              ...task,
-                                              projectName: project?.name,
-                                              projectCode: project?.code,
-                                            });
+                                            openEditTaskForm(task);
                                           }
                                         }}
                                       >
@@ -4131,6 +4129,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
       <TaskDetailSheet
         task={selectedTask}
         open={selectedTask !== null}
+        defaultTab="comments"
         onOpenChange={(open) => {
           if (!open) {
             setSelectedTask(null);
@@ -4228,7 +4227,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
           }}
         >
           <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
-            <SheetHeader>
+            <SheetHeader className="shrink-0">
               <SheetTitle>
                 {editingTaskId
                   ? t('taskForm.titleEdit')
@@ -4236,234 +4235,263 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               </SheetTitle>
             </SheetHeader>
 
-            <div className="flex-1 space-y-4 overflow-y-auto px-4 py-2">
-              <div className="space-y-1.5">
-                <Label htmlFor="task-name">{t('taskForm.nameLabel')} *</Label>
-                <Input
-                  id="task-name"
-                  placeholder={t('taskForm.namePlaceholder')}
-                  value={taskFormData.name}
-                  onChange={(e) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      name: e.target.value,
-                    }))
-                  }
-                />
-              </div>
+            <Tabs defaultValue="info" className="flex min-h-0 flex-1 flex-col">
+              <TabsList className="mx-4 grid w-[calc(100%-2rem)] shrink-0 grid-cols-2">
+                <TabsTrigger value="info">{t('taskForm.tabInfo')}</TabsTrigger>
+                {editingTaskId ? (
+                  <TabsTrigger value="comments">
+                    {t('taskForm.tabComments')}
+                  </TabsTrigger>
+                ) : null}
+              </TabsList>
+              <TabsContent
+                value="info"
+                className="flex min-h-0 flex-1 flex-col data-[state=inactive]:hidden"
+              >
+                <div className="flex-1 space-y-4 overflow-y-auto px-4 py-2">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="task-name">
+                      {t('taskForm.nameLabel')} *
+                    </Label>
+                    <Input
+                      id="task-name"
+                      placeholder={t('taskForm.namePlaceholder')}
+                      value={taskFormData.name}
+                      onChange={(e) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          name: e.target.value,
+                        }))
+                      }
+                    />
+                  </div>
 
-              <div className="space-y-1.5">
-                <Label htmlFor="task-description">
-                  {t('taskForm.descriptionLabel')}
-                </Label>
-                <RichTextEditor
-                  value={taskFormData.description}
-                  onChange={(val) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      description: val,
-                    }))
-                  }
-                />
-              </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="task-description">
+                      {t('taskForm.descriptionLabel')}
+                    </Label>
+                    <RichTextEditor
+                      value={taskFormData.description}
+                      onChange={(val) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          description: val,
+                        }))
+                      }
+                      mentions={mentionItems}
+                    />
+                  </div>
 
-              <div className="grid grid-cols-2 gap-3">
-                <div className="space-y-1.5">
-                  <Label>{t('taskForm.priorityLabel')}</Label>
-                  <Select
-                    value={taskFormData.priority}
-                    onValueChange={(v) =>
-                      setTaskFormData((prev) => ({
-                        ...prev,
-                        priority: v as TaskFormState['priority'],
-                      }))
-                    }
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="low">
-                        {getTaskPriorityLabel('low')}
-                      </SelectItem>
-                      <SelectItem value="medium">
-                        {getTaskPriorityLabel('medium')}
-                      </SelectItem>
-                      <SelectItem value="high">
-                        {getTaskPriorityLabel('high')}
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <Label>{t('taskForm.priorityLabel')}</Label>
+                      <Select
+                        value={taskFormData.priority}
+                        onValueChange={(v) =>
+                          setTaskFormData((prev) => ({
+                            ...prev,
+                            priority: v as TaskFormState['priority'],
+                          }))
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="low">
+                            {getTaskPriorityLabel('low')}
+                          </SelectItem>
+                          <SelectItem value="medium">
+                            {getTaskPriorityLabel('medium')}
+                          </SelectItem>
+                          <SelectItem value="high">
+                            {getTaskPriorityLabel('high')}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
 
-                <div className="space-y-1.5">
-                  <Label>{t('taskForm.columnLabel')}</Label>
-                  <Select
-                    value={taskFormData.status}
-                    onValueChange={(v) =>
-                      setTaskFormData((prev) => ({
-                        ...prev,
-                        status: v as BoardColumnId,
-                      }))
-                    }
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {KANBAN_COLUMNS.map((col) => (
-                        <SelectItem key={col.id} value={col.id}>
-                          {col.label}
+                    <div className="space-y-1.5">
+                      <Label>{t('taskForm.columnLabel')}</Label>
+                      <Select
+                        value={taskFormData.status}
+                        onValueChange={(v) =>
+                          setTaskFormData((prev) => ({
+                            ...prev,
+                            status: v as BoardColumnId,
+                          }))
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {KANBAN_COLUMNS.map((col) => (
+                            <SelectItem key={col.id} value={col.id}>
+                              {col.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label>Responsável</Label>
+                    <Select
+                      value={taskFormData.assigneeCollaboratorId}
+                      onValueChange={(value) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          assigneeCollaboratorId: value,
+                        }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue
+                          placeholder={commonT('labels.notAssigned')}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">
+                          {commonT('labels.notAssigned')}
                         </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
+                        {taskAssigneeOptions.map((option) => (
+                          <SelectItem key={option.id} value={option.id}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
 
-              <div className="space-y-1.5">
-                <Label>Responsável</Label>
-                <Select
-                  value={taskFormData.assigneeCollaboratorId}
-                  onValueChange={(value) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      assigneeCollaboratorId: value,
-                    }))
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder={commonT('labels.notAssigned')} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="none">
-                      {commonT('labels.notAssigned')}
-                    </SelectItem>
-                    {taskAssigneeOptions.map((option) => (
-                      <SelectItem key={option.id} value={option.id}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <Label htmlFor="task-due-date">
+                        {t('taskForm.deadlineLabel')}
+                      </Label>
+                      <Input
+                        id="task-due-date"
+                        type="date"
+                        value={taskFormData.dueDate}
+                        onChange={(e) =>
+                          setTaskFormData((prev) => ({
+                            ...prev,
+                            dueDate: e.target.value,
+                          }))
+                        }
+                      />
+                    </div>
 
-              <div className="grid grid-cols-2 gap-3">
-                <div className="space-y-1.5">
-                  <Label htmlFor="task-due-date">
-                    {t('taskForm.deadlineLabel')}
-                  </Label>
-                  <Input
-                    id="task-due-date"
-                    type="date"
-                    value={taskFormData.dueDate}
-                    onChange={(e) =>
-                      setTaskFormData((prev) => ({
-                        ...prev,
-                        dueDate: e.target.value,
-                      }))
-                    }
-                  />
-                </div>
+                    <div className="space-y-1.5">
+                      <Label htmlFor="task-estimate">
+                        {t('taskForm.estimateLabel')}
+                      </Label>
+                      <Input
+                        id="task-estimate"
+                        type="number"
+                        min="0"
+                        step="0.5"
+                        placeholder="0"
+                        value={taskFormData.estimateHours}
+                        onChange={(e) =>
+                          setTaskFormData((prev) => ({
+                            ...prev,
+                            estimateHours: e.target.value,
+                          }))
+                        }
+                      />
+                    </div>
+                  </div>
 
-                <div className="space-y-1.5">
-                  <Label htmlFor="task-estimate">
-                    {t('taskForm.estimateLabel')}
-                  </Label>
-                  <Input
-                    id="task-estimate"
-                    type="number"
-                    min="0"
-                    step="0.5"
-                    placeholder="0"
-                    value={taskFormData.estimateHours}
-                    onChange={(e) =>
-                      setTaskFormData((prev) => ({
-                        ...prev,
-                        estimateHours: e.target.value,
-                      }))
-                    }
-                  />
-                </div>
-              </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="task-tags">{t('taskForm.tagsLabel')}</Label>
+                    <Input
+                      id="task-tags"
+                      placeholder={t('taskForm.tagsPlaceholder')}
+                      value={taskFormData.tags}
+                      onChange={(e) =>
+                        setTaskFormData((prev) => ({
+                          ...prev,
+                          tags: e.target.value,
+                        }))
+                      }
+                    />
+                  </div>
 
-              <div className="space-y-1.5">
-                <Label htmlFor="task-tags">{t('taskForm.tagsLabel')}</Label>
-                <Input
-                  id="task-tags"
-                  placeholder={t('taskForm.tagsPlaceholder')}
-                  value={taskFormData.tags}
-                  onChange={(e) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      tags: e.target.value,
-                    }))
-                  }
-                />
-              </div>
+                  {editingTaskId ? (
+                    <div className="space-y-1.5">
+                      <Label className="flex items-center gap-1.5">
+                        <Paperclip className="size-3.5" />
+                        {t('taskForm.attachmentsLabel')}
+                      </Label>
+                      <TaskFileAttachments taskId={editingTaskId} />
+                    </div>
+                  ) : null}
+                </div>
 
-              {editingTaskId ? (
-                <div className="space-y-1.5">
-                  <Label className="flex items-center gap-1.5">
-                    <Paperclip className="size-3.5" />
-                    {t('taskForm.attachmentsLabel')}
-                  </Label>
-                  <TaskFileAttachments taskId={editingTaskId} />
+                <div className="mt-4 flex flex-wrap items-center justify-between gap-2 border-t px-4 pb-4 pt-4">
+                  <div className="flex gap-2">
+                    {editingTaskId ? (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        disabled={
+                          taskFormLoading || archivingTaskId === editingTaskId
+                        }
+                        onClick={() => {
+                          if (!editingTaskId) return;
+                          const id = editingTaskId;
+                          setTaskFormOpen(false);
+                          setEditingTaskId(null);
+                          setTaskFormData(EMPTY_TASK_FORM);
+                          void handleArchiveTask(id);
+                        }}
+                      >
+                        {archivingTaskId === editingTaskId ? (
+                          <Loader2 className="mr-2 size-4 animate-spin" />
+                        ) : (
+                          <Archive className="mr-2 size-4" />
+                        )}
+                        {commonT('actions.archive')}
+                      </Button>
+                    ) : null}
+                  </div>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="outline"
+                      onClick={() => {
+                        setTaskFormOpen(false);
+                        setEditingTaskId(null);
+                        setTaskFormData(EMPTY_TASK_FORM);
+                      }}
+                      disabled={taskFormLoading}
+                    >
+                      {commonT('actions.cancel')}
+                    </Button>
+                    <Button
+                      onClick={() => void handleTaskFormSubmit()}
+                      disabled={taskFormLoading || !taskFormData.name.trim()}
+                    >
+                      {taskFormLoading
+                        ? t('taskForm.saving')
+                        : editingTaskId
+                          ? commonT('actions.save')
+                          : commonT('actions.create')}
+                    </Button>
+                  </div>
                 </div>
-              ) : null}
-            </div>
+              </TabsContent>
 
-            <div className="mt-4 flex flex-wrap items-center justify-between gap-2 border-t px-4 pb-4 pt-4">
-              <div className="flex gap-2">
-                {editingTaskId ? (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    disabled={
-                      taskFormLoading || archivingTaskId === editingTaskId
-                    }
-                    onClick={() => {
-                      if (!editingTaskId) return;
-                      const id = editingTaskId;
-                      setTaskFormOpen(false);
-                      setEditingTaskId(null);
-                      setTaskFormData(EMPTY_TASK_FORM);
-                      void handleArchiveTask(id);
-                    }}
-                  >
-                    {archivingTaskId === editingTaskId ? (
-                      <Loader2 className="mr-2 size-4 animate-spin" />
-                    ) : (
-                      <Archive className="mr-2 size-4" />
-                    )}
-                    {commonT('actions.archive')}
-                  </Button>
-                ) : null}
-              </div>
-              <div className="flex gap-2">
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setTaskFormOpen(false);
-                    setEditingTaskId(null);
-                    setTaskFormData(EMPTY_TASK_FORM);
-                  }}
-                  disabled={taskFormLoading}
-                >
-                  {commonT('actions.cancel')}
-                </Button>
-                <Button
-                  onClick={() => void handleTaskFormSubmit()}
-                  disabled={taskFormLoading || !taskFormData.name.trim()}
+              {editingTaskId ? (
+                <TabsContent
+                  value="comments"
+                  className="min-h-0 flex-1 overflow-y-auto px-4 py-2 data-[state=inactive]:hidden"
                 >
-                  {taskFormLoading
-                    ? t('taskForm.saving')
-                    : editingTaskId
-                      ? commonT('actions.save')
-                      : commonT('actions.create')}
-                </Button>
-              </div>
-            </div>
+                  <TaskCommentsSection taskId={editingTaskId} />
+                </TabsContent>
+              ) : null}
+            </Tabs>
           </SheetContent>
         </Sheet>
       ) : null}