@hed-hog/operations 0.0.330 → 0.0.332

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

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -39,12 +40,14 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 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';
@@ -60,6 +63,7 @@ import {
   Paperclip,
   Pencil,
   Plus,
+  Send,
   Timer,
   Trash2,
 } from 'lucide-react';
@@ -86,6 +90,7 @@ import {
   type TaskDetailSheetData,
 } from './task-detail-sheet';
 import { TaskFileAttachments } from './task-file-attachments';
+import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
 
@@ -104,6 +109,8 @@ type BoardTask = {
   assigneePersonAvatarId: number | null;
   commentCount: number;
   fileCount: number;
+  doingStartedAt: string | null;
+  totalDoingMinutes: number;
 };
 
 type TaskFormState = {
@@ -111,6 +118,7 @@ type TaskFormState = {
   description: string;
   priority: 'low' | 'medium' | 'high';
   status: BoardColumnId;
+  assigneeCollaboratorId: string;
   dueDate: string;
   estimateHours: string;
   tags: string;
@@ -121,6 +129,7 @@ const EMPTY_TASK_FORM: TaskFormState = {
   description: '',
   priority: 'medium',
   status: 'todo',
+  assigneeCollaboratorId: 'none',
   dueDate: '',
   estimateHours: '',
   tags: '',
@@ -133,6 +142,14 @@ type BoardState = {
   columns: BoardColumns;
 };
 
+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' },
@@ -163,8 +180,16 @@ 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 apiTaskToBoardTask(
-  row: OperationsMyProjectSummary['tasks'][number]
+  row: OperationsMyProjectSummary['tasks'][number] | OperationsTaskOption
 ): BoardTask {
   const status = KANBAN_COLUMNS.some((c) => c.id === row.status)
     ? (row.status as BoardColumnId)
@@ -172,6 +197,8 @@ function apiTaskToBoardTask(
   const taskCounts = row as typeof row & {
     commentCount?: number | null;
     fileCount?: number | null;
+    doingStartedAt?: string | null;
+    totalDoingMinutes?: number | null;
   };
 
   return {
@@ -191,6 +218,8 @@ function apiTaskToBoardTask(
       ((row as unknown as Record<string, unknown>).commentCount as number) ?? 0,
     fileCount:
       ((row as unknown as Record<string, unknown>).fileCount as number) ?? 0,
+    doingStartedAt: taskCounts.doingStartedAt ?? null,
+    totalDoingMinutes: taskCounts.totalDoingMinutes ?? 0,
   };
 }
 
@@ -203,6 +232,23 @@ function splitTasksByColumn(tasks: BoardTask[]): BoardColumns {
   };
 }
 
+function replaceTaskInColumns(
+  columns: BoardColumns,
+  task: BoardTask
+): BoardColumns {
+  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,
+    [task.status]: [task, ...nextColumns[task.status]],
+  };
+}
+
 function getInitials(value?: string | null) {
   const parts = String(value ?? '')
     .trim()
@@ -225,26 +271,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 getTaskPriorityLabel(value?: string | null) {
   const labels: Record<string, string> = {
     low: 'Baixa',
@@ -326,10 +352,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>
@@ -352,7 +380,6 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
   const commonT = useTranslations('operations.Common');
   const formT = useTranslations('operations.ProjectFormPage');
   const { request, currentLocaleCode, getSettingValue } = useApp();
-
   const mentionItems = useMentionItems(request);
 
   const getProjectStatusLabel = (value?: string | null) => {
@@ -397,7 +424,12 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
   const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
   const [taskFormData, setTaskFormData] =
     useState<TaskFormState>(EMPTY_TASK_FORM);
+  const [activeDragTask, setActiveDragTask] = useState<BoardTask | null>(null);
   const [taskFormLoading, setTaskFormLoading] = useState(false);
+  const [isTimesheetEntrySheetOpen, setIsTimesheetEntrySheetOpen] =
+    useState(false);
+  const [timesheetPrefill, setTimesheetPrefill] =
+    useState<TimesheetEntryPrefill | null>(null);
 
   const apiTasks = useMemo(
     () => (project?.tasks ?? []).map(apiTaskToBoardTask),
@@ -429,6 +461,27 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
     return splitTasksByColumn(apiTasks);
   }, [project, boardState, apiTasks]);
 
+  const taskAssigneeOptions = useMemo(() => {
+    const seen = new Set<number>();
+    return (
+      project?.assignments
+        .filter((assignment) => {
+          if (
+            !assignment.collaboratorId ||
+            seen.has(assignment.collaboratorId)
+          ) {
+            return false;
+          }
+          seen.add(assignment.collaboratorId);
+          return true;
+        })
+        .map((assignment) => ({
+          id: String(assignment.collaboratorId),
+          label: assignment.collaboratorName,
+        })) ?? []
+    );
+  }, [project]);
+
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
   );
@@ -464,31 +517,73 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
         },
       });
 
-      mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
-        status: targetColumn,
-      }).catch(() => {
-        setBoardState(null);
-        void refetch();
-      });
+      mutateOperations<OperationsTaskOption>(
+        request,
+        `/operations/tasks/${taskId}`,
+        'PATCH',
+        {
+          status: targetColumn,
+        }
+      )
+        .then((updatedTask) => {
+          if (!updatedTask) {
+            return;
+          }
+
+          const updatedBoardTask = apiTaskToBoardTask(updatedTask);
+          setBoardState((current) => ({
+            projectId: current?.projectId ?? project.id,
+            columns: replaceTaskInColumns(
+              current?.columns ?? taskColumns,
+              updatedBoardTask
+            ),
+          }));
+        })
+        .catch(() => {
+          setBoardState(null);
+          void refetch();
+        });
     },
     [taskColumns, project, request, refetch] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   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) => taskColumns[column.id])
+      .find((items) => items.some((item) => item.id === taskId))
+      ?.find((item) => item.id === taskId);
+
+    setActiveDragTask(task ?? null);
+  };
+
   const openCreateTaskForm = useCallback(
     (defaultStatus: BoardColumnId = 'todo') => {
       setEditingTaskId(null);
-      setTaskFormData({ ...EMPTY_TASK_FORM, status: defaultStatus });
+      setTaskFormData({
+        ...EMPTY_TASK_FORM,
+        status: defaultStatus,
+        assigneeCollaboratorId:
+          currentCollaboratorId != null
+            ? String(currentCollaboratorId)
+            : 'none',
+      });
       setSelectedTask(null);
       setTaskFormOpen(true);
     },
-    []
+    [currentCollaboratorId]
   );
 
   const openEditTaskForm = useCallback((task: BoardTask) => {
@@ -498,6 +593,9 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
       description: task.description ?? '',
       priority: task.priority as TaskFormState['priority'],
       status: task.status,
+      assigneeCollaboratorId: task.assigneeCollaboratorId
+        ? String(task.assigneeCollaboratorId)
+        : 'none',
       dueDate: normalizeDateInputValue(task.dueDate),
       estimateHours:
         task.estimateHours != null ? String(task.estimateHours) : '',
@@ -519,7 +617,10 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
       const payload: Record<string, unknown> = {
         projectId,
         projectAssignmentId: project?.myAssignmentId ?? null,
-        assigneeCollaboratorId: currentCollaboratorId,
+        assigneeCollaboratorId:
+          taskFormData.assigneeCollaboratorId !== 'none'
+            ? Number(taskFormData.assigneeCollaboratorId)
+            : null,
         name: taskFormData.name.trim(),
         description: taskFormData.description || null,
         priority: taskFormData.priority,
@@ -550,15 +651,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
     } finally {
       setTaskFormLoading(false);
     }
-  }, [
-    currentCollaboratorId,
-    editingTaskId,
-    project,
-    projectId,
-    refetchAll,
-    request,
-    taskFormData,
-  ]);
+  }, [editingTaskId, project, projectId, refetchAll, request, taskFormData]);
 
   const [archivingTaskId, setArchivingTaskId] = useState<number | null>(null);
 
@@ -612,6 +705,29 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
     [request, refetchAll]
   );
 
+  const openTimesheetEntrySheet = useCallback(
+    (task: TaskDetailSheetData) => {
+      if (!project) {
+        return;
+      }
+
+      const projectLabel = [project.name, project.code]
+        .filter(Boolean)
+        .join(' • ');
+
+      setTimesheetPrefill({
+        projectId,
+        projectAssignmentId: project.myAssignmentId ?? null,
+        projectLabel: projectLabel || commonT('labels.notAssigned'),
+        taskId: task.id,
+        taskLabel: task.name,
+      });
+      setSelectedTask(null);
+      setIsTimesheetEntrySheetOpen(true);
+    },
+    [commonT, project, projectId]
+  );
+
   if (!project) {
     return (
       <Page>
@@ -708,6 +824,8 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
         <DndContext
           sensors={sensors}
           collisionDetection={closestCenter}
+          onDragStart={onBoardDragStart}
+          onDragCancel={() => setActiveDragTask(null)}
           onDragEnd={onBoardDragEnd}
         >
           <div className="grid gap-4 xl:grid-cols-4">
@@ -716,7 +834,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                 {(isOver) => (
                   <div
                     className={[
-                      'flex min-h-128 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'
@@ -752,7 +870,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                       </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}>
                         {taskColumns[column.id].map((task) => {
                           const tags = getTaskTags(task);
@@ -924,6 +1042,18 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
               </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>
       </SectionCard>
 
@@ -1091,13 +1221,13 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
         }}
         footer={
           selectedTask ? (
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
               {archivedTasks.some((task) => task.id === selectedTask.id) ? (
                 <>
                   <Button
                     variant="outline"
                     size="sm"
-                    className="h-10 gap-2"
+                    className="h-10 gap-2 sm:col-span-2"
                     onClick={() => void handleRestoreTask(selectedTask.id)}
                   >
                     <ArchiveRestore className="size-3.5" />
@@ -1115,6 +1245,15 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                 </>
               ) : (
                 <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-10 gap-2"
+                    onClick={() => openTimesheetEntrySheet(selectedTask)}
+                  >
+                    <Send className="size-3.5" />
+                    {commonT('actions.logHours')}
+                  </Button>
                   <Button
                     variant="outline"
                     size="sm"
@@ -1140,13 +1279,42 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
         }
       />
 
+      <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();
+        }}
+      />
+
       <Sheet
         open={taskFormOpen}
         onOpenChange={(open) => {
           if (!open) {
             setTaskFormOpen(false);
             setEditingTaskId(null);
-            setTaskFormData(EMPTY_TASK_FORM);
           }
         }}
       >
@@ -1257,6 +1425,35 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                   </div>
                 </div>
 
+                <div className="space-y-1.5">
+                  <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>
+                      {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">
@@ -1398,10 +1595,10 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
         <DialogContent className="sm:max-w-lg">
           <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="gap-2 sm:justify-between">
             <Button variant="ghost" onClick={() => setDeletePromptTask(null)}>
               {commonT('actions.cancel')}