@hed-hog/operations 0.0.332 → 0.0.347

package/hedhog/frontend/app/_components/collaborator-tasks-tab.tsx.ejs

@@ -1,358 +1,358 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  AlignLeft,
-  CalendarClock,
-  Flag,
-  MessageSquare,
-  Paperclip,
-  Plus,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import type { OperationsTaskOption, PaginatedResponse } from '../_lib/types';
-import { formatDate } from '../_lib/utils/format';
-import { TaskFormSheet } from './task-form-sheet';
-
-const PAGE_SIZE = 10;
-
-const TASK_COLUMNS = [
-  { id: 'todo', label: 'Backlog' },
-  { id: 'doing', label: 'Em execução' },
-  { id: 'review', label: 'Revisão' },
-  { id: 'done', label: 'Concluído' },
-] as const;
-
-function getPriorityLabel(value?: string | null) {
-  const map: Record<string, string> = {
-    low: 'Baixa',
-    medium: 'Média',
-    high: 'Alta',
-  };
-  return map[value ?? ''] ?? value ?? '—';
-}
-
-function getPriorityStripe(value?: string | null) {
-  if (value === 'high') return 'bg-rose-500';
-  if (value === 'medium') return 'bg-amber-500';
-  if (value === 'low') return 'bg-emerald-500';
-  return 'bg-border';
-}
-
-function getPriorityChip(value?: string | null) {
-  if (value === 'high')
-    return 'bg-rose-500/10 text-rose-600 dark:text-rose-400 ring-1 ring-rose-500/20';
-  if (value === 'medium')
-    return 'bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-1 ring-amber-500/20';
-  return 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-1 ring-emerald-500/20';
-}
-
-function getStatusDot(value?: string | null) {
-  if (value === 'doing') return 'bg-blue-500';
-  if (value === 'review') return 'bg-amber-500';
-  if (value === 'done') return 'bg-emerald-500';
-  return 'bg-muted-foreground/50';
-}
-
-function isDueDateOverdue(dueDate?: string | null) {
-  if (!dueDate) return false;
-  return new Date(dueDate) < new Date();
-}
-
-type CollaboratorTasksTabProps = {
-  collaboratorId: number | null | undefined;
-  collaboratorName?: string | null;
-  request: Parameters<typeof mutateOperations>[0];
-  disabled?: boolean;
-};
-
-export function CollaboratorTasksTab({
-  collaboratorId,
-  request,
-  disabled,
-}: CollaboratorTasksTabProps) {
-  const { getSettingValue, currentLocaleCode } = useApp();
-  const commonT = useTranslations('operations.Common');
-  const taskT = useTranslations('operations.ProjectDetailsPage');
-
-  const [page, setPage] = useState(0);
-  const [taskFormOpen, setTaskFormOpen] = useState(false);
-  const [editingTask, setEditingTask] = useState<OperationsTaskOption | null>(
-    null
-  );
-
-  const tasksParams = new URLSearchParams({
-    page: String(page + 1),
-    pageSize: String(PAGE_SIZE),
-  });
-  if (collaboratorId) tasksParams.set('collaboratorId', String(collaboratorId));
-
-  const { data: tasksResponse, refetch: refetchTasks } = useQuery<
-    PaginatedResponse<OperationsTaskOption>
-  >({
-    queryKey: ['collaborator-tasks', collaboratorId, page],
-    enabled: Boolean(collaboratorId),
-    staleTime: 0,
-    refetchOnMount: 'always',
-    queryFn: () =>
-      fetchOperations<PaginatedResponse<OperationsTaskOption>>(
-        request,
-        `/operations/tasks?${tasksParams.toString()}`
-      ),
-  });
-
-  const tasks = tasksResponse?.data ?? [];
-  const total = tasksResponse?.total ?? 0;
-  const totalPages = Math.ceil(total / PAGE_SIZE);
-
-  const openCreate = () => {
-    setEditingTask(null);
-    setTaskFormOpen(true);
-  };
-
-  const openEdit = (task: OperationsTaskOption) => {
-    setEditingTask(task);
-    setTaskFormOpen(true);
-  };
-
-  if (!collaboratorId) {
-    return (
-      <p className="text-sm text-muted-foreground">
-        {commonT('states.saveBefore')}
-      </p>
-    );
-  }
-
-  return (
-    <div className="space-y-3">
-      {!disabled ? (
-        <div className="flex items-center justify-between">
-          <span className="text-sm text-muted-foreground">
-            {total > 0
-              ? `${total} ${total === 1 ? 'tarefa' : 'tarefas'}`
-              : null}
-          </span>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="gap-1.5"
-            onClick={openCreate}
-          >
-            <Plus className="size-3.5" />
-            {taskT('taskForm.titleNew')}
-          </Button>
-        </div>
-      ) : null}
-
-      {tasks.length === 0 ? (
-        <div className="flex flex-col items-center gap-2 py-8 text-center">
-          <AlignLeft className="size-8 text-muted-foreground/40" />
-          <p className="text-sm text-muted-foreground">
-            Nenhuma tarefa encontrada.
-          </p>
-        </div>
-      ) : (
-        <>
-          <div className="space-y-1.5">
-            {tasks.map((task) => {
-              const overdue =
-                isDueDateOverdue(task.dueDate) && task.status !== 'done';
-              const columnLabel =
-                TASK_COLUMNS.find((c) => c.id === task.status)?.label ??
-                task.status;
-              const hasMeta =
-                (task.fileCount ?? 0) > 0 || (task.commentCount ?? 0) > 0;
-
-              return (
-                <button
-                  key={task.id}
-                  type="button"
-                  className="group flex w-full cursor-pointer items-stretch overflow-hidden rounded-lg border border-border/50 bg-card text-left shadow-sm transition-all duration-150 hover:border-border hover:shadow-md"
-                  onClick={() => openEdit(task)}
-                >
-                  {/* Priority stripe */}
-                  <div
-                    className={`w-0.75 shrink-0 transition-opacity ${getPriorityStripe(task.priority)}`}
-                  />
-
-                  {/* Content */}
-                  <div className="flex min-w-0 flex-1 items-center gap-3 px-4 py-3">
-                    {/* Left: name + project */}
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate text-sm font-semibold leading-5 text-foreground">
-                        {task.name}
-                      </p>
-                      {task.projectName ? (
-                        <p className="mt-0.5 truncate text-[11px] leading-none text-muted-foreground/70">
-                          {[task.projectCode, task.projectName]
-                            .filter(Boolean)
-                            .join(' · ')}
-                        </p>
-                      ) : null}
-                    </div>
-
-                    {/* Right: indicators */}
-                    <div className="flex shrink-0 items-center gap-2">
-                      {/* Priority chip */}
-                      {task.priority ? (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <span
-                              className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium ${getPriorityChip(task.priority)}`}
-                            >
-                              <Flag className="size-2.5" />
-                              {getPriorityLabel(task.priority)}
-                            </span>
-                          </TooltipTrigger>
-                          <TooltipContent side="top">
-                            Prioridade: {getPriorityLabel(task.priority)}
-                          </TooltipContent>
-                        </Tooltip>
-                      ) : null}
-
-                      {/* Status / column */}
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <span className="inline-flex items-center gap-1.5 rounded-md bg-muted/60 px-2 py-0.5 text-[11px] font-medium text-foreground/80 ring-1 ring-border/40">
-                            <span
-                              className={`size-1.5 shrink-0 rounded-full ${getStatusDot(task.status)}`}
-                            />
-                            {columnLabel}
-                          </span>
-                        </TooltipTrigger>
-                        <TooltipContent side="top">
-                          Coluna: {columnLabel}
-                        </TooltipContent>
-                      </Tooltip>
-
-                      {/* Divider before date/meta */}
-                      {task.dueDate || hasMeta ? (
-                        <div className="h-3.5 w-px bg-border/60" />
-                      ) : null}
-
-                      {/* Due date chip */}
-                      {task.dueDate ? (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <span
-                              className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium ${
-                                overdue
-                                  ? 'bg-rose-500/10 text-rose-600 ring-1 ring-rose-500/20 dark:text-rose-400'
-                                  : 'bg-muted/60 text-muted-foreground ring-1 ring-border/40'
-                              }`}
-                            >
-                              <CalendarClock className="size-2.5 shrink-0" />
-                              {formatDate(
-                                task.dueDate,
-                                getSettingValue,
-                                currentLocaleCode
-                              )}
-                            </span>
-                          </TooltipTrigger>
-                          <TooltipContent side="top">
-                            {overdue ? 'Prazo vencido: ' : 'Prazo: '}
-                            {formatDate(
-                              task.dueDate,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
-                          </TooltipContent>
-                        </Tooltip>
-                      ) : null}
-
-                      {/* Attachment + comment counts */}
-                      {hasMeta ? (
-                        <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
-                          {(task.fileCount ?? 0) > 0 ? (
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <span className="inline-flex items-center gap-0.5">
-                                  <Paperclip className="size-3 shrink-0" />
-                                  {task.fileCount}
-                                </span>
-                              </TooltipTrigger>
-                              <TooltipContent side="top">
-                                {task.fileCount}{' '}
-                                {task.fileCount === 1 ? 'anexo' : 'anexos'}
-                              </TooltipContent>
-                            </Tooltip>
-                          ) : null}
-                          {(task.commentCount ?? 0) > 0 ? (
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <span className="inline-flex items-center gap-0.5">
-                                  <MessageSquare className="size-3 shrink-0" />
-                                  {task.commentCount}
-                                </span>
-                              </TooltipTrigger>
-                              <TooltipContent side="top">
-                                {task.commentCount}{' '}
-                                {task.commentCount === 1
-                                  ? 'comentário'
-                                  : 'comentários'}
-                              </TooltipContent>
-                            </Tooltip>
-                          ) : null}
-                        </div>
-                      ) : null}
-                    </div>
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-
-          {totalPages > 1 ? (
-            <div className="flex items-center justify-between pt-1">
-              <span className="text-xs text-muted-foreground">
-                {page * PAGE_SIZE + 1}–{Math.min((page + 1) * PAGE_SIZE, total)}{' '}
-                / {total}
-              </span>
-              <div className="flex gap-1">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-6 px-2 text-xs"
-                  disabled={page === 0}
-                  onClick={() => setPage((p) => p - 1)}
-                >
-                  ‹
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-6 px-2 text-xs"
-                  disabled={page >= totalPages - 1}
-                  onClick={() => setPage((p) => p + 1)}
-                >
-                  ›
-                </Button>
-              </div>
-            </div>
-          ) : null}
-        </>
-      )}
-
-      <TaskFormSheet
-        open={taskFormOpen}
-        onOpenChange={setTaskFormOpen}
-        request={request}
-        editingTask={editingTask}
-        defaultAssigneeCollaboratorId={collaboratorId}
-        projectRequired={false}
-        onSaved={() => void refetchTasks()}
-      />
-    </div>
-  );
-}
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  AlignLeft,
+  CalendarClock,
+  Flag,
+  MessageSquare,
+  Paperclip,
+  Plus,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import type { OperationsTaskOption, PaginatedResponse } from '../_lib/types';
+import { formatDate } from '../_lib/utils/format';
+import { TaskFormSheet } from './task-form-sheet';
+
+const PAGE_SIZE = 10;
+
+const TASK_COLUMNS = [
+  { id: 'todo', label: 'Backlog' },
+  { id: 'doing', label: 'Em execução' },
+  { id: 'review', label: 'Revisão' },
+  { id: 'done', label: 'Concluído' },
+] as const;
+
+function getPriorityLabel(value?: string | null) {
+  const map: Record<string, string> = {
+    low: 'Baixa',
+    medium: 'Média',
+    high: 'Alta',
+  };
+  return map[value ?? ''] ?? value ?? '—';
+}
+
+function getPriorityStripe(value?: string | null) {
+  if (value === 'high') return 'bg-rose-500';
+  if (value === 'medium') return 'bg-amber-500';
+  if (value === 'low') return 'bg-emerald-500';
+  return 'bg-border';
+}
+
+function getPriorityChip(value?: string | null) {
+  if (value === 'high')
+    return 'bg-rose-500/10 text-rose-600 dark:text-rose-400 ring-1 ring-rose-500/20';
+  if (value === 'medium')
+    return 'bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-1 ring-amber-500/20';
+  return 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-1 ring-emerald-500/20';
+}
+
+function getStatusDot(value?: string | null) {
+  if (value === 'doing') return 'bg-blue-500';
+  if (value === 'review') return 'bg-amber-500';
+  if (value === 'done') return 'bg-emerald-500';
+  return 'bg-muted-foreground/50';
+}
+
+function isDueDateOverdue(dueDate?: string | null) {
+  if (!dueDate) return false;
+  return new Date(dueDate) < new Date();
+}
+
+type CollaboratorTasksTabProps = {
+  collaboratorId: number | null | undefined;
+  collaboratorName?: string | null;
+  request: Parameters<typeof mutateOperations>[0];
+  disabled?: boolean;
+};
+
+export function CollaboratorTasksTab({
+  collaboratorId,
+  request,
+  disabled,
+}: CollaboratorTasksTabProps) {
+  const { getSettingValue, currentLocaleCode } = useApp();
+  const commonT = useTranslations('operations.Common');
+  const taskT = useTranslations('operations.ProjectDetailsPage');
+
+  const [page, setPage] = useState(0);
+  const [taskFormOpen, setTaskFormOpen] = useState(false);
+  const [editingTask, setEditingTask] = useState<OperationsTaskOption | null>(
+    null
+  );
+
+  const tasksParams = new URLSearchParams({
+    page: String(page + 1),
+    pageSize: String(PAGE_SIZE),
+  });
+  if (collaboratorId) tasksParams.set('collaboratorId', String(collaboratorId));
+
+  const { data: tasksResponse, refetch: refetchTasks } = useQuery<
+    PaginatedResponse<OperationsTaskOption>
+  >({
+    queryKey: ['collaborator-tasks', collaboratorId, page],
+    enabled: Boolean(collaboratorId),
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: () =>
+      fetchOperations<PaginatedResponse<OperationsTaskOption>>(
+        request,
+        `/operations/tasks?${tasksParams.toString()}`
+      ),
+  });
+
+  const tasks = tasksResponse?.data ?? [];
+  const total = tasksResponse?.total ?? 0;
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  const openCreate = () => {
+    setEditingTask(null);
+    setTaskFormOpen(true);
+  };
+
+  const openEdit = (task: OperationsTaskOption) => {
+    setEditingTask(task);
+    setTaskFormOpen(true);
+  };
+
+  if (!collaboratorId) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {commonT('states.saveBefore')}
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {!disabled ? (
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">
+            {total > 0
+              ? `${total} ${total === 1 ? 'tarefa' : 'tarefas'}`
+              : null}
+          </span>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="gap-1.5"
+            onClick={openCreate}
+          >
+            <Plus className="size-3.5" />
+            {taskT('taskForm.titleNew')}
+          </Button>
+        </div>
+      ) : null}
+
+      {tasks.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 py-8 text-center">
+          <AlignLeft className="size-8 text-muted-foreground/40" />
+          <p className="text-sm text-muted-foreground">
+            Nenhuma tarefa encontrada.
+          </p>
+        </div>
+      ) : (
+        <>
+          <div className="space-y-1.5">
+            {tasks.map((task) => {
+              const overdue =
+                isDueDateOverdue(task.dueDate) && task.status !== 'done';
+              const columnLabel =
+                TASK_COLUMNS.find((c) => c.id === task.status)?.label ??
+                task.status;
+              const hasMeta =
+                (task.fileCount ?? 0) > 0 || (task.commentCount ?? 0) > 0;
+
+              return (
+                <button
+                  key={task.id}
+                  type="button"
+                  className="group flex w-full cursor-pointer items-stretch overflow-hidden rounded-lg border border-border/50 bg-card text-left shadow-sm transition-all duration-150 hover:border-border hover:shadow-md"
+                  onClick={() => openEdit(task)}
+                >
+                  {/* Priority stripe */}
+                  <div
+                    className={`w-0.75 shrink-0 transition-opacity ${getPriorityStripe(task.priority)}`}
+                  />
+
+                  {/* Content */}
+                  <div className="flex min-w-0 flex-1 items-center gap-3 px-4 py-3">
+                    {/* Left: name + project */}
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm font-semibold leading-5 text-foreground">
+                        {task.name}
+                      </p>
+                      {task.projectName ? (
+                        <p className="mt-0.5 truncate text-[11px] leading-none text-muted-foreground/70">
+                          {[task.projectCode, task.projectName]
+                            .filter(Boolean)
+                            .join(' · ')}
+                        </p>
+                      ) : null}
+                    </div>
+
+                    {/* Right: indicators */}
+                    <div className="flex shrink-0 items-center gap-2">
+                      {/* Priority chip */}
+                      {task.priority ? (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span
+                              className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium ${getPriorityChip(task.priority)}`}
+                            >
+                              <Flag className="size-2.5" />
+                              {getPriorityLabel(task.priority)}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent side="top">
+                            Prioridade: {getPriorityLabel(task.priority)}
+                          </TooltipContent>
+                        </Tooltip>
+                      ) : null}
+
+                      {/* Status / column */}
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span className="inline-flex items-center gap-1.5 rounded-md bg-muted/60 px-2 py-0.5 text-[11px] font-medium text-foreground/80 ring-1 ring-border/40">
+                            <span
+                              className={`size-1.5 shrink-0 rounded-full ${getStatusDot(task.status)}`}
+                            />
+                            {columnLabel}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent side="top">
+                          Coluna: {columnLabel}
+                        </TooltipContent>
+                      </Tooltip>
+
+                      {/* Divider before date/meta */}
+                      {task.dueDate || hasMeta ? (
+                        <div className="h-3.5 w-px bg-border/60" />
+                      ) : null}
+
+                      {/* Due date chip */}
+                      {task.dueDate ? (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span
+                              className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium ${
+                                overdue
+                                  ? 'bg-rose-500/10 text-rose-600 ring-1 ring-rose-500/20 dark:text-rose-400'
+                                  : 'bg-muted/60 text-muted-foreground ring-1 ring-border/40'
+                              }`}
+                            >
+                              <CalendarClock className="size-2.5 shrink-0" />
+                              {formatDate(
+                                task.dueDate,
+                                getSettingValue,
+                                currentLocaleCode
+                              )}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent side="top">
+                            {overdue ? 'Prazo vencido: ' : 'Prazo: '}
+                            {formatDate(
+                              task.dueDate,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </TooltipContent>
+                        </Tooltip>
+                      ) : null}
+
+                      {/* Attachment + comment counts */}
+                      {hasMeta ? (
+                        <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                          {(task.fileCount ?? 0) > 0 ? (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <span className="inline-flex items-center gap-0.5">
+                                  <Paperclip className="size-3 shrink-0" />
+                                  {task.fileCount}
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipContent side="top">
+                                {task.fileCount}{' '}
+                                {task.fileCount === 1 ? 'anexo' : 'anexos'}
+                              </TooltipContent>
+                            </Tooltip>
+                          ) : null}
+                          {(task.commentCount ?? 0) > 0 ? (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <span className="inline-flex items-center gap-0.5">
+                                  <MessageSquare className="size-3 shrink-0" />
+                                  {task.commentCount}
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipContent side="top">
+                                {task.commentCount}{' '}
+                                {task.commentCount === 1
+                                  ? 'comentário'
+                                  : 'comentários'}
+                              </TooltipContent>
+                            </Tooltip>
+                          ) : null}
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {totalPages > 1 ? (
+            <div className="flex items-center justify-between pt-1">
+              <span className="text-xs text-muted-foreground">
+                {page * PAGE_SIZE + 1}–{Math.min((page + 1) * PAGE_SIZE, total)}{' '}
+                / {total}
+              </span>
+              <div className="flex gap-1">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                  disabled={page === 0}
+                  onClick={() => setPage((p) => p - 1)}
+                >
+                  ‹
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                  disabled={page >= totalPages - 1}
+                  onClick={() => setPage((p) => p + 1)}
+                >
+                  ›
+                </Button>
+              </div>
+            </div>
+          ) : null}
+        </>
+      )}
+
+      <TaskFormSheet
+        open={taskFormOpen}
+        onOpenChange={setTaskFormOpen}
+        request={request}
+        editingTask={editingTask}
+        defaultAssigneeCollaboratorId={collaboratorId}
+        projectRequired={false}
+        onSaved={() => void refetchTasks()}
+      />
+    </div>
+  );
+}