@hed-hog/operations 0.0.329 → 0.0.331

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

@@ -6,52 +6,55 @@ import {
   PaginationFooter,
   SearchBar,
 } from '@/components/entity-list';
-import { RichTextEditor } from '@/components/rich-text-editor';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { Label } from '@/components/ui/label';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
   TableHead,
   TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { RichTextEditor } from '@/components/rich-text-editor';
 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 +76,7 @@ import {
   Pencil,
   PlayCircle,
   Plus,
+  Send,
   Timer,
   Trash2,
 } from 'lucide-react';
@@ -81,15 +85,18 @@ import Link from 'next/link';
 import { useCallback, useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
-import {
-  TaskCommentsSection,
-  TaskDetailSheet,
-  type TaskDetailSheetData,
-} from '../_components/task-detail-sheet';
-import { TaskFileAttachments } from '../_components/task-file-attachments';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useMentionItems } from '../_lib/hooks/use-mention-items';
+import {
+  TaskDetailSheet,
+  TaskCommentsSection,
+  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 { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import type {
+  OperationsCollaborator,
   OperationsProjectOption,
   OperationsTaskOption,
   PaginatedResponse,
@@ -114,11 +121,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 +148,7 @@ const EMPTY_TASK_FORM: TaskFormState = {
   description: '',
   priority: 'medium',
   status: 'todo',
+  assigneeCollaboratorId: 'none',
   dueDate: '',
   estimateHours: '',
   tags: '',
@@ -151,17 +168,25 @@ function parseTaskId(value: UniqueIdentifier | null | undefined) {
   return match ? Number(match[1]) : null;
 }
 
-function parseColumnId(
-  value: UniqueIdentifier | null | undefined
-): BoardColumnId | null {
-  if (!value) return null;
-  const match = String(value).match(/^col-(.+)$/);
-  const id = match?.[1];
-  return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
-}
-
-function splitTasksByColumn(tasks: OperationsTaskOption[]): BoardColumns {
-  return {
+function parseColumnId(
+  value: UniqueIdentifier | null | undefined
+): BoardColumnId | null {
+  if (!value) return null;
+  const match = String(value).match(/^col-(.+)$/);
+  const id = match?.[1];
+  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'),
     doing: tasks.filter((t) => t.status === 'doing'),
     review: tasks.filter((t) => t.status === 'review'),
@@ -169,6 +194,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 +291,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 +305,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>
@@ -303,13 +334,17 @@ export default function OperationsMyTasksPage() {
   const t = useTranslations('operations.MyTasksPage');
   const commonT = useTranslations('operations.Common');
   const detailT = useTranslations('operations.ProjectDetailsPage');
-
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-  const mentionItems = useMentionItems(request);
-  const [search, setSearch] = useState('');
+
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const mentionItems = useMentionItems(request);
+  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>(() => {
@@ -331,11 +366,17 @@ export default function OperationsMyTasksPage() {
   const [deletePromptTask, setDeletePromptTask] =
     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 [taskFormData, setTaskFormData] =
-    useState<TaskFormState>(EMPTY_TASK_FORM);
+  const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
+  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 +437,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 +576,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]);
@@ -592,7 +707,6 @@ export default function OperationsMyTasksPage() {
 
   const openCreateTaskForm = useCallback(() => {
     setEditingTaskId(null);
-    setTaskFormData(EMPTY_TASK_FORM);
     setSelectedTask(null);
     setTaskFormOpen(true);
   }, []);
@@ -607,6 +721,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 +745,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 +782,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 +923,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 +933,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-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'
@@ -945,7 +1091,7 @@ export default function OperationsMyTasksPage() {
 
                                     <div className="mt-3 space-y-1.5">
                                       <div className="flex items-center justify-between text-[11px] text-muted-foreground">
-                                        <span>Progresso</span>
+                                        <span>{t('labels.progress')}</span>
                                         <span>
                                           {getTaskProgress(task.status)}%
                                         </span>
@@ -1080,6 +1226,19 @@ export default function OperationsMyTasksPage() {
                 </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
@@ -1248,12 +1407,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 +1431,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 +1465,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 +1504,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')}
@@ -1328,16 +1526,12 @@ export default function OperationsMyTasksPage() {
         </DialogContent>
       </Dialog>
 
-      <Sheet
-        open={taskFormOpen}
-        onOpenChange={(open) => {
-          if (!taskFormLoading) {
-            setTaskFormOpen(open);
-            if (!open) {
-              setEditingTaskId(null);
-              setTaskFormData(EMPTY_TASK_FORM);
-            }
-          }
+
+      <Sheet
+        open={taskFormOpen}
+        onOpenChange={(open) => {
+          setTaskFormOpen(open);
+          if (!open) setEditingTaskId(null);
         }}
       >
         <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
@@ -1481,6 +1675,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">