@hed-hog/operations 0.0.330 → 0.0.332

package/hedhog/frontend/app/my-tasks/page.tsx.ejs

@@ -12,6 +12,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -43,15 +44,18 @@ import {
 } from '@/components/ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import {
   closestCenter,
   DndContext,
+  DragOverlay,
   PointerSensor,
   useDraggable,
   useDroppable,
   useSensor,
   useSensors,
   type DragEndEvent,
+  type DragStartEvent,
   type UniqueIdentifier,
 } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
@@ -73,6 +77,7 @@ import {
   Pencil,
   PlayCircle,
   Plus,
+  Send,
   Timer,
   Trash2,
 } from 'lucide-react';
@@ -87,14 +92,17 @@ import {
   type TaskDetailSheetData,
 } from '../_components/task-detail-sheet';
 import { TaskFileAttachments } from '../_components/task-file-attachments';
+import { TimesheetEntryCreateSheet } from '../_components/timesheet-entry-create-sheet';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useMentionItems } from '../_lib/hooks/use-mention-items';
 import type {
+  OperationsCollaborator,
   OperationsProjectOption,
   OperationsTaskOption,
   PaginatedResponse,
 } from '../_lib/types';
 import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
+import { getTaskDescriptionPreview } from '../_lib/utils/task-ui';
 
 type TaskViewMode = 'table' | 'cards' | 'board';
 
@@ -114,11 +122,20 @@ type TaskFormState = {
   description: string;
   priority: 'low' | 'medium' | 'high';
   status: BoardColumnId;
+  assigneeCollaboratorId: string;
   dueDate: string;
   estimateHours: string;
   tags: string;
 };
 
+type TimesheetEntryPrefill = {
+  projectId: number;
+  projectAssignmentId?: number | null;
+  projectLabel: string;
+  taskId: number;
+  taskLabel: string;
+};
+
 const KANBAN_COLUMNS: Array<{ id: BoardColumnId; label: string }> = [
   { id: 'todo', label: 'Backlog' },
   { id: 'doing', label: 'Em execução' },
@@ -132,6 +149,7 @@ const EMPTY_TASK_FORM: TaskFormState = {
   description: '',
   priority: 'medium',
   status: 'todo',
+  assigneeCollaboratorId: 'none',
   dueDate: '',
   estimateHours: '',
   tags: '',
@@ -160,6 +178,14 @@ function parseColumnId(
   return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
 }
 
+function normalizeDateInputValue(value?: string | null) {
+  if (!value) return '';
+  const match = String(value)
+    .trim()
+    .match(/^\d{4}-\d{2}-\d{2}/);
+  return match?.[0] ?? '';
+}
+
 function splitTasksByColumn(tasks: OperationsTaskOption[]): BoardColumns {
   return {
     todo: tasks.filter((t) => t.status === 'todo'),
@@ -169,6 +195,30 @@ function splitTasksByColumn(tasks: OperationsTaskOption[]): BoardColumns {
   };
 }
 
+function getTaskColumnId(status?: string | null): BoardColumnId {
+  return KANBAN_COLUMNS.some((column) => column.id === status)
+    ? (status as BoardColumnId)
+    : 'todo';
+}
+
+function replaceTaskInColumns(
+  columns: BoardColumns,
+  task: OperationsTaskOption
+): BoardColumns {
+  const targetColumn = getTaskColumnId(task.status);
+  const nextColumns = {
+    todo: columns.todo.filter((item) => item.id !== task.id),
+    doing: columns.doing.filter((item) => item.id !== task.id),
+    review: columns.review.filter((item) => item.id !== task.id),
+    done: columns.done.filter((item) => item.id !== task.id),
+  };
+
+  return {
+    ...nextColumns,
+    [targetColumn]: [task, ...nextColumns[targetColumn]],
+  };
+}
+
 function getTaskPriorityLabel(value?: string | null) {
   const labels: Record<string, string> = {
     low: 'Baixa',
@@ -242,26 +292,6 @@ function getUserPhotoUrl(photoId?: number | null) {
     : null;
 }
 
-function normalizeDateInputValue(value?: string | null) {
-  if (!value) {
-    return '';
-  }
-
-  const normalizedValue = String(value).trim();
-  const directMatch = normalizedValue.match(/^\d{4}-\d{2}-\d{2}/);
-
-  if (directMatch?.[0]) {
-    return directMatch[0];
-  }
-
-  const parsedDate = new Date(normalizedValue);
-  if (Number.isNaN(parsedDate.getTime())) {
-    return '';
-  }
-
-  return parsedDate.toISOString().slice(0, 10);
-}
-
 function DraggableTaskCard({
   task,
   children,
@@ -276,10 +306,12 @@ function DraggableTaskCard({
   return (
     <div
       ref={setNodeRef}
-      style={{ transform: CSS.Translate.toString(transform) }}
+      style={{
+        transform: CSS.Translate.toString(transform),
+        ...(isDragging ? { opacity: 0, pointerEvents: 'none' } : {}),
+      }}
       {...listeners}
       {...attributes}
-      className={isDragging ? 'z-20' : undefined}
     >
       {children(isDragging)}
     </div>
@@ -309,7 +341,11 @@ export default function OperationsMyTasksPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(20);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-my-tasks:pageSize',
+    defaultValue: 20,
+    allowedValues: [10, 20, 50],
+  });
   const [taskCollection, setTaskCollection] =
     useState<TaskCollection>('active');
   const [viewMode, setViewMode] = useState<TaskViewMode>(() => {
@@ -332,10 +368,16 @@ export default function OperationsMyTasksPage() {
     useState<OperationsTaskOption | null>(null);
   const [taskFormOpen, setTaskFormOpen] = useState(false);
   const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
-  const [taskFormLoading, setTaskFormLoading] = useState(false);
   const [archivingTaskId, setArchivingTaskId] = useState<number | null>(null);
+  const [taskFormLoading, setTaskFormLoading] = useState(false);
   const [taskFormData, setTaskFormData] =
     useState<TaskFormState>(EMPTY_TASK_FORM);
+  const [activeDragTask, setActiveDragTask] =
+    useState<OperationsTaskOption | null>(null);
+  const [isTimesheetEntrySheetOpen, setIsTimesheetEntrySheetOpen] =
+    useState(false);
+  const [timesheetPrefill, setTimesheetPrefill] =
+    useState<TimesheetEntryPrefill | null>(null);
   const [inlineCreateColumn, setInlineCreateColumn] =
     useState<BoardColumnId | null>(null);
   const [inlineCreateName, setInlineCreateName] = useState('');
@@ -396,16 +438,57 @@ export default function OperationsMyTasksPage() {
       ),
     placeholderData: (previous) => previous,
   });
+  const { data: collaboratorsResponse } = useQuery<
+    PaginatedResponse<OperationsCollaborator>
+  >({
+    queryKey: ['operations-my-task-collaborator-options', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<PaginatedResponse<OperationsCollaborator>>(
+        request,
+        '/operations/collaborators?pageSize=200&sortField=displayName&sortOrder=asc'
+      ),
+    placeholderData: (previous) => previous,
+  });
 
   const tasks = tasksResponse?.data ?? [];
   const boardApiTasks = boardTasksResponse?.data ?? [];
   const projectOptions = projectOptionsResponse?.data ?? [];
+  const assigneeOptions = useMemo(() => {
+    const seen = new Set<number>();
+    return (collaboratorsResponse?.data ?? [])
+      .filter((collaborator) => {
+        if (!collaborator.id || seen.has(collaborator.id)) {
+          return false;
+        }
+        seen.add(collaborator.id);
+        return true;
+      })
+      .map((collaborator) => ({
+        id: String(collaborator.id),
+        label:
+          collaborator.displayName ||
+          collaborator.personName ||
+          collaborator.code,
+      }));
+  }, [collaboratorsResponse]);
 
   const boardColumns: BoardColumns = useMemo(() => {
     if (boardOverride) return boardOverride.columns;
     return splitTasksByColumn(boardApiTasks);
   }, [boardOverride, boardApiTasks]);
 
+  const editingTask = useMemo(() => {
+    if (!editingTaskId) return null;
+    return (
+      Object.values(boardColumns)
+        .flat()
+        .find((task) => task.id === editingTaskId) ??
+      boardApiTasks.find((task) => task.id === editingTaskId) ??
+      tasks.find((task) => task.id === editingTaskId) ??
+      null
+    );
+  }, [boardApiTasks, boardColumns, editingTaskId, tasks]);
+
   const statsCards = useMemo(
     () => [
       {
@@ -494,23 +577,56 @@ export default function OperationsMyTasksPage() {
         },
       });
 
-      mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
-        status: targetColumn,
-      }).catch(() => {
-        setBoardOverride(null);
-        void refetchBoard();
-      });
+      mutateOperations<OperationsTaskOption>(
+        request,
+        `/operations/tasks/${taskId}`,
+        'PATCH',
+        {
+          status: targetColumn,
+        }
+      )
+        .then((updatedTask) => {
+          if (!updatedTask) {
+            return;
+          }
+
+          setBoardOverride((current) => ({
+            columns: replaceTaskInColumns(current?.columns ?? boardColumns, {
+              ...sourceTask,
+              ...updatedTask,
+            }),
+          }));
+        })
+        .catch(() => {
+          setBoardOverride(null);
+          void refetchBoard();
+        });
     },
     [boardColumns, findColumnByTask, request, refetchBoard]
   );
 
   const onBoardDragEnd = (event: DragEndEvent) => {
+    setActiveDragTask(null);
     const taskId = parseTaskId(event.active.id);
     const targetColumn = parseColumnId(event.over?.id);
     if (!taskId || !targetColumn) return;
     moveTaskToColumn(taskId, targetColumn);
   };
 
+  const onBoardDragStart = (event: DragStartEvent) => {
+    const taskId = parseTaskId(event.active.id);
+    if (!taskId) {
+      setActiveDragTask(null);
+      return;
+    }
+
+    const task = KANBAN_COLUMNS.map((column) => boardColumns[column.id])
+      .find((items) => items.some((item) => item.id === taskId))
+      ?.find((item) => item.id === taskId);
+
+    setActiveDragTask(task ?? null);
+  };
+
   const refetchAll = useCallback(async () => {
     await Promise.all([refetch(), refetchBoard()]);
   }, [refetch, refetchBoard]);
@@ -590,10 +706,13 @@ export default function OperationsMyTasksPage() {
     [inlineCreateName, request, refetchBoard]
   );
 
-  const openCreateTaskForm = useCallback(() => {
+  const openCreateTaskForm = useCallback((status?: BoardColumnId) => {
     setEditingTaskId(null);
-    setTaskFormData(EMPTY_TASK_FORM);
     setSelectedTask(null);
+    setTaskFormData((prev) => ({
+      ...EMPTY_TASK_FORM,
+      ...(status ? { status } : { status: prev.status }),
+    }));
     setTaskFormOpen(true);
   }, []);
 
@@ -607,6 +726,9 @@ export default function OperationsMyTasksPage() {
       status: KANBAN_COLUMNS.some((column) => column.id === task.status)
         ? (task.status as BoardColumnId)
         : 'todo',
+      assigneeCollaboratorId: task.assigneeCollaboratorId
+        ? String(task.assigneeCollaboratorId)
+        : 'none',
       dueDate: normalizeDateInputValue(task.dueDate),
       estimateHours:
         task.estimateHours != null ? String(task.estimateHours) : '',
@@ -628,6 +750,10 @@ export default function OperationsMyTasksPage() {
       const payload = {
         projectId: selectedProject.id,
         projectAssignmentId: selectedProject.projectAssignmentId ?? null,
+        assigneeCollaboratorId:
+          taskFormData.assigneeCollaboratorId !== 'none'
+            ? Number(taskFormData.assigneeCollaboratorId)
+            : null,
         name: normalizedName,
         description: taskFormData.description.trim() || null,
         priority: taskFormData.priority,
@@ -661,6 +787,29 @@ export default function OperationsMyTasksPage() {
     }
   }, [editingTaskId, projectOptions, request, refetchAll, taskFormData]);
 
+  const openTimesheetEntrySheet = useCallback(
+    (task: TaskDetailSheetData) => {
+      if (!task.projectId) {
+        return;
+      }
+
+      const projectLabel = [task.projectName, task.projectCode]
+        .filter(Boolean)
+        .join(' • ');
+
+      setTimesheetPrefill({
+        projectId: task.projectId,
+        projectAssignmentId: task.projectAssignmentId ?? null,
+        projectLabel: projectLabel || commonT('labels.notAssigned'),
+        taskId: task.id,
+        taskLabel: task.name,
+      });
+      setSelectedTask(null);
+      setIsTimesheetEntrySheetOpen(true);
+    },
+    [commonT]
+  );
+
   return (
     <Page>
       <OperationsHeader
@@ -779,6 +928,8 @@ export default function OperationsMyTasksPage() {
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
+            onDragStart={onBoardDragStart}
+            onDragCancel={() => setActiveDragTask(null)}
             onDragEnd={onBoardDragEnd}
           >
             <div className="grid gap-4 xl:grid-cols-4">
@@ -787,7 +938,7 @@ export default function OperationsMyTasksPage() {
                   {(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-48 max-h-160 flex-col rounded-3xl border bg-linear-to-b p-3 transition-all',
                         getColumnClassName(column.id),
                         isOver
                           ? 'border-primary shadow-lg ring-2 ring-primary/15'
@@ -817,17 +968,14 @@ export default function OperationsMyTasksPage() {
                           <button
                             type="button"
                             className="flex size-5 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
-                            onClick={() => {
-                              setInlineCreateColumn(column.id);
-                              setInlineCreateName('');
-                            }}
+                            onClick={() => openCreateTaskForm(column.id)}
                           >
                             <Plus className="size-3.5" />
                           </button>
                         </div>
                       </div>
 
-                      <div className="flex flex-1 flex-col gap-2">
+                      <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pb-1 pr-0.5">
                         <AnimatePresence initial={false}>
                           {boardColumns[column.id].map((task) => {
                             const taskTags = task.tags
@@ -879,9 +1027,8 @@ export default function OperationsMyTasksPage() {
                                         </p>
                                         {task.description ? (
                                           <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
-                                            {task.description.replace(
-                                              /<[^>]*>/g,
-                                              ''
+                                            {getTaskDescriptionPreview(
+                                              task.description
                                             )}
                                           </p>
                                         ) : null}
@@ -1005,81 +1152,32 @@ export default function OperationsMyTasksPage() {
                         </AnimatePresence>
                       </div>
 
-                      {inlineCreateColumn === column.id ? (
-                        <div className="space-y-1.5 rounded-lg border bg-card p-2">
-                          <Input
-                            autoFocus
-                            placeholder={detailT('taskForm.namePlaceholder')}
-                            value={inlineCreateName}
-                            onChange={(e) =>
-                              setInlineCreateName(e.target.value)
-                            }
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter') {
-                                e.preventDefault();
-                                void handleInlineCreateTask(column.id);
-                              } else if (e.key === 'Escape') {
-                                setInlineCreateColumn(null);
-                                setInlineCreateName('');
-                              }
-                            }}
-                            onBlur={() => {
-                              if (!inlineCreateName.trim()) {
-                                setInlineCreateColumn(null);
-                                setInlineCreateName('');
-                              }
-                            }}
-                            disabled={inlineCreateLoading}
-                            className="h-8 text-sm"
-                          />
-                          <div className="flex gap-1">
-                            <Button
-                              type="button"
-                              size="sm"
-                              className="h-7 px-2 text-xs"
-                              disabled={
-                                !inlineCreateName.trim() || inlineCreateLoading
-                              }
-                              onMouseDown={(e) => e.preventDefault()}
-                              onClick={() =>
-                                void handleInlineCreateTask(column.id)
-                              }
-                            >
-                              {t('actions.create')}
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="sm"
-                              className="h-7 px-2 text-xs"
-                              onMouseDown={(e) => e.preventDefault()}
-                              onClick={() => {
-                                setInlineCreateColumn(null);
-                                setInlineCreateName('');
-                              }}
-                            >
-                              {commonT('actions.cancel')}
-                            </Button>
-                          </div>
-                        </div>
-                      ) : (
-                        <button
-                          type="button"
-                          className="flex w-full cursor-pointer items-center gap-1 rounded-md px-1 py-1 text-xs text-muted-foreground transition hover:bg-muted hover:text-foreground"
-                          onClick={() => {
-                            setInlineCreateColumn(column.id);
-                            setInlineCreateName('');
-                          }}
-                        >
-                          <Plus className="size-3" />
-                          {t('actions.create')}
-                        </button>
-                      )}
+                      <button
+                        type="button"
+                        className="mt-auto flex w-full cursor-pointer items-center justify-center gap-1 rounded-2xl border border-dashed bg-background/70 px-3 py-2 text-xs text-muted-foreground transition hover:border-primary/40 hover:bg-primary/5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                        onClick={() => openCreateTaskForm(column.id)}
+                      >
+                        <Plus className="size-3" />
+                        {t('actions.create')}
+                      </button>
                     </div>
                   )}
                 </DroppableColumn>
               ))}
             </div>
+            <DragOverlay zIndex={1200}>
+              {activeDragTask ? (
+                <div className="w-76 cursor-grabbing rounded-2xl border border-primary/60 bg-card p-3 text-left shadow-2xl ring-2 ring-primary/20 opacity-95">
+                  <p className="line-clamp-2 text-sm font-semibold leading-snug">
+                    {activeDragTask.name}
+                  </p>
+                  <p className="mt-1 truncate text-xs text-muted-foreground">
+                    {activeDragTask.assigneeName ||
+                      commonT('labels.notAssigned')}
+                  </p>
+                </div>
+              ) : null}
+            </DragOverlay>
           </DndContext>
         ) : (
           <EmptyState
@@ -1117,7 +1215,7 @@ export default function OperationsMyTasksPage() {
 
                   {task.description ? (
                     <p className="line-clamp-3 text-sm text-muted-foreground">
-                      {task.description}
+                      {getTaskDescriptionPreview(task.description)}
                     </p>
                   ) : null}
 
@@ -1166,7 +1264,7 @@ export default function OperationsMyTasksPage() {
                         <div className="truncate font-medium">{task.name}</div>
                         {task.description ? (
                           <div className="truncate text-xs text-muted-foreground">
-                            {task.description}
+                            {getTaskDescriptionPreview(task.description)}
                           </div>
                         ) : null}
                       </div>
@@ -1248,12 +1346,12 @@ export default function OperationsMyTasksPage() {
         }}
         footer={
           selectedTask ? (
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
               {taskCollection === 'archived' ? (
                 <>
                   <Button
                     variant="outline"
-                    className="gap-2"
+                    className="gap-2 sm:col-span-2"
                     onClick={() => void handleRestoreTask(selectedTask.id)}
                   >
                     <ArchiveRestore className="size-4" />
@@ -1272,6 +1370,15 @@ export default function OperationsMyTasksPage() {
                 </>
               ) : (
                 <>
+                  <Button
+                    variant="outline"
+                    className="gap-2"
+                    disabled={!selectedTask.projectId}
+                    onClick={() => openTimesheetEntrySheet(selectedTask)}
+                  >
+                    <Send className="size-4" />
+                    {commonT('actions.logHours')}
+                  </Button>
                   <Button
                     variant="outline"
                     className="gap-2"
@@ -1297,6 +1404,36 @@ export default function OperationsMyTasksPage() {
         }
       />
 
+      <TimesheetEntryCreateSheet
+        open={isTimesheetEntrySheetOpen}
+        onOpenChange={(open) => {
+          setIsTimesheetEntrySheetOpen(open);
+          if (!open) {
+            setTimesheetPrefill(null);
+          }
+        }}
+        project={
+          timesheetPrefill
+            ? {
+                id: timesheetPrefill.projectId,
+                label: timesheetPrefill.projectLabel,
+                projectAssignmentId: timesheetPrefill.projectAssignmentId,
+              }
+            : null
+        }
+        task={
+          timesheetPrefill
+            ? {
+                id: timesheetPrefill.taskId,
+                label: timesheetPrefill.taskLabel,
+              }
+            : null
+        }
+        onCreated={() => {
+          void refetchAll();
+        }}
+      />
+
       <Dialog
         open={deletePromptTask !== null}
         onOpenChange={(open) => {
@@ -1306,10 +1443,10 @@ export default function OperationsMyTasksPage() {
         <DialogContent className="sm:max-w-sm">
           <DialogHeader>
             <DialogTitle>{t('dialogs.deleteTitle')}</DialogTitle>
+            <DialogDescription>
+              {t('dialogs.deleteDescription')}
+            </DialogDescription>
           </DialogHeader>
-          <p className="text-sm text-muted-foreground">
-            {t('dialogs.deleteDescription')}
-          </p>
           <DialogFooter className="mt-4">
             <Button variant="outline" onClick={() => setDeletePromptTask(null)}>
               {commonT('actions.cancel')}
@@ -1331,13 +1468,8 @@ export default function OperationsMyTasksPage() {
       <Sheet
         open={taskFormOpen}
         onOpenChange={(open) => {
-          if (!taskFormLoading) {
-            setTaskFormOpen(open);
-            if (!open) {
-              setEditingTaskId(null);
-              setTaskFormData(EMPTY_TASK_FORM);
-            }
-          }
+          setTaskFormOpen(open);
+          if (!open) setEditingTaskId(null);
         }}
       >
         <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
@@ -1481,6 +1613,35 @@ export default function OperationsMyTasksPage() {
                   </div>
                 </div>
 
+                <div className="space-y-2">
+                  <Label>{commonT('responsible')}</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>
+                      {assigneeOptions.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-2">
                     <Label htmlFor="task-due-date">