@hed-hog/operations 0.0.328 → 0.0.330

package/hedhog/frontend/src/app/(app)/(libraries)/operations/my-tasks/page.tsx

@@ -1,1499 +0,0 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PaginationFooter,
-  SearchBar,
-} from '@/components/entity-list';
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Progress } from '@/components/ui/progress';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import {
-  closestCenter,
-  DndContext,
-  PointerSensor,
-  useDraggable,
-  useDroppable,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-  type UniqueIdentifier,
-} from '@dnd-kit/core';
-import { CSS } from '@dnd-kit/utilities';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { AnimatePresence, motion } from 'framer-motion';
-import {
-  AlarmClock,
-  Archive,
-  ArchiveRestore,
-  CheckCircle2,
-  ClipboardList,
-  Eye,
-  KanbanSquare,
-  LayoutGrid,
-  List,
-  Loader2,
-  MessageSquare,
-  Paperclip,
-  Pencil,
-  PlayCircle,
-  Plus,
-  Rows3,
-  Timer,
-  Trash2,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useCallback, useMemo, useState } from 'react';
-import { OperationsHeader } from '../_components/operations-header';
-import { StatusBadge } from '../_components/status-badge';
-import {
-  TaskDetailSheet,
-  type TaskDetailSheetData,
-} from '../_components/task-detail-sheet';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import type {
-  OperationsProjectOption,
-  OperationsTaskOption,
-  PaginatedResponse,
-} from '../_lib/types';
-import {
-  formatDate,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
-
-type TaskViewMode = 'table' | 'cards' | 'board';
-
-type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
-
-type BoardColumns = Record<BoardColumnId, OperationsTaskOption[]>;
-
-type BoardOverride = {
-  columns: BoardColumns;
-} | null;
-
-type TaskCollection = 'active' | 'archived';
-
-type TaskFormState = {
-  projectId: string;
-  name: string;
-  description: string;
-  priority: 'low' | 'medium' | 'high';
-  status: BoardColumnId;
-  dueDate: string;
-  estimateHours: string;
-  tags: string;
-};
-
-const KANBAN_COLUMNS: Array<{ id: BoardColumnId; label: string }> = [
-  { id: 'todo', label: 'Backlog' },
-  { id: 'doing', label: 'Em execução' },
-  { id: 'review', label: 'Revisão' },
-  { id: 'done', label: 'Concluído' },
-];
-
-const EMPTY_TASK_FORM: TaskFormState = {
-  projectId: '',
-  name: '',
-  description: '',
-  priority: 'medium',
-  status: 'todo',
-  dueDate: '',
-  estimateHours: '',
-  tags: '',
-};
-
-function taskDragId(taskId: number) {
-  return `task-${taskId}`;
-}
-
-function columnDropId(columnId: BoardColumnId) {
-  return `col-${columnId}`;
-}
-
-function parseTaskId(value: UniqueIdentifier | null | undefined) {
-  if (!value) return null;
-  const match = String(value).match(/^task-(\d+)$/);
-  return match ? Number(match[1]) : null;
-}
-
-function parseColumnId(
-  value: UniqueIdentifier | null | undefined
-): BoardColumnId | null {
-  if (!value) return null;
-  const match = String(value).match(/^col-(.+)$/);
-  const id = match?.[1];
-  return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
-}
-
-function splitTasksByColumn(tasks: OperationsTaskOption[]): BoardColumns {
-  return {
-    todo: tasks.filter((t) => t.status === 'todo'),
-    doing: tasks.filter((t) => t.status === 'doing'),
-    review: tasks.filter((t) => t.status === 'review'),
-    done: tasks.filter((t) => t.status === 'done'),
-  };
-}
-
-function getTaskPriorityLabel(value?: string | null) {
-  const labels: Record<string, string> = {
-    low: 'Baixa',
-    medium: 'Média',
-    high: 'Alta',
-  };
-  return labels[value ?? ''] ?? String(value ?? '');
-}
-
-function getPriorityClassName(priority?: string | null) {
-  if (priority === 'high') return 'border-rose-300 bg-rose-100 text-rose-700';
-  if (priority === 'medium') return 'border-amber-300 bg-amber-100 text-amber-700';
-  return 'border-emerald-300 bg-emerald-100 text-emerald-700';
-}
-
-function getTaskProgress(status?: string | null) {
-  const map: Record<string, number> = {
-    todo: 0,
-    doing: 33,
-    review: 66,
-    done: 100,
-  };
-  return map[status ?? ''] ?? 0;
-}
-
-function isPastDue(dueDate?: string | null) {
-  if (!dueDate) return false;
-  return new Date(dueDate) < new Date();
-}
-
-function getInitials(value?: string | null) {
-  const parts = String(value ?? '')
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, 2);
-  if (!parts.length) return '??';
-  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
-}
-
-function getPersonAvatarUrl(avatarId?: number | null) {
-  return typeof avatarId === 'number' && avatarId > 0
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : '/placeholder.png';
-}
-
-function getUserPhotoUrl(photoId?: number | null) {
-  return typeof photoId === 'number' && photoId > 0
-    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${photoId}`
-    : null;
-}
-
-function normalizeDateInputValue(value?: string | null) {
-  if (!value) {
-    return '';
-  }
-
-  const normalizedValue = String(value).trim();
-  const directMatch = normalizedValue.match(/^\d{4}-\d{2}-\d{2}/);
-
-  if (directMatch?.[0]) {
-    return directMatch[0];
-  }
-
-  const parsedDate = new Date(normalizedValue);
-  if (Number.isNaN(parsedDate.getTime())) {
-    return '';
-  }
-
-  return parsedDate.toISOString().slice(0, 10);
-}
-
-function DraggableTaskCard({
-  task,
-  children,
-}: {
-  task: OperationsTaskOption;
-  children: (isDragging: boolean) => React.ReactNode;
-}) {
-  const { attributes, listeners, setNodeRef, transform, isDragging } =
-    useDraggable({
-      id: taskDragId(task.id),
-    });
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Translate.toString(transform) }}
-      {...listeners}
-      {...attributes}
-      className={isDragging ? 'z-20' : undefined}
-    >
-      {children(isDragging)}
-    </div>
-  );
-}
-
-function DroppableColumn({
-  columnId,
-  children,
-}: {
-  columnId: BoardColumnId;
-  children: (isOver: boolean) => React.ReactNode;
-}) {
-  const { setNodeRef, isOver } = useDroppable({ id: columnDropId(columnId) });
-  return <div ref={setNodeRef}>{children(isOver)}</div>;
-}
-
-const MY_TASKS_VIEW_STORAGE_KEY = 'operations-my-tasks-view-mode';
-
-export default function OperationsMyTasksPage() {
-  const t = useTranslations('operations.MyTasksPage');
-  const commonT = useTranslations('operations.Common');
-  const detailT = useTranslations('operations.ProjectDetailsPage');
-
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(20);
-  const [taskCollection, setTaskCollection] =
-    useState<TaskCollection>('active');
-  const [viewMode, setViewMode] = useState<TaskViewMode>(() => {
-    if (typeof window === 'undefined') {
-      return 'table';
-    }
-    const savedViewMode = window.localStorage.getItem(
-      MY_TASKS_VIEW_STORAGE_KEY
-    );
-    if (savedViewMode === 'cards' || savedViewMode === 'board')
-      return savedViewMode;
-    return 'table';
-  });
-
-  const [boardOverride, setBoardOverride] = useState<BoardOverride>(null);
-  const [selectedTask, setSelectedTask] = useState<TaskDetailSheetData | null>(
-    null
-  );
-  const [deletePromptTask, setDeletePromptTask] =
-    useState<OperationsTaskOption | null>(null);
-  const [taskFormOpen, setTaskFormOpen] = useState(false);
-  const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
-  const [taskFormLoading, setTaskFormLoading] = useState(false);
-  const [taskFormData, setTaskFormData] =
-    useState<TaskFormState>(EMPTY_TASK_FORM);
-  const [inlineCreateColumn, setInlineCreateColumn] =
-    useState<BoardColumnId | null>(null);
-  const [inlineCreateName, setInlineCreateName] = useState('');
-  const [inlineCreateLoading, setInlineCreateLoading] = useState(false);
-
-  // Paginated query for table/cards views
-  const { data: tasksResponse, refetch } = useQuery<
-    PaginatedResponse<OperationsTaskOption>
-  >({
-    queryKey: [
-      'operations-my-tasks-list',
-      currentLocaleCode,
-      search,
-      statusFilter,
-      taskCollection,
-      page,
-      pageSize,
-    ],
-    queryFn: () => {
-      const params = new URLSearchParams({
-        page: String(page),
-        pageSize: String(pageSize),
-        sortField: 'createdAt',
-        sortOrder: 'desc',
-      });
-      if (search.trim()) params.set('search', search.trim());
-      if (statusFilter !== 'all') params.set('status', statusFilter);
-      if (taskCollection === 'archived') params.set('archived', 'true');
-      return fetchOperations<PaginatedResponse<OperationsTaskOption>>(
-        request,
-        `/operations/my-tasks?${params.toString()}`
-      );
-    },
-    placeholderData: (previous) => previous,
-  });
-
-  // Full-load query for board view (no pagination limit)
-  const { data: boardTasksResponse, refetch: refetchBoard } = useQuery<
-    PaginatedResponse<OperationsTaskOption>
-  >({
-    queryKey: ['operations-my-tasks-board', currentLocaleCode],
-    queryFn: () =>
-      fetchOperations<PaginatedResponse<OperationsTaskOption>>(
-        request,
-        `/operations/my-tasks?pageSize=1000&sortField=createdAt&sortOrder=desc`
-      ),
-    enabled: viewMode === 'board' && taskCollection === 'active',
-    placeholderData: (previous) => previous,
-  });
-  const { data: projectOptionsResponse } = useQuery<
-    PaginatedResponse<OperationsProjectOption>
-  >({
-    queryKey: ['operations-my-task-project-options', currentLocaleCode],
-    queryFn: () =>
-      fetchOperations<PaginatedResponse<OperationsProjectOption>>(
-        request,
-        '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc'
-      ),
-    placeholderData: (previous) => previous,
-  });
-
-  const tasks = tasksResponse?.data ?? [];
-  const boardApiTasks = boardTasksResponse?.data ?? [];
-  const projectOptions = projectOptionsResponse?.data ?? [];
-
-  const boardColumns: BoardColumns = useMemo(() => {
-    if (boardOverride) return boardOverride.columns;
-    return splitTasksByColumn(boardApiTasks);
-  }, [boardOverride, boardApiTasks]);
-
-  const statsCards = useMemo(
-    () => [
-      {
-        key: 'total',
-        title: t('cards.total'),
-        description: t('cards.totalDescription'),
-        value: tasks.length,
-        icon: ClipboardList,
-        accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
-        iconContainerClassName: 'bg-slate-100 text-slate-700',
-      },
-      {
-        key: 'doing',
-        title: t('cards.doing'),
-        description: t('cards.doingDescription'),
-        value: tasks.filter((item) => item.status === 'doing').length,
-        icon: PlayCircle,
-        accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
-        iconContainerClassName: 'bg-blue-50 text-blue-600',
-      },
-      {
-        key: 'review',
-        title: t('cards.review'),
-        description: t('cards.reviewDescription'),
-        value: tasks.filter((item) => item.status === 'review').length,
-        icon: Loader2,
-        accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
-        iconContainerClassName: 'bg-amber-50 text-amber-600',
-      },
-      {
-        key: 'done',
-        title: t('cards.done'),
-        description: t('cards.doneDescription'),
-        value: tasks.filter((item) => item.status === 'done').length,
-        icon: CheckCircle2,
-        accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
-        iconContainerClassName: 'bg-green-50 text-green-600',
-      },
-    ],
-    [tasks, t]
-  );
-
-  const handleViewModeChange = (value: string) => {
-    if (taskCollection === 'archived' && value === 'board') return;
-    if (value !== 'table' && value !== 'cards' && value !== 'board') return;
-    setViewMode(value);
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem(MY_TASKS_VIEW_STORAGE_KEY, value);
-    }
-  };
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
-  );
-
-  const findColumnByTask = useCallback(
-    (taskId: number) => {
-      const match = KANBAN_COLUMNS.find((column) =>
-        boardColumns[column.id].some((task) => task.id === taskId)
-      );
-      return match?.id ?? null;
-    },
-    [boardColumns]
-  );
-
-  const moveTaskToColumn = useCallback(
-    (taskId: number, targetColumn: BoardColumnId) => {
-      const originColumn = findColumnByTask(taskId);
-      if (!originColumn || originColumn === targetColumn) return;
-
-      const sourceTask = boardColumns[originColumn].find(
-        (task) => task.id === taskId
-      );
-      if (!sourceTask) return;
-
-      setBoardOverride({
-        columns: {
-          ...boardColumns,
-          [originColumn]: boardColumns[originColumn].filter(
-            (task) => task.id !== taskId
-          ),
-          [targetColumn]: [
-            { ...sourceTask, status: targetColumn },
-            ...boardColumns[targetColumn],
-          ],
-        },
-      });
-
-      mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
-        status: targetColumn,
-      }).catch(() => {
-        setBoardOverride(null);
-        void refetchBoard();
-      });
-    },
-    [boardColumns, findColumnByTask, request, refetchBoard]
-  );
-
-  const onBoardDragEnd = (event: DragEndEvent) => {
-    const taskId = parseTaskId(event.active.id);
-    const targetColumn = parseColumnId(event.over?.id);
-    if (!taskId || !targetColumn) return;
-    moveTaskToColumn(taskId, targetColumn);
-  };
-
-  const refetchAll = useCallback(async () => {
-    await Promise.all([refetch(), refetchBoard()]);
-  }, [refetch, refetchBoard]);
-
-  const handleArchiveTask = useCallback(
-    async (taskId: number) => {
-      await mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
-        archived: true,
-      });
-      setSelectedTask(null);
-      setBoardOverride(null);
-      await refetchAll();
-    },
-    [request, refetchAll]
-  );
-
-  const handleRestoreTask = useCallback(
-    async (taskId: number) => {
-      await mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
-        archived: false,
-      });
-      setSelectedTask(null);
-      setBoardOverride(null);
-      await refetchAll();
-    },
-    [request, refetchAll]
-  );
-
-  const handlePermanentDeleteTask = useCallback(
-    async (taskId: number) => {
-      await mutateOperations(
-        request,
-        `/operations/tasks/${taskId}?permanent=true`,
-        'DELETE'
-      );
-      setDeletePromptTask(null);
-      setSelectedTask(null);
-      setBoardOverride(null);
-      await refetchAll();
-    },
-    [request, refetchAll]
-  );
-
-  const handleInlineCreateTask = useCallback(
-    async (column: BoardColumnId) => {
-      const trimmed = inlineCreateName.trim();
-      if (!trimmed) {
-        setInlineCreateColumn(null);
-        setInlineCreateName('');
-        return;
-      }
-      setInlineCreateLoading(true);
-      try {
-        await mutateOperations(request, '/operations/tasks', 'POST', {
-          name: trimmed,
-          status: column,
-          priority: 'medium',
-        });
-        setBoardOverride(null);
-        setInlineCreateColumn(null);
-        setInlineCreateName('');
-        await refetchBoard();
-      } finally {
-        setInlineCreateLoading(false);
-      }
-    },
-    [inlineCreateName, request, refetchBoard]
-  );
-
-  const openCreateTaskForm = useCallback(() => {
-    setEditingTaskId(null);
-    setTaskFormData(EMPTY_TASK_FORM);
-    setSelectedTask(null);
-    setTaskFormOpen(true);
-  }, []);
-
-  const openEditTaskForm = useCallback((task: OperationsTaskOption) => {
-    setEditingTaskId(task.id);
-    setTaskFormData({
-      projectId: String(task.projectId),
-      name: task.name,
-      description: task.description ?? '',
-      priority: (task.priority as TaskFormState['priority']) ?? 'medium',
-      status: KANBAN_COLUMNS.some((column) => column.id === task.status)
-        ? (task.status as BoardColumnId)
-        : 'todo',
-      dueDate: normalizeDateInputValue(task.dueDate),
-      estimateHours:
-        task.estimateHours != null ? String(task.estimateHours) : '',
-      tags: task.tags ?? '',
-    });
-    setSelectedTask(null);
-    setTaskFormOpen(true);
-  }, []);
-
-  const handleTaskFormSubmit = useCallback(async () => {
-    const selectedProject = projectOptions.find(
-      (project) => String(project.id) === taskFormData.projectId
-    );
-    const normalizedName = taskFormData.name.trim();
-    if (!selectedProject || !normalizedName) return;
-
-    setTaskFormLoading(true);
-    try {
-      const payload = {
-        projectId: selectedProject.id,
-        projectAssignmentId: selectedProject.projectAssignmentId ?? null,
-        name: normalizedName,
-        description: taskFormData.description.trim() || null,
-        priority: taskFormData.priority,
-        status: taskFormData.status,
-        dueDate: taskFormData.dueDate || null,
-        estimateHours: taskFormData.estimateHours
-          ? Number(taskFormData.estimateHours)
-          : null,
-        tags: taskFormData.tags.trim() || null,
-      };
-      if (editingTaskId) {
-        await mutateOperations(
-          request,
-          `/operations/tasks/${editingTaskId}`,
-          'PATCH',
-          payload
-        );
-      } else {
-        await mutateOperations(request, '/operations/tasks', 'POST', payload);
-      }
-
-      setTaskFormOpen(false);
-      setEditingTaskId(null);
-      setTaskFormData(EMPTY_TASK_FORM);
-      setTaskCollection('active');
-      setPage(1);
-      setBoardOverride(null);
-      await refetchAll();
-    } finally {
-      setTaskFormLoading(false);
-    }
-  }, [editingTaskId, projectOptions, request, refetchAll, taskFormData]);
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          <Button size="sm" className="gap-2" onClick={openCreateTaskForm}>
-            <Plus className="size-4" />
-            {t('actions.create')}
-          </Button>
-        }
-      />
-
-      <KpiCardsGrid items={statsCards} columns={4} />
-
-      <div className="flex min-w-0 flex-wrap items-center gap-2">
-        {viewMode !== 'board' ? (
-          <SearchBar
-            className="w-auto"
-            searchQuery={search}
-            onSearchChange={(value) => {
-              setSearch(value);
-              setPage(1);
-            }}
-            showSearchButton={false}
-            debounceMs={500}
-            placeholder={t('searchPlaceholder')}
-            controls={[
-              {
-                id: 'status',
-                type: 'select',
-                value: statusFilter,
-                onChange: (value) => {
-                  setStatusFilter(value);
-                  setPage(1);
-                },
-                placeholder: commonT('labels.status'),
-                options: [
-                  { value: 'all', label: commonT('filters.allStatuses') },
-                  { value: 'todo', label: t('status.todo') },
-                  { value: 'doing', label: t('status.doing') },
-                  { value: 'review', label: t('status.review') },
-                  { value: 'done', label: t('status.done') },
-                ],
-              },
-            ]}
-          />
-        ) : null}
-
-        <Button
-          variant={taskCollection === 'active' ? 'default' : 'outline'}
-          size="sm"
-          onClick={() => {
-            setTaskCollection('active');
-            setPage(1);
-          }}
-        >
-          {t('collections.active')}
-        </Button>
-        <Button
-          variant={taskCollection === 'archived' ? 'default' : 'outline'}
-          size="sm"
-          onClick={() => {
-            setTaskCollection('archived');
-            setPage(1);
-            if (viewMode === 'board') {
-              handleViewModeChange('table');
-            }
-          }}
-        >
-          {t('collections.archived')}
-        </Button>
-
-        <div className="flex-1" />
-
-        <ToggleGroup
-          type="single"
-          value={viewMode}
-          onValueChange={handleViewModeChange}
-          variant="outline"
-          size="sm"
-          aria-label={t('viewMode')}
-        >
-          <ToggleGroupItem
-            value="table"
-            className="gap-1.5 px-2.5"
-            aria-label={t('viewModeTable')}
-          >
-            <List className="h-4 w-4" />
-            <span className="hidden sm:inline">{t('viewModeTable')}</span>
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="cards"
-            className="gap-1.5 px-2.5"
-            aria-label={t('viewModeCards')}
-          >
-            <LayoutGrid className="h-4 w-4" />
-            <span className="hidden sm:inline">{t('viewModeCards')}</span>
-          </ToggleGroupItem>
-          {taskCollection === 'active' ? (
-            <ToggleGroupItem
-              value="board"
-              className="gap-1.5 px-2.5"
-              aria-label={t('viewModeBoard')}
-            >
-              <KanbanSquare className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeBoard')}</span>
-            </ToggleGroupItem>
-          ) : null}
-        </ToggleGroup>
-      </div>
-
-      {viewMode === 'board' ? (
-        boardApiTasks.length > 0 ? (
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={onBoardDragEnd}
-          >
-            <div className="grid gap-4 xl:grid-cols-4">
-              {KANBAN_COLUMNS.map((column) => (
-                <DroppableColumn key={column.id} columnId={column.id}>
-                  {(isOver) => (
-                    <div
-                      className={[
-                        'rounded-xl border bg-muted/20 p-3 transition-colors',
-                        isOver
-                          ? 'border-primary bg-primary/5'
-                          : 'border-border',
-                      ].join(' ')}
-                    >
-                      <div className="mb-3 flex items-center justify-between">
-                        <div className="flex items-center gap-2 text-sm font-semibold">
-                          <Rows3 className="size-4 text-muted-foreground" />
-                          {column.label}
-                        </div>
-                        <div className="flex items-center gap-1">
-                          <span className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">
-                            {boardColumns[column.id].length}
-                          </span>
-                          <button
-                            type="button"
-                            className="flex size-5 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
-                            onClick={() => {
-                              setInlineCreateColumn(column.id);
-                              setInlineCreateName('');
-                            }}
-                          >
-                            <Plus className="size-3.5" />
-                          </button>
-                        </div>
-                      </div>
-
-                      <div className="flex flex-1 flex-col gap-2">
-                        <AnimatePresence initial={false}>
-                        {boardColumns[column.id].map((task) => {
-                          const taskTags = task.tags ? task.tags.split(',').map((t) => t.trim()).filter(Boolean) : [];
-                          const comments = task.commentCount ?? 0;
-                          return (
-                          <DraggableTaskCard key={task.id} task={task}>
-                            {(isDragging) => (
-                              <motion.div
-                                initial={{ opacity: 0, scale: 0.96 }}
-                                animate={{ opacity: 1, scale: 1 }}
-                                exit={{ opacity: 0, scale: 0.95, y: -4 }}
-                                transition={{ duration: 0.18 }}
-                                role="button"
-                                tabIndex={0}
-                                onClick={() =>
-                                  !isDragging && setSelectedTask(task)
-                                }
-                                onKeyDown={(event) => {
-                                  if (event.key === 'Enter' || event.key === ' ') {
-                                    event.preventDefault();
-                                    setSelectedTask(task);
-                                  }
-                                }}
-                                className={[
-                                  'group w-full cursor-pointer rounded-2xl border bg-card p-3 text-left shadow-xs transition',
-                                  isDragging
-                                    ? 'opacity-0'
-                                    : 'hover:border-primary/40 hover:shadow-lg',
-                                ].join(' ')}
-                              >
-                                <div className="mb-3 flex items-start justify-between gap-2">
-                                  <div className="min-w-0 space-y-1">
-                                    <p className="line-clamp-2 text-sm font-semibold leading-snug">
-                                      {task.name}
-                                    </p>
-                                    <p className="truncate text-[11px] text-muted-foreground">
-                                      {[task.projectName, task.projectCode]
-                                        .filter(Boolean)
-                                        .join(' • ') ||
-                                        commonT('labels.notAvailable')}
-                                    </p>
-                                    {task.description ? (
-                                      <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
-                                        {task.description.replace(/<[^>]*>/g, '')}
-                                      </p>
-                                    ) : null}
-                                  </div>
-                                  <div className="flex items-start gap-2">
-                                    <span
-                                      className={[
-                                        'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
-                                        getPriorityClassName(task.priority),
-                                      ].join(' ')}
-                                    >
-                                      {getTaskPriorityLabel(task.priority)}
-                                    </span>
-                                    <Button
-                                      type="button"
-                                      variant="ghost"
-                                      size="icon"
-                                      className="size-7 shrink-0 rounded-full opacity-0 transition group-hover:opacity-100"
-                                      onPointerDown={(event) =>
-                                        event.stopPropagation()
-                                      }
-                                      onClick={(event) => {
-                                        event.stopPropagation();
-                                        openEditTaskForm(task);
-                                      }}
-                                    >
-                                      <Pencil className="size-3.5" />
-                                    </Button>
-                                  </div>
-                                </div>
-
-                                {taskTags.length > 0 ? (
-                                  <div className="mb-3 flex flex-wrap gap-1">
-                                    {taskTags.slice(0, 4).map((tag) => (
-                                      <span
-                                        key={`${task.id}-${tag}`}
-                                        className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground"
-                                      >
-                                        {tag}
-                                      </span>
-                                    ))}
-                                    {taskTags.length > 4 ? (
-                                      <span className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                                        +{taskTags.length - 4}
-                                      </span>
-                                    ) : null}
-                                  </div>
-                                ) : null}
-
-                                <div className="grid grid-cols-2 gap-2 text-xs">
-                                  <div
-                                    className={[
-                                      'rounded-xl border bg-muted/20 px-2 py-1.5',
-                                      isPastDue(task.dueDate) && task.status !== 'done'
-                                        ? 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300'
-                                        : 'text-muted-foreground',
-                                    ].join(' ')}
-                                  >
-                                    <span className="flex items-center gap-1">
-                                      <AlarmClock className="size-3.5" />
-                                      {formatDate(
-                                        task.dueDate,
-                                        getSettingValue,
-                                        currentLocaleCode
-                                      )}
-                                    </span>
-                                  </div>
-                                  <div className="rounded-xl border bg-muted/20 px-2 py-1.5 text-muted-foreground">
-                                    <span className="flex items-center gap-1">
-                                      <Timer className="size-3.5" />
-                                      {task.estimateHours != null
-                                        ? `${task.estimateHours}h`
-                                        : '—'}
-                                    </span>
-                                  </div>
-                                </div>
-
-                                <div className="mt-3 space-y-1.5">
-                                  <div className="flex items-center justify-between text-[11px] text-muted-foreground">
-                                    <span>Progresso</span>
-                                    <span>{getTaskProgress(task.status)}%</span>
-                                  </div>
-                                  <Progress
-                                    value={getTaskProgress(task.status)}
-                                    className="h-1.5"
-                                  />
-                                </div>
-
-                                <div className="mt-3 flex items-center justify-between gap-3 border-t pt-3">
-                                  <div className="flex min-w-0 items-center gap-2">
-                                    <div className="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">
-                                      {(() => {
-                                        const photoUrl = getUserPhotoUrl(
-                                          task.assigneeUserPhotoId
-                                        );
-                                        const avatarUrl =
-                                          task.assigneePersonAvatarId
-                                            ? getPersonAvatarUrl(
-                                                task.assigneePersonAvatarId
-                                              )
-                                            : null;
-                                        const imgSrc = photoUrl ?? avatarUrl;
-                                        return imgSrc ? (
-                                          // eslint-disable-next-line @next/next/no-img-element
-                                          <img
-                                            src={imgSrc}
-                                            alt={task.assigneeName ?? ''}
-                                            className="size-full object-cover"
-                                          />
-                                        ) : (
-                                          getInitials(task.assigneeName)
-                                        );
-                                      })()}
-                                    </div>
-                                    <span className="truncate text-[11px] text-muted-foreground">
-                                      {task.assigneeName ?? '—'}
-                                    </span>
-                                  </div>
-                                  <div className="flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
-                                    <span className="inline-flex items-center gap-1">
-                                      <MessageSquare className="size-3.5" />
-                                      {comments}
-                                    </span>
-                                    <span className="inline-flex items-center gap-1">
-                                      <Paperclip className="size-3.5" />
-                                      0
-                                    </span>
-                                  </div>
-                                </div>
-                              </motion.div>
-                            )}
-                          </DraggableTaskCard>
-                          );
-                        })}
-                        </AnimatePresence>
-                      </div>
-
-                      {inlineCreateColumn === column.id ? (
-                        <div className="space-y-1.5 rounded-lg border bg-card p-2">
-                          <Input
-                            autoFocus
-                            placeholder={detailT('taskForm.namePlaceholder')}
-                            value={inlineCreateName}
-                            onChange={(e) =>
-                              setInlineCreateName(e.target.value)
-                            }
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter') {
-                                e.preventDefault();
-                                void handleInlineCreateTask(column.id);
-                              } else if (e.key === 'Escape') {
-                                setInlineCreateColumn(null);
-                                setInlineCreateName('');
-                              }
-                            }}
-                            onBlur={() => {
-                              if (!inlineCreateName.trim()) {
-                                setInlineCreateColumn(null);
-                                setInlineCreateName('');
-                              }
-                            }}
-                            disabled={inlineCreateLoading}
-                            className="h-8 text-sm"
-                          />
-                          <div className="flex gap-1">
-                            <Button
-                              type="button"
-                              size="sm"
-                              className="h-7 px-2 text-xs"
-                              disabled={
-                                !inlineCreateName.trim() || inlineCreateLoading
-                              }
-                              onMouseDown={(e) => e.preventDefault()}
-                              onClick={() =>
-                                void handleInlineCreateTask(column.id)
-                              }
-                            >
-                              {t('actions.create')}
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="sm"
-                              className="h-7 px-2 text-xs"
-                              onMouseDown={(e) => e.preventDefault()}
-                              onClick={() => {
-                                setInlineCreateColumn(null);
-                                setInlineCreateName('');
-                              }}
-                            >
-                              {commonT('actions.cancel')}
-                            </Button>
-                          </div>
-                        </div>
-                      ) : (
-                        <button
-                          type="button"
-                          className="flex w-full cursor-pointer items-center gap-1 rounded-md px-1 py-1 text-xs text-muted-foreground transition hover:bg-muted hover:text-foreground"
-                          onClick={() => {
-                            setInlineCreateColumn(column.id);
-                            setInlineCreateName('');
-                          }}
-                        >
-                          <Plus className="size-3" />
-                          {t('actions.create')}
-                        </button>
-                      )}
-                    </div>
-                  )}
-                </DroppableColumn>
-              ))}
-            </div>
-          </DndContext>
-        ) : (
-          <EmptyState
-            icon={<ClipboardList className="size-12" />}
-            title={commonT('states.emptyTitle')}
-            description={t('emptyDescription')}
-            actionLabel={commonT('actions.refresh')}
-            onAction={() => void refetchBoard()}
-          />
-        )
-      ) : tasks.length > 0 ? (
-        viewMode === 'cards' ? (
-          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
-            {tasks.map((task) => (
-              <Card
-                key={task.id}
-                className="cursor-pointer overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
-                onClick={() => setSelectedTask(task)}
-              >
-                <CardContent className="space-y-4 p-4">
-                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                    <div className="min-w-0">
-                      <div className="truncate font-semibold">{task.name}</div>
-                      <div className="truncate text-xs text-muted-foreground">
-                        {[task.projectName, task.projectCode]
-                          .filter(Boolean)
-                          .join(' • ') || commonT('labels.notAvailable')}
-                      </div>
-                    </div>
-                    <StatusBadge
-                      label={t(`status.${task.status}`)}
-                      className={getStatusBadgeClass(task.status)}
-                    />
-                  </div>
-
-                  {task.description ? (
-                    <p className="line-clamp-3 text-sm text-muted-foreground">
-                      {task.description}
-                    </p>
-                  ) : null}
-
-                  <div className="flex justify-end border-t border-border/60 pt-3">
-                    {task.projectId ? (
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        asChild
-                        onClick={(event) => event.stopPropagation()}
-                      >
-                        <Link
-                          href={`/operations/my-projects/${task.projectId}`}
-                        >
-                          <Eye className="size-4" />
-                        </Link>
-                      </Button>
-                    ) : null}
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <div className="overflow-x-auto rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{commonT('labels.task')}</TableHead>
-                  <TableHead>{commonT('labels.project')}</TableHead>
-                  <TableHead>{commonT('labels.status')}</TableHead>
-                  <TableHead className="w-20 text-right">
-                    {commonT('labels.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {tasks.map((task) => (
-                  <TableRow
-                    key={task.id}
-                    className="cursor-pointer hover:bg-muted/30"
-                    onClick={() => setSelectedTask(task)}
-                  >
-                    <TableCell>
-                      <div className="min-w-0">
-                        <div className="truncate font-medium">{task.name}</div>
-                        {task.description ? (
-                          <div className="truncate text-xs text-muted-foreground">
-                            {task.description}
-                          </div>
-                        ) : null}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="truncate text-sm">
-                        {[task.projectName, task.projectCode]
-                          .filter(Boolean)
-                          .join(' • ') || commonT('labels.notAvailable')}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <StatusBadge
-                        label={t(`status.${task.status}`)}
-                        className={getStatusBadgeClass(task.status)}
-                      />
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex justify-end">
-                        {task.projectId ? (
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            asChild
-                            onClick={(event) => event.stopPropagation()}
-                          >
-                            <Link
-                              href={`/operations/my-projects/${task.projectId}`}
-                            >
-                              <Eye className="size-4" />
-                            </Link>
-                          </Button>
-                        ) : null}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        )
-      ) : (
-        <EmptyState
-          icon={<ClipboardList className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('emptyDescription')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => void refetch()}
-        />
-      )}
-
-      {viewMode !== 'board' ? (
-        <PaginationFooter
-          currentPage={tasksResponse?.page ?? page}
-          pageSize={tasksResponse?.pageSize ?? pageSize}
-          totalItems={tasksResponse?.total ?? 0}
-          onPageChange={setPage}
-          onPageSizeChange={(value) => {
-            setPageSize(value);
-            setPage(1);
-          }}
-          pageSizeOptions={[10, 20, 50]}
-        />
-      ) : null}
-
-      <TaskDetailSheet
-        task={selectedTask}
-        open={selectedTask !== null}
-        onOpenChange={(open) => {
-          if (!open) setSelectedTask(null);
-        }}
-        statusLabel={(status) => {
-          try {
-            return t(`status.${status}`);
-          } catch {
-            return status;
-          }
-        }}
-        footer={
-          selectedTask ? (
-            <div className="grid grid-cols-2 gap-3">
-              {taskCollection === 'archived' ? (
-                <>
-                  <Button
-                    variant="outline"
-                    className="gap-2"
-                    onClick={() => void handleRestoreTask(selectedTask.id)}
-                  >
-                    <ArchiveRestore className="size-4" />
-                    {commonT('actions.unarchive')}
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    className="gap-2"
-                    onClick={() =>
-                      setDeletePromptTask(selectedTask as OperationsTaskOption)
-                    }
-                  >
-                    <Trash2 className="size-4" />
-                    {commonT('actions.delete')}
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Button
-                    variant="outline"
-                    className="gap-2"
-                    onClick={() =>
-                      openEditTaskForm(selectedTask as OperationsTaskOption)
-                    }
-                  >
-                    <Pencil className="size-4" />
-                    {commonT('actions.edit')}
-                  </Button>
-                  <Button
-                    variant="outline"
-                    className="gap-2"
-                    onClick={() => void handleArchiveTask(selectedTask.id)}
-                  >
-                    <Archive className="size-4" />
-                    {commonT('actions.archive')}
-                  </Button>
-                </>
-              )}
-            </div>
-          ) : null
-        }
-      />
-
-      <Dialog
-        open={deletePromptTask !== null}
-        onOpenChange={(open) => {
-          if (!open) setDeletePromptTask(null);
-        }}
-      >
-        <DialogContent className="sm:max-w-sm">
-          <DialogHeader>
-            <DialogTitle>{t('dialogs.deleteTitle')}</DialogTitle>
-          </DialogHeader>
-          <p className="text-sm text-muted-foreground">
-            {t('dialogs.deleteDescription')}
-          </p>
-          <DialogFooter className="mt-4">
-            <Button variant="outline" onClick={() => setDeletePromptTask(null)}>
-              {commonT('actions.cancel')}
-            </Button>
-            {deletePromptTask ? (
-              <Button
-                variant="destructive"
-                onClick={() =>
-                  void handlePermanentDeleteTask(deletePromptTask.id)
-                }
-              >
-                {commonT('actions.delete')}
-              </Button>
-            ) : null}
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog
-        open={taskFormOpen}
-        onOpenChange={(open) => {
-          if (!taskFormLoading) {
-            setTaskFormOpen(open);
-            if (!open) {
-              setEditingTaskId(null);
-              setTaskFormData(EMPTY_TASK_FORM);
-            }
-          }
-        }}
-      >
-        <DialogContent className="sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>
-              {editingTaskId
-                ? detailT('taskForm.titleEdit')
-                : detailT('taskForm.titleNew')}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="task-project">{commonT('labels.project')}</Label>
-              <Select
-                value={taskFormData.projectId}
-                onValueChange={(value) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    projectId: value,
-                  }))
-                }
-              >
-                <SelectTrigger className="w-full" id="task-project">
-                  <SelectValue
-                    placeholder={t('dialogs.createProjectPlaceholder')}
-                  />
-                </SelectTrigger>
-                <SelectContent>
-                  {projectOptions.map((project) => (
-                    <SelectItem key={project.id} value={String(project.id)}>
-                      {project.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="task-name">
-                {detailT('taskForm.nameLabel')} *
-              </Label>
-              <Input
-                id="task-name"
-                value={taskFormData.name}
-                onChange={(event) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    name: event.target.value,
-                  }))
-                }
-                placeholder={detailT('taskForm.namePlaceholder')}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="task-description">
-                {detailT('taskForm.descriptionLabel')}
-              </Label>
-              <RichTextEditor
-                value={taskFormData.description}
-                onChange={(val) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    description: val,
-                  }))
-                }
-              />
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-2">
-                <Label>{detailT('taskForm.priorityLabel')}</Label>
-                <Select
-                  value={taskFormData.priority}
-                  onValueChange={(value) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      priority: value as TaskFormState['priority'],
-                    }))
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="low">
-                      {getTaskPriorityLabel('low')}
-                    </SelectItem>
-                    <SelectItem value="medium">
-                      {getTaskPriorityLabel('medium')}
-                    </SelectItem>
-                    <SelectItem value="high">
-                      {getTaskPriorityLabel('high')}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="space-y-2">
-                <Label>{detailT('taskForm.columnLabel')}</Label>
-                <Select
-                  value={taskFormData.status}
-                  onValueChange={(value) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      status: value as BoardColumnId,
-                    }))
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {KANBAN_COLUMNS.map((column) => (
-                      <SelectItem key={column.id} value={column.id}>
-                        {column.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-2">
-                <Label htmlFor="task-due-date">
-                  {detailT('taskForm.deadlineLabel')}
-                </Label>
-                <Input
-                  id="task-due-date"
-                  type="date"
-                  value={taskFormData.dueDate}
-                  onChange={(event) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      dueDate: event.target.value,
-                    }))
-                  }
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="task-estimate">
-                  {detailT('taskForm.estimateLabel')}
-                </Label>
-                <Input
-                  id="task-estimate"
-                  type="number"
-                  min="0"
-                  step="0.5"
-                  placeholder="0"
-                  value={taskFormData.estimateHours}
-                  onChange={(event) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      estimateHours: event.target.value,
-                    }))
-                  }
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="task-tags">{detailT('taskForm.tagsLabel')}</Label>
-              <Input
-                id="task-tags"
-                value={taskFormData.tags}
-                onChange={(event) =>
-                  setTaskFormData((prev) => ({
-                    ...prev,
-                    tags: event.target.value,
-                  }))
-                }
-                placeholder={detailT('taskForm.tagsPlaceholder')}
-              />
-            </div>
-          </div>
-          <DialogFooter className="gap-2 sm:justify-between">
-            <Button
-              variant="ghost"
-              onClick={() => {
-                setTaskFormOpen(false);
-                setEditingTaskId(null);
-                setTaskFormData(EMPTY_TASK_FORM);
-              }}
-              disabled={taskFormLoading}
-            >
-              {commonT('actions.cancel')}
-            </Button>
-            <Button
-              onClick={() => void handleTaskFormSubmit()}
-              disabled={
-                taskFormLoading ||
-                !taskFormData.projectId ||
-                !taskFormData.name.trim()
-              }
-            >
-              {taskFormLoading ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : null}
-              {editingTaskId ? commonT('actions.save') : t('actions.create')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Page>
-  );
-}