@hed-hog/operations 0.0.322 → 0.0.325

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

@@ -18,13 +18,6 @@ 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 { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
@@ -51,6 +44,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   Tooltip,
   TooltipContent,
@@ -94,7 +88,6 @@ import {
   LineChart as LineChartIcon,
   Loader2,
   MessageSquare,
-  MoreHorizontal,
   Paperclip,
   Pencil,
   Plus,
@@ -145,6 +138,7 @@ import {
   getStatusBadgeClass,
 } from '../_lib/utils/format';
 import { OperationsHeader } from './operations-header';
+import { ProjectCostsSection } from './project-costs-section';
 import { ProjectFormScreen } from './project-form-screen';
 import { SectionCard } from './section-card';
 import { StatusBadge } from './status-badge';
@@ -168,6 +162,8 @@ type BoardTask = {
   assigneePersonAvatarId: number | null;
   projectAssignmentId: number | null;
   createdAt: string | null;
+  commentCount: number;
+  fileCount: number;
 };
 
 type ApiBoardTask = Partial<BoardTask> & {
@@ -240,6 +236,11 @@ function apiTaskToBoardTask(row: ApiBoardTask): BoardTask {
     assigneePersonAvatarId: row.assigneePersonAvatarId ?? null,
     projectAssignmentId: row.projectAssignmentId ?? null,
     createdAt: row.createdAt ?? null,
+    commentCount:
+      ((row as BoardTask & Record<string, unknown>).commentCount as number) ??
+      0,
+    fileCount:
+      ((row as BoardTask & Record<string, unknown>).fileCount as number) ?? 0,
   };
 }
 
@@ -470,11 +471,11 @@ function getTaskTags(task: BoardTask) {
 }
 
 function getTaskCommentCount(task: BoardTask) {
-  return task.description ? 1 : 0;
+  return task.commentCount ?? 0;
 }
 
-function getTaskAttachmentCount() {
-  return 0;
+function getTaskAttachmentCount(task: BoardTask) {
+  return task.fileCount ?? 0;
 }
 
 function getAllocationTone(allocation: number) {
@@ -1168,6 +1169,14 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     updateSheetQuery(false);
   };
 
+  const activeTab = searchParams.get('tab') ?? 'tasks';
+
+  const setActiveTab = (tab: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('tab', tab);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
   const getDeliveryModelLabel = (value?: string | null) => {
     if (!value) {
       return commonT('labels.notAvailable');
@@ -2011,1522 +2020,1976 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
 
   return (
     <Page>
-      <motion.section
-        initial={{ opacity: 0, y: 10 }}
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25 }}
-        className="overflow-hidden rounded-3xl border bg-card shadow-sm"
+        transition={{ duration: 0.2 }}
+        className="flex flex-col gap-0 pt-4"
       >
-        <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"
+        {/* Row 1: Identity + actions */}
+        <div className="flex flex-wrap items-center gap-3 pb-2">
+          <div className="flex min-w-0 flex-1 items-center gap-3">
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-xl border bg-background shadow-xs">
+              <FolderKanban className="size-5 text-primary" />
+            </div>
+            <div className="min-w-0">
+              <nav
+                aria-label="Breadcrumb"
+                className="mb-0.5 flex items-center gap-1 text-[11px] text-muted-foreground"
+              >
+                <Link
+                  href="/operations/projects"
+                  className="transition hover:text-foreground"
                 >
-                  <Link
-                    href="/operations/projects"
-                    className="transition hover:text-foreground"
-                  >
-                    {t('breadcrumbTrail.operations')}
-                  </Link>
-                  <ChevronRight className="size-3.5" />
-                  <Link
-                    href="/operations/projects"
-                    className="transition hover:text-foreground"
-                  >
-                    {t('breadcrumbTrail.projects')}
-                  </Link>
-                  <ChevronRight className="size-3.5" />
-                  <span className="max-w-[12rem] truncate font-medium text-foreground sm:max-w-md">
-                    {project.code || project.name}
-                  </span>
-                </nav>
-
-                <div className="flex min-w-0 items-start gap-4">
-                  <div className="flex size-14 shrink-0 items-center justify-center rounded-2xl border bg-background shadow-xs">
-                    <FolderKanban className="size-7 text-primary" />
-                  </div>
-                  <div className="min-w-0 space-y-2">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <span className="rounded-full border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
-                        {project.code || commonT('labels.notAvailable')}
-                      </span>
-                      <StatusBadge
-                        label={getProjectStatusLabel(project.status)}
-                        className={getStatusBadgeClass(project.status)}
-                      />
-                    </div>
-                    <div className="space-y-1.5">
-                      <h1 className="max-w-5xl text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
-                        {project.name}
-                      </h1>
-                      <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
-                        {project.summary || t('executive.fallbackDescription')}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex flex-wrap gap-2 lg:justify-end">
-                {access.isDirector ? (
-                  <Button
-                    size="sm"
-                    onClick={openEditSheet}
-                    className="cursor-pointer gap-2"
-                  >
-                    <Pencil className="size-4" />
-                    {commonT('actions.edit')}
-                  </Button>
-                ) : null}
-                {!isLimitedView ? (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => openCreateTaskForm()}
-                    className="cursor-pointer gap-2"
-                  >
-                    <Plus className="size-4" />
-                    {t('taskForm.titleNew')}
-                  </Button>
-                ) : null}
-                <Button variant="outline" size="sm" asChild>
-                  <Link href="/operations/timesheets">
-                    <Timer className="size-4" />
-                    {t('quickActions.timesheet')}
-                  </Link>
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className="size-9 cursor-pointer"
-                      aria-label={t('quickActions.more')}
-                    >
-                      <MoreHorizontal className="size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-56">
-                    <DropdownMenuItem asChild>
-                      <Link href="/operations/reports/projects">
-                        <BarChart2 className="size-4" />
-                        {t('quickActions.reports')}
-                      </Link>
-                    </DropdownMenuItem>
-                    {project.contractId ? (
-                      <DropdownMenuItem asChild>
-                        <Link
-                          href={`/operations/contracts?edit=${project.contractId}`}
-                        >
-                          <FileText className="size-4" />
-                          {commonT('actions.openContract')}
-                        </Link>
-                      </DropdownMenuItem>
-                    ) : null}
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem asChild>
-                      <Link href="/operations/projects">
-                        <FolderKanban className="size-4" />
-                        {t('breadcrumbTrail.projects')}
-                      </Link>
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                  {t('breadcrumbTrail.projects')}
+                </Link>
+                <ChevronRight className="size-3" />
+                <span className="font-medium text-foreground">
+                  {project.code || project.name}
+                </span>
+              </nav>
+              <div className="flex flex-wrap items-center gap-2">
+                <h1 className="text-base font-semibold leading-tight">
+                  {project.name}
+                </h1>
+                <StatusBadge
+                  label={getProjectStatusLabel(project.status)}
+                  className={getStatusBadgeClass(project.status)}
+                />
+                <span
+                  className={[
+                    'rounded-full px-2 py-0.5 text-xs font-medium',
+                    projectHealth.tone === 'good'
+                      ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+                      : projectHealth.tone === 'warning'
+                        ? 'bg-amber-500/15 text-amber-600 dark:text-amber-400'
+                        : 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
+                  ].join(' ')}
+                >
+                  {projectHealthLabel}
+                </span>
               </div>
             </div>
+          </div>
+          <div className="flex shrink-0 flex-wrap gap-1.5">
+            {access.isDirector ? (
+              <Button
+                size="sm"
+                onClick={openEditSheet}
+                className="cursor-pointer gap-1.5"
+              >
+                <Pencil className="size-3.5" />
+                {commonT('actions.edit')}
+              </Button>
+            ) : null}
+          </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>
+        {/* Row 2: Metadata strip */}
+        <div className="flex flex-wrap border-y text-xs">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
+                <Avatar className="size-5 shrink-0 border bg-muted">
+                  <AvatarImage
+                    src={getPersonAvatarUrl(project.clientAvatarId)}
+                    alt={project.clientName || ''}
+                  />
+                  <AvatarFallback className="text-[9px]">
+                    {getInitials(project.clientName)}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="max-w-28 truncate font-medium">
+                  {project.clientName || commonT('labels.notAvailable')}
+                </span>
               </div>
-              <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">
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.client')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
+                <Rocket className="size-3.5 shrink-0 text-muted-foreground" />
+                <span className="max-w-32 truncate">
                   {project.deliveryModel
                     ? getDeliveryModelLabel(project.deliveryModel)
                     : commonT('labels.notAvailable')}
-                </div>
+                </span>
               </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">
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.deliveryModel')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
+                <Users className="size-3.5 shrink-0 text-muted-foreground" />
+                <span className="max-w-28 truncate">
                   {project.managerName || commonT('labels.notAssigned')}
-                </div>
+                </span>
               </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">
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.manager')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
+                <CalendarDays className="size-3.5 shrink-0 text-muted-foreground" />
+                <span>
                   {formatDate(
                     project.startDate,
                     getSettingValue,
                     currentLocaleCode
                   )}
-                </div>
+                </span>
               </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">
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.startDate')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={[
+                  'flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30',
+                  isPastDue(project.endDate) ? 'text-rose-500' : '',
+                ].join(' ')}
+              >
+                <CalendarClock className="size-3.5 shrink-0 text-muted-foreground" />
+                <span>
                   {formatDate(
                     project.endDate,
                     getSettingValue,
                     currentLocaleCode
                   )}
-                </div>
+                </span>
               </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">
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.endDate')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-2 border-r px-3 py-2 transition hover:bg-muted/30">
+                <Gauge className="size-3.5 shrink-0 text-muted-foreground" />
+                <div className="flex items-center gap-1.5">
+                  <div className="h-1.5 w-20 overflow-hidden rounded-full bg-muted">
+                    <motion.div
+                      initial={{ width: 0 }}
+                      animate={{ width: `${displayedProgress}%` }}
+                      transition={{ duration: 0.7, ease: 'easeOut' }}
+                      className="h-full rounded-full bg-primary"
+                    />
+                  </div>
+                  <span className="w-8 text-right font-semibold tabular-nums">
                     {displayedProgress}%
                   </span>
                 </div>
               </div>
-            </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              <p className="text-[11px] text-muted-foreground">
+                {commonT('labels.progress')}
+              </p>
+              <p className="font-medium">
+                {completedTasks}/{totalTasks} {t('executive.completedTasks')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
 
-            <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">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex cursor-default items-center gap-2 px-3 py-2 transition hover:bg-muted/30">
+                <div className="flex -space-x-1.5">
                   {teamPreview.map((assignment) => (
-                    <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>
+                    <Avatar
+                      key={assignment.id}
+                      className="size-6 border-2 border-card bg-muted"
+                    >
+                      <AvatarImage
+                        src={
+                          getUserPhotoUrl(assignment.userPhotoId) ||
+                          getPersonAvatarUrl(assignment.personAvatarId)
+                        }
+                        alt={assignment.collaboratorName}
+                      />
+                      <AvatarFallback className="text-[9px]">
+                        {getInitials(assignment.collaboratorName)}
+                      </AvatarFallback>
+                    </Avatar>
                   ))}
                   {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">
+                    <div className="flex size-6 items-center justify-center rounded-full border-2 border-card bg-muted text-[10px] font-semibold text-muted-foreground">
                       +{hiddenTeamCount}
                     </div>
                   ) : null}
                 </div>
+                <span className="text-xs text-muted-foreground">
+                  {project.assignments.length}
+                </span>
               </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="max-w-44">
+              <p className="mb-1 font-medium">{t('executive.team')}</p>
+              {teamPreview.map((a) => (
+                <p key={a.id} className="text-xs text-muted-foreground">
+                  {a.collaboratorName}
+                  {a.roleLabel ? ` · ${a.roleLabel}` : ''}
+                </p>
+              ))}
+              {hiddenTeamCount > 0 ? (
+                <p className="text-xs text-muted-foreground">
+                  +{hiddenTeamCount}
+                </p>
+              ) : null}
+            </TooltipContent>
+          </Tooltip>
+        </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)}
-                    />
+        {/* Row 3: KPI strip */}
+        {!isLimitedView ? (
+          <div className="flex divide-x bg-muted/10">
+            {kpiWidgets.map((kpi, index) => {
+              const kpiToneClass =
+                kpi.tone === 'critical'
+                  ? 'text-rose-500'
+                  : kpi.tone === 'warning'
+                    ? 'text-amber-500'
+                    : kpi.tone === 'positive'
+                      ? 'text-emerald-500'
+                      : 'text-sky-500';
+              const kpiBarClass =
+                kpi.tone === 'critical'
+                  ? 'bg-rose-500'
+                  : kpi.tone === 'warning'
+                    ? 'bg-amber-500'
+                    : kpi.tone === 'positive'
+                      ? 'bg-emerald-500'
+                      : 'bg-sky-500';
+              const isVelocity = kpi.key === 'velocity';
+              const velocityBars = velocityChartData.slice(-5);
+              const velocityMax = Math.max(
+                ...velocityBars.map((d) => d.loggedHours),
+                1
+              );
+              return (
+                <Tooltip key={kpi.key}>
+                  <TooltipTrigger asChild>
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ delay: index * 0.05 }}
+                      className="flex flex-1 cursor-default select-none items-center gap-2 px-3 py-2 transition hover:bg-muted/20"
+                    >
+                      <kpi.icon
+                        className={['size-4 shrink-0', kpiToneClass].join(' ')}
+                      />
+                      <div className="min-w-0 flex-1">
+                        <div className="text-sm font-semibold leading-none">
+                          {kpi.value}
+                        </div>
+                        {isVelocity && velocityBars.length > 1 ? (
+                          <div className="mt-1.5 flex items-end gap-px">
+                            {velocityBars.map((d, i) => (
+                              <motion.div
+                                key={i}
+                                className={[
+                                  'w-1.5 rounded-sm opacity-70',
+                                  kpiBarClass,
+                                ].join(' ')}
+                                initial={{ height: 0 }}
+                                animate={{
+                                  height: `${Math.max(3, Math.round((d.loggedHours / velocityMax) * 16))}px`,
+                                }}
+                                transition={{
+                                  delay: index * 0.05 + i * 0.06,
+                                  type: 'spring',
+                                  stiffness: 180,
+                                }}
+                              />
+                            ))}
+                          </div>
+                        ) : (
+                          <div className="mt-1.5 h-1 overflow-hidden rounded-full bg-muted">
+                            <motion.div
+                              initial={{ width: 0 }}
+                              animate={{
+                                width: `${clampPercent(kpi.indicator)}%`,
+                              }}
+                              transition={{
+                                duration: 0.55,
+                                delay: index * 0.07,
+                                ease: 'easeOut',
+                              }}
+                              className={[
+                                'h-full rounded-full',
+                                kpiBarClass,
+                              ].join(' ')}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </motion.div>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className="max-w-52">
+                    <p className="font-medium">{kpi.title}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {kpi.subtitle}
+                    </p>
+                    <p className="mt-1 text-xs font-medium">{kpi.trend}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+        ) : null}
+      </motion.div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className="flex-wrap">
+          <TabsTrigger value="tasks">{t('tabs.tasks')}</TabsTrigger>
+          {!isLimitedView ? (
+            <TabsTrigger value="overview">{t('tabs.overview')}</TabsTrigger>
+          ) : null}
+          {!isLimitedView ? (
+            <TabsTrigger value="analysis">{t('tabs.analysis')}</TabsTrigger>
+          ) : null}
+          <TabsTrigger value="team">{t('tabs.team')}</TabsTrigger>
+          <TabsTrigger value="timeline">{t('tabs.timeline')}</TabsTrigger>
+          <TabsTrigger value="archive">{t('tabs.archive')}</TabsTrigger>
+          <TabsTrigger value="costs">{t('tabs.costs')}</TabsTrigger>
+        </TabsList>
+
+        {!isLimitedView ? (
+          <TabsContent value="overview">
+            <div className="grid gap-4 xl:grid-cols-12">
+              <SectionCard
+                title={t('sections.overview')}
+                className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-12"
+              >
+                <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-3">
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.project')}
+                    </dt>
+                    <dd className="font-medium">{project.name}</dd>
                   </div>
-                </div>
-                <div className="rounded-xl border bg-muted/20 p-3">
-                  <div className="text-muted-foreground">
-                    {t('cards.projectHealth')}
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.code')}
+                    </dt>
+                    <dd className="font-medium">
+                      {project.code || commonT('labels.notAvailable')}
+                    </dd>
                   </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>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.client')}
+                    </dt>
+                    <dd className="font-medium">
+                      <div className="flex items-center gap-2">
+                        <Avatar className="h-8 w-8 border border-border/60 bg-muted">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            alt={project.clientName || commonT('labels.client')}
+                          />
+                          <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
+                            {getInitials(
+                              project.clientName || commonT('labels.client')
+                            )}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span>
+                          {project.clientName || commonT('labels.notAvailable')}
+                        </span>
+                      </div>
+                    </dd>
                   </div>
-                  <div className="mt-1 font-semibold">
-                    {completedTasks}/{totalTasks}
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.manager')}
+                    </dt>
+                    <dd className="font-medium">
+                      {project.managerName || commonT('labels.notAssigned')}
+                    </dd>
                   </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </motion.section>
-
-      {!isLimitedView ? (
-        <>
-          <div className="rounded-3xl border bg-linear-to-b from-muted/50 to-background p-3 shadow-sm sm:p-4">
-            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-6">
-              {kpiWidgets.map((item, index) => (
-                <ProjectKpiWidget
-                  key={item.key}
-                  item={item}
-                  index={index}
-                  indicatorLabel={t('kpi.indicator')}
-                />
-              ))}
-            </div>
-          </div>
-
-          <div className="grid gap-4 xl:grid-cols-12">
-            <SectionCard
-              title={t('sections.overview')}
-              className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-12"
-            >
-              <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-3">
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.project')}
-                  </dt>
-                  <dd className="font-medium">{project.name}</dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.code')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.code || commonT('labels.notAvailable')}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.client')}
-                  </dt>
-                  <dd className="font-medium">
-                    <div className="flex items-center gap-2">
-                      <Avatar className="h-8 w-8 border border-border/60 bg-muted">
-                        <AvatarImage
-                          src={getPersonAvatarUrl(project.clientAvatarId)}
-                          alt={project.clientName || commonT('labels.client')}
-                        />
-                        <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
-                          {getInitials(
-                            project.clientName || commonT('labels.client')
-                          )}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span>
-                        {project.clientName || commonT('labels.notAvailable')}
-                      </span>
-                    </div>
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.manager')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.managerName || commonT('labels.notAssigned')}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.status')}
-                  </dt>
-                  <dd className="font-medium">
-                    <StatusBadge
-                      label={getProjectStatusLabel(project.status)}
-                      className={getStatusBadgeClass(project.status)}
-                    />
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.deliveryModel')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.deliveryModel
-                      ? getDeliveryModelLabel(project.deliveryModel)
-                      : commonT('labels.notAvailable')}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.startDate')}
-                  </dt>
-                  <dd className="font-medium">
-                    {formatDate(
-                      project.startDate,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.endDate')}
-                  </dt>
-                  <dd className="font-medium">
-                    {formatDate(
-                      project.endDate,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.budget')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.budgetAmount
-                      ? formatCurrency(
-                          project.budgetAmount,
-                          getSettingValue,
-                          currentLocaleCode
-                        )
-                      : commonT('labels.notAvailable')}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.progress')}
-                  </dt>
-                  <dd className="font-medium">
-                    {formatPercent(project.progressPercent)}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.timeline')}
-                  </dt>
-                  <dd className="font-medium">
-                    {formatDateRange(
-                      project.startDate,
-                      project.endDate,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </dd>
-                </div>
-                <div>
-                  <dt className="text-muted-foreground">
-                    {commonT('labels.contractStatus')}
-                  </dt>
-                  <dd className="font-medium">
-                    {project.contractStatus ? (
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.status')}
+                    </dt>
+                    <dd className="font-medium">
                       <StatusBadge
-                        label={getContractStatusLabel(project.contractStatus)}
-                        className={getStatusBadgeClass(project.contractStatus)}
+                        label={getProjectStatusLabel(project.status)}
+                        className={getStatusBadgeClass(project.status)}
                       />
-                    ) : (
-                      commonT('labels.notAssigned')
-                    )}
-                  </dd>
-                </div>
-              </dl>
-              {project.summary ? (
-                <div className="mt-4 rounded-lg border border-border/70 bg-muted/30 p-3 text-sm text-muted-foreground">
-                  {project.summary}
-                </div>
-              ) : null}
-
-              {/* Contrato vinculado */}
-              <div className="mt-6 border-t pt-6">
-                <div className="mb-4 flex items-center gap-2 text-sm font-semibold">
-                  <FileText className="size-4 text-muted-foreground" />
-                  {t('sections.contract')}
-                </div>
-                {project.relatedContract ? (
-                  <div className="space-y-4">
-                    <div className="flex flex-col gap-3 rounded-xl border bg-muted/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-                      <div>
-                        <div className="font-medium">
-                          {project.relatedContract.name}
-                        </div>
-                        <div className="text-sm text-muted-foreground">
-                          {[
-                            project.relatedContract.code,
-                            project.relatedContract.clientName,
-                          ]
-                            .filter(Boolean)
-                            .join(' • ') || commonT('labels.notAvailable')}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-3">
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.deliveryModel')}
+                    </dt>
+                    <dd className="font-medium">
+                      {project.deliveryModel
+                        ? getDeliveryModelLabel(project.deliveryModel)
+                        : commonT('labels.notAvailable')}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.startDate')}
+                    </dt>
+                    <dd className="font-medium">
+                      {formatDate(
+                        project.startDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.endDate')}
+                    </dt>
+                    <dd className="font-medium">
+                      {formatDate(
+                        project.endDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.budget')}
+                    </dt>
+                    <dd className="font-medium">
+                      {project.budgetAmount
+                        ? formatCurrency(
+                            project.budgetAmount,
+                            getSettingValue,
+                            currentLocaleCode
+                          )
+                        : commonT('labels.notAvailable')}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.progress')}
+                    </dt>
+                    <dd className="font-medium">
+                      {formatPercent(project.progressPercent)}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.timeline')}
+                    </dt>
+                    <dd className="font-medium">
+                      {formatDateRange(
+                        project.startDate,
+                        project.endDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-muted-foreground">
+                      {commonT('labels.contractStatus')}
+                    </dt>
+                    <dd className="font-medium">
+                      {project.contractStatus ? (
                         <StatusBadge
-                          label={getContractStatusLabel(
-                            project.relatedContract.status
-                          )}
+                          label={getContractStatusLabel(project.contractStatus)}
                           className={getStatusBadgeClass(
-                            project.relatedContract.status
+                            project.contractStatus
                           )}
                         />
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          asChild
-                          className="shrink-0"
-                        >
-                          <Link
-                            href={`/operations/contracts?edit=${project.relatedContract.id}`}
+                      ) : (
+                        commonT('labels.notAssigned')
+                      )}
+                    </dd>
+                  </div>
+                </dl>
+                {project.summary ? (
+                  <div className="mt-4 rounded-lg border border-border/70 bg-muted/30 p-3 text-sm text-muted-foreground">
+                    {project.summary}
+                  </div>
+                ) : null}
+
+                {/* Contrato vinculado */}
+                <div className="mt-6 border-t pt-6">
+                  <div className="mb-4 flex items-center gap-2 text-sm font-semibold">
+                    <FileText className="size-4 text-muted-foreground" />
+                    {t('sections.contract')}
+                  </div>
+                  {project.relatedContract ? (
+                    <div className="space-y-4">
+                      <div className="flex flex-col gap-3 rounded-xl border bg-muted/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+                        <div>
+                          <div className="font-medium">
+                            {project.relatedContract.name}
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            {[
+                              project.relatedContract.code,
+                              project.relatedContract.clientName,
+                            ]
+                              .filter(Boolean)
+                              .join(' • ') || commonT('labels.notAvailable')}
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                          <StatusBadge
+                            label={getContractStatusLabel(
+                              project.relatedContract.status
+                            )}
+                            className={getStatusBadgeClass(
+                              project.relatedContract.status
+                            )}
+                          />
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            asChild
+                            className="shrink-0"
                           >
-                            <FileText className="size-4" />
-                            {commonT('actions.openContract')}
-                          </Link>
-                        </Button>
+                            <Link
+                              href={`/operations/contracts?edit=${project.relatedContract.id}`}
+                            >
+                              <FileText className="size-4" />
+                              {commonT('actions.openContract')}
+                            </Link>
+                          </Button>
+                        </div>
                       </div>
+                      <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-3">
+                        <div>
+                          <dt className="text-muted-foreground">
+                            {commonT('labels.contractCategory')}
+                          </dt>
+                          <dd className="font-medium">
+                            {project.relatedContract.contractCategory
+                              ? getContractCategoryLabel(
+                                  project.relatedContract.contractCategory
+                                )
+                              : commonT('labels.notAvailable')}
+                          </dd>
+                        </div>
+                        <div>
+                          <dt className="text-muted-foreground">
+                            {commonT('labels.contractType')}
+                          </dt>
+                          <dd className="font-medium">
+                            {project.relatedContract.contractType
+                              ? getContractTypeLabel(
+                                  project.relatedContract.contractType
+                                )
+                              : commonT('labels.notAvailable')}
+                          </dd>
+                        </div>
+                        <div>
+                          <dt className="text-muted-foreground">
+                            {commonT('labels.billingModel')}
+                          </dt>
+                          <dd className="font-medium">
+                            {getBillingModelLabel(
+                              project.relatedContract.billingModel
+                            )}
+                          </dd>
+                        </div>
+                        <div>
+                          <dt className="text-muted-foreground">
+                            {commonT('labels.timeline')}
+                          </dt>
+                          <dd className="font-medium">
+                            {formatDateRange(
+                              project.relatedContract.startDate,
+                              project.relatedContract.endDate,
+                              getSettingValue,
+                              currentLocaleCode
+                            )}
+                          </dd>
+                        </div>
+                        <div>
+                          <dt className="text-muted-foreground">
+                            {commonT('labels.signatureStatus')}
+                          </dt>
+                          <dd className="font-medium">
+                            {project.relatedContract.signatureStatus
+                              ? getSignatureStatusLabel(
+                                  project.relatedContract.signatureStatus
+                                )
+                              : commonT('labels.notAvailable')}
+                          </dd>
+                        </div>
+                        <div>
+                          <dt className="text-muted-foreground">
+                            {commonT('labels.budget')}
+                          </dt>
+                          <dd className="font-medium">
+                            {project.relatedContract.budgetAmount
+                              ? formatCurrency(
+                                  project.relatedContract.budgetAmount,
+                                  getSettingValue,
+                                  currentLocaleCode
+                                )
+                              : commonT('labels.notAvailable')}
+                          </dd>
+                        </div>
+                      </dl>
                     </div>
-                    <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-3">
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.contractCategory')}
-                        </dt>
-                        <dd className="font-medium">
-                          {project.relatedContract.contractCategory
-                            ? getContractCategoryLabel(
-                                project.relatedContract.contractCategory
-                              )
-                            : commonT('labels.notAvailable')}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.contractType')}
-                        </dt>
-                        <dd className="font-medium">
-                          {project.relatedContract.contractType
-                            ? getContractTypeLabel(
-                                project.relatedContract.contractType
-                              )
-                            : commonT('labels.notAvailable')}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.billingModel')}
-                        </dt>
-                        <dd className="font-medium">
-                          {getBillingModelLabel(
-                            project.relatedContract.billingModel
-                          )}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.timeline')}
-                        </dt>
-                        <dd className="font-medium">
-                          {formatDateRange(
-                            project.relatedContract.startDate,
-                            project.relatedContract.endDate,
-                            getSettingValue,
-                            currentLocaleCode
-                          )}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.signatureStatus')}
-                        </dt>
-                        <dd className="font-medium">
-                          {project.relatedContract.signatureStatus
-                            ? getSignatureStatusLabel(
-                                project.relatedContract.signatureStatus
-                              )
-                            : commonT('labels.notAvailable')}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt className="text-muted-foreground">
-                          {commonT('labels.budget')}
-                        </dt>
-                        <dd className="font-medium">
-                          {project.relatedContract.budgetAmount
-                            ? formatCurrency(
-                                project.relatedContract.budgetAmount,
-                                getSettingValue,
-                                currentLocaleCode
-                              )
-                            : commonT('labels.notAvailable')}
-                        </dd>
-                      </div>
-                    </dl>
-                  </div>
-                ) : (
-                  <p className="text-sm text-muted-foreground">
-                    {t('noContract')}
-                  </p>
-                )}
-              </div>
-            </SectionCard>
-          </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      {t('noContract')}
+                    </p>
+                  )}
+                </div>
+              </SectionCard>
+            </div>
+          </TabsContent>
+        ) : null}
 
-          <SectionCard
-            title={t('sections.deliveryHealth')}
-            description={t('sections.deliveryHealthDescription')}
-            className="rounded-3xl border bg-card p-4 shadow-sm"
-          >
-            <div className="grid gap-4 xl:grid-cols-12">
-              <ProjectChartCard
-                title={t('charts.burnup')}
-                description={t('charts.burnupDescription')}
-                icon={LineChartIcon}
-                metric={formatPercent(displayedProgress)}
-                className="xl:col-span-8"
-                isLoading={chartDashboardLoading}
-              >
-                {burnupChartData.length > 1 ? (
-                  <ChartContainer
-                    className="h-80 w-full"
-                    config={boardChartConfig}
-                  >
-                    <AreaChart data={burnupChartData}>
-                      <defs>
-                        <linearGradient
-                          id="burnupLogged"
-                          x1="0"
-                          y1="0"
-                          x2="0"
-                          y2="1"
-                        >
-                          <stop
-                            offset="5%"
-                            stopColor="var(--color-loggedHours)"
-                            stopOpacity={0.26}
-                          />
-                          <stop
-                            offset="95%"
-                            stopColor="var(--color-loggedHours)"
-                            stopOpacity={0.02}
-                          />
-                        </linearGradient>
-                      </defs>
-                      <CartesianGrid vertical={false} strokeDasharray="3 3" />
-                      <XAxis dataKey="week" tickLine={false} axisLine={false} />
-                      <YAxis tickLine={false} axisLine={false} width={36} />
-                      <ChartTooltip content={<ChartTooltipContent />} />
-                      <Area
-                        type="monotone"
-                        dataKey="planned"
-                        stroke="var(--color-planned)"
-                        strokeDasharray="4 4"
-                        strokeWidth={2}
-                        fill="transparent"
-                      />
-                      <Area
-                        type="monotone"
-                        dataKey="loggedHours"
-                        stroke="var(--color-loggedHours)"
-                        strokeWidth={2.5}
-                        fill="url(#burnupLogged)"
-                      />
-                    </AreaChart>
-                  </ChartContainer>
-                ) : (
-                  <ChartEmptyState
-                    icon={LineChartIcon}
-                    title={t('charts.emptyTitle')}
-                    description={t('charts.emptyBurnup')}
-                  />
-                )}
-              </ProjectChartCard>
-
-              <ProjectChartCard
-                title={t('charts.weeklyVelocity')}
-                description={t('charts.weeklyVelocityDescription')}
-                icon={Rocket}
-                metric={formatHours(weeklyVelocity)}
-                className="xl:col-span-4"
-                isLoading={isProjectStatsLoading}
-              >
-                {velocityChartData.length > 0 ? (
-                  <ChartContainer
-                    className="h-80 w-full"
-                    config={boardChartConfig}
-                  >
-                    <LineChart data={velocityChartData}>
-                      <CartesianGrid vertical={false} strokeDasharray="3 3" />
-                      <XAxis dataKey="week" tickLine={false} axisLine={false} />
-                      <YAxis tickLine={false} axisLine={false} width={30} />
-                      <ChartTooltip content={<ChartTooltipContent />} />
-                      <Line
-                        type="monotone"
-                        dataKey="loggedHours"
-                        stroke="var(--color-loggedHours)"
-                        strokeWidth={2.5}
-                        dot={{ r: 3 }}
-                        activeDot={{ r: 5 }}
-                      />
-                    </LineChart>
-                  </ChartContainer>
-                ) : (
-                  <ChartEmptyState
-                    icon={Rocket}
-                    title={t('charts.emptyTitle')}
-                    description={t('charts.emptyVelocity')}
-                  />
-                )}
-              </ProjectChartCard>
-
-              <ProjectChartCard
-                title={t('charts.allocationByCollaborator')}
-                description={t('charts.allocationDescription')}
-                icon={BarChart3}
-                metric={formatPercent(
-                  project.operationalIndicators.averageAllocation
-                )}
-                className="xl:col-span-5"
-                isLoading={chartDashboardLoading}
-              >
-                {allocationChartData.length > 0 ? (
-                  <ChartContainer
-                    className="h-72 w-full"
-                    config={boardChartConfig}
-                  >
-                    <BarChart data={allocationChartData}>
-                      <CartesianGrid vertical={false} strokeDasharray="3 3" />
-                      <XAxis dataKey="name" tickLine={false} axisLine={false} />
-                      <YAxis tickLine={false} axisLine={false} width={32} />
-                      <ChartTooltip
-                        content={<ChartTooltipContent hideLabel />}
-                      />
-                      <Bar
-                        dataKey="allocation"
-                        radius={[8, 8, 3, 3]}
-                        fill="var(--color-allocation)"
-                      />
-                    </BarChart>
-                  </ChartContainer>
-                ) : (
-                  <ChartEmptyState
-                    icon={BarChart3}
-                    title={t('charts.emptyTitle')}
-                    description={t('charts.emptyAllocation')}
-                  />
-                )}
-              </ProjectChartCard>
-
-              <ProjectChartCard
-                title={t('charts.taskDistribution')}
-                description={t('charts.taskDistributionDescription')}
-                icon={ClipboardList}
-                metric={`${totalTasks} ${t('kanban.items')}`}
-                className="xl:col-span-4"
-                isLoading={isTasksLoading}
-              >
-                {taskDistributionData.length > 0 ? (
-                  <div className="grid gap-4 md:grid-cols-[1fr_11rem]">
+        {!isLimitedView ? (
+          <TabsContent value="analysis">
+            <SectionCard
+              title={t('sections.deliveryHealth')}
+              description={t('sections.deliveryHealthDescription')}
+              className="rounded-3xl border bg-card p-4 shadow-sm"
+            >
+              <div className="grid gap-4 xl:grid-cols-12">
+                <ProjectChartCard
+                  title={t('charts.burnup')}
+                  description={t('charts.burnupDescription')}
+                  icon={LineChartIcon}
+                  metric={formatPercent(displayedProgress)}
+                  className="xl:col-span-8"
+                  isLoading={chartDashboardLoading}
+                >
+                  {burnupChartData.length > 1 ? (
+                    <ChartContainer
+                      className="h-80 w-full"
+                      config={boardChartConfig}
+                    >
+                      <AreaChart data={burnupChartData}>
+                        <defs>
+                          <linearGradient
+                            id="burnupLogged"
+                            x1="0"
+                            y1="0"
+                            x2="0"
+                            y2="1"
+                          >
+                            <stop
+                              offset="5%"
+                              stopColor="var(--color-loggedHours)"
+                              stopOpacity={0.26}
+                            />
+                            <stop
+                              offset="95%"
+                              stopColor="var(--color-loggedHours)"
+                              stopOpacity={0.02}
+                            />
+                          </linearGradient>
+                        </defs>
+                        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+                        <XAxis
+                          dataKey="week"
+                          tickLine={false}
+                          axisLine={false}
+                        />
+                        <YAxis tickLine={false} axisLine={false} width={36} />
+                        <ChartTooltip content={<ChartTooltipContent />} />
+                        <Area
+                          type="monotone"
+                          dataKey="planned"
+                          stroke="var(--color-planned)"
+                          strokeDasharray="4 4"
+                          strokeWidth={2}
+                          fill="transparent"
+                        />
+                        <Area
+                          type="monotone"
+                          dataKey="loggedHours"
+                          stroke="var(--color-loggedHours)"
+                          strokeWidth={2.5}
+                          fill="url(#burnupLogged)"
+                        />
+                      </AreaChart>
+                    </ChartContainer>
+                  ) : (
+                    <ChartEmptyState
+                      icon={LineChartIcon}
+                      title={t('charts.emptyTitle')}
+                      description={t('charts.emptyBurnup')}
+                    />
+                  )}
+                </ProjectChartCard>
+
+                <ProjectChartCard
+                  title={t('charts.weeklyVelocity')}
+                  description={t('charts.weeklyVelocityDescription')}
+                  icon={Rocket}
+                  metric={formatHours(weeklyVelocity)}
+                  className="xl:col-span-4"
+                  isLoading={isProjectStatsLoading}
+                >
+                  {velocityChartData.length > 0 ? (
+                    <ChartContainer
+                      className="h-80 w-full"
+                      config={boardChartConfig}
+                    >
+                      <LineChart data={velocityChartData}>
+                        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+                        <XAxis
+                          dataKey="week"
+                          tickLine={false}
+                          axisLine={false}
+                        />
+                        <YAxis tickLine={false} axisLine={false} width={30} />
+                        <ChartTooltip content={<ChartTooltipContent />} />
+                        <Line
+                          type="monotone"
+                          dataKey="loggedHours"
+                          stroke="var(--color-loggedHours)"
+                          strokeWidth={2.5}
+                          dot={{ r: 3 }}
+                          activeDot={{ r: 5 }}
+                        />
+                      </LineChart>
+                    </ChartContainer>
+                  ) : (
+                    <ChartEmptyState
+                      icon={Rocket}
+                      title={t('charts.emptyTitle')}
+                      description={t('charts.emptyVelocity')}
+                    />
+                  )}
+                </ProjectChartCard>
+
+                <ProjectChartCard
+                  title={t('charts.allocationByCollaborator')}
+                  description={t('charts.allocationDescription')}
+                  icon={BarChart3}
+                  metric={formatPercent(
+                    project.operationalIndicators.averageAllocation
+                  )}
+                  className="xl:col-span-5"
+                  isLoading={chartDashboardLoading}
+                >
+                  {allocationChartData.length > 0 ? (
                     <ChartContainer
                       className="h-72 w-full"
                       config={boardChartConfig}
                     >
-                      <PieChart>
+                      <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 />}
                         />
-                        <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>
+                        <Bar
+                          dataKey="allocation"
+                          radius={[8, 8, 3, 3]}
+                          fill="var(--color-allocation)"
+                        />
+                      </BarChart>
                     </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>
-                      ))}
+                  ) : (
+                    <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>
-                ) : (
-                  <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}
+                  ) : (
+                    <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}
                     >
-                      <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')}
+                      <RadialBarChart
+                        data={healthChartData}
+                        innerRadius="72%"
+                        outerRadius="100%"
+                        startAngle={180}
+                        endAngle={0}
+                      >
+                        <PolarAngleAxis
+                          type="number"
+                          domain={[0, 100]}
+                          tick={false}
+                        />
+                        <RadialBar
+                          dataKey="value"
+                          cornerRadius={12}
+                          background={{ fill: 'hsl(var(--muted))' }}
+                        />
+                        <ChartTooltip
+                          content={<ChartTooltipContent hideLabel />}
+                        />
+                      </RadialBarChart>
+                    </ChartContainer>
+                    <div className="-mt-20 text-center">
+                      <div className="text-3xl font-semibold tabular-nums">
+                        {projectHealth.value}%
+                      </div>
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {t('charts.healthScore')}
+                      </div>
                     </div>
                   </div>
+                </ProjectChartCard>
+              </div>
+            </SectionCard>
+          </TabsContent>
+        ) : null}
+
+        <TabsContent value="tasks" className="space-y-4">
+          <SectionCard
+            title={t('sections.taskBoard')}
+            description={t('sections.taskBoardDescription')}
+            className="rounded-3xl border bg-card p-4 shadow-sm"
+            actions={
+              !isLimitedView ? (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="gap-2"
+                  onClick={() => openCreateTaskForm()}
+                >
+                  <Plus className="size-4" />
+                  {t('taskForm.titleNew')}
+                </Button>
+              ) : undefined
+            }
+          >
+            <div className="mb-4 flex flex-col gap-3 rounded-2xl border bg-muted/20 p-3 lg:flex-row lg:items-center lg:justify-between">
+              <div className="relative min-w-0 flex-1">
+                <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={boardSearch}
+                  onChange={(event) => setBoardSearch(event.target.value)}
+                  placeholder={t('kanban.searchPlaceholder')}
+                  className="h-10 bg-background pl-9"
+                />
+              </div>
+              <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+                <div className="flex items-center gap-2 rounded-xl border bg-background px-3 py-2 text-xs text-muted-foreground">
+                  <SlidersHorizontal className="size-4" />
+                  {t('kanban.filters')}
                 </div>
-              </ProjectChartCard>
+                <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>
-          </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)
-              }
+            <DndContext
+              sensors={sensors}
+              collisionDetection={kanbanCollision}
+              onDragStart={onBoardDragStart}
+              onDragCancel={() => setActiveDragTask(null)}
+              onDragEnd={onBoardDragEnd}
             >
-              <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>
+              <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>
 
-        <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">
+                          <div className="flex flex-1 flex-col gap-2">
+                            <AnimatePresence initial={false}>
+                              {filteredTaskColumns[column.id].map((task) => {
+                                const tags = getTaskTags(task);
+                                const comments = getTaskCommentCount(task);
+                                const attachments =
+                                  getTaskAttachmentCount(task);
+                                return (
+                                  <DraggableTaskCard
+                                    key={task.id}
+                                    task={task}
+                                    disabled={false}
+                                  >
+                                    {(isDragging) => (
+                                      <motion.div
+                                        initial={{ opacity: 0, scale: 0.96 }}
+                                        animate={{ opacity: 1, scale: 1 }}
+                                        exit={{
+                                          opacity: 0,
+                                          scale: 0.95,
+                                          y: -4,
+                                        }}
+                                        transition={{ duration: 0.18 }}
+                                        role="button"
+                                        tabIndex={0}
+                                        className={[
+                                          'group w-full cursor-pointer rounded-2xl border bg-card p-3 text-left shadow-xs transition',
+                                          isDragging
+                                            ? 'opacity-0'
+                                            : 'hover:border-primary/40 hover:shadow-lg',
+                                        ].join(' ')}
+                                        onClick={() =>
+                                          setSelectedTask({
+                                            ...task,
+                                            projectName: project?.name,
+                                            projectCode: project?.code,
+                                          })
+                                        }
+                                        onKeyDown={(event) => {
+                                          if (
+                                            event.key === 'Enter' ||
+                                            event.key === ' '
+                                          ) {
+                                            event.preventDefault();
+                                            setSelectedTask({
+                                              ...task,
+                                              projectName: project?.name,
+                                              projectCode: project?.code,
+                                            });
+                                          }
+                                        }}
+                                      >
+                                        <div className="mb-3 flex items-start justify-between gap-2">
+                                          <div className="min-w-0 space-y-1">
+                                            <p className="line-clamp-2 text-sm font-semibold leading-snug">
+                                              {task.name}
+                                            </p>
+                                            {task.description ? (
+                                              <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
+                                                {task.description.replace(
+                                                  /<[^>]*>/g,
+                                                  ''
+                                                )}
+                                              </p>
+                                            ) : null}
+                                          </div>
+                                          <div className="flex items-start gap-2">
+                                            <span
+                                              className={[
+                                                'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                                                getPriorityClassName(
+                                                  task.priority
+                                                ),
+                                              ].join(' ')}
+                                            >
+                                              {getTaskPriorityLabel(
+                                                task.priority
+                                              )}
+                                            </span>
+                                            <Button
+                                              type="button"
+                                              variant="ghost"
+                                              size="icon"
+                                              className="size-7 shrink-0 rounded-full opacity-0 transition group-hover:opacity-100"
+                                              onPointerDown={(event) =>
+                                                event.stopPropagation()
+                                              }
+                                              onClick={(event) => {
+                                                event.stopPropagation();
+                                                openEditTaskForm(task);
+                                              }}
+                                            >
+                                              <Pencil className="size-3.5" />
+                                            </Button>
+                                          </div>
+                                        </div>
+
+                                        {tags.length > 0 ? (
+                                          <div className="mb-3 flex flex-wrap gap-1">
+                                            {tags.slice(0, 4).map((tag) => (
+                                              <span
+                                                key={`${task.id}-${tag}`}
+                                                className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground"
+                                              >
+                                                {tag}
+                                              </span>
+                                            ))}
+                                            {tags.length > 4 ? (
+                                              <span className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                                                +{tags.length - 4}
+                                              </span>
+                                            ) : null}
+                                          </div>
+                                        ) : null}
+
+                                        <div className="grid grid-cols-2 gap-2 text-xs">
+                                          <div
+                                            className={[
+                                              'rounded-xl border bg-muted/20 px-2 py-1.5',
+                                              isPastDue(task.dueDate) &&
+                                              task.status !== 'done'
+                                                ? 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300'
+                                                : 'text-muted-foreground',
+                                            ].join(' ')}
+                                          >
+                                            <span className="flex items-center gap-1">
+                                              <AlarmClock className="size-3.5" />
+                                              {formatDate(
+                                                task.dueDate,
+                                                getSettingValue,
+                                                currentLocaleCode
+                                              )}
+                                            </span>
+                                          </div>
+                                          <div className="rounded-xl border bg-muted/20 px-2 py-1.5 text-muted-foreground">
+                                            <span className="flex items-center gap-1">
+                                              <Timer className="size-3.5" />
+                                              {task.estimateHours != null
+                                                ? `${task.estimateHours}h`
+                                                : t('kanban.noEstimate')}
+                                            </span>
+                                          </div>
+                                        </div>
+
+                                        <div className="mt-3 space-y-1.5">
+                                          <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                                            <span>{t('kanban.progress')}</span>
+                                            <span>
+                                              {getTaskProgress(task.status)}%
+                                            </span>
+                                          </div>
+                                          <Progress
+                                            value={getTaskProgress(task.status)}
+                                            className="h-1.5"
+                                          />
+                                        </div>
+
+                                        <div className="mt-3 flex items-center justify-between gap-3 border-t pt-3">
+                                          <div className="flex min-w-0 items-center gap-2">
+                                            <div className="flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                                              {(() => {
+                                                const photoUrl =
+                                                  getUserPhotoUrl(
+                                                    task.assigneeUserPhotoId
+                                                  );
+                                                const avatarUrl =
+                                                  task.assigneePersonAvatarId
+                                                    ? getPersonAvatarUrl(
+                                                        task.assigneePersonAvatarId
+                                                      )
+                                                    : null;
+                                                const imgSrc =
+                                                  photoUrl ?? avatarUrl;
+                                                return imgSrc ? (
+                                                  // eslint-disable-next-line @next/next/no-img-element
+                                                  <img
+                                                    src={imgSrc}
+                                                    alt={
+                                                      task.assigneeName ||
+                                                      commonT(
+                                                        'labels.notAssigned'
+                                                      )
+                                                    }
+                                                    className="size-full object-cover"
+                                                  />
+                                                ) : (
+                                                  getInitials(task.assigneeName)
+                                                );
+                                              })()}
+                                            </div>
+                                            <span className="truncate text-[11px] text-muted-foreground">
+                                              {task.assigneeName ||
+                                                commonT('labels.notAssigned')}
+                                            </span>
+                                          </div>
+                                          <div className="flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
+                                            <span className="inline-flex items-center gap-1">
+                                              <MessageSquare className="size-3.5" />
+                                              {comments}
+                                            </span>
+                                            <span className="inline-flex items-center gap-1">
+                                              <Paperclip className="size-3.5" />
+                                              {attachments}
+                                            </span>
+                                          </div>
+                                        </div>
+                                      </motion.div>
+                                    )}
+                                  </DraggableTaskCard>
+                                );
+                              })}
+                            </AnimatePresence>
+                            {filteredTaskColumns[column.id].length === 0 ? (
+                              <div className="rounded-2xl border border-dashed bg-background/70 p-4 text-center text-xs text-muted-foreground">
+                                {boardSearch || boardPriorityFilter !== 'all'
+                                  ? t('kanban.noFilteredTasks')
+                                  : t('kanban.emptyColumn')}
+                              </div>
+                            ) : null}
+                            {!isLimitedView &&
+                            inlineCreateColumn === column.id ? (
+                              <div className="space-y-1.5 rounded-2xl border bg-card p-2 shadow-sm">
+                                <Input
+                                  autoFocus
+                                  placeholder={t('taskForm.namePlaceholder')}
+                                  value={inlineCreateName}
+                                  onChange={(e) =>
+                                    setInlineCreateName(e.target.value)
+                                  }
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                      e.preventDefault();
+                                      void handleInlineCreateTask(
+                                        column.id,
+                                        inlineCreateName
+                                      );
+                                    } else if (e.key === 'Escape') {
+                                      setInlineCreateColumn(null);
+                                      setInlineCreateName('');
+                                    }
+                                  }}
+                                  onBlur={() => {
+                                    if (!inlineCreateName.trim()) {
+                                      setInlineCreateColumn(null);
+                                      setInlineCreateName('');
+                                    }
+                                  }}
+                                  disabled={inlineCreateLoading}
+                                  className="h-8 text-sm"
+                                />
+                                <div className="flex gap-1">
+                                  <Button
+                                    type="button"
+                                    size="sm"
+                                    className="h-7 px-2 text-xs"
+                                    disabled={
+                                      !inlineCreateName.trim() ||
+                                      inlineCreateLoading
+                                    }
+                                    onMouseDown={(e) => e.preventDefault()}
+                                    onClick={() =>
+                                      void handleInlineCreateTask(
+                                        column.id,
+                                        inlineCreateName
+                                      )
+                                    }
+                                  >
+                                    {t('taskForm.titleNew')}
+                                  </Button>
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 px-2 text-xs"
+                                    onMouseDown={(e) => e.preventDefault()}
+                                    onClick={() => {
+                                      setInlineCreateColumn(null);
+                                      setInlineCreateName('');
+                                    }}
+                                  >
+                                    {commonT('actions.cancel')}
+                                  </Button>
+                                </div>
+                              </div>
+                            ) : !isLimitedView ? (
+                              <button
+                                type="button"
+                                className="mt-auto flex w-full cursor-pointer items-center justify-center gap-1 rounded-2xl border border-dashed bg-background/70 px-3 py-2 text-xs text-muted-foreground transition hover:border-primary/40 hover:bg-primary/5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                                onClick={() => {
+                                  setInlineCreateColumn(column.id);
+                                  setInlineCreateName('');
+                                }}
+                              >
+                                <Plus className="size-3" />
+                                {t('taskForm.titleNew')}
+                              </button>
+                            ) : null}
+                          </div>
+                        </div>
+                      )}
+                    </DroppableColumn>
+                  ))}
+                </div>
+                {/* Scroll fade overlay — visible only on mobile/tablet */}
+                <div
+                  aria-hidden
+                  className="pointer-events-none absolute inset-y-0 right-0 w-16 bg-linear-to-l from-background/80 to-transparent xl:hidden"
+                />
+              </div>
+              {/* DragOverlay renders the floating card following the pointer */}
+              <DragOverlay dropAnimation={{ duration: 160, easing: 'ease' }}>
+                {activeDragTask
+                  ? (() => {
+                      const overlayTask = activeDragTask;
+                      const overlayTags = getTaskTags(overlayTask);
+                      const overlayComments = getTaskCommentCount(overlayTask);
+                      const overlayAttachments =
+                        getTaskAttachmentCount(overlayTask);
+                      return (
+                        <div className="w-76 cursor-grabbing rounded-2xl border border-primary/60 bg-card p-3 shadow-2xl ring-2 ring-primary/20 opacity-95">
+                          <div className="mb-3 flex items-start justify-between gap-2">
+                            <div className="min-w-0 space-y-1">
+                              <p className="line-clamp-2 text-sm font-semibold leading-snug">
+                                {overlayTask.name}
+                              </p>
+                              {overlayTask.description ? (
+                                <p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
+                                  {overlayTask.description.replace(
+                                    /<[^>]*>/g,
+                                    ''
+                                  )}
+                                </p>
+                              ) : null}
+                            </div>
                             <span
                               className={[
-                                'size-2.5 rounded-full',
-                                getColumnDotClassName(column.id),
+                                'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                                getPriorityClassName(overlayTask.priority),
                               ].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>
+                              {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>
-                      </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>
+                          <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>
 
-                                    {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="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="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
-                                          )}
+                          <div className="mt-3 flex items-center justify-between gap-3 border-t pt-3">
+                            <div className="flex min-w-0 items-center gap-2">
+                              <div className="flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                                {(() => {
+                                  const photoUrl = getUserPhotoUrl(
+                                    overlayTask.assigneeUserPhotoId
+                                  );
+                                  const avatarUrl =
+                                    overlayTask.assigneePersonAvatarId
+                                      ? getPersonAvatarUrl(
+                                          overlayTask.assigneePersonAvatarId
+                                        )
+                                      : null;
+                                  const imgSrc = photoUrl ?? avatarUrl;
+                                  return imgSrc ? (
+                                    // eslint-disable-next-line @next/next/no-img-element
+                                    <img
+                                      src={imgSrc}
+                                      alt={
+                                        overlayTask.assigneeName ||
+                                        commonT('labels.notAssigned')
+                                      }
+                                      className="size-full object-cover"
+                                    />
+                                  ) : (
+                                    getInitials(overlayTask.assigneeName)
+                                  );
+                                })()}
+                              </div>
+                              <span className="truncate text-[11px] text-muted-foreground">
+                                {overlayTask.assigneeName ||
+                                  commonT('labels.notAssigned')}
+                              </span>
+                            </div>
+                            <div className="flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
+                              <span className="inline-flex items-center gap-1">
+                                <MessageSquare className="size-3.5" />
+                                {overlayComments}
+                              </span>
+                              <span className="inline-flex items-center gap-1">
+                                <Paperclip className="size-3.5" />
+                                {overlayAttachments}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })()
+                  : null}
+              </DragOverlay>
+            </DndContext>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="timeline">
+          <SectionCard
+            title={t('sections.timeline')}
+            description={t('sections.timelineDescription')}
+            className="rounded-3xl border bg-card p-4 shadow-sm"
+            actions={
+              <div className="flex flex-wrap items-center gap-2">
+                <Select
+                  value={timelineTypeFilter}
+                  onValueChange={(value) => {
+                    setTimelineTypeFilter(value as typeof timelineTypeFilter);
+                    setTimelineVisibleCount(8);
+                  }}
+                >
+                  <SelectTrigger className="h-9 w-44 bg-background">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">
+                      {t('timeline.filters.all')}
+                    </SelectItem>
+                    <SelectItem value="task">
+                      {t('timeline.filters.task')}
+                    </SelectItem>
+                    <SelectItem value="status">
+                      {t('timeline.filters.status')}
+                    </SelectItem>
+                    <SelectItem value="timesheet">
+                      {t('timeline.filters.timesheet')}
+                    </SelectItem>
+                    <SelectItem value="approval">
+                      {t('timeline.filters.approval')}
+                    </SelectItem>
+                    <SelectItem value="comment">
+                      {t('timeline.filters.comment')}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            }
+          >
+            <div className="rounded-3xl border bg-linear-to-b from-muted/30 to-background p-4">
+              {groupedTimelineEvents.length > 0 ? (
+                <div className="space-y-6">
+                  {groupedTimelineEvents.map((group) => (
+                    <div key={group.dayKey} className="space-y-3">
+                      <div className="sticky top-0 z-10 w-fit rounded-full border bg-background px-3 py-1 text-xs font-medium text-muted-foreground shadow-xs">
+                        {formatDate(
+                          group.dayKey,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </div>
+                      <div className="space-y-0">
+                        {group.events.map((event, index) => {
+                          const Icon = event.icon;
+                          return (
+                            <motion.div
+                              key={event.id}
+                              initial={{ opacity: 0, y: 8 }}
+                              animate={{ opacity: 1, y: 0 }}
+                              transition={{ duration: 0.18 }}
+                              className="grid grid-cols-[2rem_1fr] gap-3"
+                            >
+                              <div className="flex flex-col items-center">
+                                <div
+                                  className={[
+                                    'flex size-8 items-center justify-center rounded-full shadow-sm',
+                                    event.toneClassName,
+                                  ].join(' ')}
+                                >
+                                  <Icon className="size-4" />
+                                </div>
+                                {index < group.events.length - 1 ? (
+                                  <div className="w-px flex-1 bg-border" />
+                                ) : null}
+                              </div>
+                              <div className="pb-5">
+                                <div className="rounded-2xl border bg-card p-4 shadow-xs transition hover:shadow-sm">
+                                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                                    <div className="min-w-0">
+                                      <div className="flex flex-wrap items-center gap-2">
+                                        <span className="text-sm font-semibold">
+                                          {event.title}
                                         </span>
-                                      </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 className="rounded-full border bg-muted/40 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                                          {t(`timeline.types.${event.type}`)}
                                         </span>
                                       </div>
+                                      <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
+                                        {event.description}
+                                      </p>
                                     </div>
-
-                                    <div className="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 className="shrink-0 text-xs text-muted-foreground">
+                                      {formatRelativeTime(
+                                        event.timestamp,
+                                        currentLocaleCode
+                                      )}
                                     </div>
+                                  </div>
+                                  <div className="mt-3 flex items-center gap-2 border-t pt-3">
+                                    <Avatar className="size-7 border bg-muted">
+                                      <AvatarImage
+                                        src={
+                                          getUserPhotoUrl(
+                                            event.actorUserPhotoId
+                                          ) ||
+                                          getPersonAvatarUrl(
+                                            event.actorAvatarId
+                                          )
+                                        }
+                                        alt={
+                                          event.actorName ||
+                                          commonT('labels.notAssigned')
+                                        }
+                                      />
+                                      <AvatarFallback className="text-[10px]">
+                                        {getInitials(event.actorName)}
+                                      </AvatarFallback>
+                                    </Avatar>
+                                    <span className="truncate text-xs text-muted-foreground">
+                                      {event.actorName ||
+                                        commonT('labels.notAssigned')}
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </motion.div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  ))}
+                  {visibleTimelineEvents.length <
+                  filteredTimelineEvents.length ? (
+                    <div className="flex justify-center">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() =>
+                          setTimelineVisibleCount((current) => current + 8)
+                        }
+                      >
+                        {t('timeline.loadMore')}
+                      </Button>
+                    </div>
+                  ) : null}
+                </div>
+              ) : (
+                <div className="flex min-h-56 flex-col items-center justify-center rounded-2xl border border-dashed bg-background p-6 text-center">
+                  <div className="flex size-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+                    <GitCommitHorizontal className="size-6" />
+                  </div>
+                  <div className="mt-3 text-sm font-medium">
+                    {t('timeline.emptyTitle')}
+                  </div>
+                  <p className="mt-1 max-w-sm text-xs leading-5 text-muted-foreground">
+                    {t('timeline.empty')}
+                  </p>
+                </div>
+              )}
+            </div>
+          </SectionCard>
+        </TabsContent>
 
-                                    <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')}
+        <TabsContent value="archive">
+          <SectionCard
+            title={t('sections.archivedTasks')}
+            description={t('sections.archivedTasksDescription')}
+            className="rounded-xl border bg-card p-4 shadow-sm"
+          >
+            {archivedTasks.length > 0 ? (
+              <div className="overflow-x-auto rounded-lg border bg-muted/10">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{commonT('labels.task')}</TableHead>
+                      <TableHead>{commonT('labels.status')}</TableHead>
+                      <TableHead>{t('taskForm.deadlineLabel')}</TableHead>
+                      <TableHead className="text-right">
+                        {commonT('labels.actions')}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {archivedTasks.map((task) => (
+                      <TableRow
+                        key={task.id}
+                        className="cursor-pointer hover:bg-muted/30"
+                        onClick={() => setSelectedTask(task)}
+                      >
+                        <TableCell>
+                          <div className="min-w-0">
+                            <div className="truncate font-medium">
+                              {task.name}
+                            </div>
+                            {task.description ? (
+                              <div className="truncate text-xs text-muted-foreground">
+                                {task.description}
+                              </div>
+                            ) : null}
                           </div>
-                        ) : 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('');
-                                }
+                        </TableCell>
+                        <TableCell>
+                          <StatusBadge
+                            label={
+                              KANBAN_COLUMNS.find(
+                                (column) => column.id === task.status
+                              )?.label ?? formatEnumLabel(task.status)
+                            }
+                            className={getStatusBadgeClass(task.status)}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          {formatDate(
+                            task.dueDate,
+                            getSettingValue,
+                            currentLocaleCode
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex justify-end gap-2">
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="gap-2"
+                              disabled={restoringTaskId === task.id}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                void handleRestoreTask(task.id);
                               }}
-                              onBlur={() => {
-                                if (!inlineCreateName.trim()) {
-                                  setInlineCreateColumn(null);
-                                  setInlineCreateName('');
-                                }
+                            >
+                              {restoringTaskId === task.id ? (
+                                <Loader2 className="size-4 animate-spin" />
+                              ) : (
+                                <ArchiveRestore className="size-4" />
+                              )}
+                              {commonT('actions.unarchive')}
+                            </Button>
+                            <Button
+                              variant="destructive"
+                              size="sm"
+                              className="gap-2"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                setDeletePromptTask(task);
                               }}
-                              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>
+                            >
+                              <Trash2 className="size-4" />
+                              {commonT('actions.delete')}
+                            </Button>
                           </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}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            ) : (
+              <ChartEmptyState
+                icon={Archive}
+                title={commonT('states.emptyTitle')}
+                description={t('emptyArchivedDescription')}
+              />
+            )}
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="team">
+          <div className="grid gap-4 xl:grid-cols-12">
+            <SectionCard
+              title={t('sections.team')}
+              description={t('sections.teamDescription')}
+              className={[
+                'rounded-2xl border bg-card p-4 shadow-sm',
+                isLimitedView ? 'xl:col-span-12' : 'xl:col-span-8',
+              ].join(' ')}
+            >
+              {project.assignments.length > 0 ? (
+                <div className="space-y-4">
+                  <div className="grid gap-3 sm:grid-cols-3">
+                    <div className="rounded-2xl border bg-emerald-500/10 p-3">
+                      <div className="text-xs text-muted-foreground">
+                        {t('teamPanel.available')}
+                      </div>
+                      <div className="mt-1 text-2xl font-semibold text-emerald-700 dark:text-emerald-300">
+                        {availableAssignments}
                       </div>
                     </div>
-                  )}
-                </DroppableColumn>
-              ))}
-            </div>
-            {/* Scroll fade overlay — visible only on mobile/tablet */}
-            <div
-              aria-hidden
-              className="pointer-events-none absolute inset-y-0 right-0 w-16 bg-linear-to-l from-background/80 to-transparent xl:hidden"
-            />
-          </div>
-          {/* DragOverlay renders the floating card following the pointer */}
-          <DragOverlay dropAnimation={{ duration: 160, easing: 'ease' }}>
-            {activeDragTask
-              ? (() => {
-                  const overlayTask = activeDragTask;
-                  const overlayTags = getTaskTags(overlayTask);
-                  const overlayComments = getTaskCommentCount(overlayTask);
-                  const overlayAttachments = getTaskAttachmentCount();
-                  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 className="rounded-2xl border bg-amber-500/10 p-3">
+                      <div className="text-xs text-muted-foreground">
+                        {t('teamPanel.highAllocation')}
                       </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 className="mt-1 text-2xl font-semibold text-amber-700 dark:text-amber-300">
+                        {highAllocationAssignments}
                       </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="rounded-2xl border bg-rose-500/10 p-3">
+                      <div className="text-xs text-muted-foreground">
+                        {t('teamPanel.overload')}
                       </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 className="mt-1 text-2xl font-semibold text-rose-700 dark:text-rose-300">
+                        {overloadedAssignments}
                       </div>
                     </div>
-                  );
-                })()
-              : null}
-          </DragOverlay>
-        </DndContext>
-      </SectionCard>
-
-      <SectionCard
-        title={t('sections.timeline')}
-        description={t('sections.timelineDescription')}
-        className="rounded-3xl border bg-card p-4 shadow-sm"
-        actions={
-          <div className="flex flex-wrap items-center gap-2">
-            <Select
-              value={timelineTypeFilter}
-              onValueChange={(value) => {
-                setTimelineTypeFilter(value as typeof timelineTypeFilter);
-                setTimelineVisibleCount(8);
-              }}
-            >
-              <SelectTrigger className="h-9 w-44 bg-background">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">{t('timeline.filters.all')}</SelectItem>
-                <SelectItem value="task">
-                  {t('timeline.filters.task')}
-                </SelectItem>
-                <SelectItem value="status">
-                  {t('timeline.filters.status')}
-                </SelectItem>
-                <SelectItem value="timesheet">
-                  {t('timeline.filters.timesheet')}
-                </SelectItem>
-                <SelectItem value="approval">
-                  {t('timeline.filters.approval')}
-                </SelectItem>
-                <SelectItem value="comment">
-                  {t('timeline.filters.comment')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        }
-      >
-        <div className="rounded-3xl border bg-linear-to-b from-muted/30 to-background p-4">
-          {groupedTimelineEvents.length > 0 ? (
-            <div className="space-y-6">
-              {groupedTimelineEvents.map((group) => (
-                <div key={group.dayKey} className="space-y-3">
-                  <div className="sticky top-0 z-10 w-fit rounded-full border bg-background px-3 py-1 text-xs font-medium text-muted-foreground shadow-xs">
-                    {formatDate(
-                      group.dayKey,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
                   </div>
-                  <div className="space-y-0">
-                    {group.events.map((event, index) => {
-                      const Icon = event.icon;
+
+                  <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={event.id}
-                          initial={{ opacity: 0, y: 8 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          transition={{ duration: 0.18 }}
-                          className="grid grid-cols-[2rem_1fr] gap-3"
+                          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="flex flex-col items-center">
-                            <div
-                              className={[
-                                'flex size-8 items-center justify-center rounded-full shadow-sm',
-                                event.toneClassName,
-                              ].join(' ')}
-                            >
-                              <Icon className="size-4" />
-                            </div>
-                            {index < group.events.length - 1 ? (
-                              <div className="w-px flex-1 bg-border" />
-                            ) : null}
-                          </div>
-                          <div className="pb-5">
-                            <div className="rounded-2xl border bg-card p-4 shadow-xs transition hover:shadow-sm">
-                              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                                <div className="min-w-0">
-                                  <div className="flex flex-wrap items-center gap-2">
-                                    <span className="text-sm font-semibold">
-                                      {event.title}
-                                    </span>
-                                    <span className="rounded-full border bg-muted/40 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                                      {t(`timeline.types.${event.type}`)}
-                                    </span>
-                                  </div>
-                                  <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
-                                    {event.description}
-                                  </p>
-                                </div>
-                                <div className="shrink-0 text-xs text-muted-foreground">
-                                  {formatRelativeTime(
-                                    event.timestamp,
-                                    currentLocaleCode
-                                  )}
-                                </div>
-                              </div>
-                              <div className="mt-3 flex items-center gap-2 border-t pt-3">
-                                <Avatar className="size-7 border bg-muted">
+                          <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(event.actorUserPhotoId) ||
-                                      getPersonAvatarUrl(event.actorAvatarId)
-                                    }
-                                    alt={
-                                      event.actorName ||
-                                      commonT('labels.notAssigned')
+                                      getUserPhotoUrl(assignment.userPhotoId) ||
+                                      getPersonAvatarUrl(
+                                        assignment.personAvatarId
+                                      )
                                     }
+                                    alt={assignment.collaboratorName}
                                   />
-                                  <AvatarFallback className="text-[10px]">
-                                    {getInitials(event.actorName)}
+                                  <AvatarFallback className="text-xs font-semibold">
+                                    {getInitials(assignment.collaboratorName)}
                                   </AvatarFallback>
                                 </Avatar>
-                                <span className="truncate text-xs text-muted-foreground">
-                                  {event.actorName ||
-                                    commonT('labels.notAssigned')}
+                                <div className="min-w-0">
+                                  <div className="truncate text-sm font-semibold">
+                                    {assignment.collaboratorName}
+                                  </div>
+                                  <div className="truncate text-xs text-muted-foreground">
+                                    {assignment.roleLabel ||
+                                      commonT('labels.notAssigned')}
+                                  </div>
+                                </div>
+                              </div>
+                              <div className="flex shrink-0 flex-col items-end gap-2">
+                                <StatusBadge
+                                  label={formatEnumLabel(assignment.status)}
+                                  className={getStatusBadgeClass(
+                                    assignment.status
+                                  )}
+                                />
+                                <span
+                                  className={[
+                                    'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold',
+                                    tone.border,
+                                    tone.bg,
+                                    tone.text,
+                                  ].join(' ')}
+                                >
+                                  <ToneIcon className="size-3" />
+                                  {t(`teamPanel.status.${tone.labelKey}`)}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div className="space-y-4 p-4">
+                            <div className="space-y-2">
+                              <div className="flex items-center justify-between text-xs">
+                                <span className="text-muted-foreground">
+                                  {commonT('labels.allocationPercent')}
+                                </span>
+                                <span
+                                  className={['font-semibold', tone.text].join(
+                                    ' '
+                                  )}
+                                >
+                                  {formatPercent(assignment.allocationPercent)}
                                 </span>
                               </div>
+                              <Progress
+                                value={allocation}
+                                className={['h-2.5', tone.progress].join(' ')}
+                              />
+                              {allocationValue > 100 ? (
+                                <div className="flex items-center gap-1 text-xs text-rose-700 dark:text-rose-300">
+                                  <AlertTriangle className="size-3.5" />
+                                  {t('teamPanel.overloadWarning', {
+                                    value: allocationValue - 100,
+                                  })}
+                                </div>
+                              ) : null}
+                            </div>
+
+                            <div className="grid grid-cols-2 gap-3 text-xs xl:grid-cols-4">
+                              <div className="rounded-xl border bg-muted/20 p-2">
+                                <div className="text-muted-foreground">
+                                  {commonT('labels.weeklyCapacity')}
+                                </div>
+                                <div className="mt-1 font-semibold">
+                                  {weeklyHours
+                                    ? formatHours(weeklyHours)
+                                    : commonT('labels.notAvailable')}
+                                </div>
+                              </div>
+                              <div className="rounded-xl border bg-muted/20 p-2">
+                                <div className="text-muted-foreground">
+                                  {t('teamPanel.usedHours')}
+                                </div>
+                                <div className="mt-1 font-semibold">
+                                  {weeklyHours
+                                    ? formatHours(usedHours)
+                                    : commonT('labels.notAvailable')}
+                                </div>
+                              </div>
+                              <div className="rounded-xl border bg-muted/20 p-2">
+                                <div className="text-muted-foreground">
+                                  {t('teamPanel.availability')}
+                                </div>
+                                <div className="mt-1 font-semibold">
+                                  {weeklyHours
+                                    ? formatHours(availabilityHours)
+                                    : `${clampPercent(availablePercent)}%`}
+                                </div>
+                              </div>
+                              <div className="rounded-xl border bg-muted/20 p-2">
+                                <div className="text-muted-foreground">
+                                  {commonT('labels.timeline')}
+                                </div>
+                                <div className="mt-1 truncate font-semibold">
+                                  {formatDateRange(
+                                    assignment.startDate,
+                                    assignment.endDate,
+                                    getSettingValue,
+                                    currentLocaleCode
+                                  )}
+                                </div>
+                              </div>
                             </div>
                           </div>
                         </motion.div>
@@ -3534,442 +3997,136 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                     })}
                   </div>
                 </div>
-              ))}
-              {visibleTimelineEvents.length < filteredTimelineEvents.length ? (
-                <div className="flex justify-center">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() =>
-                      setTimelineVisibleCount((current) => current + 8)
-                    }
-                  >
-                    {t('timeline.loadMore')}
-                  </Button>
-                </div>
-              ) : null}
-            </div>
-          ) : (
-            <div className="flex min-h-56 flex-col items-center justify-center rounded-2xl border border-dashed bg-background p-6 text-center">
-              <div className="flex size-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
-                <GitCommitHorizontal className="size-6" />
-              </div>
-              <div className="mt-3 text-sm font-medium">
-                {t('timeline.emptyTitle')}
-              </div>
-              <p className="mt-1 max-w-sm text-xs leading-5 text-muted-foreground">
-                {t('timeline.empty')}
-              </p>
-            </div>
-          )}
-        </div>
-      </SectionCard>
-
-      <SectionCard
-        title={t('sections.archivedTasks')}
-        description={t('sections.archivedTasksDescription')}
-        className="rounded-xl border bg-card p-4 shadow-sm"
-      >
-        {archivedTasks.length > 0 ? (
-          <div className="overflow-x-auto rounded-lg border bg-muted/10">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{commonT('labels.task')}</TableHead>
-                  <TableHead>{commonT('labels.status')}</TableHead>
-                  <TableHead>{t('taskForm.deadlineLabel')}</TableHead>
-                  <TableHead className="text-right">
-                    {commonT('labels.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {archivedTasks.map((task) => (
-                  <TableRow
-                    key={task.id}
-                    className="cursor-pointer hover:bg-muted/30"
-                    onClick={() => setSelectedTask(task)}
-                  >
-                    <TableCell>
-                      <div className="min-w-0">
-                        <div className="truncate font-medium">{task.name}</div>
-                        {task.description ? (
-                          <div className="truncate text-xs text-muted-foreground">
-                            {task.description}
-                          </div>
-                        ) : null}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <StatusBadge
-                        label={
-                          KANBAN_COLUMNS.find(
-                            (column) => column.id === task.status
-                          )?.label ?? formatEnumLabel(task.status)
-                        }
-                        className={getStatusBadgeClass(task.status)}
-                      />
-                    </TableCell>
-                    <TableCell>
-                      {formatDate(
-                        task.dueDate,
-                        getSettingValue,
-                        currentLocaleCode
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex justify-end gap-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="gap-2"
-                          disabled={restoringTaskId === task.id}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            void handleRestoreTask(task.id);
-                          }}
-                        >
-                          {restoringTaskId === task.id ? (
-                            <Loader2 className="size-4 animate-spin" />
-                          ) : (
-                            <ArchiveRestore className="size-4" />
-                          )}
-                          {commonT('actions.unarchive')}
-                        </Button>
-                        <Button
-                          variant="destructive"
-                          size="sm"
-                          className="gap-2"
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            setDeletePromptTask(task);
-                          }}
-                        >
-                          <Trash2 className="size-4" />
-                          {commonT('actions.delete')}
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        ) : (
-          <ChartEmptyState
-            icon={Archive}
-            title={commonT('states.emptyTitle')}
-            description={t('emptyArchivedDescription')}
-          />
-        )}
-      </SectionCard>
-
-      <div className="grid gap-4 xl:grid-cols-12">
-        <SectionCard
-          title={t('sections.team')}
-          description={t('sections.teamDescription')}
-          className={[
-            'rounded-2xl border bg-card p-4 shadow-sm',
-            isLimitedView ? 'xl:col-span-12' : 'xl:col-span-8',
-          ].join(' ')}
-        >
-          {project.assignments.length > 0 ? (
-            <div className="space-y-4">
-              <div className="grid gap-3 sm:grid-cols-3">
-                <div className="rounded-2xl border bg-emerald-500/10 p-3">
-                  <div className="text-xs text-muted-foreground">
-                    {t('teamPanel.available')}
-                  </div>
-                  <div className="mt-1 text-2xl font-semibold text-emerald-700 dark:text-emerald-300">
-                    {availableAssignments}
-                  </div>
-                </div>
-                <div className="rounded-2xl border bg-amber-500/10 p-3">
-                  <div className="text-xs text-muted-foreground">
-                    {t('teamPanel.highAllocation')}
-                  </div>
-                  <div className="mt-1 text-2xl font-semibold text-amber-700 dark:text-amber-300">
-                    {highAllocationAssignments}
-                  </div>
-                </div>
-                <div className="rounded-2xl border bg-rose-500/10 p-3">
-                  <div className="text-xs text-muted-foreground">
-                    {t('teamPanel.overload')}
-                  </div>
-                  <div className="mt-1 text-2xl font-semibold text-rose-700 dark:text-rose-300">
-                    {overloadedAssignments}
-                  </div>
-                </div>
-              </div>
+              ) : (
+                <ChartEmptyState
+                  icon={Users}
+                  title={commonT('states.emptyTitle')}
+                  description={t('noAssignments')}
+                />
+              )}
+            </SectionCard>
 
-              <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(' ')}
+            {!isLimitedView ? (
+              <SectionCard
+                title={t('sections.indicators')}
+                description={t('sections.indicatorsDescription')}
+                className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-4"
+              >
+                <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
+                  {[
+                    {
+                      icon: Users,
+                      label: t('indicators.activeAssignments'),
+                      value: project.operationalIndicators.activeAssignments,
+                      tone: 'text-sky-700 dark:text-sky-300',
+                      bg: 'bg-sky-500/10',
+                    },
+                    {
+                      icon: CheckCircle2,
+                      label: t('indicators.completedAssignments'),
+                      value: project.operationalIndicators.completedAssignments,
+                      tone: 'text-emerald-700 dark:text-emerald-300',
+                      bg: 'bg-emerald-500/10',
+                    },
+                    {
+                      icon: Gauge,
+                      label: t('indicators.averageAllocation'),
+                      value: formatPercent(
+                        project.operationalIndicators.averageAllocation
+                      ),
+                      tone:
+                        averageAllocation > 100
+                          ? 'text-rose-700 dark:text-rose-300'
+                          : averageAllocation > 85
+                            ? 'text-amber-700 dark:text-amber-300'
+                            : 'text-emerald-700 dark:text-emerald-300',
+                      bg:
+                        averageAllocation > 100
+                          ? 'bg-rose-500/10'
+                          : averageAllocation > 85
+                            ? 'bg-amber-500/10'
+                            : 'bg-emerald-500/10',
+                    },
+                    {
+                      icon: Timer,
+                      label: t('indicators.totalWeeklyHours'),
+                      value: formatHours(
+                        project.operationalIndicators.totalWeeklyHours
+                      ),
+                      tone: 'text-violet-700 dark:text-violet-300',
+                      bg: 'bg-violet-500/10',
+                    },
+                    {
+                      icon: ClipboardList,
+                      label: t('cards.timesheets'),
+                      value: project.timesheetSummary.totalTimesheets,
+                      tone: 'text-foreground',
+                      bg: 'bg-muted/40',
+                    },
+                    {
+                      icon: AlarmClock,
+                      label: commonT('labels.pending'),
+                      value: project.timesheetSummary.pendingTimesheets,
+                      tone:
+                        project.timesheetSummary.pendingTimesheets > 0
+                          ? 'text-amber-700 dark:text-amber-300'
+                          : 'text-foreground',
+                      bg:
+                        project.timesheetSummary.pendingTimesheets > 0
+                          ? 'bg-amber-500/10'
+                          : 'bg-muted/40',
+                    },
+                    {
+                      icon: BarChart2,
+                      label: t('cards.loggedHours'),
+                      value: formatHours(project.timesheetSummary.totalHours),
+                      tone: 'text-sky-700 dark:text-sky-300',
+                      bg: 'bg-sky-500/10',
+                    },
+                  ].map(({ icon: Icon, label, value, tone, bg }) => (
+                    <div
+                      key={label}
+                      className="flex items-center gap-3 rounded-xl border bg-card p-3 transition-shadow hover:shadow-sm"
                     >
-                      <div className="border-b bg-linear-to-br from-muted/50 to-background p-4">
-                        <div className="flex items-start justify-between gap-3">
-                          <div className="flex min-w-0 items-center gap-3">
-                            <Avatar className="size-12 border bg-muted">
-                              <AvatarImage
-                                src={
-                                  getUserPhotoUrl(assignment.userPhotoId) ||
-                                  getPersonAvatarUrl(assignment.personAvatarId)
-                                }
-                                alt={assignment.collaboratorName}
-                              />
-                              <AvatarFallback className="text-xs font-semibold">
-                                {getInitials(assignment.collaboratorName)}
-                              </AvatarFallback>
-                            </Avatar>
-                            <div className="min-w-0">
-                              <div className="truncate text-sm font-semibold">
-                                {assignment.collaboratorName}
-                              </div>
-                              <div className="truncate text-xs text-muted-foreground">
-                                {assignment.roleLabel ||
-                                  commonT('labels.notAssigned')}
-                              </div>
-                            </div>
-                          </div>
-                          <div className="flex shrink-0 flex-col items-end gap-2">
-                            <StatusBadge
-                              label={formatEnumLabel(assignment.status)}
-                              className={getStatusBadgeClass(assignment.status)}
-                            />
-                            <span
-                              className={[
-                                'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold',
-                                tone.border,
-                                tone.bg,
-                                tone.text,
-                              ].join(' ')}
-                            >
-                              <ToneIcon className="size-3" />
-                              {t(`teamPanel.status.${tone.labelKey}`)}
-                            </span>
-                          </div>
-                        </div>
+                      <div
+                        className={[
+                          'flex size-9 shrink-0 items-center justify-center rounded-xl',
+                          bg,
+                        ].join(' ')}
+                      >
+                        <Icon className={['size-4', tone].join(' ')} />
                       </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 className="min-w-0 flex-1">
+                        <div className="truncate text-xs text-muted-foreground">
+                          {label}
                         </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
+                          className={[
+                            'mt-0.5 text-sm font-semibold tabular-nums',
+                            tone,
+                          ].join(' ')}
+                        >
+                          {value}
                         </div>
                       </div>
-                    </motion.div>
-                  );
-                })}
-              </div>
-            </div>
-          ) : (
-            <ChartEmptyState
-              icon={Users}
-              title={commonT('states.emptyTitle')}
-              description={t('noAssignments')}
-            />
-          )}
-        </SectionCard>
+                    </div>
+                  ))}
+                </div>
+              </SectionCard>
+            ) : null}
+          </div>
+        </TabsContent>
 
-        {!isLimitedView ? (
+        <TabsContent value="costs">
           <SectionCard
-            title={t('sections.indicators')}
-            description={t('sections.indicatorsDescription')}
-            className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-4"
+            title={t('sections.costs')}
+            description={t('sections.costsDescription')}
+            className="rounded-2xl border bg-card p-4 shadow-sm"
           >
-            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
-              {[
-                {
-                  icon: Users,
-                  label: t('indicators.activeAssignments'),
-                  value: project.operationalIndicators.activeAssignments,
-                  tone: 'text-sky-700 dark:text-sky-300',
-                  bg: 'bg-sky-500/10',
-                },
-                {
-                  icon: CheckCircle2,
-                  label: t('indicators.completedAssignments'),
-                  value: project.operationalIndicators.completedAssignments,
-                  tone: 'text-emerald-700 dark:text-emerald-300',
-                  bg: 'bg-emerald-500/10',
-                },
-                {
-                  icon: Gauge,
-                  label: t('indicators.averageAllocation'),
-                  value: formatPercent(
-                    project.operationalIndicators.averageAllocation
-                  ),
-                  tone:
-                    averageAllocation > 100
-                      ? 'text-rose-700 dark:text-rose-300'
-                      : averageAllocation > 85
-                        ? 'text-amber-700 dark:text-amber-300'
-                        : 'text-emerald-700 dark:text-emerald-300',
-                  bg:
-                    averageAllocation > 100
-                      ? 'bg-rose-500/10'
-                      : averageAllocation > 85
-                        ? 'bg-amber-500/10'
-                        : 'bg-emerald-500/10',
-                },
-                {
-                  icon: Timer,
-                  label: t('indicators.totalWeeklyHours'),
-                  value: formatHours(
-                    project.operationalIndicators.totalWeeklyHours
-                  ),
-                  tone: 'text-violet-700 dark:text-violet-300',
-                  bg: 'bg-violet-500/10',
-                },
-                {
-                  icon: ClipboardList,
-                  label: t('cards.timesheets'),
-                  value: project.timesheetSummary.totalTimesheets,
-                  tone: 'text-foreground',
-                  bg: 'bg-muted/40',
-                },
-                {
-                  icon: AlarmClock,
-                  label: commonT('labels.pending'),
-                  value: project.timesheetSummary.pendingTimesheets,
-                  tone:
-                    project.timesheetSummary.pendingTimesheets > 0
-                      ? 'text-amber-700 dark:text-amber-300'
-                      : 'text-foreground',
-                  bg:
-                    project.timesheetSummary.pendingTimesheets > 0
-                      ? 'bg-amber-500/10'
-                      : 'bg-muted/40',
-                },
-                {
-                  icon: BarChart2,
-                  label: t('cards.loggedHours'),
-                  value: formatHours(project.timesheetSummary.totalHours),
-                  tone: 'text-sky-700 dark:text-sky-300',
-                  bg: 'bg-sky-500/10',
-                },
-              ].map(({ icon: Icon, label, value, tone, bg }) => (
-                <div
-                  key={label}
-                  className="flex items-center gap-3 rounded-xl border bg-card p-3 transition-shadow hover:shadow-sm"
-                >
-                  <div
-                    className={[
-                      'flex size-9 shrink-0 items-center justify-center rounded-xl',
-                      bg,
-                    ].join(' ')}
-                  >
-                    <Icon className={['size-4', tone].join(' ')} />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <div className="truncate text-xs text-muted-foreground">
-                      {label}
-                    </div>
-                    <div
-                      className={[
-                        'mt-0.5 text-sm font-semibold tabular-nums',
-                        tone,
-                      ].join(' ')}
-                    >
-                      {value}
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
+            <ProjectCostsSection projectId={projectId} />
           </SectionCard>
-        ) : null}
-      </div>
+        </TabsContent>
+      </Tabs>
 
       <TaskDetailSheet
         task={selectedTask}