@hed-hog/operations 0.0.322 → 0.0.325

package/hedhog/frontend/src/app/(app)/(libraries)/operations/_components/task-detail-sheet.tsx

@@ -0,0 +1,518 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+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';
+
+export type TaskDetailSheetData = {
+  id: number;
+  name: string;
+  description?: string | null;
+  status: string;
+  priority?: string | null;
+  dueDate?: string | null;
+  estimateHours?: number | null;
+  tags?: string | null;
+  projectName?: string | null;
+  projectCode?: string | null;
+  assigneeName?: string | null;
+  assigneeUserPhotoId?: number | null;
+  assigneePersonAvatarId?: number | null;
+};
+
+type Props = {
+  task: TaskDetailSheetData | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  statusLabel?: (status: string) => string;
+  footer?: ReactNode;
+};
+
+function getPriorityLabel(value?: string | null) {
+  const labels: Record<string, string> = {
+    low: 'Baixa',
+    medium: 'Média',
+    high: 'Alta',
+  };
+  return labels[value ?? ''] ?? value ?? '—';
+}
+
+function getPriorityClassName(value?: string | null) {
+  if (value === 'high') return 'bg-rose-100 text-rose-700 border-rose-200';
+  if (value === 'medium') return 'bg-amber-100 text-amber-700 border-amber-200';
+  return 'bg-emerald-100 text-emerald-700 border-emerald-200';
+}
+
+function getAvatarSrc(task: TaskDetailSheetData | null) {
+  if (!task) return null;
+  if (
+    typeof task.assigneeUserPhotoId === 'number' &&
+    task.assigneeUserPhotoId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${task.assigneeUserPhotoId}`;
+  if (
+    typeof task.assigneePersonAvatarId === 'number' &&
+    task.assigneePersonAvatarId > 0
+  )
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${task.assigneePersonAvatarId}`;
+  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()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+  if (!parts.length) return '??';
+  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,
+  onOpenChange,
+  statusLabel,
+  footer,
+}: Props) {
+  const commonT = useTranslations('operations.Common');
+  const detailT = useTranslations('operations.ProjectDetailsPage');
+  const { getSettingValue, currentLocaleCode } = useApp();
+
+  const avatarSrc = getAvatarSrc(task);
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="flex w-full flex-col gap-0 overflow-y-auto sm:max-w-md">
+        {task ? (
+          <>
+            <SheetHeader className="pb-2">
+              <SheetTitle className="pr-6 text-base font-semibold leading-snug">
+                {task.name}
+              </SheetTitle>
+              <div className="flex flex-wrap gap-2 pt-1">
+                <StatusBadge
+                  label={statusLabel?.(task.status) ?? task.status}
+                  className={getStatusBadgeClass(task.status)}
+                />
+                {task.priority ? (
+                  <span
+                    className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ${getPriorityClassName(task.priority)}`}
+                  >
+                    {getPriorityLabel(task.priority)}
+                  </span>
+                ) : null}
+              </div>
+            </SheetHeader>
+
+            <div className="flex flex-col gap-5 p-4 pt-3">
+              {task.description ? (
+                <div>
+                  <p className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                    {detailT('taskForm.descriptionLabel')}
+                  </p>
+                  <p className="text-sm leading-relaxed">{task.description}</p>
+                </div>
+              ) : null}
+
+              {task.dueDate || task.estimateHours != null ? (
+                <div className="grid grid-cols-2 gap-3">
+                  {task.dueDate ? (
+                    <div className="flex items-start gap-2 text-sm">
+                      <Calendar className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                      <div>
+                        <p className="text-[11px] text-muted-foreground">
+                          {detailT('taskForm.deadlineLabel')}
+                        </p>
+                        <p className="font-medium">
+                          {formatDate(
+                            task.dueDate,
+                            getSettingValue,
+                            currentLocaleCode
+                          )}
+                        </p>
+                      </div>
+                    </div>
+                  ) : null}
+                  {task.estimateHours != null ? (
+                    <div className="flex items-start gap-2 text-sm">
+                      <AlarmClock className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+                      <div>
+                        <p className="text-[11px] text-muted-foreground">
+                          {detailT('taskForm.estimateLabel')}
+                        </p>
+                        <p className="font-medium">{task.estimateHours}h</p>
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              ) : null}
+
+              {task.tags ? (
+                <div>
+                  <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                    <Tag className="size-3" />
+                    {detailT('taskForm.tagsLabel')}
+                  </div>
+                  <div className="flex flex-wrap gap-1.5">
+                    {task.tags.split(',').map((tag) => (
+                      <span
+                        key={tag.trim()}
+                        className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
+                      >
+                        {tag.trim()}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+
+              {task.assigneeName ? (
+                <div>
+                  <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                    <User className="size-3" />
+                    {commonT('labels.collaborator')}
+                  </div>
+                  <div className="flex items-center gap-2.5">
+                    <div className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-xs font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                      {avatarSrc ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                          src={avatarSrc}
+                          alt={task.assigneeName}
+                          className="size-full object-cover"
+                        />
+                      ) : (
+                        getInitials(task.assigneeName)
+                      )}
+                    </div>
+                    <span className="text-sm">{task.assigneeName}</span>
+                  </div>
+                </div>
+              ) : null}
+
+              {task.projectName || task.projectCode ? (
+                <div className="rounded-lg border bg-muted/20 px-3 py-2.5">
+                  <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                    {commonT('labels.project')}
+                  </p>
+                  <p className="mt-0.5 text-sm font-medium">
+                    {[task.projectName, task.projectCode]
+                      .filter(Boolean)
+                      .join(' • ')}
+                  </p>
+                </div>
+              ) : null}
+
+              <div className="border-t pt-4">
+                <TaskCommentsSection taskId={task.id} />
+              </div>
+
+              {footer ? <div className="border-t pt-5">{footer}</div> : null}
+            </div>
+          </>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  );
+}
+

package/hedhog/frontend/src/app/(app)/(libraries)/operations/_components/task-file-attachments.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    taskId: number | null;
+};
+export declare function TaskFileAttachments({ taskId }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=task-file-attachments.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/_components/task-file-attachments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-file-attachments.d.ts","sourceRoot":"","sources":["task-file-attachments.tsx"],"names":[],"mappings":"AAkHA,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,+BA6QpD"}