@hed-hog/operations 0.0.322 → 0.0.326

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

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