@hed-hog/operations 0.0.322 → 0.0.326

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +1,242 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { CheckCircle, ClipboardList } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import type { OperationsTimesheet, PaginatedResponse } from '../_lib/types';
+import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
+import { StatusBadge } from './status-badge';
+
+const PAGE_SIZE = 10;
+
+type CollaboratorTimesheetsTabProps = {
+  collaboratorId: number | null | undefined;
+  request: Parameters<typeof mutateOperations>[0];
+  disabled?: boolean;
+};
+
+export function CollaboratorTimesheetsTab({
+  collaboratorId,
+  request,
+  disabled,
+}: CollaboratorTimesheetsTabProps) {
+  const { getSettingValue, currentLocaleCode } = useApp();
+  const t = useTranslations('operations.TimesheetsPage');
+  const commonT = useTranslations('operations.Common');
+
+  const [page, setPage] = useState(0);
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [approvingId, setApprovingId] = useState<number | null>(null);
+
+  const params = new URLSearchParams({
+    page: String(page + 1),
+    pageSize: String(PAGE_SIZE),
+    sortField: 'weekStartDate',
+    sortOrder: 'desc',
+  });
+  if (collaboratorId) params.set('collaboratorId', String(collaboratorId));
+  if (statusFilter && statusFilter !== 'all')
+    params.set('status', statusFilter);
+  if (dateFrom) params.set('dateFrom', dateFrom);
+  if (dateTo) params.set('dateTo', dateTo);
+
+  const { data: response, refetch } = useQuery<
+    PaginatedResponse<OperationsTimesheet>
+  >({
+    queryKey: [
+      'collaborator-timesheets',
+      collaboratorId,
+      page,
+      statusFilter,
+      dateFrom,
+      dateTo,
+    ],
+    enabled: Boolean(collaboratorId),
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: () =>
+      fetchOperations<PaginatedResponse<OperationsTimesheet>>(
+        request,
+        `/operations/timesheets?${params.toString()}`
+      ),
+  });
+
+  const timesheets = response?.data ?? [];
+  const total = response?.total ?? 0;
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  const handleApprove = async (timesheet: OperationsTimesheet) => {
+    if (!timesheet.approvalId) return;
+    setApprovingId(timesheet.id);
+    try {
+      await mutateOperations(
+        request,
+        `/operations/approvals/${timesheet.approvalId}/approve`,
+        'POST',
+        {}
+      );
+      void refetch();
+    } finally {
+      setApprovingId(null);
+    }
+  };
+
+  if (!collaboratorId) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {commonT('states.saveBefore')}
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-2">
+        <Select
+          value={statusFilter}
+          onValueChange={(v) => {
+            setStatusFilter(v);
+            setPage(0);
+          }}
+        >
+          <SelectTrigger className="w-full sm:w-40">
+            <SelectValue placeholder="Status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Todos</SelectItem>
+            <SelectItem value="draft">{t('statuses.draft')}</SelectItem>
+            <SelectItem value="submitted">{t('statuses.submitted')}</SelectItem>
+            <SelectItem value="approved">{t('statuses.approved')}</SelectItem>
+            <SelectItem value="rejected">{t('statuses.rejected')}</SelectItem>
+          </SelectContent>
+        </Select>
+        <Input
+          type="date"
+          className="w-full sm:w-40"
+          value={dateFrom}
+          onChange={(e) => {
+            setDateFrom(e.target.value);
+            setPage(0);
+          }}
+          placeholder="De"
+        />
+        <Input
+          type="date"
+          className="w-full sm:w-40"
+          value={dateTo}
+          onChange={(e) => {
+            setDateTo(e.target.value);
+            setPage(0);
+          }}
+          placeholder="Até"
+        />
+      </div>
+
+      {timesheets.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 py-8 text-center">
+          <ClipboardList className="size-8 text-muted-foreground/40" />
+          <p className="text-sm text-muted-foreground">
+            {t('emptyDescription')}
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {timesheets.map((ts) => (
+            <div
+              key={ts.id}
+              className="flex items-start justify-between gap-3 rounded-md border px-3 py-2.5"
+            >
+              <div className="min-w-0 flex-1 space-y-0.5">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="text-sm font-medium">
+                    {formatDate(
+                      ts.weekStartDate,
+                      getSettingValue,
+                      currentLocaleCode
+                    )}
+                    {' — '}
+                    {formatDate(
+                      ts.weekEndDate,
+                      getSettingValue,
+                      currentLocaleCode
+                    )}
+                  </span>
+                  <StatusBadge
+                    className={`rounded px-1.5 py-0.5 text-xs font-medium ${getStatusBadgeClass(ts.status)}`}
+                    label={t(
+                      `statuses.${ts.status}` as Parameters<typeof t>[0]
+                    )}
+                  />
+                </div>
+                <div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
+                  {ts.totalHours != null ? <span>{ts.totalHours}h</span> : null}
+                  {ts.approverName ? (
+                    <span>Aprovador: {ts.approverName}</span>
+                  ) : null}
+                  {ts.decisionNote ? (
+                    <span className="italic">"{ts.decisionNote}"</span>
+                  ) : null}
+                </div>
+              </div>
+              {!disabled && ts.status === 'submitted' && ts.approvalId ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="shrink-0 gap-1.5"
+                  disabled={approvingId === ts.id}
+                  onClick={() => void handleApprove(ts)}
+                >
+                  <CheckCircle className="size-3.5" />
+                  Aprovar
+                </Button>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {totalPages > 1 ? (
+        <div className="flex items-center justify-between pt-1">
+          <span className="text-xs text-muted-foreground">
+            {page + 1} / {totalPages}
+          </span>
+          <div className="flex gap-1.5">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={page === 0}
+              onClick={() => setPage((p) => p - 1)}
+            >
+              Anterior
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={page >= totalPages - 1}
+              onClick={() => setPage((p) => p + 1)}
+            >
+              Próximo
+            </Button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}