@hed-hog/operations 0.0.321 → 0.0.325

package/hedhog/frontend/app/_components/project-details-screen.tsx.ejs

@@ -1,8 +1,10 @@
 '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,
@@ -17,8 +19,8 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
 import {
   Select,
   SelectContent,
@@ -33,6 +35,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
   TableBody,
@@ -41,43 +44,81 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+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,
+  Paperclip,
   Pencil,
   Plus,
   Rocket,
-  Rows3,
+  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';
@@ -97,10 +138,12 @@ import {
   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';
 
@@ -118,6 +161,16 @@ type BoardTask = {
   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 = {
@@ -156,7 +209,15 @@ const KANBAN_COLUMNS: Array<{ id: BoardColumnId; label: string }> = [
   { id: 'done', label: 'Concluído' },
 ];
 
-function apiTaskToBoardTask(row: any): BoardTask {
+// 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';
@@ -174,6 +235,12 @@ function apiTaskToBoardTask(row: any): BoardTask {
     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,
   };
 }
 
@@ -189,6 +256,13 @@ function splitTasksByColumn(tasks: BoardTask[]): BoardColumns {
 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) {
@@ -248,24 +322,20 @@ function DraggableTaskCard({
 }: {
   task: BoardTask;
   disabled?: boolean;
-  children: (isDragging: boolean) => React.ReactNode;
+  children: (isDragging: boolean) => ReactNode;
 }) {
-  if (disabled) {
-    return <div>{children(false)}</div>;
-  }
-
   const { attributes, listeners, setNodeRef, transform, isDragging } =
-    useDraggable({ id: taskDragId(task.id) });
+    useDraggable({ id: taskDragId(task.id), disabled });
 
   return (
     <div
       ref={setNodeRef}
       style={{ transform: CSS.Translate.toString(transform) }}
-      {...listeners}
-      {...attributes}
+      {...(disabled ? {} : listeners)}
+      {...(disabled ? {} : attributes)}
       className={isDragging ? 'z-20' : undefined}
     >
-      {children(isDragging)}
+      {children(disabled ? false : isDragging)}
     </div>
   );
 }
@@ -324,6 +394,698 @@ function normalizeDateInputValue(value?: string | null) {
   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');
@@ -407,6 +1169,14 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     updateSheetQuery(false);
   };
 
+  const activeTab = searchParams.get('tab') ?? 'tasks';
+
+  const setActiveTab = (tab: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('tab', tab);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
   const getDeliveryModelLabel = (value?: string | null) => {
     if (!value) {
       return commonT('labels.notAvailable');
@@ -439,7 +1209,11 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     return labels[value as keyof typeof labels] ?? formatEnumLabel(value);
   };
 
-  const { data: project, refetch } = useQuery<OperationsProjectDetails>({
+  const {
+    data: project,
+    refetch,
+    isLoading: isProjectLoading,
+  } = useQuery<OperationsProjectDetails>({
     queryKey: ['operations-project-details', currentLocaleCode, projectId],
     queryFn: () =>
       fetchOperations<OperationsProjectDetails>(
@@ -448,10 +1222,14 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
       ),
   });
 
-  const { data: rawTasks = [], refetch: refetchTasks } = useQuery<any[]>({
+  const {
+    data: rawTasks = [],
+    refetch: refetchTasks,
+    isLoading: isTasksLoading,
+  } = useQuery<ApiBoardTask[]>({
     queryKey: ['operations-project-board-tasks', projectId],
     queryFn: () =>
-      fetchOperations<any[]>(
+      fetchOperations<ApiBoardTask[]>(
         request,
         `/operations/projects/${projectId}/tasks`
       ),
@@ -469,7 +1247,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
       enabled: Boolean(project),
     });
 
-  const { data: projectStats } = useQuery<{
+  const { data: projectStats, isLoading: isProjectStatsLoading } = useQuery<{
     weeklyVelocity: Array<{ weekLabel: string; loggedHours: number }>;
     allocationByCollaborator: Array<{ name: string; allocation: number }>;
     quickRadar: {
@@ -495,6 +1273,23 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   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(
@@ -512,6 +1307,36 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     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 (
@@ -566,7 +1391,6 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     setTaskFormLoading(true);
     try {
       const payload: Record<string, unknown> = {
-        projectId,
         name: taskFormData.name.trim(),
         description: taskFormData.description || null,
         priority: taskFormData.priority,
@@ -589,7 +1413,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
           payload
         );
       } else {
-        await mutateOperations(request, '/operations/tasks', 'POST', payload);
+        await mutateOperations(request, '/operations/tasks', 'POST', {
+          projectId,
+          ...payload,
+        });
       }
       setBoardState(null);
       await refetchTasks();
@@ -611,6 +1438,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
   const handleArchiveTask = useCallback(
     async (taskId: number) => {
+      setArchivingTaskId(taskId);
       try {
         await mutateOperations(
           request,
@@ -626,6 +1454,8 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         await refetchArchivedTasks();
       } catch {
         // ignore
+      } finally {
+        setArchivingTaskId(null);
       }
     },
     [request, refetchTasks, refetchArchivedTasks]
@@ -633,6 +1463,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
   const handleRestoreTask = useCallback(
     async (taskId: number) => {
+      setRestoringTaskId(taskId);
       try {
         await mutateOperations(
           request,
@@ -647,13 +1478,43 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         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,
@@ -667,6 +1528,8 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         await refetchArchivedTasks();
       } catch {
         // ignore
+      } finally {
+        setDeletingTaskId(null);
       }
     },
     [request, refetchTasks, refetchArchivedTasks]
@@ -705,13 +1568,16 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     return [];
   }, [projectStats]);
 
-  const findColumnByTask = (taskId: number) => {
-    const match = KANBAN_COLUMNS.find((column) =>
-      taskColumns[column.id].some((task) => task.id === taskId)
-    );
+  const findColumnByTask = useCallback(
+    (taskId: number) => {
+      const match = KANBAN_COLUMNS.find((column) =>
+        taskColumns[column.id].some((task) => task.id === taskId)
+      );
 
-    return match?.id ?? null;
-  };
+      return match?.id ?? null;
+    },
+    [taskColumns]
+  );
 
   const moveTaskToColumn = useCallback(
     (taskId: number, targetColumn: BoardColumnId) => {
@@ -751,10 +1617,20 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         void refetchTasks();
       });
     },
-    [taskColumns, project, request, refetchTasks]
-  ); // eslint-disable-line react-hooks/exhaustive-deps
+    [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);
 
@@ -765,9 +1641,149 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     moveTaskToColumn(taskId, targetColumn);
   };
 
-  if (!project) {
-    return (
-      <Page>
+  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')}
@@ -784,886 +1800,2333 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     );
   }
 
-  const cards = [
-    {
-      key: 'teamSize',
-      title: t('cards.teamSize'),
-      value: project.teamSize ?? 0,
-      description: t('cards.teamSizeDescription'),
-    },
+  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 = [
     {
-      key: 'timesheets',
-      title: t('cards.timesheets'),
-      value: project.timesheetSummary.totalTimesheets,
-      description: t('cards.timesheetsDescription', {
-        pending: project.timesheetSummary.pendingTimesheets,
-      }),
+      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),
-      description: t('cards.loggedHoursDescription'),
+      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),
-      description: t('cards.allocationDescription'),
+      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>
-      <OperationsHeader
-        title={project.name}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={
-          access.isDirector ? (
-            <div className="flex gap-2">
-              {project.contractId ? (
-                <Button variant="outline" size="sm" asChild>
-                  <Link
-                    href={`/operations/contracts?edit=${project.contractId}`}
-                  >
-                    <FileText className="size-4" />
-                    {commonT('actions.openContract')}
-                  </Link>
-                </Button>
-              ) : null}
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.2 }}
+        className="flex flex-col gap-0 pt-4"
+      >
+        {/* Row 1: Identity + actions */}
+        <div className="flex flex-wrap items-center gap-3 pb-2">
+          <div className="flex min-w-0 flex-1 items-center gap-3">
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-xl border bg-background shadow-xs">
+              <FolderKanban className="size-5 text-primary" />
+            </div>
+            <div className="min-w-0">
+              <nav
+                aria-label="Breadcrumb"
+                className="mb-0.5 flex items-center gap-1 text-[11px] text-muted-foreground"
+              >
+                <Link
+                  href="/operations/projects"
+                  className="transition hover:text-foreground"
+                >
+                  {t('breadcrumbTrail.projects')}
+                </Link>
+                <ChevronRight className="size-3" />
+                <span className="font-medium text-foreground">
+                  {project.code || project.name}
+                </span>
+              </nav>
+              <div className="flex flex-wrap items-center gap-2">
+                <h1 className="text-base font-semibold leading-tight">
+                  {project.name}
+                </h1>
+                <StatusBadge
+                  label={getProjectStatusLabel(project.status)}
+                  className={getStatusBadgeClass(project.status)}
+                />
+                <span
+                  className={[
+                    'rounded-full px-2 py-0.5 text-xs font-medium',
+                    projectHealth.tone === 'good'
+                      ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+                      : projectHealth.tone === 'warning'
+                        ? 'bg-amber-500/15 text-amber-600 dark:text-amber-400'
+                        : 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
+                  ].join(' ')}
+                >
+                  {projectHealthLabel}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="flex shrink-0 flex-wrap gap-1.5">
+            {access.isDirector ? (
               <Button
                 size="sm"
                 onClick={openEditSheet}
-                className="cursor-pointer"
+                className="cursor-pointer gap-1.5"
               >
-                <Pencil className="size-4" />
+                <Pencil className="size-3.5" />
                 {commonT('actions.edit')}
               </Button>
-            </div>
-          ) : undefined
-        }
-      />
-
-      {!isLimitedView ? (
-        <>
-          <div className="rounded-xl border bg-linear-to-b from-muted/40 to-background p-3 sm:p-4">
-            <KpiCardsGrid items={cards} />
+            ) : null}
           </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-7"
-            >
-              <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)}
+        {/* Row 2: Metadata strip */}
+        <div className="flex flex-wrap border-y text-xs">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
+                <Avatar className="size-5 shrink-0 border bg-muted">
+                  <AvatarImage
+                    src={getPersonAvatarUrl(project.clientAvatarId)}
+                    alt={project.clientName || ''}
+                  />
+                  <AvatarFallback className="text-[9px]">
+                    {getInitials(project.clientName)}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="max-w-28 truncate font-medium">
+                  {project.clientName || commonT('labels.notAvailable')}
+                </span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.client')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
+                <Rocket className="size-3.5 shrink-0 text-muted-foreground" />
+                <span className="max-w-32 truncate">
+                  {project.deliveryModel
+                    ? getDeliveryModelLabel(project.deliveryModel)
+                    : commonT('labels.notAvailable')}
+                </span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.deliveryModel')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
+                <Users className="size-3.5 shrink-0 text-muted-foreground" />
+                <span className="max-w-28 truncate">
+                  {project.managerName || commonT('labels.notAssigned')}
+                </span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.manager')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
+                <CalendarDays className="size-3.5 shrink-0 text-muted-foreground" />
+                <span>
+                  {formatDate(
+                    project.startDate,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.startDate')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={[
+                  'flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30',
+                  isPastDue(project.endDate) ? 'text-rose-500' : '',
+                ].join(' ')}
+              >
+                <CalendarClock className="size-3.5 shrink-0 text-muted-foreground" />
+                <span>
+                  {formatDate(
+                    project.endDate,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.endDate')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-2 border-r px-3 py-2 transition hover:bg-muted/30">
+                <Gauge className="size-3.5 shrink-0 text-muted-foreground" />
+                <div className="flex items-center gap-1.5">
+                  <div className="h-1.5 w-20 overflow-hidden rounded-full bg-muted">
+                    <motion.div
+                      initial={{ width: 0 }}
+                      animate={{ width: `${displayedProgress}%` }}
+                      transition={{ duration: 0.7, ease: 'easeOut' }}
+                      className="h-full rounded-full bg-primary"
                     />
-                  </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>
+                  <span className="w-8 text-right font-semibold tabular-nums">
+                    {displayedProgress}%
+                  </span>
                 </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)}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.progress')}
+              </p>
+              <p className="font-medium">
+                {completedTasks}/{totalTasks} {t('executive.completedTasks')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-2 px-3 py-2 transition hover:bg-muted/30">
+                <div className="flex -space-x-1.5">
+                  {teamPreview.map((assignment) => (
+                    <Avatar
+                      key={assignment.id}
+                      className="size-6 border-2 border-card bg-muted"
+                    >
+                      <AvatarImage
+                        src={
+                          getUserPhotoUrl(assignment.userPhotoId) ||
+                          getPersonAvatarUrl(assignment.personAvatarId)
+                        }
+                        alt={assignment.collaboratorName}
                       />
-                    ) : (
-                      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}
+                      <AvatarFallback className="text-[9px]">
+                        {getInitials(assignment.collaboratorName)}
+                      </AvatarFallback>
+                    </Avatar>
+                  ))}
+                  {hiddenTeamCount > 0 ? (
+                    <div className="flex size-6 items-center justify-center rounded-full border-2 border-card bg-muted text-[10px] font-semibold text-muted-foreground">
+                      +{hiddenTeamCount}
+                    </div>
+                  ) : null}
                 </div>
+                <span className="text-xs text-muted-foreground">
+                  {project.assignments.length}
+                </span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="max-w-44">
+              <p className="mb-1 font-medium">{t('executive.team')}</p>
+              {teamPreview.map((a) => (
+                <p key={a.id} className="text-xs text-muted-foreground">
+                  {a.collaboratorName}
+                  {a.roleLabel ? ` · ${a.roleLabel}` : ''}
+                </p>
+              ))}
+              {hiddenTeamCount > 0 ? (
+                <p className="text-xs text-muted-foreground">
+                  +{hiddenTeamCount}
+                </p>
               ) : null}
-            </SectionCard>
+            </TooltipContent>
+          </Tooltip>
+        </div>
 
-            <SectionCard
-              title={t('sections.contract')}
-              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-5"
-            >
-              {project.relatedContract ? (
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between rounded-lg border bg-muted/20 px-4 py-3">
-                    <div>
-                      <div className="font-medium">
-                        {project.relatedContract.name}
+        {/* Row 3: KPI strip */}
+        {!isLimitedView ? (
+          <div className="flex divide-x bg-muted/10">
+            {kpiWidgets.map((kpi, index) => {
+              const kpiToneClass =
+                kpi.tone === 'critical'
+                  ? 'text-rose-500'
+                  : kpi.tone === 'warning'
+                    ? 'text-amber-500'
+                    : kpi.tone === 'positive'
+                      ? 'text-emerald-500'
+                      : 'text-sky-500';
+              const kpiBarClass =
+                kpi.tone === 'critical'
+                  ? 'bg-rose-500'
+                  : kpi.tone === 'warning'
+                    ? 'bg-amber-500'
+                    : kpi.tone === 'positive'
+                      ? 'bg-emerald-500'
+                      : 'bg-sky-500';
+              const isVelocity = kpi.key === 'velocity';
+              const velocityBars = velocityChartData.slice(-5);
+              const velocityMax = Math.max(
+                ...velocityBars.map((d) => d.loggedHours),
+                1
+              );
+              return (
+                <Tooltip key={kpi.key}>
+                  <TooltipTrigger asChild>
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ delay: index * 0.05 }}
+                      className="flex flex-1 cursor-default select-none items-center gap-2 px-3 py-2 transition hover:bg-muted/20"
+                    >
+                      <kpi.icon
+                        className={['size-4 shrink-0', kpiToneClass].join(' ')}
+                      />
+                      <div className="min-w-0 flex-1">
+                        <div className="text-sm font-semibold leading-none">
+                          {kpi.value}
+                        </div>
+                        {isVelocity && velocityBars.length > 1 ? (
+                          <div className="mt-1.5 flex items-end gap-px">
+                            {velocityBars.map((d, i) => (
+                              <motion.div
+                                key={i}
+                                className={[
+                                  'w-1.5 rounded-sm opacity-70',
+                                  kpiBarClass,
+                                ].join(' ')}
+                                initial={{ height: 0 }}
+                                animate={{
+                                  height: `${Math.max(3, Math.round((d.loggedHours / velocityMax) * 16))}px`,
+                                }}
+                                transition={{
+                                  delay: index * 0.05 + i * 0.06,
+                                  type: 'spring',
+                                  stiffness: 180,
+                                }}
+                              />
+                            ))}
+                          </div>
+                        ) : (
+                          <div className="mt-1.5 h-1 overflow-hidden rounded-full bg-muted">
+                            <motion.div
+                              initial={{ width: 0 }}
+                              animate={{
+                                width: `${clampPercent(kpi.indicator)}%`,
+                              }}
+                              transition={{
+                                duration: 0.55,
+                                delay: index * 0.07,
+                                ease: 'easeOut',
+                              }}
+                              className={[
+                                'h-full rounded-full',
+                                kpiBarClass,
+                              ].join(' ')}
+                            />
+                          </div>
+                        )}
                       </div>
-                      <div className="text-sm text-muted-foreground">
-                        {[
-                          project.relatedContract.code,
-                          project.relatedContract.clientName,
-                        ]
-                          .filter(Boolean)
-                          .join(' • ') || commonT('labels.notAvailable')}
+                    </motion.div>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className="max-w-52">
+                    <p className="font-medium">{kpi.title}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {kpi.subtitle}
+                    </p>
+                    <p className="mt-1 text-xs font-medium">{kpi.trend}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+        ) : null}
+      </motion.div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className="flex-wrap">
+          <TabsTrigger value="tasks">{t('tabs.tasks')}</TabsTrigger>
+          {!isLimitedView ? (
+            <TabsTrigger value="overview">{t('tabs.overview')}</TabsTrigger>
+          ) : null}
+          {!isLimitedView ? (
+            <TabsTrigger value="analysis">{t('tabs.analysis')}</TabsTrigger>
+          ) : null}
+          <TabsTrigger value="team">{t('tabs.team')}</TabsTrigger>
+          <TabsTrigger value="timeline">{t('tabs.timeline')}</TabsTrigger>
+          <TabsTrigger value="archive">{t('tabs.archive')}</TabsTrigger>
+          <TabsTrigger value="costs">{t('tabs.costs')}</TabsTrigger>
+        </TabsList>
+
+        {!isLimitedView ? (
+          <TabsContent value="overview">
+            <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>
-                    </div>
-                    <StatusBadge
-                      label={getContractStatusLabel(
-                        project.relatedContract.status
+                    </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
                       )}
-                      className={getStatusBadgeClass(
-                        project.relatedContract.status
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.endDate')}
+                    </dt>
+                    <dd className="font-medium">
+                      {formatDate(
+                        project.endDate,
+                        getSettingValue,
+                        currentLocaleCode
                       )}
-                    />
+                    </dd>
                   </div>
-                  <dl className="grid gap-3 text-sm md:grid-cols-2">
-                    <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>
+                    <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>
-                    <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>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      {t('noContract')}
+                    </p>
+                  )}
+                </div>
+              </SectionCard>
+            </div>
+          </TabsContent>
+        ) : null}
+
+        {!isLimitedView ? (
+          <TabsContent value="analysis">
+            <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>
-                    <div>
-                      <dt className="text-muted-foreground">
-                        {commonT('labels.billingModel')}
-                      </dt>
-                      <dd className="font-medium">
-                        {getBillingModelLabel(
-                          project.relatedContract.billingModel
-                        )}
-                      </dd>
+                  ) : (
+                    <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>
-                      <dt className="text-muted-foreground">
-                        {commonT('labels.timeline')}
-                      </dt>
-                      <dd className="font-medium">
-                        {formatDateRange(
-                          project.relatedContract.startDate,
-                          project.relatedContract.endDate,
+                  </div>
+                </ProjectChartCard>
+              </div>
+            </SectionCard>
+          </TabsContent>
+        ) : null}
+
+        <TabsContent value="tasks" className="space-y-4">
+          <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="outline"
+                  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>
+        </TabsContent>
+
+        <TabsContent value="timeline">
+          <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
                         )}
-                      </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 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>
-                    <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>
+                  ))}
+                  {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>
-                  </dl>
-
-                  <Button variant="outline" size="sm" asChild className="w-fit">
-                    <Link
-                      href={`/operations/contracts?edit=${project.relatedContract.id}`}
-                    >
-                      <FileText className="size-4" />
-                      {commonT('actions.openContract')}
-                    </Link>
-                  </Button>
+                  ) : null}
                 </div>
               ) : (
-                <p className="text-sm text-muted-foreground">
-                  {t('noContract')}
-                </p>
-              )}
-            </SectionCard>
-          </div>
-
-          <div className="grid gap-4 xl:grid-cols-12">
-            <SectionCard
-              title={t('sections.deliveryHealth')}
-              description={t('sections.deliveryHealthDescription')}
-              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-7"
-            >
-              <div className="grid gap-4 lg:grid-cols-2">
-                <div className="rounded-lg border bg-muted/10 p-3">
-                  <div className="mb-2 flex items-center gap-2 text-sm font-medium">
-                    <BarChart3 className="size-4 text-sky-700" />
-                    {t('charts.allocationByCollaborator')}
+                <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>
-                  <ChartContainer
-                    className="h-60 w-full"
-                    config={boardChartConfig}
-                  >
-                    <BarChart data={allocationChartData}>
-                      <CartesianGrid vertical={false} />
-                      <XAxis dataKey="name" tickLine={false} axisLine={false} />
-                      <YAxis tickLine={false} axisLine={false} width={28} />
-                      <ChartTooltip
-                        content={<ChartTooltipContent hideLabel />}
-                      />
-                      <Bar
-                        dataKey="allocation"
-                        radius={6}
-                        fill="var(--color-allocation)"
-                      />
-                    </BarChart>
-                  </ChartContainer>
-                </div>
-
-                <div className="rounded-lg border bg-muted/10 p-3">
-                  <div className="mb-2 flex items-center gap-2 text-sm font-medium">
-                    <Rocket className="size-4 text-emerald-700" />
-                    {t('charts.weeklyVelocity')}
+                  <div className="mt-3 text-sm font-medium">
+                    {t('timeline.emptyTitle')}
                   </div>
-                  <ChartContainer
-                    className="h-60 w-full"
-                    config={boardChartConfig}
-                  >
-                    <LineChart data={velocityChartData}>
-                      <CartesianGrid vertical={false} />
-                      <XAxis dataKey="week" tickLine={false} axisLine={false} />
-                      <YAxis tickLine={false} axisLine={false} width={28} />
-                      <ChartTooltip content={<ChartTooltipContent />} />
-                      <Line
-                        type="monotone"
-                        dataKey="loggedHours"
-                        stroke="var(--color-loggedHours)"
-                        strokeWidth={2.5}
-                        dot={{ r: 3 }}
-                      />
-                      <Line
-                        type="monotone"
-                        dataKey="completedTasks"
-                        stroke="var(--color-allocation)"
-                        strokeWidth={2}
-                        dot={{ r: 3 }}
-                      />
-                    </LineChart>
-                  </ChartContainer>
+                  <p className="mt-1 max-w-sm text-xs leading-5 text-muted-foreground">
+                    {t('timeline.empty')}
+                  </p>
                 </div>
-              </div>
-            </SectionCard>
+              )}
+            </div>
+          </SectionCard>
+        </TabsContent>
 
-            <SectionCard
-              title={t('sections.quickRadar')}
-              description={t('sections.quickRadarDescription')}
-              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-5"
-            >
-              <div className="space-y-3">
-                <div className="rounded-lg border bg-emerald-50/50 p-3">
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">
-                      {t('quickRadar.activeAssignments')}
-                    </span>
-                    <span className="font-semibold text-emerald-700">
-                      {projectStats?.quickRadar?.activeAssignments ??
-                        project.operationalIndicators.activeAssignments}
-                    </span>
-                  </div>
-                </div>
-                <div className="rounded-lg border bg-amber-50/50 p-3">
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">
-                      {t('quickRadar.timesheetPendencies')}
-                    </span>
-                    <span className="font-semibold text-amber-700">
-                      {projectStats?.quickRadar?.pendingTimesheets ??
-                        project.timesheetSummary.pendingTimesheets}
-                    </span>
-                  </div>
-                </div>
-                <div className="rounded-lg border bg-sky-50/50 p-3">
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">
-                      {t('quickRadar.plannedWeeklyHours')}
-                    </span>
-                    <span className="font-semibold text-sky-700">
-                      {formatHours(
-                        projectStats?.quickRadar?.totalWeeklyHours ??
-                          project.operationalIndicators.totalWeeklyHours
-                      )}
-                    </span>
-                  </div>
-                </div>
+        <TabsContent value="archive">
+          <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>
-            </SectionCard>
-          </div>
-        </>
-      ) : null}
+            ) : (
+              <ChartEmptyState
+                icon={Archive}
+                title={commonT('states.emptyTitle')}
+                description={t('emptyArchivedDescription')}
+              />
+            )}
+          </SectionCard>
+        </TabsContent>
 
-      <SectionCard
-        title={t('sections.taskBoard')}
-        description={t('sections.taskBoardDescription')}
-        className="rounded-xl border bg-card p-4 shadow-sm"
-        actions={
-          !isLimitedView ? (
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => openCreateTaskForm()}
+        <TabsContent value="team">
+          <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(' ')}
             >
-              <Plus className="size-4" />
-              {t('taskForm.titleNew')}
-            </Button>
-          ) : undefined
-        }
-      >
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={onBoardDragEnd}
-        >
-          <div className="grid gap-4 xl:grid-cols-4">
-            {KANBAN_COLUMNS.map((column) => (
-              <DroppableColumn key={column.id} columnId={column.id}>
-                {(isOver) => (
-                  <div
-                    className={[
-                      'rounded-xl border bg-muted/20 p-3 transition-colors',
-                      isOver ? 'border-primary bg-primary/5' : 'border-border',
-                    ].join(' ')}
-                  >
-                    <div className="mb-3 flex items-center justify-between">
-                      <div className="flex items-center gap-2 text-sm font-semibold">
-                        <Rows3 className="size-4 text-muted-foreground" />
-                        {column.label}
+              {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="flex items-center gap-1">
-                        <span className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">
-                          {taskColumns[column.id].length}
-                        </span>
+                      <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="space-y-2">
-                      {taskColumns[column.id].map((task) => (
-                        <DraggableTaskCard
-                          key={task.id}
-                          task={task}
-                          disabled={false}
+                  <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(' ')}
                         >
-                          {(isDragging) => (
-                            <div
-                              role="button"
-                              tabIndex={0}
-                              className={[
-                                'w-full cursor-pointer rounded-lg border bg-card p-3 text-left shadow-xs transition',
-                                isDragging
-                                  ? 'border-primary/50 opacity-75'
-                                  : 'hover:border-primary/40 hover:shadow-sm',
-                              ].join(' ')}
-                              onClick={() => setSelectedTask(task)}
-                              onKeyDown={(event) => {
-                                if (
-                                  event.key === 'Enter' ||
-                                  event.key === ' '
-                                ) {
-                                  event.preventDefault();
-                                  setSelectedTask(task);
-                                }
-                              }}
-                            >
-                              <div className="mb-2 flex items-start justify-between gap-2">
-                                <p className="text-sm font-medium leading-snug">
-                                  {task.name}
-                                </p>
-                                <div className="flex items-start gap-2">
-                                  <span
-                                    className={[
-                                      'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
-                                      task.priority === 'high'
-                                        ? 'bg-rose-100 text-rose-700'
-                                        : task.priority === 'medium'
-                                          ? 'bg-amber-100 text-amber-700'
-                                          : 'bg-emerald-100 text-emerald-700',
-                                    ].join(' ')}
-                                  >
-                                    {getTaskPriorityLabel(task.priority)}
-                                  </span>
-                                  <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="icon"
-                                    className="size-7 shrink-0 rounded-full"
-                                    onPointerDown={(event) =>
-                                      event.stopPropagation()
+                          <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
+                                      )
                                     }
-                                    onClick={(event) => {
-                                      event.stopPropagation();
-                                      openEditTaskForm(task);
-                                    }}
-                                  >
-                                    <Pencil className="size-3.5" />
-                                  </Button>
+                                    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>
 
-                              {task.tags ? (
-                                <div className="mb-2 flex flex-wrap gap-1">
-                                  {task.tags.split(',').map((tag) => (
-                                    <span
-                                      key={`${task.id}-${tag.trim()}`}
-                                      className="rounded-md bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
-                                    >
-                                      {tag.trim()}
-                                    </span>
-                                  ))}
+                          <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="flex items-center justify-between text-xs text-muted-foreground">
-                                <span className="inline-flex items-center gap-1">
-                                  <AlarmClock className="size-3.5" />
-                                  {formatDate(
-                                    task.dueDate,
+                            <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
                                   )}
-                                </span>
-                                <span>
-                                  {task.estimateHours != null
-                                    ? `${task.estimateHours}h`
-                                    : ''}
-                                </span>
-                              </div>
-
-                              {task.assigneeName ? (
-                                <div className="mt-2 flex items-center gap-1.5">
-                                  <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[9px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
-                                    {(() => {
-                                      const photoUrl = getUserPhotoUrl(
-                                        task.assigneeUserPhotoId
-                                      );
-                                      const avatarUrl =
-                                        task.assigneePersonAvatarId
-                                          ? getPersonAvatarUrl(
-                                              task.assigneePersonAvatarId
-                                            )
-                                          : null;
-                                      const imgSrc = photoUrl ?? avatarUrl;
-                                      return imgSrc ? (
-                                        // eslint-disable-next-line @next/next/no-img-element
-                                        <img
-                                          src={imgSrc}
-                                          alt={task.assigneeName}
-                                          className="size-full object-cover"
-                                        />
-                                      ) : (
-                                        getInitials(task.assigneeName)
-                                      );
-                                    })()}
-                                  </div>
-                                  <span className="truncate text-[11px] text-muted-foreground">
-                                    {task.assigneeName}
-                                  </span>
                                 </div>
-                              ) : null}
+                              </div>
                             </div>
-                          )}
-                        </DraggableTaskCard>
-                      ))}
-                    </div>
+                          </div>
+                        </motion.div>
+                      );
+                    })}
                   </div>
-                )}
-              </DroppableColumn>
-            ))}
-          </div>
-        </DndContext>
-      </SectionCard>
+                </div>
+              ) : (
+                <ChartEmptyState
+                  icon={Users}
+                  title={commonT('states.emptyTitle')}
+                  description={t('noAssignments')}
+                />
+              )}
+            </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}
+            {!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>
-                    </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"
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            void handleRestoreTask(task.id);
-                          }}
-                        >
-                          <ArchiveRestore className="size-4" />
-                          {commonT('actions.unarchive')}
-                        </Button>
-                        <Button
-                          variant="destructive"
-                          size="sm"
-                          className="gap-2"
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            setDeletePromptTask(task);
-                          }}
+                      <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(' ')}
                         >
-                          <Trash2 className="size-4" />
-                          {commonT('actions.delete')}
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        ) : (
-          <p className="text-sm text-muted-foreground">
-            {t('emptyArchivedDescription')}
-          </p>
-        )}
-      </SectionCard>
-
-      <div className="grid gap-4 xl:grid-cols-12">
-        <SectionCard
-          title={t('sections.team')}
-          description={t('sections.teamDescription')}
-          className={[
-            'rounded-xl border bg-card p-4 shadow-sm',
-            isLimitedView ? 'xl:col-span-12' : 'xl:col-span-8',
-          ].join(' ')}
-        >
-          {project.assignments.length > 0 ? (
-            <div className="overflow-x-auto rounded-lg border bg-muted/10">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{commonT('labels.collaborator')}</TableHead>
-                    <TableHead>{commonT('labels.role')}</TableHead>
-                    <TableHead className="hidden lg:table-cell">
-                      {commonT('labels.allocationPercent')}
-                    </TableHead>
-                    <TableHead>{commonT('labels.weeklyCapacity')}</TableHead>
-                    <TableHead className="hidden xl:table-cell">
-                      {commonT('labels.timeline')}
-                    </TableHead>
-                    <TableHead>{commonT('labels.status')}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {project.assignments.map((assignment) => (
-                    <TableRow key={assignment.id}>
-                      <TableCell>
-                        <div className="flex items-center gap-2">
-                          <Avatar className="h-8 w-8 border border-border/60 bg-muted">
-                            <AvatarImage
-                              src={
-                                getUserPhotoUrl(assignment.userPhotoId) ||
-                                getPersonAvatarUrl(assignment.personAvatarId)
-                              }
-                              alt={assignment.collaboratorName}
-                            />
-                            <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
-                              {getInitials(assignment.collaboratorName)}
-                            </AvatarFallback>
-                          </Avatar>
-                          <span>{assignment.collaboratorName}</span>
+                          {value}
                         </div>
-                      </TableCell>
-                      <TableCell>
-                        {assignment.roleLabel || commonT('labels.notAssigned')}
-                      </TableCell>
-                      <TableCell className="hidden lg:table-cell">
-                        {formatPercent(assignment.allocationPercent)}
-                      </TableCell>
-                      <TableCell>
-                        {assignment.weeklyHours
-                          ? formatHours(assignment.weeklyHours)
-                          : commonT('labels.notAvailable')}
-                      </TableCell>
-                      <TableCell className="hidden xl:table-cell">
-                        {formatDateRange(
-                          assignment.startDate,
-                          assignment.endDate,
-                          getSettingValue,
-                          currentLocaleCode
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        <StatusBadge
-                          label={formatEnumLabel(assignment.status)}
-                          className={getStatusBadgeClass(assignment.status)}
-                        />
-                      </TableCell>
-                    </TableRow>
+                      </div>
+                    </div>
                   ))}
-                </TableBody>
-              </Table>
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              {t('noAssignments')}
-            </p>
-          )}
-        </SectionCard>
+                </div>
+              </SectionCard>
+            ) : null}
+          </div>
+        </TabsContent>
 
-        {!isLimitedView ? (
+        <TabsContent value="costs">
           <SectionCard
-            title={t('sections.indicators')}
-            description={t('sections.indicatorsDescription')}
-            className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-4"
+            title={t('sections.costs')}
+            description={t('sections.costsDescription')}
+            className="rounded-2xl border bg-card p-4 shadow-sm"
           >
-            <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-1">
-              <div>
-                <dt className="text-muted-foreground">
-                  {t('indicators.activeAssignments')}
-                </dt>
-                <dd className="font-medium">
-                  {project.operationalIndicators.activeAssignments}
-                </dd>
-              </div>
-              <div>
-                <dt className="text-muted-foreground">
-                  {t('indicators.completedAssignments')}
-                </dt>
-                <dd className="font-medium">
-                  {project.operationalIndicators.completedAssignments}
-                </dd>
-              </div>
-              <div>
-                <dt className="text-muted-foreground">
-                  {t('indicators.averageAllocation')}
-                </dt>
-                <dd className="font-medium">
-                  {formatPercent(
-                    project.operationalIndicators.averageAllocation
-                  )}
-                </dd>
-              </div>
-              <div>
-                <dt className="text-muted-foreground">
-                  {t('indicators.totalWeeklyHours')}
-                </dt>
-                <dd className="font-medium">
-                  {formatHours(project.operationalIndicators.totalWeeklyHours)}
-                </dd>
-              </div>
-              <div>
-                <dt className="text-muted-foreground">
-                  {t('cards.timesheets')}
-                </dt>
-                <dd className="font-medium">
-                  {project.timesheetSummary.totalTimesheets}
-                </dd>
-              </div>
-              <div>
-                <dt className="text-muted-foreground">
-                  {commonT('labels.pending')}
-                </dt>
-                <dd className="font-medium">
-                  {project.timesheetSummary.pendingTimesheets}
-                </dd>
-              </div>
-              <div>
-                <dt className="text-muted-foreground">
-                  {t('cards.loggedHours')}
-                </dt>
-                <dd className="font-medium">
-                  {formatHours(project.timesheetSummary.totalHours)}
-                </dd>
-              </div>
-            </dl>
+            <ProjectCostsSection projectId={projectId} />
           </SectionCard>
-        ) : null}
-      </div>
+        </TabsContent>
+      </Tabs>
 
       <TaskDetailSheet
         task={selectedTask}
@@ -1685,9 +4148,14 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                     variant="outline"
                     size="sm"
                     className="h-10 gap-2"
+                    disabled={restoringTaskId === selectedTask.id}
                     onClick={() => void handleRestoreTask(selectedTask.id)}
                   >
-                    <ArchiveRestore className="size-3.5" />
+                    {restoringTaskId === selectedTask.id ? (
+                      <Loader2 className="size-3.5 animate-spin" />
+                    ) : (
+                      <ArchiveRestore className="size-3.5" />
+                    )}
                     {commonT('actions.unarchive')}
                   </Button>
                   <Button
@@ -1701,26 +4169,20 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   </Button>
                 </>
               ) : (
-                <>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-10 gap-2"
-                    onClick={() => openEditTaskForm(selectedTask as BoardTask)}
-                  >
-                    <Pencil className="size-3.5" />
-                    {commonT('actions.edit')}
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-10 gap-2"
-                    onClick={() => void handleArchiveTask(selectedTask.id)}
-                  >
+                <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>
-                </>
+                  )}
+                  {commonT('actions.archive')}
+                </Button>
               )}
             </div>
           ) : null
@@ -1755,7 +4217,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
       ) : null}
 
       {!isLimitedView ? (
-        <Dialog
+        <Sheet
           open={taskFormOpen}
           onOpenChange={(open) => {
             if (!open) {
@@ -1765,16 +4227,16 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             }
           }}
         >
-          <DialogContent className="sm:max-w-lg">
-            <DialogHeader>
-              <DialogTitle>
+          <SheetContent className="flex w-full flex-col overflow-hidden sm:max-w-xl">
+            <SheetHeader>
+              <SheetTitle>
                 {editingTaskId
                   ? t('taskForm.titleEdit')
                   : t('taskForm.titleNew')}
-              </DialogTitle>
-            </DialogHeader>
+              </SheetTitle>
+            </SheetHeader>
 
-            <div className="space-y-4">
+            <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
@@ -1794,15 +4256,12 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                 <Label htmlFor="task-description">
                   {t('taskForm.descriptionLabel')}
                 </Label>
-                <Textarea
-                  id="task-description"
-                  placeholder={t('taskForm.descriptionPlaceholder')}
-                  rows={3}
+                <RichTextEditor
                   value={taskFormData.description}
-                  onChange={(e) =>
+                  onChange={(val) =>
                     setTaskFormData((prev) => ({
                       ...prev,
-                      description: e.target.value,
+                      description: val,
                     }))
                   }
                 />
@@ -1942,33 +4401,71 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   }
                 />
               </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>
 
-            <DialogFooter className="mt-4">
-              <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>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+            <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 ? (
@@ -1996,8 +4493,12 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                 {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}