@hed-hog/operations 0.0.328 → 0.0.329

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/project-details-screen.tsx

@@ -1,4378 +0,0 @@
-'use client';
-
-import { EmptyState, Page } from '@/components/entity-list';
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from '@/components/ui/chart';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import {
-  closestCenter,
-  DndContext,
-  DragOverlay,
-  PointerSensor,
-  pointerWithin,
-  useDraggable,
-  useDroppable,
-  useSensor,
-  useSensors,
-  type CollisionDetection,
-  type DragEndEvent,
-  type DragStartEvent,
-  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,
-  AlertTriangle,
-  Archive,
-  ArchiveRestore,
-  BarChart2,
-  BarChart3,
-  CalendarClock,
-  CalendarDays,
-  CheckCircle2,
-  ChevronRight,
-  ClipboardList,
-  FileText,
-  FolderKanban,
-  Gauge,
-  GitCommitHorizontal,
-  HeartPulse,
-  LineChart as LineChartIcon,
-  Loader2,
-  MessageSquare,
-  MoreHorizontal,
-  Paperclip,
-  Pencil,
-  Plus,
-  Rocket,
-  Search,
-  SlidersHorizontal,
-  Timer,
-  Trash2,
-  TrendingUp,
-  Users,
-  type LucideIcon,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import type { ReactNode } from 'react';
-import { useCallback, useMemo, useState } from 'react';
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  Line,
-  LineChart,
-  Pie,
-  PieChart,
-  PolarAngleAxis,
-  RadialBar,
-  RadialBarChart,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type {
-  OperationsProjectDetails,
-  OperationsTaskOption,
-} from '../_lib/types';
-import {
-  formatCurrency,
-  formatDate,
-  formatDateRange,
-  formatEnumLabel,
-  formatHours,
-  formatPercent,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
-import { OperationsHeader } from './operations-header';
-import { ProjectCostsSection } from './project-costs-section';
-import { ProjectFormScreen } from './project-form-screen';
-import { SectionCard } from './section-card';
-import { StatusBadge } from './status-badge';
-import { TaskDetailSheet, type TaskDetailSheetData } from './task-detail-sheet';
-import { TaskFileAttachments } from './task-file-attachments';
-
-type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
-
-type BoardTask = {
-  id: number;
-  name: string;
-  description: string | null;
-  status: BoardColumnId;
-  priority: 'low' | 'medium' | 'high';
-  dueDate: string | null;
-  estimateHours: number | null;
-  tags: string | null;
-  assigneeCollaboratorId: number | null;
-  assigneeName: string | null;
-  assigneeUserPhotoId: number | null;
-  assigneePersonAvatarId: number | null;
-  projectAssignmentId: number | null;
-  createdAt: string | null;
-  commentCount: number;
-  fileCount: number;
-};
-
-type ApiBoardTask = Partial<BoardTask> & {
-  id: number;
-  name: string;
-  status?: string | null;
-  priority?: BoardTask['priority'] | null;
-};
-
-type TaskFormState = {
-  name: string;
-  description: string;
-  priority: 'low' | 'medium' | 'high';
-  status: BoardColumnId;
-  assigneeCollaboratorId: string;
-  dueDate: string;
-  estimateHours: string;
-  tags: string;
-};
-
-const EMPTY_TASK_FORM: TaskFormState = {
-  name: '',
-  description: '',
-  priority: 'medium',
-  status: 'todo',
-  assigneeCollaboratorId: 'none',
-  dueDate: '',
-  estimateHours: '',
-  tags: '',
-};
-
-type BoardColumns = Record<BoardColumnId, BoardTask[]>;
-
-type BoardState = {
-  projectId: number;
-  columns: BoardColumns;
-};
-
-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' },
-];
-
-// Prefer pointer-within so any column the cursor enters triggers a drop target.
-// Falls back to closestCenter for the gap between columns.
-const kanbanCollision: CollisionDetection = (args) => {
-  const within = pointerWithin(args);
-  if (within.length > 0) return within;
-  return closestCenter(args);
-};
-
-function apiTaskToBoardTask(row: ApiBoardTask): BoardTask {
-  const status = KANBAN_COLUMNS.some((c) => c.id === row.status)
-    ? (row.status as BoardColumnId)
-    : 'todo';
-  return {
-    id: row.id,
-    name: row.name,
-    description: row.description ?? null,
-    status,
-    priority: row.priority ?? 'medium',
-    dueDate: row.dueDate ?? null,
-    estimateHours: row.estimateHours ?? null,
-    tags: row.tags ?? null,
-    assigneeCollaboratorId: row.assigneeCollaboratorId ?? null,
-    assigneeName: row.assigneeName ?? null,
-    assigneeUserPhotoId: row.assigneeUserPhotoId ?? null,
-    assigneePersonAvatarId: row.assigneePersonAvatarId ?? null,
-    projectAssignmentId: row.projectAssignmentId ?? null,
-    createdAt: row.createdAt ?? null,
-    commentCount: (row as BoardTask & Record<string, unknown>).commentCount as number ?? 0,
-    fileCount: (row as BoardTask & Record<string, unknown>).fileCount as number ?? 0,
-  };
-}
-
-function splitTasksByColumn(tasks: BoardTask[]): 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'),
-  };
-}
-
-const boardChartConfig = {
-  allocation: { label: 'Alocacao', color: 'hsl(201 96% 32%)' },
-  loggedHours: { label: 'Horas', color: 'hsl(166 72% 28%)' },
-  progress: { label: 'Progresso', color: 'hsl(262 83% 58%)' },
-  planned: { label: 'Planejado', color: 'hsl(215 16% 47%)' },
-  todo: { label: 'Backlog', color: 'hsl(215 16% 47%)' },
-  doing: { label: 'Em execucao', color: 'hsl(201 96% 32%)' },
-  review: { label: 'Revisao', color: 'hsl(38 92% 50%)' },
-  done: { label: 'Concluido', color: 'hsl(166 72% 28%)' },
-  health: { label: 'Saude', color: 'hsl(166 72% 28%)' },
-} satisfies ChartConfig;
-
-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 id = String(value);
-  if (!id.startsWith('task-')) {
-    return null;
-  }
-
-  const parsed = Number(id.slice(5));
-  return Number.isFinite(parsed) ? parsed : null;
-}
-
-function parseColumnId(value: UniqueIdentifier | null | undefined) {
-  if (!value) {
-    return null;
-  }
-
-  const id = String(value);
-  if (!id.startsWith('col-')) {
-    return null;
-  }
-
-  const column = id.slice(4);
-  return KANBAN_COLUMNS.some((item) => item.id === column)
-    ? (column as BoardColumnId)
-    : null;
-}
-
-function DroppableColumn({
-  columnId,
-  children,
-}: {
-  columnId: BoardColumnId;
-  children: (isOver: boolean) => React.ReactNode;
-}) {
-  const { isOver, setNodeRef } = useDroppable({ id: columnDropId(columnId) });
-
-  return <div ref={setNodeRef}>{children(isOver)}</div>;
-}
-
-function DraggableTaskCard({
-  task,
-  disabled = false,
-  children,
-}: {
-  task: BoardTask;
-  disabled?: boolean;
-  children: (isDragging: boolean) => ReactNode;
-}) {
-  const { attributes, listeners, setNodeRef, transform, isDragging } =
-    useDraggable({ id: taskDragId(task.id), disabled });
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Translate.toString(transform) }}
-      {...(disabled ? {} : listeners)}
-      {...(disabled ? {} : attributes)}
-      className={isDragging ? 'z-20' : undefined}
-    >
-      {children(disabled ? false : isDragging)}
-    </div>
-  );
-}
-
-function shouldOpenEditSheet(value: string | null, projectId: number) {
-  if (!value) {
-    return false;
-  }
-
-  return value === '1' || value === 'true' || value === String(projectId);
-}
-
-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 clampPercent(value?: number | null) {
-  if (typeof value !== 'number' || Number.isNaN(value)) {
-    return 0;
-  }
-
-  return Math.max(0, Math.min(100, Math.round(value)));
-}
-
-function isPastDue(value?: string | null) {
-  if (!value) {
-    return false;
-  }
-
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return false;
-  }
-
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  date.setHours(0, 0, 0, 0);
-
-  return date < today;
-}
-
-function getTaskProgress(status: BoardColumnId) {
-  const progressByStatus: Record<BoardColumnId, number> = {
-    todo: 12,
-    doing: 48,
-    review: 76,
-    done: 100,
-  };
-
-  return progressByStatus[status];
-}
-
-function getPriorityClassName(priority: BoardTask['priority']) {
-  if (priority === 'high') {
-    return 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300';
-  }
-  if (priority === 'medium') {
-    return 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300';
-  }
-
-  return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300';
-}
-
-function getColumnClassName(columnId: BoardColumnId) {
-  const styles: Record<BoardColumnId, string> = {
-    todo: 'from-slate-500/20 via-slate-500/5 to-transparent',
-    doing: 'from-sky-500/20 via-cyan-500/5 to-transparent',
-    review: 'from-amber-500/20 via-yellow-500/5 to-transparent',
-    done: 'from-emerald-500/20 via-green-500/5 to-transparent',
-  };
-
-  return styles[columnId];
-}
-
-function getColumnDotClassName(columnId: BoardColumnId) {
-  const styles: Record<BoardColumnId, string> = {
-    todo: 'bg-slate-500',
-    doing: 'bg-sky-500',
-    review: 'bg-amber-500',
-    done: 'bg-emerald-500',
-  };
-
-  return styles[columnId];
-}
-
-function getTaskTags(task: BoardTask) {
-  return String(task.tags ?? '')
-    .split(',')
-    .map((tag) => tag.trim())
-    .filter(Boolean);
-}
-
-function getTaskCommentCount(task: BoardTask) {
-  return task.commentCount ?? 0;
-}
-
-function getTaskAttachmentCount(task: BoardTask) {
-  return task.fileCount ?? 0;
-}
-
-function getAllocationTone(allocation: number) {
-  if (allocation > 100) {
-    return {
-      labelKey: 'overload',
-      text: 'text-rose-700 dark:text-rose-300',
-      border: 'border-rose-500/30',
-      bg: 'bg-rose-500/10',
-      progress: '[&>div]:bg-rose-500',
-      icon: AlertTriangle,
-    };
-  }
-
-  if (allocation >= 85) {
-    return {
-      labelKey: 'high',
-      text: 'text-amber-700 dark:text-amber-300',
-      border: 'border-amber-500/30',
-      bg: 'bg-amber-500/10',
-      progress: '[&>div]:bg-amber-500',
-      icon: Gauge,
-    };
-  }
-
-  return {
-    labelKey: 'available',
-    text: 'text-emerald-700 dark:text-emerald-300',
-    border: 'border-emerald-500/30',
-    bg: 'bg-emerald-500/10',
-    progress: '[&>div]:bg-emerald-500',
-    icon: CheckCircle2,
-  };
-}
-
-type TimelineEventType =
-  | 'task'
-  | 'timesheet'
-  | 'approval'
-  | 'comment'
-  | 'status';
-
-type OperationalTimelineEvent = {
-  id: string;
-  type: TimelineEventType;
-  title: string;
-  description: string;
-  timestamp: string;
-  actorName?: string | null;
-  actorAvatarId?: number | null;
-  actorUserPhotoId?: number | null;
-  icon: LucideIcon;
-  toneClassName: string;
-};
-
-function getValidTimestamp(value?: string | null) {
-  if (!value) {
-    return null;
-  }
-
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return null;
-  }
-
-  return date.toISOString();
-}
-
-function formatRelativeTime(value: string, locale: string) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return '';
-  }
-
-  const diffSeconds = Math.round((date.getTime() - Date.now()) / 1000);
-  const units: Array<[Intl.RelativeTimeFormatUnit, number]> = [
-    ['year', 60 * 60 * 24 * 365],
-    ['month', 60 * 60 * 24 * 30],
-    ['day', 60 * 60 * 24],
-    ['hour', 60 * 60],
-    ['minute', 60],
-  ];
-  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
-
-  for (const [unit, seconds] of units) {
-    if (Math.abs(diffSeconds) >= seconds) {
-      return formatter.format(Math.round(diffSeconds / seconds), unit);
-    }
-  }
-
-  return formatter.format(diffSeconds, 'second');
-}
-
-function getTimelineDayKey(value: string) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return value;
-  }
-
-  return date.toISOString().slice(0, 10);
-}
-
-type ProjectHealth = {
-  value: number;
-  labelKey: 'good' | 'warning' | 'danger';
-  tone: 'good' | 'warning' | 'danger';
-};
-
-function getProjectHealthScore({
-  progress,
-  averageAllocation,
-  overdueTasks,
-  pendingTimesheets,
-}: {
-  progress?: number | null;
-  averageAllocation?: number | null;
-  overdueTasks: number;
-  pendingTimesheets: number;
-}): ProjectHealth {
-  const progressScore = clampPercent(progress);
-  const allocation =
-    typeof averageAllocation === 'number' && !Number.isNaN(averageAllocation)
-      ? Math.round(averageAllocation)
-      : 0;
-  const allocationPenalty = allocation > 100 ? 16 : allocation > 85 ? 6 : 0;
-  const overduePenalty = Math.min(overdueTasks * 9, 32);
-  const timesheetPenalty = Math.min(pendingTimesheets * 4, 20);
-  const value = clampPercent(
-    72 +
-      progressScore * 0.18 -
-      allocationPenalty -
-      overduePenalty -
-      timesheetPenalty
-  );
-
-  if (value >= 75) {
-    return { value, labelKey: 'good', tone: 'good' };
-  }
-  if (value >= 50) {
-    return { value, labelKey: 'warning', tone: 'warning' };
-  }
-
-  return { value, labelKey: 'danger', tone: 'danger' };
-}
-
-type ProjectKpiTone = 'positive' | 'warning' | 'critical' | 'info' | 'neutral';
-
-type ProjectKpiWidgetItem = {
-  key: string;
-  title: ReactNode;
-  value: ReactNode;
-  subtitle: ReactNode;
-  trend: ReactNode;
-  indicator: number;
-  icon: LucideIcon;
-  tone: ProjectKpiTone;
-};
-
-const kpiToneStyles: Record<
-  ProjectKpiTone,
-  {
-    accent: string;
-    icon: string;
-    value: string;
-    indicator: string;
-    trend: string;
-  }
-> = {
-  positive: {
-    accent: 'from-emerald-500/25 via-teal-500/10 to-transparent',
-    icon: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
-    value: 'text-emerald-700 dark:text-emerald-300',
-    indicator: 'bg-emerald-500',
-    trend: 'text-emerald-700 dark:text-emerald-300',
-  },
-  warning: {
-    accent: 'from-amber-500/25 via-yellow-500/10 to-transparent',
-    icon: 'bg-amber-500/10 text-amber-700 dark:text-amber-300',
-    value: 'text-amber-700 dark:text-amber-300',
-    indicator: 'bg-amber-500',
-    trend: 'text-amber-700 dark:text-amber-300',
-  },
-  critical: {
-    accent: 'from-rose-500/25 via-red-500/10 to-transparent',
-    icon: 'bg-rose-500/10 text-rose-700 dark:text-rose-300',
-    value: 'text-rose-700 dark:text-rose-300',
-    indicator: 'bg-rose-500',
-    trend: 'text-rose-700 dark:text-rose-300',
-  },
-  info: {
-    accent: 'from-sky-500/25 via-cyan-500/10 to-transparent',
-    icon: 'bg-sky-500/10 text-sky-700 dark:text-sky-300',
-    value: 'text-sky-700 dark:text-sky-300',
-    indicator: 'bg-sky-500',
-    trend: 'text-sky-700 dark:text-sky-300',
-  },
-  neutral: {
-    accent: 'from-violet-500/25 via-indigo-500/10 to-transparent',
-    icon: 'bg-violet-500/10 text-violet-700 dark:text-violet-300',
-    value: 'text-foreground',
-    indicator: 'bg-violet-500',
-    trend: 'text-muted-foreground',
-  },
-};
-
-function ProjectKpiWidget({
-  item,
-  indicatorLabel,
-  index = 0,
-}: {
-  item: ProjectKpiWidgetItem;
-  indicatorLabel: ReactNode;
-  index?: number;
-}) {
-  const Icon = item.icon;
-  const tone = kpiToneStyles[item.tone];
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 12 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{
-        type: 'spring',
-        stiffness: 340,
-        damping: 26,
-        delay: index * 0.07,
-      }}
-      whileHover={{ y: -4 }}
-      className="min-w-0"
-    >
-      <Card className="group relative h-full overflow-hidden border-border/70 bg-card py-0 shadow-xs transition-shadow hover:shadow-md">
-        <div
-          className={[
-            'absolute inset-x-0 top-0 h-20 bg-linear-to-br',
-            tone.accent,
-          ].join(' ')}
-        />
-        <CardContent className="relative flex h-full flex-col gap-5 p-4">
-          <div className="flex items-start justify-between gap-3">
-            <div
-              className={[
-                'flex size-10 items-center justify-center rounded-2xl transition-transform group-hover:scale-105',
-                tone.icon,
-              ].join(' ')}
-            >
-              <Icon className="size-5" />
-            </div>
-            <span
-              className={[
-                'rounded-full border bg-background/80 px-2 py-0.5 text-[11px] font-medium',
-                tone.trend,
-              ].join(' ')}
-            >
-              {item.trend}
-            </span>
-          </div>
-
-          <div className="min-w-0">
-            <div
-              className={[
-                'truncate text-3xl font-semibold tracking-tight tabular-nums',
-                tone.value,
-              ].join(' ')}
-            >
-              {item.value}
-            </div>
-            <div className="mt-1 text-sm font-medium text-foreground">
-              {item.title}
-            </div>
-            <div className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">
-              {item.subtitle}
-            </div>
-          </div>
-
-          <div className="mt-auto space-y-2">
-            <div className="flex items-center justify-between text-[11px] text-muted-foreground">
-              <span>{indicatorLabel}</span>
-              <span>{clampPercent(item.indicator)}%</span>
-            </div>
-            <div className="h-1.5 overflow-hidden rounded-full bg-muted">
-              <div
-                className={[
-                  'h-full rounded-full transition-all duration-500',
-                  tone.indicator,
-                ].join(' ')}
-                style={{ width: `${clampPercent(item.indicator)}%` }}
-              />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </motion.div>
-  );
-}
-
-function ChartEmptyState({
-  icon: Icon,
-  title,
-  description,
-}: {
-  icon: LucideIcon;
-  title: ReactNode;
-  description: ReactNode;
-}) {
-  return (
-    <div className="flex h-72 flex-col items-center justify-center rounded-xl border border-dashed bg-muted/10 p-6 text-center">
-      <div className="flex size-11 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
-        <Icon className="size-5" />
-      </div>
-      <div className="mt-3 text-sm font-medium">{title}</div>
-      <div className="mt-1 max-w-xs text-xs leading-5 text-muted-foreground">
-        {description}
-      </div>
-    </div>
-  );
-}
-
-function ProjectChartCard({
-  title,
-  description,
-  icon: Icon,
-  metric,
-  children,
-  className,
-  isLoading = false,
-}: {
-  title: ReactNode;
-  description?: ReactNode;
-  icon: LucideIcon;
-  metric?: ReactNode;
-  children: ReactNode;
-  className?: string;
-  isLoading?: boolean;
-}) {
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 8 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.22 }}
-      className={className}
-    >
-      <Card className="h-full overflow-hidden border-border/70 bg-card py-0 shadow-sm">
-        <CardContent className="flex h-full flex-col gap-4 p-4">
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex min-w-0 items-start gap-3">
-              <div className="flex size-10 shrink-0 items-center justify-center rounded-2xl bg-muted text-foreground">
-                <Icon className="size-5" />
-              </div>
-              <div className="min-w-0">
-                <div className="text-sm font-semibold">{title}</div>
-                {description ? (
-                  <div className="mt-1 text-xs leading-5 text-muted-foreground">
-                    {description}
-                  </div>
-                ) : null}
-              </div>
-            </div>
-            {metric ? (
-              <div className="shrink-0 rounded-full border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
-                {metric}
-              </div>
-            ) : null}
-          </div>
-          {isLoading ? <Skeleton className="h-72 rounded-xl" /> : children}
-        </CardContent>
-      </Card>
-    </motion.div>
-  );
-}
-
-function ProjectDetailsSkeleton() {
-  return (
-    <Page>
-      <div className="space-y-6">
-        {/* Hero header */}
-        <div className="overflow-hidden rounded-3xl border bg-card shadow-sm">
-          <div className="border-b p-5 sm:p-6">
-            <div className="space-y-4">
-              {/* Breadcrumb */}
-              <div className="flex items-center gap-2">
-                <Skeleton className="h-4 w-20 rounded-full" />
-                <Skeleton className="h-3 w-3 rounded-full" />
-                <Skeleton className="h-4 w-16 rounded-full" />
-                <Skeleton className="h-3 w-3 rounded-full" />
-                <Skeleton className="h-4 w-32 rounded-full" />
-              </div>
-              {/* Title row */}
-              <div className="flex items-start gap-4">
-                <Skeleton className="size-14 shrink-0 rounded-2xl" />
-                <div className="flex-1 space-y-2">
-                  <div className="flex gap-2">
-                    <Skeleton className="h-6 w-20 rounded-full" />
-                    <Skeleton className="h-6 w-16 rounded-full" />
-                  </div>
-                  <Skeleton className="h-8 w-72" />
-                  <Skeleton className="h-4 w-full max-w-md" />
-                </div>
-                <div className="hidden flex-shrink-0 gap-2 lg:flex">
-                  <Skeleton className="h-9 w-20 rounded-lg" />
-                  <Skeleton className="h-9 w-28 rounded-lg" />
-                  <Skeleton className="h-9 w-9 rounded-lg" />
-                </div>
-              </div>
-              {/* Meta grid */}
-              <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-7">
-                <Skeleton className="h-16 rounded-xl xl:col-span-2" />
-                <Skeleton className="h-16 rounded-xl" />
-                <Skeleton className="h-16 rounded-xl" />
-                <Skeleton className="h-16 rounded-xl" />
-                <Skeleton className="h-16 rounded-xl" />
-                <Skeleton className="h-16 rounded-xl" />
-              </div>
-              {/* Team row */}
-              <div className="rounded-2xl border p-4">
-                <div className="flex items-center justify-between gap-4">
-                  <div className="flex items-center gap-3">
-                    <div className="space-y-1">
-                      <Skeleton className="h-3 w-12" />
-                      <Skeleton className="h-5 w-24" />
-                    </div>
-                    <div className="flex -space-x-2">
-                      {Array.from({ length: 4 }).map((_, i) => (
-                        <Skeleton
-                          key={i}
-                          className="size-10 rounded-full border-2 border-background"
-                        />
-                      ))}
-                    </div>
-                  </div>
-                  <div className="grid grid-cols-3 gap-3">
-                    <Skeleton className="h-16 w-28 rounded-xl" />
-                    <Skeleton className="h-16 w-28 rounded-xl" />
-                    <Skeleton className="h-16 w-28 rounded-xl" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* KPI row */}
-        <div className="rounded-3xl border p-3 sm:p-4">
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-6">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <div key={i} className="overflow-hidden rounded-xl border p-4">
-                <div className="flex items-start justify-between gap-3">
-                  <Skeleton className="size-10 rounded-2xl" />
-                  <Skeleton className="h-5 w-16 rounded-full" />
-                </div>
-                <div className="mt-5 space-y-2">
-                  <Skeleton className="h-8 w-24" />
-                  <Skeleton className="h-4 w-32" />
-                  <Skeleton className="h-3 w-full" />
-                </div>
-                <div className="mt-auto pt-4 space-y-2">
-                  <div className="flex justify-between">
-                    <Skeleton className="h-3 w-16" />
-                    <Skeleton className="h-3 w-8" />
-                  </div>
-                  <Skeleton className="h-1.5 w-full rounded-full" />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Overview */}
-        <div className="rounded-xl border p-4">
-          <Skeleton className="mb-4 h-5 w-28" />
-          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-            {Array.from({ length: 9 }).map((_, i) => (
-              <div key={i} className="space-y-1.5">
-                <Skeleton className="h-3 w-20" />
-                <Skeleton className="h-5 w-32" />
-              </div>
-            ))}
-          </div>
-          <div className="mt-6 space-y-1.5">
-            <Skeleton className="h-3 w-16" />
-            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <div key={i} className="space-y-1.5">
-                  <Skeleton className="h-3 w-24" />
-                  <Skeleton className="h-5 w-36" />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Charts */}
-        <div className="rounded-3xl border p-4">
-          <Skeleton className="mb-4 h-5 w-36" />
-          <div className="grid gap-4 xl:grid-cols-12">
-            <Skeleton className="h-80 rounded-xl xl:col-span-8" />
-            <Skeleton className="h-80 rounded-xl xl:col-span-4" />
-            <Skeleton className="h-72 rounded-xl xl:col-span-5" />
-            <Skeleton className="h-72 rounded-xl xl:col-span-4" />
-            <Skeleton className="h-72 rounded-xl xl:col-span-3" />
-          </div>
-        </div>
-
-        {/* Kanban */}
-        <div className="rounded-3xl border p-4">
-          <div className="mb-4 flex items-center justify-between">
-            <Skeleton className="h-5 w-28" />
-            <Skeleton className="h-9 w-28 rounded-lg" />
-          </div>
-          <div className="mb-4 rounded-2xl border p-3">
-            <div className="flex gap-3">
-              <Skeleton className="h-10 flex-1 rounded-lg" />
-              <Skeleton className="h-10 w-44 rounded-lg" />
-              <Skeleton className="h-10 w-44 rounded-lg" />
-            </div>
-          </div>
-          <div className="grid gap-4 xl:grid-cols-4">
-            {Array.from({ length: 4 }).map((_, col) => (
-              <div
-                key={col}
-                className="min-h-48 rounded-3xl border p-3 space-y-3"
-              >
-                <div className="rounded-2xl border bg-background/85 p-3 flex items-center justify-between">
-                  <div className="space-y-1">
-                    <div className="flex items-center gap-2">
-                      <Skeleton className="size-2.5 rounded-full" />
-                      <Skeleton className="h-4 w-20" />
-                    </div>
-                    <Skeleton className="h-3 w-12" />
-                  </div>
-                  <Skeleton className="size-5 rounded-full" />
-                </div>
-                {Array.from({ length: col === 0 ? 3 : col === 1 ? 2 : 1 }).map(
-                  (_, card) => (
-                    <div
-                      key={card}
-                      className="rounded-2xl border bg-card p-3 space-y-3"
-                    >
-                      <div className="flex items-start justify-between gap-2">
-                        <div className="flex-1 space-y-1">
-                          <Skeleton className="h-4 w-full" />
-                          <Skeleton className="h-3 w-3/4" />
-                        </div>
-                        <Skeleton className="h-5 w-12 rounded-full" />
-                      </div>
-                      <div className="grid grid-cols-2 gap-2">
-                        <Skeleton className="h-8 rounded-xl" />
-                        <Skeleton className="h-8 rounded-xl" />
-                      </div>
-                      <div className="space-y-1.5">
-                        <Skeleton className="h-1.5 w-full rounded-full" />
-                      </div>
-                      <div className="flex items-center justify-between border-t pt-3">
-                        <div className="flex items-center gap-2">
-                          <Skeleton className="size-7 rounded-full" />
-                          <Skeleton className="h-3 w-20" />
-                        </div>
-                        <div className="flex gap-2">
-                          <Skeleton className="h-3 w-6" />
-                          <Skeleton className="h-3 w-6" />
-                        </div>
-                      </div>
-                    </div>
-                  )
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Timeline */}
-        <div className="rounded-3xl border p-4">
-          <Skeleton className="mb-4 h-5 w-24" />
-          <div className="rounded-3xl border p-4 space-y-6">
-            {Array.from({ length: 3 }).map((_, group) => (
-              <div key={group} className="space-y-3">
-                <Skeleton className="h-6 w-28 rounded-full" />
-                {Array.from({ length: 2 }).map((_, event) => (
-                  <div key={event} className="grid grid-cols-[2rem_1fr] gap-3">
-                    <div className="flex flex-col items-center">
-                      <Skeleton className="size-8 rounded-full" />
-                      {event === 0 ? (
-                        <div className="w-px flex-1 bg-border mt-1" />
-                      ) : null}
-                    </div>
-                    <div className="pb-5">
-                      <div className="rounded-2xl border p-4 space-y-3">
-                        <div className="flex justify-between">
-                          <div className="space-y-1.5">
-                            <Skeleton className="h-4 w-40" />
-                            <Skeleton className="h-3 w-56" />
-                          </div>
-                          <Skeleton className="h-3 w-16" />
-                        </div>
-                        <div className="flex items-center gap-2 border-t pt-3">
-                          <Skeleton className="size-7 rounded-full" />
-                          <Skeleton className="h-3 w-24" />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </Page>
-  );
-}
-
-export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
-  const t = useTranslations('operations.ProjectDetailsPage');
-  const commonT = useTranslations('operations.Common');
-  const formT = useTranslations('operations.ProjectFormPage');
-  const contractT = useTranslations('operations.ContractFormPage');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-  const access = useOperationsAccess();
-  const isLimitedView = !access.isDirector && !access.isSupervisor;
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const getProjectStatusLabel = (value?: string | null) => {
-    if (!value) return commonT('labels.notAvailable');
-    try {
-      return formT(`options.statuses.${value}`);
-    } catch {
-      return formatEnumLabel(value);
-    }
-  };
-  const getContractStatusLabel = (value?: string | null) => {
-    if (!value) return commonT('labels.notAvailable');
-    try {
-      return contractT(`options.statuses.${value}`);
-    } catch {
-      return formatEnumLabel(value);
-    }
-  };
-  const getContractCategoryLabel = (value?: string | null) => {
-    if (!value) return commonT('labels.notAvailable');
-    try {
-      return contractT(`options.contractCategories.${value}`);
-    } catch {
-      return formatEnumLabel(value);
-    }
-  };
-  const getContractTypeLabel = (value?: string | null) => {
-    if (!value) return commonT('labels.notAvailable');
-    try {
-      return contractT(`options.contractTypes.${value}`);
-    } catch {
-      return formatEnumLabel(value);
-    }
-  };
-  const getSignatureStatusLabel = (value?: string | null) => {
-    if (!value) return commonT('labels.notAvailable');
-    try {
-      return contractT(`options.signatureStatuses.${value}`);
-    } catch {
-      return formatEnumLabel(value);
-    }
-  };
-
-  const isEditSheetOpen = useMemo(
-    () =>
-      !isLimitedView &&
-      shouldOpenEditSheet(searchParams.get('edit'), projectId),
-    [isLimitedView, projectId, searchParams]
-  );
-
-  const updateSheetQuery = (open: boolean) => {
-    const params = new URLSearchParams(searchParams.toString());
-
-    if (open) {
-      params.set('edit', '1');
-    } else {
-      params.delete('edit');
-    }
-
-    const query = params.toString();
-    router.replace(query ? `${pathname}?${query}` : pathname, {
-      scroll: false,
-    });
-  };
-
-  const openEditSheet = () => {
-    updateSheetQuery(true);
-  };
-
-  const closeEditSheet = () => {
-    updateSheetQuery(false);
-  };
-
-  const getDeliveryModelLabel = (value?: string | null) => {
-    if (!value) {
-      return commonT('labels.notAvailable');
-    }
-
-    try {
-      return formT(`options.deliveryModels.${value}`);
-    } catch {
-      return formatEnumLabel(value);
-    }
-  };
-
-  const getBillingModelLabel = (value?: string | null) => {
-    if (!value) {
-      return commonT('labels.notAvailable');
-    }
-
-    try {
-      return formT(`options.billingModels.${value}`);
-    } catch {
-      return formatEnumLabel(value);
-    }
-  };
-
-  const getTaskPriorityLabel = (value?: string | null) => {
-    const labels = currentLocaleCode.startsWith('pt')
-      ? { low: 'Baixa', medium: 'Média', high: 'Alta' }
-      : { low: 'Low', medium: 'Medium', high: 'High' };
-
-    return labels[value as keyof typeof labels] ?? formatEnumLabel(value);
-  };
-
-  const {
-    data: project,
-    refetch,
-    isLoading: isProjectLoading,
-  } = useQuery<OperationsProjectDetails>({
-    queryKey: ['operations-project-details', currentLocaleCode, projectId],
-    queryFn: () =>
-      fetchOperations<OperationsProjectDetails>(
-        request,
-        `/operations/projects/${projectId}`
-      ),
-  });
-
-  const {
-    data: rawTasks = [],
-    refetch: refetchTasks,
-    isLoading: isTasksLoading,
-  } = useQuery<ApiBoardTask[]>({
-    queryKey: ['operations-project-board-tasks', projectId],
-    queryFn: () =>
-      fetchOperations<ApiBoardTask[]>(
-        request,
-        `/operations/projects/${projectId}/tasks`
-      ),
-    enabled: Boolean(project),
-  });
-
-  const { data: archivedTasksResponse, refetch: refetchArchivedTasks } =
-    useQuery<{ data: OperationsTaskOption[] }>({
-      queryKey: ['operations-project-archived-tasks', projectId],
-      queryFn: () =>
-        fetchOperations<{ data: OperationsTaskOption[] }>(
-          request,
-          `/operations/tasks?projectId=${projectId}&pageSize=100&sortField=createdAt&sortOrder=desc&archived=true`
-        ),
-      enabled: Boolean(project),
-    });
-
-  const { data: projectStats, isLoading: isProjectStatsLoading } = useQuery<{
-    weeklyVelocity: Array<{ weekLabel: string; loggedHours: number }>;
-    allocationByCollaborator: Array<{ name: string; allocation: number }>;
-    quickRadar: {
-      activeAssignments: number;
-      pendingTimesheets: number;
-      totalWeeklyHours: number;
-    };
-  }>({
-    queryKey: ['operations-project-stats', projectId],
-    queryFn: () =>
-      fetchOperations(request, `/operations/projects/${projectId}/stats`),
-    enabled: Boolean(project) && !isLimitedView,
-  });
-
-  const [boardState, setBoardState] = useState<BoardState | null>(null);
-  const [selectedTask, setSelectedTask] = useState<TaskDetailSheetData | null>(
-    null
-  );
-  const [taskFormOpen, setTaskFormOpen] = useState(false);
-  const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
-  const [taskFormData, setTaskFormData] =
-    useState<TaskFormState>(EMPTY_TASK_FORM);
-  const [taskFormLoading, setTaskFormLoading] = useState(false);
-  const [deletePromptTask, setDeletePromptTask] =
-    useState<TaskDetailSheetData | null>(null);
-  const [inlineCreateColumn, setInlineCreateColumn] =
-    useState<BoardColumnId | null>(null);
-  const [inlineCreateName, setInlineCreateName] = useState('');
-  const [inlineCreateLoading, setInlineCreateLoading] = useState(false);
-  const [boardSearch, setBoardSearch] = useState('');
-  const [boardPriorityFilter, setBoardPriorityFilter] = useState<
-    'all' | BoardTask['priority']
-  >('all');
-  const [boardGroupMode, setBoardGroupMode] = useState('status');
-  const [timelineTypeFilter, setTimelineTypeFilter] = useState<
-    'all' | TimelineEventType
-  >('all');
-  const [timelineVisibleCount, setTimelineVisibleCount] = useState(8);
-  const [archivingTaskId, setArchivingTaskId] = useState<number | null>(null);
-  const [restoringTaskId, setRestoringTaskId] = useState<number | null>(null);
-  const [deletingTaskId, setDeletingTaskId] = useState<number | null>(null);
-  const [activeDragTask, setActiveDragTask] = useState<BoardTask | null>(null);
-
-  const apiTasks = useMemo(() => rawTasks.map(apiTaskToBoardTask), [rawTasks]);
-  const archivedTasks = useMemo(
-    () =>
-      (archivedTasksResponse?.data ?? []).filter((task) =>
-        Boolean(task.deletedAt)
-      ),
-    [archivedTasksResponse]
-  );
-
-  const taskColumns: BoardColumns = useMemo(() => {
-    if (project && boardState?.projectId === project.id) {
-      return boardState.columns;
-    }
-    return splitTasksByColumn(apiTasks);
-  }, [project, boardState, apiTasks]);
-
-  const filteredTaskColumns: BoardColumns = useMemo(() => {
-    const normalizedSearch = boardSearch.trim().toLocaleLowerCase();
-    const filterTask = (task: BoardTask) => {
-      const matchesSearch =
-        !normalizedSearch ||
-        [
-          task.name,
-          task.description,
-          task.assigneeName,
-          task.tags,
-          task.priority,
-        ]
-          .filter(Boolean)
-          .some((value) =>
-            String(value).toLocaleLowerCase().includes(normalizedSearch)
-          );
-      const matchesPriority =
-        boardPriorityFilter === 'all' || task.priority === boardPriorityFilter;
-
-      return matchesSearch && matchesPriority;
-    };
-
-    return {
-      todo: taskColumns.todo.filter(filterTask),
-      doing: taskColumns.doing.filter(filterTask),
-      review: taskColumns.review.filter(filterTask),
-      done: taskColumns.done.filter(filterTask),
-    };
-  }, [boardPriorityFilter, boardSearch, taskColumns]);
-
-  const taskAssigneeOptions = useMemo(() => {
-    const seen = new Set<number>();
-    return (
-      project?.assignments
-        .filter((assignment) => {
-          if (
-            !assignment.collaboratorId ||
-            seen.has(assignment.collaboratorId)
-          ) {
-            return false;
-          }
-          seen.add(assignment.collaboratorId);
-          return true;
-        })
-        .map((assignment) => ({
-          id: String(assignment.collaboratorId),
-          label: assignment.collaboratorName,
-        })) ?? []
-    );
-  }, [project]);
-
-  const openCreateTaskForm = useCallback(
-    (defaultStatus: BoardColumnId = 'todo') => {
-      setEditingTaskId(null);
-      setTaskFormData({ ...EMPTY_TASK_FORM, status: defaultStatus });
-      setTaskFormOpen(true);
-    },
-    []
-  );
-
-  const openEditTaskForm = useCallback((task: BoardTask) => {
-    setEditingTaskId(task.id);
-    setTaskFormData({
-      name: task.name,
-      description: task.description ?? '',
-      priority: task.priority,
-      status: task.status,
-      assigneeCollaboratorId: task.assigneeCollaboratorId
-        ? String(task.assigneeCollaboratorId)
-        : 'none',
-      dueDate: normalizeDateInputValue(task.dueDate),
-      estimateHours:
-        task.estimateHours != null ? String(task.estimateHours) : '',
-      tags: task.tags ?? '',
-    });
-    setSelectedTask(null);
-    setTaskFormOpen(true);
-  }, []);
-
-  const handleTaskFormSubmit = useCallback(async () => {
-    if (!taskFormData.name.trim()) return;
-    setTaskFormLoading(true);
-    try {
-      const payload: Record<string, unknown> = {
-        name: taskFormData.name.trim(),
-        description: taskFormData.description || null,
-        priority: taskFormData.priority,
-        status: taskFormData.status,
-        assigneeCollaboratorId:
-          taskFormData.assigneeCollaboratorId !== 'none'
-            ? Number(taskFormData.assigneeCollaboratorId)
-            : null,
-        dueDate: taskFormData.dueDate || null,
-        estimateHours: taskFormData.estimateHours
-          ? Number(taskFormData.estimateHours)
-          : null,
-        tags: taskFormData.tags || null,
-      };
-      if (editingTaskId) {
-        await mutateOperations(
-          request,
-          `/operations/tasks/${editingTaskId}`,
-          'PATCH',
-          payload
-        );
-      } else {
-        await mutateOperations(request, '/operations/tasks', 'POST', {
-          projectId,
-          ...payload,
-        });
-      }
-      setBoardState(null);
-      await refetchTasks();
-      await refetchArchivedTasks();
-      setTaskFormOpen(false);
-      setEditingTaskId(null);
-      setTaskFormData(EMPTY_TASK_FORM);
-    } finally {
-      setTaskFormLoading(false);
-    }
-  }, [
-    taskFormData,
-    editingTaskId,
-    projectId,
-    request,
-    refetchTasks,
-    refetchArchivedTasks,
-  ]);
-
-  const handleArchiveTask = useCallback(
-    async (taskId: number) => {
-      setArchivingTaskId(taskId);
-      try {
-        await mutateOperations(
-          request,
-          `/operations/tasks/${taskId}`,
-          'PATCH',
-          {
-            archived: true,
-          }
-        );
-        setBoardState(null);
-        setSelectedTask(null);
-        await refetchTasks();
-        await refetchArchivedTasks();
-      } catch {
-        // ignore
-      } finally {
-        setArchivingTaskId(null);
-      }
-    },
-    [request, refetchTasks, refetchArchivedTasks]
-  );
-
-  const handleRestoreTask = useCallback(
-    async (taskId: number) => {
-      setRestoringTaskId(taskId);
-      try {
-        await mutateOperations(
-          request,
-          `/operations/tasks/${taskId}`,
-          'PATCH',
-          {
-            archived: false,
-          }
-        );
-        setSelectedTask(null);
-        await refetchTasks();
-        await refetchArchivedTasks();
-      } catch {
-        // ignore
-      } finally {
-        setRestoringTaskId(null);
-      }
-    },
-    [request, refetchTasks, refetchArchivedTasks]
-  );
-
-  const handleInlineCreateTask = useCallback(
-    async (column: BoardColumnId, name: string) => {
-      const trimmed = name.trim();
-      if (!trimmed) {
-        setInlineCreateColumn(null);
-        setInlineCreateName('');
-        return;
-      }
-      setInlineCreateLoading(true);
-      try {
-        await mutateOperations(request, '/operations/tasks', 'POST', {
-          projectId,
-          name: trimmed,
-          status: column,
-          priority: 'medium',
-        });
-        setBoardState(null);
-        setInlineCreateColumn(null);
-        setInlineCreateName('');
-        await refetchTasks();
-      } finally {
-        setInlineCreateLoading(false);
-      }
-    },
-    [projectId, request, refetchTasks]
-  );
-
-  const handleDeleteTask = useCallback(
-    async (taskId: number) => {
-      setDeletingTaskId(taskId);
-      try {
-        await mutateOperations(
-          request,
-          `/operations/tasks/${taskId}?permanent=true`,
-          'DELETE'
-        );
-        setBoardState(null);
-        setSelectedTask(null);
-        setDeletePromptTask(null);
-        await refetchTasks();
-        await refetchArchivedTasks();
-      } catch {
-        // ignore
-      } finally {
-        setDeletingTaskId(null);
-      }
-    },
-    [request, refetchTasks, refetchArchivedTasks]
-  );
-
-  const allocationChartData = useMemo(() => {
-    if (projectStats?.allocationByCollaborator?.length) {
-      return projectStats.allocationByCollaborator;
-    }
-    if (!project) {
-      return [];
-    }
-    return project.assignments.slice(0, 6).map((assignment) => ({
-      name: getInitials(assignment.collaboratorName),
-      allocation:
-        typeof assignment.allocationPercent === 'number'
-          ? Math.round(assignment.allocationPercent)
-          : 0,
-    }));
-  }, [project, projectStats]);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: { distance: 6 },
-    })
-  );
-
-  const velocityChartData = useMemo(() => {
-    if (projectStats?.weeklyVelocity?.length) {
-      return projectStats.weeklyVelocity.map((row) => ({
-        week: row.weekLabel,
-        loggedHours: row.loggedHours,
-        completedTasks: 0,
-      }));
-    }
-    return [];
-  }, [projectStats]);
-
-  const findColumnByTask = useCallback(
-    (taskId: number) => {
-      const match = KANBAN_COLUMNS.find((column) =>
-        taskColumns[column.id].some((task) => task.id === taskId)
-      );
-
-      return match?.id ?? null;
-    },
-    [taskColumns]
-  );
-
-  const moveTaskToColumn = useCallback(
-    (taskId: number, targetColumn: BoardColumnId) => {
-      const originColumn = findColumnByTask(taskId);
-      if (!originColumn || originColumn === targetColumn) {
-        return;
-      }
-
-      const sourceTask = taskColumns[originColumn].find(
-        (task) => task.id === taskId
-      );
-      if (!sourceTask || !project) {
-        return;
-      }
-
-      // Optimistic update
-      setBoardState({
-        projectId: project.id,
-        columns: {
-          ...taskColumns,
-          [originColumn]: taskColumns[originColumn].filter(
-            (task) => task.id !== taskId
-          ),
-          [targetColumn]: [
-            { ...sourceTask, status: targetColumn },
-            ...taskColumns[targetColumn],
-          ],
-        },
-      });
-
-      // Persist to API
-      mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
-        status: targetColumn,
-      }).catch(() => {
-        // Rollback optimistic update on error
-        setBoardState(null);
-        void refetchTasks();
-      });
-    },
-    [findColumnByTask, taskColumns, project, request, refetchTasks]
-  );
-
-  const onBoardDragStart = (event: DragStartEvent) => {
-    const taskId = parseTaskId(event.active.id);
-    if (!taskId) return;
-    const col = findColumnByTask(taskId);
-    if (!col) return;
-    const task = taskColumns[col].find((t) => t.id === taskId) ?? null;
-    setActiveDragTask(task);
-  };
-
-  const onBoardDragEnd = (event: DragEndEvent) => {
-    setActiveDragTask(null);
-    const taskId = parseTaskId(event.active.id);
-    const targetColumn = parseColumnId(event.over?.id);
-
-    if (!taskId || !targetColumn) {
-      return;
-    }
-
-    moveTaskToColumn(taskId, targetColumn);
-  };
-
-  const timelineEvents = useMemo<OperationalTimelineEvent[]>(() => {
-    if (!project) {
-      return [];
-    }
-
-    const events: OperationalTimelineEvent[] = [];
-    const projectStart = getValidTimestamp(project.startDate);
-    const projectEnd = getValidTimestamp(project.endDate);
-
-    if (projectStart) {
-      events.push({
-        id: `project-start-${project.id}`,
-        type: 'status',
-        title: t('timeline.projectStarted'),
-        description: t('timeline.projectStartedDescription', {
-          project: project.name,
-        }),
-        timestamp: projectStart,
-        actorName: project.managerName,
-        actorAvatarId: project.managerAvatarId,
-        icon: Rocket,
-        toneClassName: 'bg-sky-500 text-white',
-      });
-    }
-
-    if (projectEnd) {
-      events.push({
-        id: `project-deadline-${project.id}`,
-        type: 'status',
-        title: t('timeline.targetDate'),
-        description: t('timeline.targetDateDescription'),
-        timestamp: projectEnd,
-        actorName: project.managerName,
-        actorAvatarId: project.managerAvatarId,
-        icon: CalendarClock,
-        toneClassName: isPastDue(project.endDate)
-          ? 'bg-rose-500 text-white'
-          : 'bg-violet-500 text-white',
-      });
-    }
-
-    apiTasks.forEach((task) => {
-      const taskCreatedAt =
-        getValidTimestamp(task.createdAt) ??
-        getValidTimestamp(task.dueDate) ??
-        projectStart;
-      const actorName = task.assigneeName || project.managerName;
-
-      if (taskCreatedAt) {
-        events.push({
-          id: `task-created-${task.id}`,
-          type: 'task',
-          title: t('timeline.taskCreated'),
-          description: task.name,
-          timestamp: taskCreatedAt,
-          actorName,
-          actorAvatarId: task.assigneePersonAvatarId,
-          actorUserPhotoId: task.assigneeUserPhotoId,
-          icon: Plus,
-          toneClassName: 'bg-slate-500 text-white',
-        });
-      }
-
-      if (task.status === 'done') {
-        events.push({
-          id: `task-done-${task.id}`,
-          type: 'status',
-          title: t('timeline.taskCompleted'),
-          description: task.name,
-          timestamp:
-            getValidTimestamp(task.dueDate) ??
-            taskCreatedAt ??
-            new Date().toISOString(),
-          actorName,
-          actorAvatarId: task.assigneePersonAvatarId,
-          actorUserPhotoId: task.assigneeUserPhotoId,
-          icon: CheckCircle2,
-          toneClassName: 'bg-emerald-500 text-white',
-        });
-      }
-
-      if (task.description) {
-        events.push({
-          id: `task-comment-${task.id}`,
-          type: 'comment',
-          title: t('timeline.commentAdded'),
-          description: task.name,
-          timestamp: taskCreatedAt ?? new Date().toISOString(),
-          actorName,
-          actorAvatarId: task.assigneePersonAvatarId,
-          actorUserPhotoId: task.assigneeUserPhotoId,
-          icon: MessageSquare,
-          toneClassName: 'bg-indigo-500 text-white',
-        });
-      }
-    });
-
-    if (project.timesheetSummary.totalTimesheets > 0) {
-      events.push({
-        id: `timesheets-${project.id}`,
-        type: 'timesheet',
-        title: t('timeline.timesheetLogged'),
-        description: t('timeline.timesheetLoggedDescription', {
-          count: project.timesheetSummary.totalTimesheets,
-          hours: formatHours(project.timesheetSummary.totalHours),
-        }),
-        timestamp: new Date().toISOString(),
-        actorName: project.managerName,
-        actorAvatarId: project.managerAvatarId,
-        icon: Timer,
-        toneClassName: 'bg-cyan-500 text-white',
-      });
-    }
-
-    if (project.timesheetSummary.pendingTimesheets > 0) {
-      events.push({
-        id: `approvals-${project.id}`,
-        type: 'approval',
-        title: t('timeline.approvalPending'),
-        description: t('timeline.approvalPendingDescription', {
-          count: project.timesheetSummary.pendingTimesheets,
-        }),
-        timestamp: new Date().toISOString(),
-        actorName: project.managerName,
-        actorAvatarId: project.managerAvatarId,
-        icon: GitCommitHorizontal,
-        toneClassName: 'bg-amber-500 text-white',
-      });
-    }
-
-    return events.sort(
-      (a, b) =>
-        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-    );
-  }, [apiTasks, project, t]);
-
-  if (isProjectLoading) {
-    return <ProjectDetailsSkeleton />;
-  }
-
-  if (!project) {
-    return (
-      <Page>
-        <OperationsHeader
-          title={t('title')}
-          description={t('description')}
-          current={t('breadcrumb')}
-        />
-        <EmptyState
-          icon={<FolderKanban className="size-12" />}
-          title={commonT('states.emptyTitle')}
-          description={t('notFound')}
-          actionLabel={commonT('actions.refresh')}
-          onAction={() => void refetch()}
-        />
-      </Page>
-    );
-  }
-
-  const totalTasks = apiTasks.length;
-  const completedTasks = taskColumns.done.length;
-  const pendingTasks = totalTasks - completedTasks;
-  const activeCollaborators =
-    project.operationalIndicators.activeAssignments ||
-    project.assignments.filter((assignment) => assignment.status === 'active')
-      .length ||
-    project.assignments.length;
-  const overdueTasks = apiTasks.filter(
-    (task) => task.status !== 'done' && isPastDue(task.dueDate)
-  ).length;
-  const projectProgress = clampPercent(project.progressPercent);
-  const taskProgress =
-    totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
-  const displayedProgress = projectProgress || taskProgress;
-  const averageAllocation = clampPercent(
-    project.operationalIndicators.averageAllocation
-  );
-  const weeklyVelocity =
-    projectStats?.weeklyVelocity?.at(-1)?.loggedHours ??
-    projectStats?.quickRadar?.totalWeeklyHours ??
-    project.operationalIndicators.totalWeeklyHours;
-  const projectHealth = getProjectHealthScore({
-    progress: displayedProgress,
-    averageAllocation,
-    overdueTasks,
-    pendingTimesheets: project.timesheetSummary.pendingTimesheets,
-  });
-  const projectHealthLabel =
-    projectHealth.labelKey === 'good'
-      ? t('health.good')
-      : projectHealth.labelKey === 'warning'
-        ? t('health.warning')
-        : t('health.danger');
-  const projectHealthTrend =
-    projectHealth.labelKey === 'good'
-      ? t('kpi.trends.health.good')
-      : projectHealth.labelKey === 'warning'
-        ? t('kpi.trends.health.warning')
-        : t('kpi.trends.health.danger');
-  const teamPreview = project.assignments.slice(0, 5);
-  const hiddenTeamCount = Math.max(
-    project.assignments.length - teamPreview.length,
-    0
-  );
-  const overloadedAssignments = project.assignments.filter(
-    (assignment) => (assignment.allocationPercent ?? 0) > 100
-  ).length;
-  const highAllocationAssignments = project.assignments.filter((assignment) => {
-    const allocation = assignment.allocationPercent ?? 0;
-    return allocation >= 85 && allocation <= 100;
-  }).length;
-  const availableAssignments = project.assignments.filter(
-    (assignment) => (assignment.allocationPercent ?? 0) < 85
-  ).length;
-  const burnupChartData =
-    velocityChartData.length > 0
-      ? velocityChartData.reduce<
-          Array<{ week: string; loggedHours: number; planned: number }>
-        >((items, row, index) => {
-          const previous = items[index - 1]?.loggedHours ?? 0;
-          const loggedHours = previous + Number(row.loggedHours ?? 0);
-          const planned =
-            project.operationalIndicators.totalWeeklyHours > 0
-              ? project.operationalIndicators.totalWeeklyHours * (index + 1)
-              : loggedHours;
-          items.push({ week: row.week, loggedHours, planned });
-          return items;
-        }, [])
-      : [
-          { week: t('charts.start'), loggedHours: 0, planned: 0 },
-          {
-            week: t('charts.current'),
-            loggedHours: project.timesheetSummary.totalHours,
-            planned:
-              project.operationalIndicators.totalWeeklyHours ||
-              project.timesheetSummary.totalHours,
-          },
-        ];
-  const taskDistributionData = KANBAN_COLUMNS.map((column) => ({
-    key: column.id,
-    name: column.label,
-    value: taskColumns[column.id].length,
-    fill: `var(--color-${column.id})`,
-  })).filter((item) => item.value > 0);
-  const healthChartData = [
-    {
-      name: t('charts.healthScore'),
-      value: projectHealth.value,
-      fill:
-        projectHealth.tone === 'danger'
-          ? 'hsl(0 84% 60%)'
-          : projectHealth.tone === 'warning'
-            ? 'hsl(38 92% 50%)'
-            : 'var(--color-health)',
-    },
-  ];
-  const chartDashboardLoading = isProjectStatsLoading || isTasksLoading;
-  const filteredTimelineEvents = timelineEvents.filter(
-    (event) => timelineTypeFilter === 'all' || event.type === timelineTypeFilter
-  );
-  const visibleTimelineEvents = filteredTimelineEvents.slice(
-    0,
-    timelineVisibleCount
-  );
-  const groupedTimelineEvents = visibleTimelineEvents.reduce<
-    Array<{ dayKey: string; events: OperationalTimelineEvent[] }>
-  >((groups, event) => {
-    const dayKey = getTimelineDayKey(event.timestamp);
-    const currentGroup = groups[groups.length - 1];
-    if (currentGroup?.dayKey === dayKey) {
-      currentGroup.events.push(event);
-    } else {
-      groups.push({ dayKey, events: [event] });
-    }
-    return groups;
-  }, []);
-
-  const allocationTone: ProjectKpiTone =
-    project.operationalIndicators.averageAllocation > 100
-      ? 'critical'
-      : project.operationalIndicators.averageAllocation > 85
-        ? 'warning'
-        : 'positive';
-  const pendingTasksTone: ProjectKpiTone =
-    overdueTasks > 0 ? 'critical' : pendingTasks > 0 ? 'warning' : 'positive';
-  const velocityTone: ProjectKpiTone = weeklyVelocity > 0 ? 'positive' : 'info';
-
-  const kpiWidgets: ProjectKpiWidgetItem[] = [
-    {
-      key: 'hours',
-      title: t('cards.loggedHours'),
-      value: formatHours(project.timesheetSummary.totalHours),
-      subtitle: t('cards.loggedHoursDescription'),
-      trend: t('kpi.trends.hours', {
-        count: project.timesheetSummary.totalTimesheets,
-      }),
-      indicator: Math.min(project.timesheetSummary.totalHours, 100),
-      icon: Timer,
-      tone: 'info',
-    },
-    {
-      key: 'health',
-      title: t('cards.projectHealth'),
-      value: projectHealthLabel,
-      subtitle: t('kpi.subtitles.health'),
-      trend: projectHealthTrend,
-      indicator: projectHealth.value,
-      icon: HeartPulse,
-      tone:
-        projectHealth.tone === 'danger'
-          ? 'critical'
-          : projectHealth.tone === 'warning'
-            ? 'warning'
-            : 'positive',
-    },
-    {
-      key: 'velocity',
-      title: t('cards.weeklyVelocity'),
-      value: formatHours(weeklyVelocity),
-      subtitle: t('cards.weeklyVelocityDescription'),
-      trend:
-        weeklyVelocity > 0
-          ? t('kpi.trends.velocity.active')
-          : t('kpi.trends.velocity.empty'),
-      indicator: Math.min(weeklyVelocity, 100),
-      icon: TrendingUp,
-      tone: velocityTone,
-    },
-    {
-      key: 'allocation',
-      title: t('cards.allocation'),
-      value: formatPercent(project.operationalIndicators.averageAllocation),
-      subtitle: t('cards.allocationDescription'),
-      trend:
-        allocationTone === 'critical'
-          ? t('kpi.trends.allocation.critical')
-          : allocationTone === 'warning'
-            ? t('kpi.trends.allocation.warning')
-            : t('kpi.trends.allocation.good'),
-      indicator: averageAllocation,
-      icon: Gauge,
-      tone: allocationTone,
-    },
-    {
-      key: 'pendingTasks',
-      title: t('cards.pendingTasks'),
-      value: pendingTasks,
-      subtitle: t('cards.pendingTasksDescription', { overdue: overdueTasks }),
-      trend:
-        pendingTasksTone === 'critical'
-          ? t('kpi.trends.tasks.critical', { count: overdueTasks })
-          : pendingTasksTone === 'warning'
-            ? t('kpi.trends.tasks.warning')
-            : t('kpi.trends.tasks.good'),
-      indicator:
-        totalTasks > 0 ? Math.round((pendingTasks / totalTasks) * 100) : 0,
-      icon: ClipboardList,
-      tone: pendingTasksTone,
-    },
-    {
-      key: 'activeCollaborators',
-      title: t('cards.activeCollaborators'),
-      value: activeCollaborators,
-      subtitle: t('cards.activeCollaboratorsDescription'),
-      trend:
-        activeCollaborators > 0
-          ? t('kpi.trends.collaborators.active')
-          : t('kpi.trends.collaborators.empty'),
-      indicator:
-        project.assignments.length > 0
-          ? Math.round((activeCollaborators / project.assignments.length) * 100)
-          : 0,
-      icon: Users,
-      tone: activeCollaborators > 0 ? 'positive' : 'warning',
-    },
-  ];
-
-  return (
-    <Page>
-      <motion.section
-        initial={{ opacity: 0, y: 10 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25 }}
-        className="overflow-hidden rounded-3xl border bg-card shadow-sm"
-      >
-        <div className="relative overflow-hidden border-b bg-linear-to-br from-muted/70 via-background to-background p-5 sm:p-6">
-          <div className="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-primary/40 to-transparent" />
-          <div className="flex flex-col gap-6">
-            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-              <div className="min-w-0 space-y-4">
-                <nav
-                  aria-label="Breadcrumb"
-                  className="flex min-w-0 flex-wrap items-center gap-1.5 text-xs text-muted-foreground"
-                >
-                  <Link
-                    href="/operations/projects"
-                    className="transition hover:text-foreground"
-                  >
-                    {t('breadcrumbTrail.operations')}
-                  </Link>
-                  <ChevronRight className="size-3.5" />
-                  <Link
-                    href="/operations/projects"
-                    className="transition hover:text-foreground"
-                  >
-                    {t('breadcrumbTrail.projects')}
-                  </Link>
-                  <ChevronRight className="size-3.5" />
-                  <span className="max-w-[12rem] truncate font-medium text-foreground sm:max-w-md">
-                    {project.code || project.name}
-                  </span>
-                </nav>
-
-                <div className="flex min-w-0 items-start gap-4">
-                  <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border bg-background shadow-xs">
-                    <FolderKanban className="size-7 text-primary" />
-                  </div>
-                  <div className="min-w-0 space-y-2">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <span className="rounded-full border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
-                        {project.code || commonT('labels.notAvailable')}
-                      </span>
-                      <StatusBadge
-                        label={getProjectStatusLabel(project.status)}
-                        className={getStatusBadgeClass(project.status)}
-                      />
-                    </div>
-                    <div className="space-y-1.5">
-                      <h1 className="max-w-5xl text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
-                        {project.name}
-                      </h1>
-                      <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
-                        {project.summary || t('executive.fallbackDescription')}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex flex-wrap gap-2 lg:justify-end">
-                {access.isDirector ? (
-                  <Button
-                    size="sm"
-                    onClick={openEditSheet}
-                    className="cursor-pointer gap-2"
-                  >
-                    <Pencil className="size-4" />
-                    {commonT('actions.edit')}
-                  </Button>
-                ) : null}
-                {!isLimitedView ? (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => openCreateTaskForm()}
-                    className="cursor-pointer gap-2"
-                  >
-                    <Plus className="size-4" />
-                    {t('taskForm.titleNew')}
-                  </Button>
-                ) : null}
-                <Button variant="outline" size="sm" asChild>
-                  <Link href="/operations/timesheets">
-                    <Timer className="size-4" />
-                    {t('quickActions.timesheet')}
-                  </Link>
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className="size-9 cursor-pointer"
-                      aria-label={t('quickActions.more')}
-                    >
-                      <MoreHorizontal className="size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-56">
-                    <DropdownMenuItem asChild>
-                      <Link href="/operations/reports/projects">
-                        <BarChart2 className="size-4" />
-                        {t('quickActions.reports')}
-                      </Link>
-                    </DropdownMenuItem>
-                    {project.contractId ? (
-                      <DropdownMenuItem asChild>
-                        <Link
-                          href={`/operations/contracts?edit=${project.contractId}`}
-                        >
-                          <FileText className="size-4" />
-                          {commonT('actions.openContract')}
-                        </Link>
-                      </DropdownMenuItem>
-                    ) : null}
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem asChild>
-                      <Link href="/operations/projects">
-                        <FolderKanban className="size-4" />
-                        {t('breadcrumbTrail.projects')}
-                      </Link>
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            </div>
-
-            <div className="grid gap-3 text-sm md:grid-cols-2 xl:grid-cols-7">
-              <div className="rounded-xl border bg-background/70 p-3 xl:col-span-2">
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Users className="size-4" />
-                  {commonT('labels.client')}
-                </div>
-                <div className="mt-2 flex items-center gap-2 font-medium">
-                  <Avatar className="size-7 border bg-muted">
-                    <AvatarImage
-                      src={getPersonAvatarUrl(project.clientAvatarId)}
-                      alt={project.clientName || commonT('labels.client')}
-                    />
-                    <AvatarFallback className="text-[10px]">
-                      {getInitials(project.clientName)}
-                    </AvatarFallback>
-                  </Avatar>
-                  <span className="truncate">
-                    {project.clientName || commonT('labels.notAvailable')}
-                  </span>
-                </div>
-              </div>
-              <div className="rounded-xl border bg-background/70 p-3">
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Rocket className="size-4" />
-                  {commonT('labels.deliveryModel')}
-                </div>
-                <div className="mt-2 truncate font-medium">
-                  {project.deliveryModel
-                    ? getDeliveryModelLabel(project.deliveryModel)
-                    : commonT('labels.notAvailable')}
-                </div>
-              </div>
-              <div className="rounded-xl border bg-background/70 p-3">
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Users className="size-4" />
-                  {commonT('labels.manager')}
-                </div>
-                <div className="mt-2 truncate font-medium">
-                  {project.managerName || commonT('labels.notAssigned')}
-                </div>
-              </div>
-              <div className="rounded-xl border bg-background/70 p-3">
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <CalendarDays className="size-4" />
-                  {commonT('labels.startDate')}
-                </div>
-                <div className="mt-2 font-medium">
-                  {formatDate(
-                    project.startDate,
-                    getSettingValue,
-                    currentLocaleCode
-                  )}
-                </div>
-              </div>
-              <div className="rounded-xl border bg-background/70 p-3">
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <CalendarClock className="size-4" />
-                  {commonT('labels.endDate')}
-                </div>
-                <div className="mt-2 font-medium">
-                  {formatDate(
-                    project.endDate,
-                    getSettingValue,
-                    currentLocaleCode
-                  )}
-                </div>
-              </div>
-              <div className="rounded-xl border bg-background/70 p-3">
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Gauge className="size-4" />
-                  {commonT('labels.progress')}
-                </div>
-                <div className="mt-2 flex items-center gap-3">
-                  <Progress value={displayedProgress} className="h-2" />
-                  <span className="text-sm font-semibold tabular-nums">
-                    {displayedProgress}%
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-4 rounded-2xl border bg-background/75 p-4 sm:flex-row sm:items-center sm:justify-between">
-              <div className="flex items-center gap-3">
-                <div>
-                  <div className="flex items-center gap-2 text-muted-foreground">
-                    <Users className="size-4" />
-                    <span className="text-xs font-medium uppercase tracking-[0.18em]">
-                      {t('executive.team')}
-                    </span>
-                  </div>
-                  <div className="mt-1 text-sm font-semibold">
-                    {t('executive.membersCount', {
-                      count: project.assignments.length,
-                    })}
-                  </div>
-                </div>
-                <div className="flex -space-x-2">
-                  {teamPreview.map((assignment) => (
-                    <Tooltip key={assignment.id}>
-                      <TooltipTrigger asChild>
-                        <Avatar className="size-10 cursor-default border-2 border-background bg-muted transition-transform hover:z-10 hover:scale-110">
-                          <AvatarImage
-                            src={
-                              getUserPhotoUrl(assignment.userPhotoId) ||
-                              getPersonAvatarUrl(assignment.personAvatarId)
-                            }
-                            alt={assignment.collaboratorName}
-                          />
-                          <AvatarFallback className="text-xs">
-                            {getInitials(assignment.collaboratorName)}
-                          </AvatarFallback>
-                        </Avatar>
-                      </TooltipTrigger>
-                      <TooltipContent side="bottom" className="text-xs">
-                        <p className="font-medium">
-                          {assignment.collaboratorName}
-                        </p>
-                        {assignment.roleLabel ? (
-                          <p className="text-muted-foreground">
-                            {assignment.roleLabel}
-                          </p>
-                        ) : null}
-                      </TooltipContent>
-                    </Tooltip>
-                  ))}
-                  {hiddenTeamCount > 0 ? (
-                    <div className="flex size-10 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-semibold text-muted-foreground">
-                      +{hiddenTeamCount}
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-
-              <div className="grid grid-cols-3 gap-3 text-sm sm:min-w-80">
-                <div className="rounded-xl border bg-muted/20 p-3">
-                  <div className="text-muted-foreground">
-                    {commonT('labels.status')}
-                  </div>
-                  <div className="mt-1">
-                    <StatusBadge
-                      label={getProjectStatusLabel(project.status)}
-                      className={getStatusBadgeClass(project.status)}
-                    />
-                  </div>
-                </div>
-                <div className="rounded-xl border bg-muted/20 p-3">
-                  <div className="text-muted-foreground">
-                    {t('cards.projectHealth')}
-                  </div>
-                  <div className="mt-1 font-semibold">{projectHealthLabel}</div>
-                </div>
-                <div className="rounded-xl border bg-muted/20 p-3">
-                  <div className="text-muted-foreground">
-                    {t('executive.completedTasks')}
-                  </div>
-                  <div className="mt-1 font-semibold">
-                    {completedTasks}/{totalTasks}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </motion.section>
-
-      {!isLimitedView ? (
-        <>
-          <div className="rounded-3xl border bg-linear-to-b from-muted/50 to-background p-3 shadow-sm sm:p-4">
-            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-6">
-              {kpiWidgets.map((item, index) => (
-                <ProjectKpiWidget
-                  key={item.key}
-                  item={item}
-                  index={index}
-                  indicatorLabel={t('kpi.indicator')}
-                />
-              ))}
-            </div>
-          </div>
-
-          <div className="grid gap-4 xl:grid-cols-12">
-            <SectionCard
-              title={t('sections.overview')}
-              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-12"
-            >
-              <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-3">
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.project')}
-                  </dt>
-                  <dd className="font-medium">{project.name}</dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.code')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.code || commonT('labels.notAvailable')}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.client')}
-                  </dt>
-                  <dd className="font-medium">
-                    <div className="flex items-center gap-2">
-                      <Avatar className="h-8 w-8 border border-border/60 bg-muted">
-                        <AvatarImage
-                          src={getPersonAvatarUrl(project.clientAvatarId)}
-                          alt={project.clientName || commonT('labels.client')}
-                        />
-                        <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
-                          {getInitials(
-                            project.clientName || commonT('labels.client')
-                          )}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span>
-                        {project.clientName || commonT('labels.notAvailable')}
-                      </span>
-                    </div>
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.manager')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.managerName || commonT('labels.notAssigned')}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.status')}
-                  </dt>
-                  <dd className="font-medium">
-                    <StatusBadge
-                      label={getProjectStatusLabel(project.status)}
-                      className={getStatusBadgeClass(project.status)}
-                    />
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.deliveryModel')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.deliveryModel
-                      ? getDeliveryModelLabel(project.deliveryModel)
-                      : commonT('labels.notAvailable')}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.startDate')}
-                  </dt>
-                  <dd className="font-medium">
-                    {formatDate(
-                      project.startDate,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.endDate')}
-                  </dt>
-                  <dd className="font-medium">
-                    {formatDate(
-                      project.endDate,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.budget')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.budgetAmount
-                      ? formatCurrency(
-                          project.budgetAmount,
-                          getSettingValue,
-                          currentLocaleCode
-                        )
-                      : commonT('labels.notAvailable')}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.progress')}
-                  </dt>
-                  <dd className="font-medium">
-                    {formatPercent(project.progressPercent)}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.timeline')}
-                  </dt>
-                  <dd className="font-medium">
-                    {formatDateRange(
-                      project.startDate,
-                      project.endDate,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.contractStatus')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.contractStatus ? (
-                      <StatusBadge
-                        label={getContractStatusLabel(project.contractStatus)}
-                        className={getStatusBadgeClass(project.contractStatus)}
-                      />
-                    ) : (
-                      commonT('labels.notAssigned')
-                    )}
-                  </dd>
-                </div>
-              </dl>
-              {project.summary ? (
-                <div className="mt-4 rounded-lg border border-border/70 bg-muted/30 p-3 text-sm text-muted-foreground">
-                  {project.summary}
-                </div>
-              ) : null}
-
-              {/* Contrato vinculado */}
-              <div className="mt-6 border-t pt-6">
-                <div className="mb-4 flex items-center gap-2 text-sm font-semibold">
-                  <FileText className="size-4 text-muted-foreground" />
-                  {t('sections.contract')}
-                </div>
-                {project.relatedContract ? (
-                  <div className="space-y-4">
-                    <div className="flex flex-col gap-3 rounded-xl border bg-muted/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-                      <div>
-                        <div className="font-medium">
-                          {project.relatedContract.name}
-                        </div>
-                        <div className="text-sm text-muted-foreground">
-                          {[
-                            project.relatedContract.code,
-                            project.relatedContract.clientName,
-                          ]
-                            .filter(Boolean)
-                            .join(' • ') || commonT('labels.notAvailable')}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-3">
-                        <StatusBadge
-                          label={getContractStatusLabel(
-                            project.relatedContract.status
-                          )}
-                          className={getStatusBadgeClass(
-                            project.relatedContract.status
-                          )}
-                        />
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          asChild
-                          className="shrink-0"
-                        >
-                          <Link
-                            href={`/operations/contracts?edit=${project.relatedContract.id}`}
-                          >
-                            <FileText className="size-4" />
-                            {commonT('actions.openContract')}
-                          </Link>
-                        </Button>
-                      </div>
-                    </div>
-                    <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-3">
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.contractCategory')}
-                        </dt>
-                        <dd className="font-medium">
-                          {project.relatedContract.contractCategory
-                            ? getContractCategoryLabel(
-                                project.relatedContract.contractCategory
-                              )
-                            : commonT('labels.notAvailable')}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.contractType')}
-                        </dt>
-                        <dd className="font-medium">
-                          {project.relatedContract.contractType
-                            ? getContractTypeLabel(
-                                project.relatedContract.contractType
-                              )
-                            : commonT('labels.notAvailable')}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.billingModel')}
-                        </dt>
-                        <dd className="font-medium">
-                          {getBillingModelLabel(
-                            project.relatedContract.billingModel
-                          )}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.timeline')}
-                        </dt>
-                        <dd className="font-medium">
-                          {formatDateRange(
-                            project.relatedContract.startDate,
-                            project.relatedContract.endDate,
-                            getSettingValue,
-                            currentLocaleCode
-                          )}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.signatureStatus')}
-                        </dt>
-                        <dd className="font-medium">
-                          {project.relatedContract.signatureStatus
-                            ? getSignatureStatusLabel(
-                                project.relatedContract.signatureStatus
-                              )
-                            : commonT('labels.notAvailable')}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.budget')}
-                        </dt>
-                        <dd className="font-medium">
-                          {project.relatedContract.budgetAmount
-                            ? formatCurrency(
-                                project.relatedContract.budgetAmount,
-                                getSettingValue,
-                                currentLocaleCode
-                              )
-                            : commonT('labels.notAvailable')}
-                        </dd>
-                      </div>
-                    </dl>
-                  </div>
-                ) : (
-                  <p className="text-sm text-muted-foreground">
-                    {t('noContract')}
-                  </p>
-                )}
-              </div>
-            </SectionCard>
-          </div>
-
-          <SectionCard
-            title={t('sections.deliveryHealth')}
-            description={t('sections.deliveryHealthDescription')}
-            className="rounded-3xl border bg-card p-4 shadow-sm"
-          >
-            <div className="grid gap-4 xl:grid-cols-12">
-              <ProjectChartCard
-                title={t('charts.burnup')}
-                description={t('charts.burnupDescription')}
-                icon={LineChartIcon}
-                metric={formatPercent(displayedProgress)}
-                className="xl:col-span-8"
-                isLoading={chartDashboardLoading}
-              >
-                {burnupChartData.length > 1 ? (
-                  <ChartContainer
-                    className="h-80 w-full"
-                    config={boardChartConfig}
-                  >
-                    <AreaChart data={burnupChartData}>
-                      <defs>
-                        <linearGradient
-                          id="burnupLogged"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="1"
-                        >
-                          <stop
-                            offset="5%"
-                            stopColor="var(--color-loggedHours)"
-                            stopOpacity={0.26}
-                          />
-                          <stop
-                            offset="95%"
-                            stopColor="var(--color-loggedHours)"
-                            stopOpacity={0.02}
-                          />
-                        </linearGradient>
-                      </defs>
-                      <CartesianGrid vertical={false} strokeDasharray="3 3" />
-                      <XAxis dataKey="week" tickLine={false} axisLine={false} />
-                      <YAxis tickLine={false} axisLine={false} width={36} />
-                      <ChartTooltip content={<ChartTooltipContent />} />
-                      <Area
-                        type="monotone"
-                        dataKey="planned"
-                        stroke="var(--color-planned)"
-                        strokeDasharray="4 4"
-                        strokeWidth={2}
-                        fill="transparent"
-                      />
-                      <Area
-                        type="monotone"
-                        dataKey="loggedHours"
-                        stroke="var(--color-loggedHours)"
-                        strokeWidth={2.5}
-                        fill="url(#burnupLogged)"
-                      />
-                    </AreaChart>
-                  </ChartContainer>
-                ) : (
-                  <ChartEmptyState
-                    icon={LineChartIcon}
-                    title={t('charts.emptyTitle')}
-                    description={t('charts.emptyBurnup')}
-                  />
-                )}
-              </ProjectChartCard>
-
-              <ProjectChartCard
-                title={t('charts.weeklyVelocity')}
-                description={t('charts.weeklyVelocityDescription')}
-                icon={Rocket}
-                metric={formatHours(weeklyVelocity)}
-                className="xl:col-span-4"
-                isLoading={isProjectStatsLoading}
-              >
-                {velocityChartData.length > 0 ? (
-                  <ChartContainer
-                    className="h-80 w-full"
-                    config={boardChartConfig}
-                  >
-                    <LineChart data={velocityChartData}>
-                      <CartesianGrid vertical={false} strokeDasharray="3 3" />
-                      <XAxis dataKey="week" tickLine={false} axisLine={false} />
-                      <YAxis tickLine={false} axisLine={false} width={30} />
-                      <ChartTooltip content={<ChartTooltipContent />} />
-                      <Line
-                        type="monotone"
-                        dataKey="loggedHours"
-                        stroke="var(--color-loggedHours)"
-                        strokeWidth={2.5}
-                        dot={{ r: 3 }}
-                        activeDot={{ r: 5 }}
-                      />
-                    </LineChart>
-                  </ChartContainer>
-                ) : (
-                  <ChartEmptyState
-                    icon={Rocket}
-                    title={t('charts.emptyTitle')}
-                    description={t('charts.emptyVelocity')}
-                  />
-                )}
-              </ProjectChartCard>
-
-              <ProjectChartCard
-                title={t('charts.allocationByCollaborator')}
-                description={t('charts.allocationDescription')}
-                icon={BarChart3}
-                metric={formatPercent(
-                  project.operationalIndicators.averageAllocation
-                )}
-                className="xl:col-span-5"
-                isLoading={chartDashboardLoading}
-              >
-                {allocationChartData.length > 0 ? (
-                  <ChartContainer
-                    className="h-72 w-full"
-                    config={boardChartConfig}
-                  >
-                    <BarChart data={allocationChartData}>
-                      <CartesianGrid vertical={false} strokeDasharray="3 3" />
-                      <XAxis dataKey="name" tickLine={false} axisLine={false} />
-                      <YAxis tickLine={false} axisLine={false} width={32} />
-                      <ChartTooltip
-                        content={<ChartTooltipContent hideLabel />}
-                      />
-                      <Bar
-                        dataKey="allocation"
-                        radius={[8, 8, 3, 3]}
-                        fill="var(--color-allocation)"
-                      />
-                    </BarChart>
-                  </ChartContainer>
-                ) : (
-                  <ChartEmptyState
-                    icon={BarChart3}
-                    title={t('charts.emptyTitle')}
-                    description={t('charts.emptyAllocation')}
-                  />
-                )}
-              </ProjectChartCard>
-
-              <ProjectChartCard
-                title={t('charts.taskDistribution')}
-                description={t('charts.taskDistributionDescription')}
-                icon={ClipboardList}
-                metric={`${totalTasks} ${t('kanban.items')}`}
-                className="xl:col-span-4"
-                isLoading={isTasksLoading}
-              >
-                {taskDistributionData.length > 0 ? (
-                  <div className="grid gap-4 md:grid-cols-[1fr_11rem]">
-                    <ChartContainer
-                      className="h-72 w-full"
-                      config={boardChartConfig}
-                    >
-                      <PieChart>
-                        <ChartTooltip
-                          content={<ChartTooltipContent hideLabel />}
-                        />
-                        <Pie
-                          data={taskDistributionData}
-                          dataKey="value"
-                          nameKey="name"
-                          innerRadius={58}
-                          outerRadius={92}
-                          paddingAngle={4}
-                        >
-                          {taskDistributionData.map((entry) => (
-                            <Cell key={entry.key} fill={entry.fill} />
-                          ))}
-                        </Pie>
-                      </PieChart>
-                    </ChartContainer>
-                    <div className="flex flex-col justify-center gap-2">
-                      {taskDistributionData.map((item) => (
-                        <div
-                          key={item.key}
-                          className="flex items-center justify-between gap-3 rounded-lg border bg-muted/10 px-3 py-2 text-xs"
-                        >
-                          <span className="flex min-w-0 items-center gap-2">
-                            <span
-                              className="size-2.5 shrink-0 rounded-full"
-                              style={{ backgroundColor: item.fill }}
-                            />
-                            <span className="truncate">{item.name}</span>
-                          </span>
-                          <span className="font-semibold">{item.value}</span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                ) : (
-                  <ChartEmptyState
-                    icon={ClipboardList}
-                    title={t('charts.emptyTitle')}
-                    description={t('charts.emptyTasks')}
-                  />
-                )}
-              </ProjectChartCard>
-
-              <ProjectChartCard
-                title={t('charts.operationalHealth')}
-                description={t('charts.operationalHealthDescription')}
-                icon={HeartPulse}
-                metric={projectHealthLabel}
-                className="xl:col-span-3"
-                isLoading={chartDashboardLoading}
-              >
-                <div className="grid h-72 place-items-center">
-                  <ChartContainer
-                    className="h-56 w-full"
-                    config={boardChartConfig}
-                  >
-                    <RadialBarChart
-                      data={healthChartData}
-                      innerRadius="72%"
-                      outerRadius="100%"
-                      startAngle={180}
-                      endAngle={0}
-                    >
-                      <PolarAngleAxis
-                        type="number"
-                        domain={[0, 100]}
-                        tick={false}
-                      />
-                      <RadialBar
-                        dataKey="value"
-                        cornerRadius={12}
-                        background={{ fill: 'hsl(var(--muted))' }}
-                      />
-                      <ChartTooltip
-                        content={<ChartTooltipContent hideLabel />}
-                      />
-                    </RadialBarChart>
-                  </ChartContainer>
-                  <div className="-mt-20 text-center">
-                    <div className="text-3xl font-semibold tabular-nums">
-                      {projectHealth.value}%
-                    </div>
-                    <div className="mt-1 text-xs text-muted-foreground">
-                      {t('charts.healthScore')}
-                    </div>
-                  </div>
-                </div>
-              </ProjectChartCard>
-            </div>
-          </SectionCard>
-        </>
-      ) : null}
-
-      <SectionCard
-        title={t('sections.taskBoard')}
-        description={t('sections.taskBoardDescription')}
-        className="rounded-3xl border bg-card p-4 shadow-sm"
-        actions={
-          !isLimitedView ? (
-            <Button
-              size="sm"
-              variant="default"
-              className="gap-2"
-              onClick={() => openCreateTaskForm()}
-            >
-              <Plus className="size-4" />
-              {t('taskForm.titleNew')}
-            </Button>
-          ) : undefined
-        }
-      >
-        <div className="mb-4 flex flex-col gap-3 rounded-2xl border bg-muted/20 p-3 lg:flex-row lg:items-center lg:justify-between">
-          <div className="relative min-w-0 flex-1">
-            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={boardSearch}
-              onChange={(event) => setBoardSearch(event.target.value)}
-              placeholder={t('kanban.searchPlaceholder')}
-              className="h-10 bg-background pl-9"
-            />
-          </div>
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-            <div className="flex items-center gap-2 rounded-xl border bg-background px-3 py-2 text-xs text-muted-foreground">
-              <SlidersHorizontal className="size-4" />
-              {t('kanban.filters')}
-            </div>
-            <Select
-              value={boardPriorityFilter}
-              onValueChange={(value) =>
-                setBoardPriorityFilter(value as typeof boardPriorityFilter)
-              }
-            >
-              <SelectTrigger className="h-10 w-full bg-background sm:w-44">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">{t('kanban.allPriorities')}</SelectItem>
-                <SelectItem value="high">
-                  {getTaskPriorityLabel('high')}
-                </SelectItem>
-                <SelectItem value="medium">
-                  {getTaskPriorityLabel('medium')}
-                </SelectItem>
-                <SelectItem value="low">
-                  {getTaskPriorityLabel('low')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            <Select value={boardGroupMode} onValueChange={setBoardGroupMode}>
-              <SelectTrigger className="h-10 w-full bg-background sm:w-44">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="status">
-                  {t('kanban.groupStatus')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-
-        <DndContext
-          sensors={sensors}
-          collisionDetection={kanbanCollision}
-          onDragStart={onBoardDragStart}
-          onDragCancel={() => setActiveDragTask(null)}
-          onDragEnd={onBoardDragEnd}
-        >
-          <div className="relative">
-            <div className="grid auto-cols-[minmax(19rem,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2 xl:grid-flow-row xl:grid-cols-4 xl:overflow-visible xl:pb-0">
-              {KANBAN_COLUMNS.map((column) => (
-                <DroppableColumn key={column.id} columnId={column.id}>
-                  {(isOver) => (
-                    <div
-                      className={[
-                        'flex min-h-[32rem] flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
-                        getColumnClassName(column.id),
-                        isOver
-                          ? 'border-primary shadow-lg ring-2 ring-primary/15'
-                          : 'border-border',
-                      ].join(' ')}
-                    >
-                      <div className="mb-3 flex items-center justify-between gap-3 rounded-2xl border bg-background/85 p-3 shadow-xs">
-                        <div className="min-w-0">
-                          <div className="flex items-center gap-2 text-sm font-semibold">
-                            <span
-                              className={[
-                                'size-2.5 rounded-full',
-                                getColumnDotClassName(column.id),
-                              ].join(' ')}
-                            />
-                            {column.label}
-                          </div>
-                          <div className="mt-1 text-xs text-muted-foreground">
-                            {filteredTaskColumns[column.id].length}/
-                            {taskColumns[column.id].length} {t('kanban.items')}
-                          </div>
-                        </div>
-                        <div className="flex items-center gap-1">
-                          <span className="rounded-full border bg-background px-2 py-0.5 text-xs font-medium text-muted-foreground">
-                            {filteredTaskColumns[column.id].length}
-                          </span>
-                          {!isLimitedView ? (
-                            <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>
-                          ) : null}
-                        </div>
-                      </div>
-
-                      <div className="flex flex-1 flex-col gap-2">
-                        <AnimatePresence initial={false}>
-                          {filteredTaskColumns[column.id].map((task) => {
-                            const tags = getTaskTags(task);
-                            const comments = getTaskCommentCount(task);
-                            const attachments = getTaskAttachmentCount(task);
-                            return (
-                              <DraggableTaskCard
-                                key={task.id}
-                                task={task}
-                                disabled={false}
-                              >
-                                {(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}
-                                    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(' ')}
-                                    onClick={() =>
-                                      setSelectedTask({
-                                        ...task,
-                                        projectName: project?.name,
-                                        projectCode: project?.code,
-                                      })
-                                    }
-                                    onKeyDown={(event) => {
-                                      if (
-                                        event.key === 'Enter' ||
-                                        event.key === ' '
-                                      ) {
-                                        event.preventDefault();
-                                        setSelectedTask({
-                                          ...task,
-                                          projectName: project?.name,
-                                          projectCode: project?.code,
-                                        });
-                                      }
-                                    }}
-                                  >
-                                    <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>
-                                        {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>
-
-                                    {tags.length > 0 ? (
-                                      <div className="mb-3 flex flex-wrap gap-1">
-                                        {tags.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>
-                                        ))}
-                                        {tags.length > 4 ? (
-                                          <span className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                                            +{tags.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`
-                                            : t('kanban.noEstimate')}
-                                        </span>
-                                      </div>
-                                    </div>
-
-                                    <div className="mt-3 space-y-1.5">
-                                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
-                                        <span>{t('kanban.progress')}</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 ||
-                                                  commonT('labels.notAssigned')
-                                                }
-                                                className="size-full object-cover"
-                                              />
-                                            ) : (
-                                              getInitials(task.assigneeName)
-                                            );
-                                          })()}
-                                        </div>
-                                        <span className="truncate text-[11px] text-muted-foreground">
-                                          {task.assigneeName ||
-                                            commonT('labels.notAssigned')}
-                                        </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" />
-                                          {attachments}
-                                        </span>
-                                      </div>
-                                    </div>
-                                  </motion.div>
-                                )}
-                              </DraggableTaskCard>
-                            );
-                          })}
-                        </AnimatePresence>
-                        {filteredTaskColumns[column.id].length === 0 ? (
-                          <div className="rounded-2xl border border-dashed bg-background/70 p-4 text-center text-xs text-muted-foreground">
-                            {boardSearch || boardPriorityFilter !== 'all'
-                              ? t('kanban.noFilteredTasks')
-                              : t('kanban.emptyColumn')}
-                          </div>
-                        ) : null}
-                        {!isLimitedView && inlineCreateColumn === column.id ? (
-                          <div className="space-y-1.5 rounded-2xl border bg-card p-2 shadow-sm">
-                            <Input
-                              autoFocus
-                              placeholder={t('taskForm.namePlaceholder')}
-                              value={inlineCreateName}
-                              onChange={(e) =>
-                                setInlineCreateName(e.target.value)
-                              }
-                              onKeyDown={(e) => {
-                                if (e.key === 'Enter') {
-                                  e.preventDefault();
-                                  void handleInlineCreateTask(
-                                    column.id,
-                                    inlineCreateName
-                                  );
-                                } 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,
-                                    inlineCreateName
-                                  )
-                                }
-                              >
-                                {t('taskForm.titleNew')}
-                              </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>
-                        ) : !isLimitedView ? (
-                          <button
-                            type="button"
-                            className="mt-auto flex w-full cursor-pointer items-center justify-center gap-1 rounded-2xl border border-dashed bg-background/70 px-3 py-2 text-xs text-muted-foreground transition hover:border-primary/40 hover:bg-primary/5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                            onClick={() => {
-                              setInlineCreateColumn(column.id);
-                              setInlineCreateName('');
-                            }}
-                          >
-                            <Plus className="size-3" />
-                            {t('taskForm.titleNew')}
-                          </button>
-                        ) : null}
-                      </div>
-                    </div>
-                  )}
-                </DroppableColumn>
-              ))}
-            </div>
-            {/* Scroll fade overlay — visible only on mobile/tablet */}
-            <div
-              aria-hidden
-              className="pointer-events-none absolute inset-y-0 right-0 w-16 bg-linear-to-l from-background/80 to-transparent xl:hidden"
-            />
-          </div>
-          {/* DragOverlay renders the floating card following the pointer */}
-          <DragOverlay dropAnimation={{ duration: 160, easing: 'ease' }}>
-            {activeDragTask
-              ? (() => {
-                  const overlayTask = activeDragTask;
-                  const overlayTags = getTaskTags(overlayTask);
-                  const overlayComments = getTaskCommentCount(overlayTask);
-                  const overlayAttachments = getTaskAttachmentCount(overlayTask);
-                  return (
-                    <div className="w-76 cursor-grabbing rounded-2xl border border-primary/60 bg-card p-3 shadow-2xl ring-2 ring-primary/20 opacity-95">
-                      <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">
-                            {overlayTask.name}
-                          </p>
-                          {overlayTask.description ? (
-                            <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
-                              {overlayTask.description.replace(/<[^>]*>/g, '')}
-                            </p>
-                          ) : null}
-                        </div>
-                        <span
-                          className={[
-                            'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
-                            getPriorityClassName(overlayTask.priority),
-                          ].join(' ')}
-                        >
-                          {getTaskPriorityLabel(overlayTask.priority)}
-                        </span>
-                      </div>
-
-                      {overlayTags.length > 0 ? (
-                        <div className="mb-3 flex flex-wrap gap-1">
-                          {overlayTags.slice(0, 4).map((tag) => (
-                            <span
-                              key={tag}
-                              className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground"
-                            >
-                              {tag}
-                            </span>
-                          ))}
-                          {overlayTags.length > 4 ? (
-                            <span className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                              +{overlayTags.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(overlayTask.dueDate) &&
-                            overlayTask.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(
-                              overlayTask.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" />
-                            {overlayTask.estimateHours != null
-                              ? `${overlayTask.estimateHours}h`
-                              : t('kanban.noEstimate')}
-                          </span>
-                        </div>
-                      </div>
-
-                      <div className="mt-3 space-y-1.5">
-                        <div className="flex items-center justify-between text-[11px] text-muted-foreground">
-                          <span>{t('kanban.progress')}</span>
-                          <span>{getTaskProgress(overlayTask.status)}%</span>
-                        </div>
-                        <Progress
-                          value={getTaskProgress(overlayTask.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(
-                                overlayTask.assigneeUserPhotoId
-                              );
-                              const avatarUrl =
-                                overlayTask.assigneePersonAvatarId
-                                  ? getPersonAvatarUrl(
-                                      overlayTask.assigneePersonAvatarId
-                                    )
-                                  : null;
-                              const imgSrc = photoUrl ?? avatarUrl;
-                              return imgSrc ? (
-                                // eslint-disable-next-line @next/next/no-img-element
-                                <img
-                                  src={imgSrc}
-                                  alt={
-                                    overlayTask.assigneeName ||
-                                    commonT('labels.notAssigned')
-                                  }
-                                  className="size-full object-cover"
-                                />
-                              ) : (
-                                getInitials(overlayTask.assigneeName)
-                              );
-                            })()}
-                          </div>
-                          <span className="truncate text-[11px] text-muted-foreground">
-                            {overlayTask.assigneeName ||
-                              commonT('labels.notAssigned')}
-                          </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" />
-                            {overlayComments}
-                          </span>
-                          <span className="inline-flex items-center gap-1">
-                            <Paperclip className="size-3.5" />
-                            {overlayAttachments}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })()
-              : null}
-          </DragOverlay>
-        </DndContext>
-      </SectionCard>
-
-      <SectionCard
-        title={t('sections.timeline')}
-        description={t('sections.timelineDescription')}
-        className="rounded-3xl border bg-card p-4 shadow-sm"
-        actions={
-          <div className="flex flex-wrap items-center gap-2">
-            <Select
-              value={timelineTypeFilter}
-              onValueChange={(value) => {
-                setTimelineTypeFilter(value as typeof timelineTypeFilter);
-                setTimelineVisibleCount(8);
-              }}
-            >
-              <SelectTrigger className="h-9 w-44 bg-background">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">{t('timeline.filters.all')}</SelectItem>
-                <SelectItem value="task">
-                  {t('timeline.filters.task')}
-                </SelectItem>
-                <SelectItem value="status">
-                  {t('timeline.filters.status')}
-                </SelectItem>
-                <SelectItem value="timesheet">
-                  {t('timeline.filters.timesheet')}
-                </SelectItem>
-                <SelectItem value="approval">
-                  {t('timeline.filters.approval')}
-                </SelectItem>
-                <SelectItem value="comment">
-                  {t('timeline.filters.comment')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        }
-      >
-        <div className="rounded-3xl border bg-linear-to-b from-muted/30 to-background p-4">
-          {groupedTimelineEvents.length > 0 ? (
-            <div className="space-y-6">
-              {groupedTimelineEvents.map((group) => (
-                <div key={group.dayKey} className="space-y-3">
-                  <div className="sticky top-0 z-10 w-fit rounded-full border bg-background px-3 py-1 text-xs font-medium text-muted-foreground shadow-xs">
-                    {formatDate(
-                      group.dayKey,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </div>
-                  <div className="space-y-0">
-                    {group.events.map((event, index) => {
-                      const Icon = event.icon;
-                      return (
-                        <motion.div
-                          key={event.id}
-                          initial={{ opacity: 0, y: 8 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          transition={{ duration: 0.18 }}
-                          className="grid grid-cols-[2rem_1fr] gap-3"
-                        >
-                          <div className="flex flex-col items-center">
-                            <div
-                              className={[
-                                'flex size-8 items-center justify-center rounded-full shadow-sm',
-                                event.toneClassName,
-                              ].join(' ')}
-                            >
-                              <Icon className="size-4" />
-                            </div>
-                            {index < group.events.length - 1 ? (
-                              <div className="w-px flex-1 bg-border" />
-                            ) : null}
-                          </div>
-                          <div className="pb-5">
-                            <div className="rounded-2xl border bg-card p-4 shadow-xs transition hover:shadow-sm">
-                              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                                <div className="min-w-0">
-                                  <div className="flex flex-wrap items-center gap-2">
-                                    <span className="text-sm font-semibold">
-                                      {event.title}
-                                    </span>
-                                    <span className="rounded-full border bg-muted/40 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                                      {t(`timeline.types.${event.type}`)}
-                                    </span>
-                                  </div>
-                                  <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
-                                    {event.description}
-                                  </p>
-                                </div>
-                                <div className="shrink-0 text-xs text-muted-foreground">
-                                  {formatRelativeTime(
-                                    event.timestamp,
-                                    currentLocaleCode
-                                  )}
-                                </div>
-                              </div>
-                              <div className="mt-3 flex items-center gap-2 border-t pt-3">
-                                <Avatar className="size-7 border bg-muted">
-                                  <AvatarImage
-                                    src={
-                                      getUserPhotoUrl(event.actorUserPhotoId) ||
-                                      getPersonAvatarUrl(event.actorAvatarId)
-                                    }
-                                    alt={
-                                      event.actorName ||
-                                      commonT('labels.notAssigned')
-                                    }
-                                  />
-                                  <AvatarFallback className="text-[10px]">
-                                    {getInitials(event.actorName)}
-                                  </AvatarFallback>
-                                </Avatar>
-                                <span className="truncate text-xs text-muted-foreground">
-                                  {event.actorName ||
-                                    commonT('labels.notAssigned')}
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        </motion.div>
-                      );
-                    })}
-                  </div>
-                </div>
-              ))}
-              {visibleTimelineEvents.length < filteredTimelineEvents.length ? (
-                <div className="flex justify-center">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() =>
-                      setTimelineVisibleCount((current) => current + 8)
-                    }
-                  >
-                    {t('timeline.loadMore')}
-                  </Button>
-                </div>
-              ) : null}
-            </div>
-          ) : (
-            <div className="flex min-h-56 flex-col items-center justify-center rounded-2xl border border-dashed bg-background p-6 text-center">
-              <div className="flex size-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
-                <GitCommitHorizontal className="size-6" />
-              </div>
-              <div className="mt-3 text-sm font-medium">
-                {t('timeline.emptyTitle')}
-              </div>
-              <p className="mt-1 max-w-sm text-xs leading-5 text-muted-foreground">
-                {t('timeline.empty')}
-              </p>
-            </div>
-          )}
-        </div>
-      </SectionCard>
-
-      <SectionCard
-        title={t('sections.archivedTasks')}
-        description={t('sections.archivedTasksDescription')}
-        className="rounded-xl border bg-card p-4 shadow-sm"
-      >
-        {archivedTasks.length > 0 ? (
-          <div className="overflow-x-auto rounded-lg border bg-muted/10">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{commonT('labels.task')}</TableHead>
-                  <TableHead>{commonT('labels.status')}</TableHead>
-                  <TableHead>{t('taskForm.deadlineLabel')}</TableHead>
-                  <TableHead className="text-right">
-                    {commonT('labels.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {archivedTasks.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>
-                      <StatusBadge
-                        label={
-                          KANBAN_COLUMNS.find(
-                            (column) => column.id === task.status
-                          )?.label ?? formatEnumLabel(task.status)
-                        }
-                        className={getStatusBadgeClass(task.status)}
-                      />
-                    </TableCell>
-                    <TableCell>
-                      {formatDate(
-                        task.dueDate,
-                        getSettingValue,
-                        currentLocaleCode
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex justify-end gap-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="gap-2"
-                          disabled={restoringTaskId === task.id}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            void handleRestoreTask(task.id);
-                          }}
-                        >
-                          {restoringTaskId === task.id ? (
-                            <Loader2 className="size-4 animate-spin" />
-                          ) : (
-                            <ArchiveRestore className="size-4" />
-                          )}
-                          {commonT('actions.unarchive')}
-                        </Button>
-                        <Button
-                          variant="destructive"
-                          size="sm"
-                          className="gap-2"
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            setDeletePromptTask(task);
-                          }}
-                        >
-                          <Trash2 className="size-4" />
-                          {commonT('actions.delete')}
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        ) : (
-          <ChartEmptyState
-            icon={Archive}
-            title={commonT('states.emptyTitle')}
-            description={t('emptyArchivedDescription')}
-          />
-        )}
-      </SectionCard>
-
-      <div className="grid gap-4 xl:grid-cols-12">
-        <SectionCard
-          title={t('sections.team')}
-          description={t('sections.teamDescription')}
-          className={[
-            'rounded-2xl border bg-card p-4 shadow-sm',
-            isLimitedView ? 'xl:col-span-12' : 'xl:col-span-8',
-          ].join(' ')}
-        >
-          {project.assignments.length > 0 ? (
-            <div className="space-y-4">
-              <div className="grid gap-3 sm:grid-cols-3">
-                <div className="rounded-2xl border bg-emerald-500/10 p-3">
-                  <div className="text-xs text-muted-foreground">
-                    {t('teamPanel.available')}
-                  </div>
-                  <div className="mt-1 text-2xl font-semibold text-emerald-700 dark:text-emerald-300">
-                    {availableAssignments}
-                  </div>
-                </div>
-                <div className="rounded-2xl border bg-amber-500/10 p-3">
-                  <div className="text-xs text-muted-foreground">
-                    {t('teamPanel.highAllocation')}
-                  </div>
-                  <div className="mt-1 text-2xl font-semibold text-amber-700 dark:text-amber-300">
-                    {highAllocationAssignments}
-                  </div>
-                </div>
-                <div className="rounded-2xl border bg-rose-500/10 p-3">
-                  <div className="text-xs text-muted-foreground">
-                    {t('teamPanel.overload')}
-                  </div>
-                  <div className="mt-1 text-2xl font-semibold text-rose-700 dark:text-rose-300">
-                    {overloadedAssignments}
-                  </div>
-                </div>
-              </div>
-
-              <div className="grid gap-3 md:grid-cols-2">
-                {project.assignments.map((assignment) => {
-                  const allocationValue =
-                    typeof assignment.allocationPercent === 'number'
-                      ? Math.round(assignment.allocationPercent)
-                      : 0;
-                  const allocation = clampPercent(allocationValue);
-                  const weeklyHours = assignment.weeklyHours ?? 0;
-                  const usedHours =
-                    weeklyHours > 0
-                      ? (weeklyHours * Math.max(allocationValue, 0)) / 100
-                      : 0;
-                  const availablePercent = Math.max(0, 100 - allocationValue);
-                  const availabilityHours =
-                    weeklyHours > 0 ? Math.max(0, weeklyHours - usedHours) : 0;
-                  const tone = getAllocationTone(allocationValue);
-                  const ToneIcon = tone.icon;
-
-                  return (
-                    <motion.div
-                      key={assignment.id}
-                      whileHover={{ y: -2 }}
-                      className={[
-                        'overflow-hidden rounded-2xl border bg-background shadow-xs transition hover:shadow-md',
-                        tone.border,
-                      ].join(' ')}
-                    >
-                      <div className="border-b bg-linear-to-br from-muted/50 to-background p-4">
-                        <div className="flex items-start justify-between gap-3">
-                          <div className="flex min-w-0 items-center gap-3">
-                            <Avatar className="size-12 border bg-muted">
-                              <AvatarImage
-                                src={
-                                  getUserPhotoUrl(assignment.userPhotoId) ||
-                                  getPersonAvatarUrl(assignment.personAvatarId)
-                                }
-                                alt={assignment.collaboratorName}
-                              />
-                              <AvatarFallback className="text-xs font-semibold">
-                                {getInitials(assignment.collaboratorName)}
-                              </AvatarFallback>
-                            </Avatar>
-                            <div className="min-w-0">
-                              <div className="truncate text-sm font-semibold">
-                                {assignment.collaboratorName}
-                              </div>
-                              <div className="truncate text-xs text-muted-foreground">
-                                {assignment.roleLabel ||
-                                  commonT('labels.notAssigned')}
-                              </div>
-                            </div>
-                          </div>
-                          <div className="flex shrink-0 flex-col items-end gap-2">
-                            <StatusBadge
-                              label={formatEnumLabel(assignment.status)}
-                              className={getStatusBadgeClass(assignment.status)}
-                            />
-                            <span
-                              className={[
-                                'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold',
-                                tone.border,
-                                tone.bg,
-                                tone.text,
-                              ].join(' ')}
-                            >
-                              <ToneIcon className="size-3" />
-                              {t(`teamPanel.status.${tone.labelKey}`)}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="space-y-4 p-4">
-                        <div className="space-y-2">
-                          <div className="flex items-center justify-between text-xs">
-                            <span className="text-muted-foreground">
-                              {commonT('labels.allocationPercent')}
-                            </span>
-                            <span
-                              className={['font-semibold', tone.text].join(' ')}
-                            >
-                              {formatPercent(assignment.allocationPercent)}
-                            </span>
-                          </div>
-                          <Progress
-                            value={allocation}
-                            className={['h-2.5', tone.progress].join(' ')}
-                          />
-                          {allocationValue > 100 ? (
-                            <div className="flex items-center gap-1 text-xs text-rose-700 dark:text-rose-300">
-                              <AlertTriangle className="size-3.5" />
-                              {t('teamPanel.overloadWarning', {
-                                value: allocationValue - 100,
-                              })}
-                            </div>
-                          ) : null}
-                        </div>
-
-                        <div className="grid grid-cols-2 gap-3 text-xs xl:grid-cols-4">
-                          <div className="rounded-xl border bg-muted/20 p-2">
-                            <div className="text-muted-foreground">
-                              {commonT('labels.weeklyCapacity')}
-                            </div>
-                            <div className="mt-1 font-semibold">
-                              {weeklyHours
-                                ? formatHours(weeklyHours)
-                                : commonT('labels.notAvailable')}
-                            </div>
-                          </div>
-                          <div className="rounded-xl border bg-muted/20 p-2">
-                            <div className="text-muted-foreground">
-                              {t('teamPanel.usedHours')}
-                            </div>
-                            <div className="mt-1 font-semibold">
-                              {weeklyHours
-                                ? formatHours(usedHours)
-                                : commonT('labels.notAvailable')}
-                            </div>
-                          </div>
-                          <div className="rounded-xl border bg-muted/20 p-2">
-                            <div className="text-muted-foreground">
-                              {t('teamPanel.availability')}
-                            </div>
-                            <div className="mt-1 font-semibold">
-                              {weeklyHours
-                                ? formatHours(availabilityHours)
-                                : `${clampPercent(availablePercent)}%`}
-                            </div>
-                          </div>
-                          <div className="rounded-xl border bg-muted/20 p-2">
-                            <div className="text-muted-foreground">
-                              {commonT('labels.timeline')}
-                            </div>
-                            <div className="mt-1 truncate font-semibold">
-                              {formatDateRange(
-                                assignment.startDate,
-                                assignment.endDate,
-                                getSettingValue,
-                                currentLocaleCode
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </motion.div>
-                  );
-                })}
-              </div>
-            </div>
-          ) : (
-            <ChartEmptyState
-              icon={Users}
-              title={commonT('states.emptyTitle')}
-              description={t('noAssignments')}
-            />
-          )}
-        </SectionCard>
-
-        {!isLimitedView ? (
-          <SectionCard
-            title={t('sections.indicators')}
-            description={t('sections.indicatorsDescription')}
-            className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-4"
-          >
-            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
-              {[
-                {
-                  icon: Users,
-                  label: t('indicators.activeAssignments'),
-                  value: project.operationalIndicators.activeAssignments,
-                  tone: 'text-sky-700 dark:text-sky-300',
-                  bg: 'bg-sky-500/10',
-                },
-                {
-                  icon: CheckCircle2,
-                  label: t('indicators.completedAssignments'),
-                  value: project.operationalIndicators.completedAssignments,
-                  tone: 'text-emerald-700 dark:text-emerald-300',
-                  bg: 'bg-emerald-500/10',
-                },
-                {
-                  icon: Gauge,
-                  label: t('indicators.averageAllocation'),
-                  value: formatPercent(
-                    project.operationalIndicators.averageAllocation
-                  ),
-                  tone:
-                    averageAllocation > 100
-                      ? 'text-rose-700 dark:text-rose-300'
-                      : averageAllocation > 85
-                        ? 'text-amber-700 dark:text-amber-300'
-                        : 'text-emerald-700 dark:text-emerald-300',
-                  bg:
-                    averageAllocation > 100
-                      ? 'bg-rose-500/10'
-                      : averageAllocation > 85
-                        ? 'bg-amber-500/10'
-                        : 'bg-emerald-500/10',
-                },
-                {
-                  icon: Timer,
-                  label: t('indicators.totalWeeklyHours'),
-                  value: formatHours(
-                    project.operationalIndicators.totalWeeklyHours
-                  ),
-                  tone: 'text-violet-700 dark:text-violet-300',
-                  bg: 'bg-violet-500/10',
-                },
-                {
-                  icon: ClipboardList,
-                  label: t('cards.timesheets'),
-                  value: project.timesheetSummary.totalTimesheets,
-                  tone: 'text-foreground',
-                  bg: 'bg-muted/40',
-                },
-                {
-                  icon: AlarmClock,
-                  label: commonT('labels.pending'),
-                  value: project.timesheetSummary.pendingTimesheets,
-                  tone:
-                    project.timesheetSummary.pendingTimesheets > 0
-                      ? 'text-amber-700 dark:text-amber-300'
-                      : 'text-foreground',
-                  bg:
-                    project.timesheetSummary.pendingTimesheets > 0
-                      ? 'bg-amber-500/10'
-                      : 'bg-muted/40',
-                },
-                {
-                  icon: BarChart2,
-                  label: t('cards.loggedHours'),
-                  value: formatHours(project.timesheetSummary.totalHours),
-                  tone: 'text-sky-700 dark:text-sky-300',
-                  bg: 'bg-sky-500/10',
-                },
-              ].map(({ icon: Icon, label, value, tone, bg }) => (
-                <div
-                  key={label}
-                  className="flex items-center gap-3 rounded-xl border bg-card p-3 transition-shadow hover:shadow-sm"
-                >
-                  <div
-                    className={[
-                      'flex size-9 shrink-0 items-center justify-center rounded-xl',
-                      bg,
-                    ].join(' ')}
-                  >
-                    <Icon className={['size-4', tone].join(' ')} />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <div className="truncate text-xs text-muted-foreground">
-                      {label}
-                    </div>
-                    <div
-                      className={[
-                        'mt-0.5 text-sm font-semibold tabular-nums',
-                        tone,
-                      ].join(' ')}
-                    >
-                      {value}
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </SectionCard>
-        ) : null}
-      </div>
-
-      <SectionCard
-        title={t('sections.costs')}
-        description={t('sections.costsDescription')}
-        className="rounded-2xl border bg-card p-4 shadow-sm"
-      >
-        <ProjectCostsSection projectId={projectId} />
-      </SectionCard>
-
-      <TaskDetailSheet
-        task={selectedTask}
-        open={selectedTask !== null}
-        onOpenChange={(open) => {
-          if (!open) {
-            setSelectedTask(null);
-          }
-        }}
-        statusLabel={(status) =>
-          KANBAN_COLUMNS.find((column) => column.id === status)?.label ?? status
-        }
-        footer={
-          selectedTask && !isLimitedView ? (
-            <div className="grid grid-cols-2 gap-3">
-              {archivedTasks.some((task) => task.id === selectedTask.id) ? (
-                <>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-10 gap-2"
-                    disabled={restoringTaskId === selectedTask.id}
-                    onClick={() => void handleRestoreTask(selectedTask.id)}
-                  >
-                    {restoringTaskId === selectedTask.id ? (
-                      <Loader2 className="size-3.5 animate-spin" />
-                    ) : (
-                      <ArchiveRestore className="size-3.5" />
-                    )}
-                    {commonT('actions.unarchive')}
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    size="sm"
-                    className="h-10 gap-2"
-                    onClick={() => setDeletePromptTask(selectedTask)}
-                  >
-                    <Trash2 className="size-3.5" />
-                    {commonT('actions.delete')}
-                  </Button>
-                </>
-              ) : (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="col-span-2 h-10 gap-2"
-                  disabled={archivingTaskId === selectedTask.id}
-                  onClick={() => void handleArchiveTask(selectedTask.id)}
-                >
-                  {archivingTaskId === selectedTask.id ? (
-                    <Loader2 className="size-3.5 animate-spin" />
-                  ) : (
-                    <Archive className="size-3.5" />
-                  )}
-                  {commonT('actions.archive')}
-                </Button>
-              )}
-            </div>
-          ) : null
-        }
-      />
-
-      {!isLimitedView ? (
-        <Sheet
-          open={isEditSheetOpen}
-          onOpenChange={(open) => {
-            if (!open) {
-              closeEditSheet();
-            }
-          }}
-        >
-          <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
-            <SheetHeader>
-              <SheetTitle>{formT('editTitle')}</SheetTitle>
-              <SheetDescription>{formT('description')}</SheetDescription>
-            </SheetHeader>
-
-            <ProjectFormScreen
-              projectId={projectId}
-              onCancel={closeEditSheet}
-              onSaved={async () => {
-                closeEditSheet();
-                await refetch();
-              }}
-            />
-          </SheetContent>
-        </Sheet>
-      ) : null}
-
-      {!isLimitedView ? (
-        <Sheet
-          open={taskFormOpen}
-          onOpenChange={(open) => {
-            if (!open) {
-              setTaskFormOpen(false);
-              setEditingTaskId(null);
-              setTaskFormData(EMPTY_TASK_FORM);
-            }
-          }}
-        >
-          <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
-            <SheetHeader>
-              <SheetTitle>
-                {editingTaskId
-                  ? t('taskForm.titleEdit')
-                  : t('taskForm.titleNew')}
-              </SheetTitle>
-            </SheetHeader>
-
-            <div className="flex-1 space-y-4 overflow-y-auto px-4 py-2">
-              <div className="space-y-1.5">
-                <Label htmlFor="task-name">{t('taskForm.nameLabel')} *</Label>
-                <Input
-                  id="task-name"
-                  placeholder={t('taskForm.namePlaceholder')}
-                  value={taskFormData.name}
-                  onChange={(e) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      name: e.target.value,
-                    }))
-                  }
-                />
-              </div>
-
-              <div className="space-y-1.5">
-                <Label htmlFor="task-description">
-                  {t('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-1.5">
-                  <Label>{t('taskForm.priorityLabel')}</Label>
-                  <Select
-                    value={taskFormData.priority}
-                    onValueChange={(v) =>
-                      setTaskFormData((prev) => ({
-                        ...prev,
-                        priority: v 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-1.5">
-                  <Label>{t('taskForm.columnLabel')}</Label>
-                  <Select
-                    value={taskFormData.status}
-                    onValueChange={(v) =>
-                      setTaskFormData((prev) => ({
-                        ...prev,
-                        status: v as BoardColumnId,
-                      }))
-                    }
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {KANBAN_COLUMNS.map((col) => (
-                        <SelectItem key={col.id} value={col.id}>
-                          {col.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              <div className="space-y-1.5">
-                <Label>Responsável</Label>
-                <Select
-                  value={taskFormData.assigneeCollaboratorId}
-                  onValueChange={(value) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      assigneeCollaboratorId: value,
-                    }))
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder={commonT('labels.notAssigned')} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="none">
-                      {commonT('labels.notAssigned')}
-                    </SelectItem>
-                    {taskAssigneeOptions.map((option) => (
-                      <SelectItem key={option.id} value={option.id}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="grid grid-cols-2 gap-3">
-                <div className="space-y-1.5">
-                  <Label htmlFor="task-due-date">
-                    {t('taskForm.deadlineLabel')}
-                  </Label>
-                  <Input
-                    id="task-due-date"
-                    type="date"
-                    value={taskFormData.dueDate}
-                    onChange={(e) =>
-                      setTaskFormData((prev) => ({
-                        ...prev,
-                        dueDate: e.target.value,
-                      }))
-                    }
-                  />
-                </div>
-
-                <div className="space-y-1.5">
-                  <Label htmlFor="task-estimate">
-                    {t('taskForm.estimateLabel')}
-                  </Label>
-                  <Input
-                    id="task-estimate"
-                    type="number"
-                    min="0"
-                    step="0.5"
-                    placeholder="0"
-                    value={taskFormData.estimateHours}
-                    onChange={(e) =>
-                      setTaskFormData((prev) => ({
-                        ...prev,
-                        estimateHours: e.target.value,
-                      }))
-                    }
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-1.5">
-                <Label htmlFor="task-tags">{t('taskForm.tagsLabel')}</Label>
-                <Input
-                  id="task-tags"
-                  placeholder={t('taskForm.tagsPlaceholder')}
-                  value={taskFormData.tags}
-                  onChange={(e) =>
-                    setTaskFormData((prev) => ({
-                      ...prev,
-                      tags: e.target.value,
-                    }))
-                  }
-                />
-              </div>
-
-              {editingTaskId ? (
-                <div className="space-y-1.5">
-                  <Label className="flex items-center gap-1.5">
-                    <Paperclip className="size-3.5" />
-                    {t('taskForm.attachmentsLabel')}
-                  </Label>
-                  <TaskFileAttachments taskId={editingTaskId} />
-                </div>
-              ) : null}
-            </div>
-
-            <div className="mt-4 flex flex-wrap items-center justify-between gap-2 border-t px-4 pb-4 pt-4">
-              <div className="flex gap-2">
-                {editingTaskId ? (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    disabled={
-                      taskFormLoading || archivingTaskId === editingTaskId
-                    }
-                    onClick={() => {
-                      if (!editingTaskId) return;
-                      const id = editingTaskId;
-                      setTaskFormOpen(false);
-                      setEditingTaskId(null);
-                      setTaskFormData(EMPTY_TASK_FORM);
-                      void handleArchiveTask(id);
-                    }}
-                  >
-                    {archivingTaskId === editingTaskId ? (
-                      <Loader2 className="mr-2 size-4 animate-spin" />
-                    ) : (
-                      <Archive className="mr-2 size-4" />
-                    )}
-                    {commonT('actions.archive')}
-                  </Button>
-                ) : null}
-              </div>
-              <div className="flex gap-2">
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setTaskFormOpen(false);
-                    setEditingTaskId(null);
-                    setTaskFormData(EMPTY_TASK_FORM);
-                  }}
-                  disabled={taskFormLoading}
-                >
-                  {commonT('actions.cancel')}
-                </Button>
-                <Button
-                  onClick={() => void handleTaskFormSubmit()}
-                  disabled={taskFormLoading || !taskFormData.name.trim()}
-                >
-                  {taskFormLoading
-                    ? t('taskForm.saving')
-                    : editingTaskId
-                      ? commonT('actions.save')
-                      : commonT('actions.create')}
-                </Button>
-              </div>
-            </div>
-          </SheetContent>
-        </Sheet>
-      ) : null}
-
-      {!isLimitedView ? (
-        <>
-          <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"
-                    disabled={deletingTaskId === deletePromptTask.id}
-                    onClick={() => void handleDeleteTask(deletePromptTask.id)}
-                  >
-                    {deletingTaskId === deletePromptTask.id ? (
-                      <Loader2 className="mr-2 size-3.5 animate-spin" />
-                    ) : null}
-                    {commonT('actions.delete')}
-                  </Button>
-                ) : null}
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        </>
-      ) : null}
-    </Page>
-  );
-}