@hed-hog/operations 0.0.321 → 0.0.325

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
@@ -68,6 +69,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
+import { PersonPicker } from '../../contact/_components/person-picker';
 import {
   fetchOperations,
   getOperationsErrorMessage,
@@ -80,7 +82,7 @@ import type {
   OperationsProjectDetails,
   OperationsProjectRole,
 } from '../_lib/types';
-import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
+import { formatEnumLabel } from '../_lib/utils/format';
 import {
   normalizePercentInput,
   parseNumberInput,
@@ -89,7 +91,6 @@ import {
 import { ContractFormScreen } from './contract-form-screen';
 import { DepartmentSelectWithCreate } from './department-select-with-create';
 import { OperationsHeader } from './operations-header';
-import { PersonSelectWithCreate } from './person-select-with-create';
 
 const OPTION_PAGE_SIZE = 12;
 
@@ -101,6 +102,8 @@ type TeamAssignmentState = {
   weeklyHours: string;
   allocationPercent: string;
   status: string;
+  startDate: string;
+  endDate: string;
 };
 
 type ProjectFormState = {
@@ -126,6 +129,16 @@ type ProjectFormState = {
 
 type ProjectFormValues = ProjectFormState;
 
+function generateProjectCode(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return '';
+  if (words.length === 1) return words[0]!.slice(0, 5).toUpperCase();
+  return words
+    .map((w) => w[0]!.toUpperCase())
+    .join('')
+    .slice(0, 6);
+}
+
 function normalizeDateInputValue(value?: string | null) {
   if (!value) {
     return '';
@@ -179,11 +192,13 @@ function buildEmptyForm(
       projectRoleId: 'none',
       roleLabel: '',
       weeklyHours: '',
-      allocationPercent: '',
-      status: 'active',
-    })),
-  };
-}
+      allocationPercent: '',
+      status: 'active',
+      startDate: new Date().toISOString().split('T')[0] ?? '',
+      endDate: '',
+    })),
+  };
+}
 
 function toFormState(
   project: OperationsProjectDetails,
@@ -259,8 +274,13 @@ function toFormState(
           assignment?.allocationPercent !== undefined
             ? String(assignment.allocationPercent)
             : '',
-        status: assignment?.status ?? 'active',
-      };
+        status: assignment?.status ?? 'active',
+        startDate:
+          normalizeDateInputValue(assignment?.startDate) ||
+          new Date().toISOString().split('T')[0] ||
+          '',
+        endDate: normalizeDateInputValue(assignment?.endDate),
+      };
     }),
   };
 }
@@ -272,6 +292,7 @@ type SearchableSelectProps = {
     id: number;
     title: string;
     description?: string | null;
+    avatarUrl?: string | null;
   }>;
   placeholder: string;
   searchPlaceholder: string;
@@ -388,6 +409,25 @@ function SearchableSelect({
                     ) : (
                       <span className="mr-2 h-4 w-4" />
                     )}
+                    {option.avatarUrl !== undefined ? (
+                      <Avatar className="mr-2 h-6 w-6 shrink-0">
+                        {option.avatarUrl ? (
+                          <AvatarImage
+                            src={option.avatarUrl}
+                            alt={option.title}
+                          />
+                        ) : null}
+                        <AvatarFallback className="text-[9px] font-medium">
+                          {option.title
+                            .trim()
+                            .split(' ')
+                            .filter(Boolean)
+                            .slice(0, 2)
+                            .map((w) => w[0]!.toUpperCase())
+                            .join('')}
+                        </AvatarFallback>
+                      </Avatar>
+                    ) : null}
                     <div className="min-w-0">
                       <div className="truncate">{option.title}</div>
                       {option.description ? (
@@ -602,6 +642,7 @@ export function ProjectFormScreen({
   const [assignmentSearch, setAssignmentSearch] = useState('');
   const isSheetMode = Boolean(onCancel);
   const isCreateMode = !projectId;
+  const [codeAutoMode, setCodeAutoMode] = useState(isCreateMode);
 
   const projectFormSchema = useMemo(
     () =>
@@ -642,6 +683,8 @@ export function ProjectFormScreen({
               weeklyHours: z.string(),
               allocationPercent: z.string(),
               status: z.string(),
+              startDate: z.string(),
+              endDate: z.string(),
             })
           )
           .superRefine((assignments, ctx) => {
@@ -682,7 +725,7 @@ export function ProjectFormScreen({
     });
   };
 
-  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
+  const { data: rawCollaborators } = useQuery<OperationsCollaborator[]>({
     queryKey: ['operations-project-form-collaborators', currentLocaleCode],
     enabled: access.isDirector,
     queryFn: () =>
@@ -691,6 +734,12 @@ export function ProjectFormScreen({
         '/operations/collaborators'
       ),
   });
+  // Stable reference prevents the useEffect(reset, [collaborators, project]) from
+  // re-running on every render while the query is still loading (undefined → [] new ref).
+  const collaborators = useMemo(
+    () => rawCollaborators ?? [],
+    [rawCollaborators]
+  );
 
   const { data: contracts = [], refetch: refetchContracts } = useQuery<
     OperationsContract[]
@@ -811,6 +860,11 @@ export function ProjectFormScreen({
         description: [collaborator.department, collaborator.title]
           .filter(Boolean)
           .join(' • '),
+        avatarUrl:
+          typeof collaborator.personAvatarId === 'number' &&
+          collaborator.personAvatarId > 0
+            ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${collaborator.personAvatarId}`
+            : null,
       })),
     [availableCollaborators]
   );
@@ -938,8 +992,8 @@ export function ProjectFormScreen({
           weeklyHours: parseNumberInput(assignment.weeklyHours),
           allocationPercent: parseNumberInput(assignment.allocationPercent),
           status: assignment.status,
-          startDate: trimToNull(values.startDate),
-          endDate: trimToNull(values.endDate),
+          startDate: trimToNull(assignment.startDate),
+          endDate: trimToNull(assignment.endDate),
         })),
     };
 
@@ -1041,6 +1095,15 @@ export function ProjectFormScreen({
                     {...field}
                     placeholder={t('placeholders.name')}
                     autoFocus
+                    onChange={(e) => {
+                      field.onChange(e);
+                      if (codeAutoMode) {
+                        formMethods.setValue(
+                          'code',
+                          generateProjectCode(e.target.value)
+                        );
+                      }
+                    }}
                   />
                 </FormControl>
                 <FormMessage />
@@ -1055,7 +1118,14 @@ export function ProjectFormScreen({
                 <FormItem className="min-w-0 lg:col-span-1">
                   <FormLabel>{t('fields.code')}</FormLabel>
                   <FormControl>
-                    <Input {...field} placeholder={t('placeholders.code')} />
+                    <Input
+                      {...field}
+                      placeholder={t('placeholders.code')}
+                      onChange={(e) => {
+                        setCodeAutoMode(false);
+                        field.onChange(e);
+                      }}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -1075,7 +1145,7 @@ export function ProjectFormScreen({
                           : ''
                       }
                     >
-                      <PersonSelectWithCreate
+                      <PersonPicker
                         label=""
                         entityLabel={t('fields.clientName')}
                         value={null}
@@ -1388,71 +1458,6 @@ export function ProjectFormScreen({
               </div>
             </section>
 
-            <section className="space-y-3">
-              <div className="space-y-0.5">
-                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                  {t('sections.contract')}
-                </h3>
-                <p className="text-[11px] text-muted-foreground/80">
-                  {t('sections.contractDescription')}
-                </p>
-              </div>
-
-              <div className="grid min-w-0 gap-3 xl:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]">
-                <div className="rounded-lg border px-3 py-3">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="text-sm font-medium text-foreground">
-                        {selectedContract?.name ||
-                          commonT('labels.notAssigned')}
-                      </div>
-                      <div className="mt-1 text-xs text-muted-foreground">
-                        {selectedContract
-                          ? [
-                              selectedContract.code,
-                              selectedContract.clientName,
-                              formatEnumLabel(selectedContract.contractType),
-                            ]
-                              .filter(Boolean)
-                              .join(' • ')
-                          : commonT('labels.notAssigned')}
-                      </div>
-                    </div>
-                    {selectedContract?.status ? (
-                      <span className="shrink-0">
-                        <span
-                          className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${getStatusBadgeClass(
-                            selectedContract.status
-                          )}`}
-                        >
-                          {contractT.has(
-                            `options.statuses.${selectedContract.status}`
-                          )
-                            ? contractT(
-                                `options.statuses.${selectedContract.status}`
-                              )
-                            : formatEnumLabel(selectedContract.status)}
-                        </span>
-                      </span>
-                    ) : null}
-                  </div>
-
-                  <div className="mt-3 flex flex-wrap gap-2">
-                    {selectedContract ? (
-                      <Button type="button" variant="outline" size="sm" asChild>
-                        <Link
-                          href={`/operations/contracts?edit=${selectedContract.id}`}
-                        >
-                          <FileText className="size-4" />
-                          {commonT('actions.openContract')}
-                        </Link>
-                      </Button>
-                    ) : null}
-                  </div>
-                </div>
-              </div>
-            </section>
-
             <section className="space-y-3">
               <div className="space-y-0.5">
                 <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
@@ -1608,6 +1613,40 @@ export function ProjectFormScreen({
                             );
                           }}
                         />
+                        <div className="flex items-center gap-2 xl:col-span-4">
+                          <div className="flex-1">
+                            <label className="text-xs text-muted-foreground">
+                              {t('fields.assignmentStartDate')}
+                            </label>
+                            <Input
+                              className="h-9"
+                              type="date"
+                              value={assignment.startDate}
+                              disabled={!assignment.selected}
+                              onChange={(event) =>
+                                updateAssignment(assignment.collaboratorId, {
+                                  startDate: event.target.value,
+                                })
+                              }
+                            />
+                          </div>
+                          <div className="flex-1">
+                            <label className="text-xs text-muted-foreground">
+                              {t('fields.assignmentEndDate')}
+                            </label>
+                            <Input
+                              className="h-9"
+                              type="date"
+                              value={assignment.endDate}
+                              disabled={!assignment.selected}
+                              onChange={(event) =>
+                                updateAssignment(assignment.collaboratorId, {
+                                  endDate: event.target.value,
+                                })
+                              }
+                            />
+                          </div>
+                        </div>
                       </div>
                     );
                   })}

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

@@ -1,15 +1,35 @@
 'use client';
 
 import type { ReactNode } from 'react';
+import { useState } from 'react';
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { useApp } from '@hed-hog/next-app-provider';
-import { AlarmClock, Calendar, Tag, User } from 'lucide-react';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  AlarmClock,
+  Calendar,
+  MessageSquare,
+  Pencil,
+  Send,
+  Tag,
+  Trash2,
+  User,
+  X,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import {
+  createTaskComment,
+  deleteTaskComment,
+  fetchTaskComments,
+  updateTaskComment,
+} from '../_lib/api';
+import type { OperationsTaskComment } from '../_lib/types';
 import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
 import { StatusBadge } from './status-badge';
 
@@ -67,6 +87,20 @@ function getAvatarSrc(task: TaskDetailSheetData | null) {
   return null;
 }
 
+function getCommentAvatarSrc(comment: OperationsTaskComment) {
+  if (
+    typeof comment.actorUserPhotoId === 'number' &&
+    comment.actorUserPhotoId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${comment.actorUserPhotoId}`;
+  if (
+    typeof comment.actorPersonAvatarId === 'number' &&
+    comment.actorPersonAvatarId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${comment.actorPersonAvatarId}`;
+  return null;
+}
+
 function getInitials(value?: string | null) {
   const parts = String(value ?? '')
     .trim()
@@ -77,6 +111,262 @@ function getInitials(value?: string | null) {
   return parts.map((p) => p[0]?.toUpperCase() ?? '').join('');
 }
 
+function formatCommentDate(value?: string | null) {
+  if (!value) return '';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 1) return 'agora';
+  if (diffMins < 60) return `${diffMins}min atrás`;
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h atrás`;
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) return `${diffDays}d atrás`;
+  return date.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' });
+}
+
+type TaskCommentsSectionProps = {
+  taskId: number;
+};
+
+function TaskCommentsSection({ taskId }: TaskCommentsSectionProps) {
+  const { request, showToastHandler } = useApp();
+  const [newComment, setNewComment] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editContent, setEditContent] = useState('');
+  const [savingEditId, setSavingEditId] = useState<number | null>(null);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [localComments, setLocalComments] = useState<
+    OperationsTaskComment[] | null
+  >(null);
+
+  const { data: fetchedComments = [], refetch } = useQuery<
+    OperationsTaskComment[]
+  >({
+    queryKey: ['task-comments', taskId],
+    queryFn: () =>
+      fetchTaskComments(request, taskId) as Promise<OperationsTaskComment[]>,
+  });
+
+  const comments = localComments ?? fetchedComments;
+
+  const handleSubmit = async () => {
+    const trimmed = newComment.trim();
+    if (!trimmed) return;
+    setSubmitting(true);
+    try {
+      const created = (await createTaskComment(
+        request,
+        taskId,
+        trimmed
+      )) as OperationsTaskComment;
+      setLocalComments([...(localComments ?? fetchedComments), created]);
+      setNewComment('');
+    } catch {
+      showToastHandler?.('error', 'Erro ao adicionar comentário.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleStartEdit = (comment: OperationsTaskComment) => {
+    setEditingId(comment.id);
+    setEditContent(comment.content);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingId(null);
+    setEditContent('');
+  };
+
+  const handleSaveEdit = async (comment: OperationsTaskComment) => {
+    const trimmed = editContent.trim();
+    if (!trimmed) return;
+    setSavingEditId(comment.id);
+    try {
+      const updated = (await updateTaskComment(
+        request,
+        taskId,
+        comment.id,
+        trimmed
+      )) as OperationsTaskComment;
+      if (updated) {
+        setLocalComments(
+          (localComments ?? fetchedComments).map((c) =>
+            c.id === comment.id ? updated : c
+          )
+        );
+      }
+      setEditingId(null);
+      setEditContent('');
+    } catch {
+      showToastHandler?.('error', 'Não foi possível editar este comentário.');
+    } finally {
+      setSavingEditId(null);
+    }
+  };
+
+  const handleDelete = async (comment: OperationsTaskComment) => {
+    setDeletingId(comment.id);
+    try {
+      await deleteTaskComment(request, taskId, comment.id);
+      setLocalComments(
+        (localComments ?? fetchedComments).filter((c) => c.id !== comment.id)
+      );
+    } catch {
+      showToastHandler?.('error', 'Não foi possível excluir este comentário.');
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        <MessageSquare className="size-3" />
+        Comentários
+        {comments.length > 0 ? (
+          <span className="ml-0.5 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
+            {comments.length}
+          </span>
+        ) : null}
+      </div>
+
+      {comments.length > 0 ? (
+        <div className="flex flex-col gap-3">
+          {comments.map((comment) => {
+            const avatarSrc = getCommentAvatarSrc(comment);
+            const isEditing = editingId === comment.id;
+            const isDeleting = deletingId === comment.id;
+            const isSaving = savingEditId === comment.id;
+
+            return (
+              <div key={comment.id} className="flex gap-2.5">
+                <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                  {avatarSrc ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={avatarSrc}
+                      alt={comment.actorName ?? ''}
+                      className="size-full object-cover"
+                    />
+                  ) : (
+                    getInitials(comment.actorName)
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="truncate text-xs font-semibold">
+                      {comment.actorName ?? 'Usuário'}
+                    </span>
+                    <div className="flex shrink-0 items-center gap-1">
+                      <span className="text-[10px] text-muted-foreground">
+                        {formatCommentDate(comment.createdAt)}
+                      </span>
+                      {!isEditing ? (
+                        <>
+                          <button
+                            type="button"
+                            aria-label="Editar comentário"
+                            disabled={isDeleting}
+                            onClick={() => handleStartEdit(comment)}
+                            className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
+                          >
+                            <Pencil className="size-3" />
+                          </button>
+                          <button
+                            type="button"
+                            aria-label="Excluir comentário"
+                            disabled={isDeleting}
+                            onClick={() => void handleDelete(comment)}
+                            className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
+                          >
+                            <Trash2 className="size-3" />
+                          </button>
+                        </>
+                      ) : null}
+                    </div>
+                  </div>
+                  {isEditing ? (
+                    <div className="mt-1 flex flex-col gap-1.5">
+                      <Textarea
+                        value={editContent}
+                        onChange={(e) => setEditContent(e.target.value)}
+                        rows={3}
+                        className="resize-none text-sm"
+                        disabled={isSaving}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Escape') handleCancelEdit();
+                        }}
+                      />
+                      <div className="flex gap-1.5">
+                        <Button
+                          size="sm"
+                          className="h-7 px-2 text-xs"
+                          disabled={isSaving || !editContent.trim()}
+                          onClick={() => void handleSaveEdit(comment)}
+                        >
+                          Salvar
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="h-7 px-2 text-xs"
+                          disabled={isSaving}
+                          onClick={handleCancelEdit}
+                        >
+                          <X className="size-3" />
+                          Cancelar
+                        </Button>
+                      </div>
+                    </div>
+                  ) : (
+                    <p className="mt-0.5 text-sm leading-relaxed text-foreground">
+                      {comment.content}
+                    </p>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="text-xs text-muted-foreground">Nenhum comentário ainda.</p>
+      )}
+
+      <div className="flex flex-col gap-1.5 pt-1">
+        <Textarea
+          placeholder="Escreva um comentário..."
+          value={newComment}
+          onChange={(e) => setNewComment(e.target.value)}
+          rows={3}
+          className="resize-none text-sm"
+          disabled={submitting}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+              void handleSubmit();
+            }
+          }}
+        />
+        <div className="flex justify-end">
+          <Button
+            size="sm"
+            className="gap-1.5"
+            disabled={submitting || !newComment.trim()}
+            onClick={() => void handleSubmit()}
+          >
+            <Send className="size-3.5" />
+            Comentar
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function TaskDetailSheet({
   task,
   open,
@@ -213,6 +503,10 @@ export function TaskDetailSheet({
                 </div>
               ) : null}
 
+              <div className="border-t pt-4">
+                <TaskCommentsSection taskId={task.id} />
+              </div>
+
               {footer ? <div className="border-t pt-5">{footer}</div> : null}
             </div>
           </>
@@ -221,3 +515,4 @@ export function TaskDetailSheet({
     </Sheet>
   );
 }
+