@hed-hog/operations 0.0.321 → 0.0.322

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,
@@ -16,9 +18,16 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 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 +42,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
   TableBody,
@@ -41,43 +51,81 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import {
   closestCenter,
   DndContext,
+  DragOverlay,
   PointerSensor,
+  pointerWithin,
   useDraggable,
   useDroppable,
   useSensor,
   useSensors,
+  type CollisionDetection,
   type DragEndEvent,
+  type DragStartEvent,
   type UniqueIdentifier,
 } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
   AlarmClock,
+  AlertTriangle,
   Archive,
   ArchiveRestore,
+  BarChart2,
   BarChart3,
+  CalendarClock,
+  CalendarDays,
+  CheckCircle2,
+  ChevronRight,
+  ClipboardList,
   FileText,
   FolderKanban,
+  Gauge,
+  GitCommitHorizontal,
+  HeartPulse,
+  LineChart as LineChartIcon,
+  Loader2,
+  MessageSquare,
+  MoreHorizontal,
+  Paperclip,
   Pencil,
   Plus,
   Rocket,
-  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';
@@ -101,6 +149,7 @@ 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 +167,14 @@ type BoardTask = {
   assigneeUserPhotoId: number | null;
   assigneePersonAvatarId: number | null;
   projectAssignmentId: number | null;
+  createdAt: string | null;
+};
+
+type ApiBoardTask = Partial<BoardTask> & {
+  id: number;
+  name: string;
+  status?: string | null;
+  priority?: BoardTask['priority'] | null;
 };
 
 type TaskFormState = {
@@ -156,7 +213,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 +239,7 @@ function apiTaskToBoardTask(row: any): BoardTask {
     assigneeUserPhotoId: row.assigneeUserPhotoId ?? null,
     assigneePersonAvatarId: row.assigneePersonAvatarId ?? null,
     projectAssignmentId: row.projectAssignmentId ?? null,
+    createdAt: row.createdAt ?? null,
   };
 }
 
@@ -189,6 +255,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 +321,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 +393,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.description ? 1 : 0;
+}
+
+function getTaskAttachmentCount() {
+  return 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');
@@ -439,7 +1200,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 +1213,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 +1238,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 +1264,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 +1298,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 +1382,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 +1404,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 +1429,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
   const handleArchiveTask = useCallback(
     async (taskId: number) => {
+      setArchivingTaskId(taskId);
       try {
         await mutateOperations(
           request,
@@ -626,6 +1445,8 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         await refetchArchivedTasks();
       } catch {
         // ignore
+      } finally {
+        setArchivingTaskId(null);
       }
     },
     [request, refetchTasks, refetchArchivedTasks]
@@ -633,6 +1454,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
   const handleRestoreTask = useCallback(
     async (taskId: number) => {
+      setRestoringTaskId(taskId);
       try {
         await mutateOperations(
           request,
@@ -647,13 +1469,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 +1519,8 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         await refetchArchivedTasks();
       } catch {
         // ignore
+      } finally {
+        setDeletingTaskId(null);
       }
     },
     [request, refetchTasks, refetchArchivedTasks]
@@ -705,13 +1559,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 +1608,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,12 +1632,152 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     moveTaskToColumn(taskId, targetColumn);
   };
 
-  if (!project) {
-    return (
-      <Page>
-        <OperationsHeader
-          title={t('title')}
-          description={t('description')}
+  const timelineEvents = useMemo<OperationalTimelineEvent[]>(() => {
+    if (!project) {
+      return [];
+    }
+
+    const events: OperationalTimelineEvent[] = [];
+    const projectStart = getValidTimestamp(project.startDate);
+    const projectEnd = getValidTimestamp(project.endDate);
+
+    if (projectStart) {
+      events.push({
+        id: `project-start-${project.id}`,
+        type: 'status',
+        title: t('timeline.projectStarted'),
+        description: t('timeline.projectStartedDescription', {
+          project: project.name,
+        }),
+        timestamp: projectStart,
+        actorName: project.managerName,
+        actorAvatarId: project.managerAvatarId,
+        icon: Rocket,
+        toneClassName: 'bg-sky-500 text-white',
+      });
+    }
+
+    if (projectEnd) {
+      events.push({
+        id: `project-deadline-${project.id}`,
+        type: 'status',
+        title: t('timeline.targetDate'),
+        description: t('timeline.targetDateDescription'),
+        timestamp: projectEnd,
+        actorName: project.managerName,
+        actorAvatarId: project.managerAvatarId,
+        icon: CalendarClock,
+        toneClassName: isPastDue(project.endDate)
+          ? 'bg-rose-500 text-white'
+          : 'bg-violet-500 text-white',
+      });
+    }
+
+    apiTasks.forEach((task) => {
+      const taskCreatedAt =
+        getValidTimestamp(task.createdAt) ??
+        getValidTimestamp(task.dueDate) ??
+        projectStart;
+      const actorName = task.assigneeName || project.managerName;
+
+      if (taskCreatedAt) {
+        events.push({
+          id: `task-created-${task.id}`,
+          type: 'task',
+          title: t('timeline.taskCreated'),
+          description: task.name,
+          timestamp: taskCreatedAt,
+          actorName,
+          actorAvatarId: task.assigneePersonAvatarId,
+          actorUserPhotoId: task.assigneeUserPhotoId,
+          icon: Plus,
+          toneClassName: 'bg-slate-500 text-white',
+        });
+      }
+
+      if (task.status === 'done') {
+        events.push({
+          id: `task-done-${task.id}`,
+          type: 'status',
+          title: t('timeline.taskCompleted'),
+          description: task.name,
+          timestamp:
+            getValidTimestamp(task.dueDate) ??
+            taskCreatedAt ??
+            new Date().toISOString(),
+          actorName,
+          actorAvatarId: task.assigneePersonAvatarId,
+          actorUserPhotoId: task.assigneeUserPhotoId,
+          icon: CheckCircle2,
+          toneClassName: 'bg-emerald-500 text-white',
+        });
+      }
+
+      if (task.description) {
+        events.push({
+          id: `task-comment-${task.id}`,
+          type: 'comment',
+          title: t('timeline.commentAdded'),
+          description: task.name,
+          timestamp: taskCreatedAt ?? new Date().toISOString(),
+          actorName,
+          actorAvatarId: task.assigneePersonAvatarId,
+          actorUserPhotoId: task.assigneeUserPhotoId,
+          icon: MessageSquare,
+          toneClassName: 'bg-indigo-500 text-white',
+        });
+      }
+    });
+
+    if (project.timesheetSummary.totalTimesheets > 0) {
+      events.push({
+        id: `timesheets-${project.id}`,
+        type: 'timesheet',
+        title: t('timeline.timesheetLogged'),
+        description: t('timeline.timesheetLoggedDescription', {
+          count: project.timesheetSummary.totalTimesheets,
+          hours: formatHours(project.timesheetSummary.totalHours),
+        }),
+        timestamp: new Date().toISOString(),
+        actorName: project.managerName,
+        actorAvatarId: project.managerAvatarId,
+        icon: Timer,
+        toneClassName: 'bg-cyan-500 text-white',
+      });
+    }
+
+    if (project.timesheetSummary.pendingTimesheets > 0) {
+      events.push({
+        id: `approvals-${project.id}`,
+        type: 'approval',
+        title: t('timeline.approvalPending'),
+        description: t('timeline.approvalPendingDescription', {
+          count: project.timesheetSummary.pendingTimesheets,
+        }),
+        timestamp: new Date().toISOString(),
+        actorName: project.managerName,
+        actorAvatarId: project.managerAvatarId,
+        icon: GitCommitHorizontal,
+        toneClassName: 'bg-amber-500 text-white',
+      });
+    }
+
+    return events.sort(
+      (a, b) =>
+        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+    );
+  }, [apiTasks, project, t]);
+
+  if (isProjectLoading) {
+    return <ProjectDetailsSkeleton />;
+  }
+
+  if (!project) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
           current={t('breadcrumb')}
         />
         <EmptyState
@@ -784,77 +1791,538 @@ 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>
+      <motion.section
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.25 }}
+        className="overflow-hidden rounded-3xl border bg-card shadow-sm"
+      >
+        <div className="relative overflow-hidden border-b bg-linear-to-br from-muted/70 via-background to-background p-5 sm:p-6">
+          <div className="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-primary/40 to-transparent" />
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+              <div className="min-w-0 space-y-4">
+                <nav
+                  aria-label="Breadcrumb"
+                  className="flex min-w-0 flex-wrap items-center gap-1.5 text-xs text-muted-foreground"
+                >
                   <Link
-                    href={`/operations/contracts?edit=${project.contractId}`}
+                    href="/operations/projects"
+                    className="transition hover:text-foreground"
+                  >
+                    {t('breadcrumbTrail.operations')}
+                  </Link>
+                  <ChevronRight className="size-3.5" />
+                  <Link
+                    href="/operations/projects"
+                    className="transition hover:text-foreground"
+                  >
+                    {t('breadcrumbTrail.projects')}
+                  </Link>
+                  <ChevronRight className="size-3.5" />
+                  <span className="max-w-[12rem] truncate font-medium text-foreground sm:max-w-md">
+                    {project.code || project.name}
+                  </span>
+                </nav>
+
+                <div className="flex min-w-0 items-start gap-4">
+                  <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border bg-background shadow-xs">
+                    <FolderKanban className="size-7 text-primary" />
+                  </div>
+                  <div className="min-w-0 space-y-2">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="rounded-full border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
+                        {project.code || commonT('labels.notAvailable')}
+                      </span>
+                      <StatusBadge
+                        label={getProjectStatusLabel(project.status)}
+                        className={getStatusBadgeClass(project.status)}
+                      />
+                    </div>
+                    <div className="space-y-1.5">
+                      <h1 className="max-w-5xl text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
+                        {project.name}
+                      </h1>
+                      <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
+                        {project.summary || t('executive.fallbackDescription')}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-wrap gap-2 lg:justify-end">
+                {access.isDirector ? (
+                  <Button
+                    size="sm"
+                    onClick={openEditSheet}
+                    className="cursor-pointer gap-2"
+                  >
+                    <Pencil className="size-4" />
+                    {commonT('actions.edit')}
+                  </Button>
+                ) : null}
+                {!isLimitedView ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => openCreateTaskForm()}
+                    className="cursor-pointer gap-2"
                   >
-                    <FileText className="size-4" />
-                    {commonT('actions.openContract')}
+                    <Plus className="size-4" />
+                    {t('taskForm.titleNew')}
+                  </Button>
+                ) : null}
+                <Button variant="outline" size="sm" asChild>
+                  <Link href="/operations/timesheets">
+                    <Timer className="size-4" />
+                    {t('quickActions.timesheet')}
                   </Link>
                 </Button>
-              ) : null}
-              <Button
-                size="sm"
-                onClick={openEditSheet}
-                className="cursor-pointer"
-              >
-                <Pencil className="size-4" />
-                {commonT('actions.edit')}
-              </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="size-9 cursor-pointer"
+                      aria-label={t('quickActions.more')}
+                    >
+                      <MoreHorizontal className="size-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-56">
+                    <DropdownMenuItem asChild>
+                      <Link href="/operations/reports/projects">
+                        <BarChart2 className="size-4" />
+                        {t('quickActions.reports')}
+                      </Link>
+                    </DropdownMenuItem>
+                    {project.contractId ? (
+                      <DropdownMenuItem asChild>
+                        <Link
+                          href={`/operations/contracts?edit=${project.contractId}`}
+                        >
+                          <FileText className="size-4" />
+                          {commonT('actions.openContract')}
+                        </Link>
+                      </DropdownMenuItem>
+                    ) : null}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem asChild>
+                      <Link href="/operations/projects">
+                        <FolderKanban className="size-4" />
+                        {t('breadcrumbTrail.projects')}
+                      </Link>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+
+            <div className="grid gap-3 text-sm md:grid-cols-2 xl:grid-cols-7">
+              <div className="rounded-xl border bg-background/70 p-3 xl:col-span-2">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Users className="size-4" />
+                  {commonT('labels.client')}
+                </div>
+                <div className="mt-2 flex items-center gap-2 font-medium">
+                  <Avatar className="size-7 border bg-muted">
+                    <AvatarImage
+                      src={getPersonAvatarUrl(project.clientAvatarId)}
+                      alt={project.clientName || commonT('labels.client')}
+                    />
+                    <AvatarFallback className="text-[10px]">
+                      {getInitials(project.clientName)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <span className="truncate">
+                    {project.clientName || commonT('labels.notAvailable')}
+                  </span>
+                </div>
+              </div>
+              <div className="rounded-xl border bg-background/70 p-3">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Rocket className="size-4" />
+                  {commonT('labels.deliveryModel')}
+                </div>
+                <div className="mt-2 truncate font-medium">
+                  {project.deliveryModel
+                    ? getDeliveryModelLabel(project.deliveryModel)
+                    : commonT('labels.notAvailable')}
+                </div>
+              </div>
+              <div className="rounded-xl border bg-background/70 p-3">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Users className="size-4" />
+                  {commonT('labels.manager')}
+                </div>
+                <div className="mt-2 truncate font-medium">
+                  {project.managerName || commonT('labels.notAssigned')}
+                </div>
+              </div>
+              <div className="rounded-xl border bg-background/70 p-3">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <CalendarDays className="size-4" />
+                  {commonT('labels.startDate')}
+                </div>
+                <div className="mt-2 font-medium">
+                  {formatDate(
+                    project.startDate,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </div>
+              </div>
+              <div className="rounded-xl border bg-background/70 p-3">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <CalendarClock className="size-4" />
+                  {commonT('labels.endDate')}
+                </div>
+                <div className="mt-2 font-medium">
+                  {formatDate(
+                    project.endDate,
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </div>
+              </div>
+              <div className="rounded-xl border bg-background/70 p-3">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Gauge className="size-4" />
+                  {commonT('labels.progress')}
+                </div>
+                <div className="mt-2 flex items-center gap-3">
+                  <Progress value={displayedProgress} className="h-2" />
+                  <span className="text-sm font-semibold tabular-nums">
+                    {displayedProgress}%
+                  </span>
+                </div>
+              </div>
             </div>
-          ) : undefined
-        }
-      />
+
+            <div className="flex flex-col gap-4 rounded-2xl border bg-background/75 p-4 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-center gap-3">
+                <div>
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    <Users className="size-4" />
+                    <span className="text-xs font-medium uppercase tracking-[0.18em]">
+                      {t('executive.team')}
+                    </span>
+                  </div>
+                  <div className="mt-1 text-sm font-semibold">
+                    {t('executive.membersCount', {
+                      count: project.assignments.length,
+                    })}
+                  </div>
+                </div>
+                <div className="flex -space-x-2">
+                  {teamPreview.map((assignment) => (
+                    <Tooltip key={assignment.id}>
+                      <TooltipTrigger asChild>
+                        <Avatar className="size-10 cursor-default border-2 border-background bg-muted transition-transform hover:z-10 hover:scale-110">
+                          <AvatarImage
+                            src={
+                              getUserPhotoUrl(assignment.userPhotoId) ||
+                              getPersonAvatarUrl(assignment.personAvatarId)
+                            }
+                            alt={assignment.collaboratorName}
+                          />
+                          <AvatarFallback className="text-xs">
+                            {getInitials(assignment.collaboratorName)}
+                          </AvatarFallback>
+                        </Avatar>
+                      </TooltipTrigger>
+                      <TooltipContent side="bottom" className="text-xs">
+                        <p className="font-medium">
+                          {assignment.collaboratorName}
+                        </p>
+                        {assignment.roleLabel ? (
+                          <p className="text-muted-foreground">
+                            {assignment.roleLabel}
+                          </p>
+                        ) : null}
+                      </TooltipContent>
+                    </Tooltip>
+                  ))}
+                  {hiddenTeamCount > 0 ? (
+                    <div className="flex size-10 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-semibold text-muted-foreground">
+                      +{hiddenTeamCount}
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-3 gap-3 text-sm sm:min-w-80">
+                <div className="rounded-xl border bg-muted/20 p-3">
+                  <div className="text-muted-foreground">
+                    {commonT('labels.status')}
+                  </div>
+                  <div className="mt-1">
+                    <StatusBadge
+                      label={getProjectStatusLabel(project.status)}
+                      className={getStatusBadgeClass(project.status)}
+                    />
+                  </div>
+                </div>
+                <div className="rounded-xl border bg-muted/20 p-3">
+                  <div className="text-muted-foreground">
+                    {t('cards.projectHealth')}
+                  </div>
+                  <div className="mt-1 font-semibold">{projectHealthLabel}</div>
+                </div>
+                <div className="rounded-xl border bg-muted/20 p-3">
+                  <div className="text-muted-foreground">
+                    {t('executive.completedTasks')}
+                  </div>
+                  <div className="mt-1 font-semibold">
+                    {completedTasks}/{totalTasks}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.section>
 
       {!isLimitedView ? (
         <>
-          <div className="rounded-xl border bg-linear-to-b from-muted/40 to-background p-3 sm:p-4">
-            <KpiCardsGrid items={cards} />
+          <div className="rounded-3xl border bg-linear-to-b from-muted/50 to-background p-3 shadow-sm sm:p-4">
+            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-6">
+              {kpiWidgets.map((item, index) => (
+                <ProjectKpiWidget
+                  key={item.key}
+                  item={item}
+                  index={index}
+                  indicatorLabel={t('kpi.indicator')}
+                />
+              ))}
+            </div>
           </div>
 
           <div className="grid gap-4 xl:grid-cols-12">
             <SectionCard
               title={t('sections.overview')}
-              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-7"
+              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>
@@ -1003,175 +2471,225 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                   {project.summary}
                 </div>
               ) : null}
-            </SectionCard>
 
-            <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}
+              {/* 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="text-sm text-muted-foreground">
-                        {[
-                          project.relatedContract.code,
-                          project.relatedContract.clientName,
-                        ]
-                          .filter(Boolean)
-                          .join(' • ') || commonT('labels.notAvailable')}
+                      <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>
-                    <StatusBadge
-                      label={getContractStatusLabel(
-                        project.relatedContract.status
-                      )}
-                      className={getStatusBadgeClass(
-                        project.relatedContract.status
-                      )}
-                    />
+                    <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>
-                  <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>
-                    <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>
-
-                  <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>
-                </div>
-              ) : (
-                <p className="text-sm text-muted-foreground">
-                  {t('noContract')}
-                </p>
-              )}
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    {t('noContract')}
+                  </p>
+                )}
+              </div>
             </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>
+          <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-60 w-full"
+                    className="h-80 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 />}
+                    <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"
                       />
-                      <Bar
-                        dataKey="allocation"
-                        radius={6}
-                        fill="var(--color-allocation)"
+                      <Area
+                        type="monotone"
+                        dataKey="loggedHours"
+                        stroke="var(--color-loggedHours)"
+                        strokeWidth={2.5}
+                        fill="url(#burnupLogged)"
                       />
-                    </BarChart>
+                    </AreaChart>
                   </ChartContainer>
-                </div>
+                ) : (
+                  <ChartEmptyState
+                    icon={LineChartIcon}
+                    title={t('charts.emptyTitle')}
+                    description={t('charts.emptyBurnup')}
+                  />
+                )}
+              </ProjectChartCard>
 
-                <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>
+              <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-60 w-full"
+                    className="h-80 w-full"
                     config={boardChartConfig}
                   >
                     <LineChart data={velocityChartData}>
-                      <CartesianGrid vertical={false} />
+                      <CartesianGrid vertical={false} strokeDasharray="3 3" />
                       <XAxis dataKey="week" tickLine={false} axisLine={false} />
-                      <YAxis tickLine={false} axisLine={false} width={28} />
+                      <YAxis tickLine={false} axisLine={false} width={30} />
                       <ChartTooltip content={<ChartTooltipContent />} />
                       <Line
                         type="monotone"
@@ -1179,245 +2697,873 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                         stroke="var(--color-loggedHours)"
                         strokeWidth={2.5}
                         dot={{ r: 3 }}
-                      />
-                      <Line
-                        type="monotone"
-                        dataKey="completedTasks"
-                        stroke="var(--color-allocation)"
-                        strokeWidth={2}
-                        dot={{ r: 3 }}
+                        activeDot={{ r: 5 }}
                       />
                     </LineChart>
                   </ChartContainer>
-                </div>
-              </div>
-            </SectionCard>
+                ) : (
+                  <ChartEmptyState
+                    icon={Rocket}
+                    title={t('charts.emptyTitle')}
+                    description={t('charts.emptyVelocity')}
+                  />
+                )}
+              </ProjectChartCard>
 
-            <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>
+              <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>
-                <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>
+                ) : (
+                  <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>
-              </div>
-            </SectionCard>
+              </ProjectChartCard>
+            </div>
+          </SectionCard>
+        </>
+      ) : null}
+
+      <SectionCard
+        title={t('sections.taskBoard')}
+        description={t('sections.taskBoardDescription')}
+        className="rounded-3xl border bg-card p-4 shadow-sm"
+        actions={
+          !isLimitedView ? (
+            <Button
+              size="sm"
+              variant="default"
+              className="gap-2"
+              onClick={() => openCreateTaskForm()}
+            >
+              <Plus className="size-4" />
+              {t('taskForm.titleNew')}
+            </Button>
+          ) : undefined
+        }
+      >
+        <div className="mb-4 flex flex-col gap-3 rounded-2xl border bg-muted/20 p-3 lg:flex-row lg:items-center lg:justify-between">
+          <div className="relative min-w-0 flex-1">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={boardSearch}
+              onChange={(event) => setBoardSearch(event.target.value)}
+              placeholder={t('kanban.searchPlaceholder')}
+              className="h-10 bg-background pl-9"
+            />
+          </div>
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+            <div className="flex items-center gap-2 rounded-xl border bg-background px-3 py-2 text-xs text-muted-foreground">
+              <SlidersHorizontal className="size-4" />
+              {t('kanban.filters')}
+            </div>
+            <Select
+              value={boardPriorityFilter}
+              onValueChange={(value) =>
+                setBoardPriorityFilter(value as typeof boardPriorityFilter)
+              }
+            >
+              <SelectTrigger className="h-10 w-full bg-background sm:w-44">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{t('kanban.allPriorities')}</SelectItem>
+                <SelectItem value="high">
+                  {getTaskPriorityLabel('high')}
+                </SelectItem>
+                <SelectItem value="medium">
+                  {getTaskPriorityLabel('medium')}
+                </SelectItem>
+                <SelectItem value="low">
+                  {getTaskPriorityLabel('low')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Select value={boardGroupMode} onValueChange={setBoardGroupMode}>
+              <SelectTrigger className="h-10 w-full bg-background sm:w-44">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="status">
+                  {t('kanban.groupStatus')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <DndContext
+          sensors={sensors}
+          collisionDetection={kanbanCollision}
+          onDragStart={onBoardDragStart}
+          onDragCancel={() => setActiveDragTask(null)}
+          onDragEnd={onBoardDragEnd}
+        >
+          <div className="relative">
+            <div className="grid auto-cols-[minmax(19rem,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2 xl:grid-flow-row xl:grid-cols-4 xl:overflow-visible xl:pb-0">
+              {KANBAN_COLUMNS.map((column) => (
+                <DroppableColumn key={column.id} columnId={column.id}>
+                  {(isOver) => (
+                    <div
+                      className={[
+                        'flex min-h-[32rem] flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
+                        getColumnClassName(column.id),
+                        isOver
+                          ? 'border-primary shadow-lg ring-2 ring-primary/15'
+                          : 'border-border',
+                      ].join(' ')}
+                    >
+                      <div className="mb-3 flex items-center justify-between gap-3 rounded-2xl border bg-background/85 p-3 shadow-xs">
+                        <div className="min-w-0">
+                          <div className="flex items-center gap-2 text-sm font-semibold">
+                            <span
+                              className={[
+                                'size-2.5 rounded-full',
+                                getColumnDotClassName(column.id),
+                              ].join(' ')}
+                            />
+                            {column.label}
+                          </div>
+                          <div className="mt-1 text-xs text-muted-foreground">
+                            {filteredTaskColumns[column.id].length}/
+                            {taskColumns[column.id].length} {t('kanban.items')}
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <span className="rounded-full border bg-background px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                            {filteredTaskColumns[column.id].length}
+                          </span>
+                          {!isLimitedView ? (
+                            <button
+                              type="button"
+                              className="flex size-5 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
+                              onClick={() => {
+                                setInlineCreateColumn(column.id);
+                                setInlineCreateName('');
+                              }}
+                            >
+                              <Plus className="size-3.5" />
+                            </button>
+                          ) : null}
+                        </div>
+                      </div>
+
+                      <div className="flex flex-1 flex-col gap-2">
+                        <AnimatePresence initial={false}>
+                          {filteredTaskColumns[column.id].map((task) => {
+                            const tags = getTaskTags(task);
+                            const comments = getTaskCommentCount(task);
+                            const attachments = getTaskAttachmentCount();
+                            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={() => openEditTaskForm(task)}
+                                    onKeyDown={(event) => {
+                                      if (
+                                        event.key === 'Enter' ||
+                                        event.key === ' '
+                                      ) {
+                                        event.preventDefault();
+                                        openEditTaskForm(task);
+                                      }
+                                    }}
+                                  >
+                                    <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>
-        </>
-      ) : null}
+          {/* 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();
+                  return (
+                    <div className="w-76 cursor-grabbing rounded-2xl border border-primary/60 bg-card p-3 shadow-2xl ring-2 ring-primary/20 opacity-95">
+                      <div className="mb-3 flex items-start justify-between gap-2">
+                        <div className="min-w-0 space-y-1">
+                          <p className="line-clamp-2 text-sm font-semibold leading-snug">
+                            {overlayTask.name}
+                          </p>
+                          {overlayTask.description ? (
+                            <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
+                              {overlayTask.description.replace(/<[^>]*>/g, '')}
+                            </p>
+                          ) : null}
+                        </div>
+                        <span
+                          className={[
+                            'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                            getPriorityClassName(overlayTask.priority),
+                          ].join(' ')}
+                        >
+                          {getTaskPriorityLabel(overlayTask.priority)}
+                        </span>
+                      </div>
+
+                      {overlayTags.length > 0 ? (
+                        <div className="mb-3 flex flex-wrap gap-1">
+                          {overlayTags.slice(0, 4).map((tag) => (
+                            <span
+                              key={tag}
+                              className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground"
+                            >
+                              {tag}
+                            </span>
+                          ))}
+                          {overlayTags.length > 4 ? (
+                            <span className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                              +{overlayTags.length - 4}
+                            </span>
+                          ) : null}
+                        </div>
+                      ) : null}
+
+                      <div className="grid grid-cols-2 gap-2 text-xs">
+                        <div
+                          className={[
+                            'rounded-xl border bg-muted/20 px-2 py-1.5',
+                            isPastDue(overlayTask.dueDate) &&
+                            overlayTask.status !== 'done'
+                              ? 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300'
+                              : 'text-muted-foreground',
+                          ].join(' ')}
+                        >
+                          <span className="flex items-center gap-1">
+                            <AlarmClock className="size-3.5" />
+                            {formatDate(
+                              overlayTask.dueDate,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </span>
+                        </div>
+                        <div className="rounded-xl border bg-muted/20 px-2 py-1.5 text-muted-foreground">
+                          <span className="flex items-center gap-1">
+                            <Timer className="size-3.5" />
+                            {overlayTask.estimateHours != null
+                              ? `${overlayTask.estimateHours}h`
+                              : t('kanban.noEstimate')}
+                          </span>
+                        </div>
+                      </div>
+
+                      <div className="mt-3 space-y-1.5">
+                        <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                          <span>{t('kanban.progress')}</span>
+                          <span>{getTaskProgress(overlayTask.status)}%</span>
+                        </div>
+                        <Progress
+                          value={getTaskProgress(overlayTask.status)}
+                          className="h-1.5"
+                        />
+                      </div>
+
+                      <div className="mt-3 flex items-center justify-between gap-3 border-t pt-3">
+                        <div className="flex min-w-0 items-center gap-2">
+                          <div className="flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                            {(() => {
+                              const photoUrl = getUserPhotoUrl(
+                                overlayTask.assigneeUserPhotoId
+                              );
+                              const avatarUrl =
+                                overlayTask.assigneePersonAvatarId
+                                  ? getPersonAvatarUrl(
+                                      overlayTask.assigneePersonAvatarId
+                                    )
+                                  : null;
+                              const imgSrc = photoUrl ?? avatarUrl;
+                              return imgSrc ? (
+                                // eslint-disable-next-line @next/next/no-img-element
+                                <img
+                                  src={imgSrc}
+                                  alt={
+                                    overlayTask.assigneeName ||
+                                    commonT('labels.notAssigned')
+                                  }
+                                  className="size-full object-cover"
+                                />
+                              ) : (
+                                getInitials(overlayTask.assigneeName)
+                              );
+                            })()}
+                          </div>
+                          <span className="truncate text-[11px] text-muted-foreground">
+                            {overlayTask.assigneeName ||
+                              commonT('labels.notAssigned')}
+                          </span>
+                        </div>
+                        <div className="flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
+                          <span className="inline-flex items-center gap-1">
+                            <MessageSquare className="size-3.5" />
+                            {overlayComments}
+                          </span>
+                          <span className="inline-flex items-center gap-1">
+                            <Paperclip className="size-3.5" />
+                            {overlayAttachments}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })()
+              : null}
+          </DragOverlay>
+        </DndContext>
+      </SectionCard>
 
       <SectionCard
-        title={t('sections.taskBoard')}
-        description={t('sections.taskBoardDescription')}
-        className="rounded-xl border bg-card p-4 shadow-sm"
+        title={t('sections.timeline')}
+        description={t('sections.timelineDescription')}
+        className="rounded-3xl border bg-card p-4 shadow-sm"
         actions={
-          !isLimitedView ? (
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => openCreateTaskForm()}
+          <div className="flex flex-wrap items-center gap-2">
+            <Select
+              value={timelineTypeFilter}
+              onValueChange={(value) => {
+                setTimelineTypeFilter(value as typeof timelineTypeFilter);
+                setTimelineVisibleCount(8);
+              }}
             >
-              <Plus className="size-4" />
-              {t('taskForm.titleNew')}
-            </Button>
-          ) : undefined
+              <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>
         }
       >
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={onBoardDragEnd}
-        >
-          <div className="grid gap-4 xl:grid-cols-4">
-            {KANBAN_COLUMNS.map((column) => (
-              <DroppableColumn key={column.id} columnId={column.id}>
-                {(isOver) => (
-                  <div
-                    className={[
-                      'rounded-xl border bg-muted/20 p-3 transition-colors',
-                      isOver ? 'border-primary bg-primary/5' : 'border-border',
-                    ].join(' ')}
-                  >
-                    <div className="mb-3 flex items-center justify-between">
-                      <div className="flex items-center gap-2 text-sm font-semibold">
-                        <Rows3 className="size-4 text-muted-foreground" />
-                        {column.label}
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <span className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">
-                          {taskColumns[column.id].length}
-                        </span>
-                      </div>
-                    </div>
-
-                    <div className="space-y-2">
-                      {taskColumns[column.id].map((task) => (
-                        <DraggableTaskCard
-                          key={task.id}
-                          task={task}
-                          disabled={false}
+        <div className="rounded-3xl border bg-linear-to-b from-muted/30 to-background p-4">
+          {groupedTimelineEvents.length > 0 ? (
+            <div className="space-y-6">
+              {groupedTimelineEvents.map((group) => (
+                <div key={group.dayKey} className="space-y-3">
+                  <div className="sticky top-0 z-10 w-fit rounded-full border bg-background px-3 py-1 text-xs font-medium text-muted-foreground shadow-xs">
+                    {formatDate(
+                      group.dayKey,
+                      getSettingValue,
+                      currentLocaleCode
+                    )}
+                  </div>
+                  <div className="space-y-0">
+                    {group.events.map((event, index) => {
+                      const Icon = event.icon;
+                      return (
+                        <motion.div
+                          key={event.id}
+                          initial={{ opacity: 0, y: 8 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          transition={{ duration: 0.18 }}
+                          className="grid grid-cols-[2rem_1fr] gap-3"
                         >
-                          {(isDragging) => (
+                          <div className="flex flex-col items-center">
                             <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',
+                                'flex size-8 items-center justify-center rounded-full shadow-sm',
+                                event.toneClassName,
                               ].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()
-                                    }
-                                    onClick={(event) => {
-                                      event.stopPropagation();
-                                      openEditTaskForm(task);
-                                    }}
-                                  >
-                                    <Pencil className="size-3.5" />
-                                  </Button>
-                                </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()}
+                              <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>
-                              ) : null}
-
-                              <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,
-                                    getSettingValue,
+                                <div className="shrink-0 text-xs text-muted-foreground">
+                                  {formatRelativeTime(
+                                    event.timestamp,
                                     currentLocaleCode
                                   )}
-                                </span>
-                                <span>
-                                  {task.estimateHours != null
-                                    ? `${task.estimateHours}h`
-                                    : ''}
+                                </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>
-
-                              {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>
-                          )}
-                        </DraggableTaskCard>
-                      ))}
-                    </div>
+                          </div>
+                        </motion.div>
+                      );
+                    })}
                   </div>
-                )}
-              </DroppableColumn>
-            ))}
-          </div>
-        </DndContext>
+                </div>
+              ))}
+              {visibleTimelineEvents.length < filteredTimelineEvents.length ? (
+                <div className="flex justify-center">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setTimelineVisibleCount((current) => current + 8)
+                    }
+                  >
+                    {t('timeline.loadMore')}
+                  </Button>
+                </div>
+              ) : null}
+            </div>
+          ) : (
+            <div className="flex min-h-56 flex-col items-center justify-center rounded-2xl border border-dashed bg-background p-6 text-center">
+              <div className="flex size-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+                <GitCommitHorizontal className="size-6" />
+              </div>
+              <div className="mt-3 text-sm font-medium">
+                {t('timeline.emptyTitle')}
+              </div>
+              <p className="mt-1 max-w-sm text-xs leading-5 text-muted-foreground">
+                {t('timeline.empty')}
+              </p>
+            </div>
+          )}
+        </div>
       </SectionCard>
 
       <SectionCard
@@ -1478,12 +3624,17 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                           variant="outline"
                           size="sm"
                           className="gap-2"
+                          disabled={restoringTaskId === task.id}
                           onClick={(event) => {
                             event.stopPropagation();
                             void handleRestoreTask(task.id);
                           }}
                         >
-                          <ArchiveRestore className="size-4" />
+                          {restoringTaskId === task.id ? (
+                            <Loader2 className="size-4 animate-spin" />
+                          ) : (
+                            <ArchiveRestore className="size-4" />
+                          )}
                           {commonT('actions.unarchive')}
                         </Button>
                         <Button
@@ -1506,9 +3657,11 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             </Table>
           </div>
         ) : (
-          <p className="text-sm text-muted-foreground">
-            {t('emptyArchivedDescription')}
-          </p>
+          <ChartEmptyState
+            icon={Archive}
+            title={commonT('states.emptyTitle')}
+            description={t('emptyArchivedDescription')}
+          />
         )}
       </SectionCard>
 
@@ -1517,81 +3670,194 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
           title={t('sections.team')}
           description={t('sections.teamDescription')}
           className={[
-            'rounded-xl border bg-card p-4 shadow-sm',
+            'rounded-2xl border bg-card p-4 shadow-sm',
             isLimitedView ? 'xl:col-span-12' : 'xl:col-span-8',
           ].join(' ')}
         >
           {project.assignments.length > 0 ? (
-            <div className="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}
+            <div className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-3">
+                <div className="rounded-2xl border bg-emerald-500/10 p-3">
+                  <div className="text-xs text-muted-foreground">
+                    {t('teamPanel.available')}
+                  </div>
+                  <div className="mt-1 text-2xl font-semibold text-emerald-700 dark:text-emerald-300">
+                    {availableAssignments}
+                  </div>
+                </div>
+                <div className="rounded-2xl border bg-amber-500/10 p-3">
+                  <div className="text-xs text-muted-foreground">
+                    {t('teamPanel.highAllocation')}
+                  </div>
+                  <div className="mt-1 text-2xl font-semibold text-amber-700 dark:text-amber-300">
+                    {highAllocationAssignments}
+                  </div>
+                </div>
+                <div className="rounded-2xl border bg-rose-500/10 p-3">
+                  <div className="text-xs text-muted-foreground">
+                    {t('teamPanel.overload')}
+                  </div>
+                  <div className="mt-1 text-2xl font-semibold text-rose-700 dark:text-rose-300">
+                    {overloadedAssignments}
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid gap-3 md:grid-cols-2">
+                {project.assignments.map((assignment) => {
+                  const allocationValue =
+                    typeof assignment.allocationPercent === 'number'
+                      ? Math.round(assignment.allocationPercent)
+                      : 0;
+                  const allocation = clampPercent(allocationValue);
+                  const weeklyHours = assignment.weeklyHours ?? 0;
+                  const usedHours =
+                    weeklyHours > 0
+                      ? (weeklyHours * Math.max(allocationValue, 0)) / 100
+                      : 0;
+                  const availablePercent = Math.max(0, 100 - allocationValue);
+                  const availabilityHours =
+                    weeklyHours > 0 ? Math.max(0, weeklyHours - usedHours) : 0;
+                  const tone = getAllocationTone(allocationValue);
+                  const ToneIcon = tone.icon;
+
+                  return (
+                    <motion.div
+                      key={assignment.id}
+                      whileHover={{ y: -2 }}
+                      className={[
+                        'overflow-hidden rounded-2xl border bg-background shadow-xs transition hover:shadow-md',
+                        tone.border,
+                      ].join(' ')}
+                    >
+                      <div className="border-b bg-linear-to-br from-muted/50 to-background p-4">
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="flex min-w-0 items-center gap-3">
+                            <Avatar className="size-12 border bg-muted">
+                              <AvatarImage
+                                src={
+                                  getUserPhotoUrl(assignment.userPhotoId) ||
+                                  getPersonAvatarUrl(assignment.personAvatarId)
+                                }
+                                alt={assignment.collaboratorName}
+                              />
+                              <AvatarFallback className="text-xs font-semibold">
+                                {getInitials(assignment.collaboratorName)}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="min-w-0">
+                              <div className="truncate text-sm font-semibold">
+                                {assignment.collaboratorName}
+                              </div>
+                              <div className="truncate text-xs text-muted-foreground">
+                                {assignment.roleLabel ||
+                                  commonT('labels.notAssigned')}
+                              </div>
+                            </div>
+                          </div>
+                          <div className="flex shrink-0 flex-col items-end gap-2">
+                            <StatusBadge
+                              label={formatEnumLabel(assignment.status)}
+                              className={getStatusBadgeClass(assignment.status)}
                             />
-                            <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
-                              {getInitials(assignment.collaboratorName)}
-                            </AvatarFallback>
-                          </Avatar>
-                          <span>{assignment.collaboratorName}</span>
+                            <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>
-                      </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>
-                  ))}
-                </TableBody>
-              </Table>
+                      </div>
+
+                      <div className="space-y-4 p-4">
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between text-xs">
+                            <span className="text-muted-foreground">
+                              {commonT('labels.allocationPercent')}
+                            </span>
+                            <span
+                              className={['font-semibold', tone.text].join(' ')}
+                            >
+                              {formatPercent(assignment.allocationPercent)}
+                            </span>
+                          </div>
+                          <Progress
+                            value={allocation}
+                            className={['h-2.5', tone.progress].join(' ')}
+                          />
+                          {allocationValue > 100 ? (
+                            <div className="flex items-center gap-1 text-xs text-rose-700 dark:text-rose-300">
+                              <AlertTriangle className="size-3.5" />
+                              {t('teamPanel.overloadWarning', {
+                                value: allocationValue - 100,
+                              })}
+                            </div>
+                          ) : null}
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-3 text-xs xl:grid-cols-4">
+                          <div className="rounded-xl border bg-muted/20 p-2">
+                            <div className="text-muted-foreground">
+                              {commonT('labels.weeklyCapacity')}
+                            </div>
+                            <div className="mt-1 font-semibold">
+                              {weeklyHours
+                                ? formatHours(weeklyHours)
+                                : commonT('labels.notAvailable')}
+                            </div>
+                          </div>
+                          <div className="rounded-xl border bg-muted/20 p-2">
+                            <div className="text-muted-foreground">
+                              {t('teamPanel.usedHours')}
+                            </div>
+                            <div className="mt-1 font-semibold">
+                              {weeklyHours
+                                ? formatHours(usedHours)
+                                : commonT('labels.notAvailable')}
+                            </div>
+                          </div>
+                          <div className="rounded-xl border bg-muted/20 p-2">
+                            <div className="text-muted-foreground">
+                              {t('teamPanel.availability')}
+                            </div>
+                            <div className="mt-1 font-semibold">
+                              {weeklyHours
+                                ? formatHours(availabilityHours)
+                                : `${clampPercent(availablePercent)}%`}
+                            </div>
+                          </div>
+                          <div className="rounded-xl border bg-muted/20 p-2">
+                            <div className="text-muted-foreground">
+                              {commonT('labels.timeline')}
+                            </div>
+                            <div className="mt-1 truncate font-semibold">
+                              {formatDateRange(
+                                assignment.startDate,
+                                assignment.endDate,
+                                getSettingValue,
+                                currentLocaleCode
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </motion.div>
+                  );
+                })}
+              </div>
             </div>
           ) : (
-            <p className="text-sm text-muted-foreground">
-              {t('noAssignments')}
-            </p>
+            <ChartEmptyState
+              icon={Users}
+              title={commonT('states.emptyTitle')}
+              description={t('noAssignments')}
+            />
           )}
         </SectionCard>
 
@@ -1601,66 +3867,106 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             description={t('sections.indicatorsDescription')}
             className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-4"
           >
-            <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(
+            <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
-                  )}
-                </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>
+                  ),
+                  tone:
+                    averageAllocation > 100
+                      ? 'text-rose-700 dark:text-rose-300'
+                      : averageAllocation > 85
+                        ? 'text-amber-700 dark:text-amber-300'
+                        : 'text-emerald-700 dark:text-emerald-300',
+                  bg:
+                    averageAllocation > 100
+                      ? 'bg-rose-500/10'
+                      : averageAllocation > 85
+                        ? 'bg-amber-500/10'
+                        : 'bg-emerald-500/10',
+                },
+                {
+                  icon: Timer,
+                  label: t('indicators.totalWeeklyHours'),
+                  value: formatHours(
+                    project.operationalIndicators.totalWeeklyHours
+                  ),
+                  tone: 'text-violet-700 dark:text-violet-300',
+                  bg: 'bg-violet-500/10',
+                },
+                {
+                  icon: ClipboardList,
+                  label: t('cards.timesheets'),
+                  value: project.timesheetSummary.totalTimesheets,
+                  tone: 'text-foreground',
+                  bg: 'bg-muted/40',
+                },
+                {
+                  icon: AlarmClock,
+                  label: commonT('labels.pending'),
+                  value: project.timesheetSummary.pendingTimesheets,
+                  tone:
+                    project.timesheetSummary.pendingTimesheets > 0
+                      ? 'text-amber-700 dark:text-amber-300'
+                      : 'text-foreground',
+                  bg:
+                    project.timesheetSummary.pendingTimesheets > 0
+                      ? 'bg-amber-500/10'
+                      : 'bg-muted/40',
+                },
+                {
+                  icon: BarChart2,
+                  label: t('cards.loggedHours'),
+                  value: formatHours(project.timesheetSummary.totalHours),
+                  tone: 'text-sky-700 dark:text-sky-300',
+                  bg: 'bg-sky-500/10',
+                },
+              ].map(({ icon: Icon, label, value, tone, bg }) => (
+                <div
+                  key={label}
+                  className="flex items-center gap-3 rounded-xl border bg-card p-3 transition-shadow hover:shadow-sm"
+                >
+                  <div
+                    className={[
+                      'flex size-9 shrink-0 items-center justify-center rounded-xl',
+                      bg,
+                    ].join(' ')}
+                  >
+                    <Icon className={['size-4', tone].join(' ')} />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-xs text-muted-foreground">
+                      {label}
+                    </div>
+                    <div
+                      className={[
+                        'mt-0.5 text-sm font-semibold tabular-nums',
+                        tone,
+                      ].join(' ')}
+                    >
+                      {value}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
           </SectionCard>
         ) : null}
       </div>
@@ -1685,9 +3991,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 +4012,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 +4060,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
       ) : null}
 
       {!isLimitedView ? (
-        <Dialog
+        <Sheet
           open={taskFormOpen}
           onOpenChange={(open) => {
             if (!open) {
@@ -1765,16 +4070,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 +4099,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 +4244,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 +4336,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}