@hed-hog/operations 0.0.322 → 0.0.326

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

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