@hed-hog/operations 0.0.285 → 0.0.286

package/hedhog/frontend/app/projects/[id]/page.tsx.ejs

@@ -1,6 +1,11 @@
 'use client';
 
-import { Page } from '@/components/entity-list';
+import {
+  Page,
+  StatsCards,
+  type StatCardConfig,
+} from '@/components/entity-list';
+import { Progress } from '@/components/ui/progress';
 import {
   Table,
   TableBody,
@@ -10,7 +15,36 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
+import {
+  ArrowUpRight,
+  CalendarClock,
+  CheckCircle2,
+  DollarSign,
+  Gauge,
+  ShieldAlert,
+  Target,
+  TrendingDown,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
+import { useMemo } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
 import { KanbanBoard } from '../../_components/kanban-board';
 import { OperationsHeader } from '../../_components/operations-header';
 import { SectionCard } from '../../_components/section-card';
@@ -26,16 +60,16 @@ import {
   getApprovalBadgeClasses,
   getApprovalLabel,
   getProjectBadgeClasses,
-  getProjectStatusLabel,
 } from '../../_lib/utils/status';
 
 export default function ProjectDetailsPage() {
+  const t = useTranslations('operations.ProjectDetailsPage');
   const params = useParams<{ id: string }>();
   const { projects, contracts, users, tasks, timesheets } = useOperationsData();
   const project = projects.find((item) => item.id === params.id);
 
   if (!project) {
-    return <Page>Project not found.</Page>;
+    return <Page>{t('notFound')}</Page>;
   }
 
   const contract = contracts.find((item) => item.id === project.contractId);
@@ -45,140 +79,856 @@ export default function ProjectDetailsPage() {
     (entry) => entry.projectId === project.id
   );
 
+  const taskStatusData = useMemo(
+    () => [
+      {
+        status: t('taskStatus.backlog'),
+        total: projectTasks.filter((task) => task.status === 'backlog').length,
+      },
+      {
+        status: t('taskStatus.todo'),
+        total: projectTasks.filter((task) => task.status === 'todo').length,
+      },
+      {
+        status: t('taskStatus.inProgress'),
+        total: projectTasks.filter((task) => task.status === 'in-progress').length,
+      },
+      {
+        status: t('taskStatus.review'),
+        total: projectTasks.filter((task) => task.status === 'review').length,
+      },
+      {
+        status: t('taskStatus.done'),
+        total: projectTasks.filter((task) => task.status === 'done').length,
+      },
+    ],
+    [projectTasks, t]
+  );
+
+  const approvalsData = useMemo(
+    () => [
+      {
+        name: t('approvals.approved'),
+        value: projectTimesheets.filter((entry) => entry.status === 'approved')
+          .length,
+      },
+      {
+        name: t('approvals.pending'),
+        value: projectTimesheets.filter((entry) => entry.status === 'pending')
+          .length,
+      },
+      {
+        name: t('approvals.rejected'),
+        value: projectTimesheets.filter((entry) => entry.status === 'rejected')
+          .length,
+      },
+    ],
+    [projectTimesheets, t]
+  );
+
+  const chartColors = ['#0ea5e9', '#f59e0b', '#ef4444', '#8b5cf6', '#10b981'];
+
+  const totalEstimatedHours = projectTasks.reduce(
+    (total, task) => total + task.estimatedHours,
+    0
+  );
+  const approvedHours = projectTimesheets
+    .filter((entry) => entry.status === 'approved')
+    .reduce((total, entry) => total + entry.hours, 0);
+  const pendingHours = projectTimesheets
+    .filter((entry) => entry.status === 'pending')
+    .reduce((total, entry) => total + entry.hours, 0);
+  const rejectedHours = projectTimesheets
+    .filter((entry) => entry.status === 'rejected')
+    .reduce((total, entry) => total + entry.hours, 0);
+
+  const actualCost = projectTimesheets.reduce((total, entry) => {
+    const user = users.find((item) => item.id === entry.userId);
+    return total + entry.hours * (user?.hourlyRate ?? 0);
+  }, 0);
+
+  const budgetConsumption = project.budget
+    ? Math.min((actualCost / project.budget) * 100, 100)
+    : 0;
+  const remainingBudget = Math.max(project.budget - actualCost, 0);
+
+  const today = new Date();
+  const startDate = new Date(project.startDate);
+  const endDate = new Date(project.endDate);
+  const elapsedDays = Math.max(
+    1,
+    Math.floor((today.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24))
+  );
+  const totalDays = Math.max(
+    1,
+    Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24))
+  );
+  const elapsedPercent = Math.min((elapsedDays / totalDays) * 100, 100);
+  const scheduleVariance = project.progress - elapsedPercent;
+  const doneTasks = projectTasks.filter((task) => task.status === 'done').length;
+  const throughput = projectTasks.length
+    ? (doneTasks / projectTasks.length) * 100
+    : 0;
+
+  const openRisks = (project.risks ?? []).filter(
+    (risk) => risk.status === 'open'
+  ).length;
+  const monthlyForecast = project.monthlyForecast ?? [];
+  const health = project.health ?? {
+    overall: 'stable',
+    scope: 'stable',
+    schedule: 'stable',
+    budget: 'stable',
+    quality: 'stable',
+  };
+
+  const healthClasses: Record<string, string> = {
+    excellent: 'bg-emerald-100 text-emerald-700',
+    stable: 'bg-sky-100 text-sky-700',
+    attention: 'bg-amber-100 text-amber-700',
+    critical: 'bg-rose-100 text-rose-700',
+  };
+
+  const riskSeverityClasses: Record<string, string> = {
+    low: 'bg-sky-100 text-sky-700',
+    medium: 'bg-amber-100 text-amber-700',
+    high: 'bg-rose-100 text-rose-700',
+  };
+
+  const dependencyStatusClasses: Record<string, string> = {
+    'on-track': 'bg-emerald-100 text-emerald-700',
+    watch: 'bg-amber-100 text-amber-700',
+    blocked: 'bg-rose-100 text-rose-700',
+  };
+
+  const milestoneStatusClasses: Record<string, string> = {
+    done: 'bg-emerald-100 text-emerald-700',
+    next: 'bg-sky-100 text-sky-700',
+    delayed: 'bg-rose-100 text-rose-700',
+  };
+
+  const stats: StatCardConfig[] = [
+    {
+      title: t('stats.progress'),
+      value: `${project.progress}%`,
+      icon: <Gauge className="size-5" />,
+      iconBgColor: 'bg-sky-100',
+      iconColor: 'text-sky-700',
+    },
+    {
+      title: t('stats.actualCost'),
+      value: formatCurrency(actualCost),
+      icon: <DollarSign className="size-5" />,
+      iconBgColor: 'bg-emerald-100',
+      iconColor: 'text-emerald-700',
+    },
+    {
+      title: t('stats.remainingBudget'),
+      value: formatCurrency(remainingBudget),
+      icon: <TrendingDown className="size-5" />,
+      iconBgColor: 'bg-amber-100',
+      iconColor: 'text-amber-700',
+    },
+    {
+      title: t('stats.throughput'),
+      value: `${Math.round(throughput)}%`,
+      icon: <Target className="size-5" />,
+      iconBgColor: 'bg-violet-100',
+      iconColor: 'text-violet-700',
+    },
+  ];
+
+  const healthBars = [
+    { key: 'scope', label: t('health.scope'), value: health.scope },
+    { key: 'schedule', label: t('health.schedule'), value: health.schedule },
+    { key: 'budget', label: t('health.budget'), value: health.budget },
+    { key: 'quality', label: t('health.quality'), value: health.quality },
+  ];
+
+  const healthToProgress: Record<string, number> = {
+    excellent: 95,
+    stable: 78,
+    attention: 52,
+    critical: 28,
+  };
+
   return (
     <Page>
       <OperationsHeader
         title={project.name}
-        description={project.description}
-        current="Project Details"
+        description={t('description', { client: project.client })}
+        current={t('breadcrumb')}
       />
 
-      <Tabs defaultValue="overview" className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="overview">Overview</TabsTrigger>
-          <TabsTrigger value="team">Team</TabsTrigger>
-          <TabsTrigger value="tasks">Tasks</TabsTrigger>
-          <TabsTrigger value="timesheets">Timesheets</TabsTrigger>
-          <TabsTrigger value="costs">Costs</TabsTrigger>
-        </TabsList>
+      <div className="relative overflow-hidden rounded-xl border bg-linear-to-r from-slate-900 via-slate-800 to-sky-900 p-5 text-slate-50">
+        <div className="absolute -right-10 -top-10 size-40 rounded-full bg-sky-400/20 blur-2xl" />
+        <div className="absolute -bottom-12 left-20 size-40 rounded-full bg-emerald-400/20 blur-2xl" />
 
-        <TabsContent value="overview">
-          <SectionCard title="Project Overview">
-            <div className="grid gap-4 text-sm md:grid-cols-2">
-              <p>
-                <span className="font-medium">Status:</span>{' '}
-                <StatusBadge
-                  label={getProjectStatusLabel(project.status)}
-                  className={getProjectBadgeClasses(project.status)}
-                />
+        <div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="space-y-3">
+            <div className="flex flex-wrap items-center gap-2">
+              <StatusBadge
+                label={t(`projectStatus.${project.status}`)}
+                className={cn('border-transparent', getProjectBadgeClasses(project.status))}
+              />
+              <StatusBadge
+                label={`${t('labels.health')}: ${t(`healthStatus.${health.overall}`)}`}
+                className={healthClasses[health.overall]}
+              />
+              <StatusBadge
+                label={`${t('labels.risks')}: ${openRisks}`}
+                className={
+                  openRisks > 0
+                    ? 'bg-amber-100 text-amber-700'
+                    : 'bg-emerald-100 text-emerald-700'
+                }
+              />
+            </div>
+            <p className="max-w-2xl text-sm text-slate-200">{project.description}</p>
+            <div className="flex flex-wrap gap-5 text-xs text-slate-200">
+              <p className="inline-flex items-center gap-1.5">
+                <CalendarClock className="size-4" />
+                {t('labels.period')}: {formatDate(project.startDate)} -{' '}
+                {formatDate(project.endDate)}
               </p>
-              <p>
-                <span className="font-medium">Progress:</span> {project.progress}%
+              <p className="inline-flex items-center gap-1.5">
+                <Users className="size-4" />
+                {t('labels.teamSize', { count: team.length })}
               </p>
-              <p>
-                <span className="font-medium">Client:</span> {project.client}
+              <p className="inline-flex items-center gap-1.5">
+                <Target className="size-4" />
+                {t('labels.contract')}: {contract?.name ?? '-'}
               </p>
-              <p>
-                <span className="font-medium">Contract:</span> {contract?.name}
+            </div>
+          </div>
+
+          <div className="grid w-full max-w-md grid-cols-2 gap-3 rounded-lg border border-white/10 bg-white/5 p-4">
+            <div>
+              <p className="text-xs uppercase text-slate-300">{t('hero.progress')}</p>
+              <p className="text-xl font-semibold">{project.progress}%</p>
+            </div>
+            <div>
+              <p className="text-xs uppercase text-slate-300">{t('hero.budget')}</p>
+              <p className="text-xl font-semibold">{formatCurrency(project.budget)}</p>
+            </div>
+            <div>
+              <p className="text-xs uppercase text-slate-300">{t('hero.hours')}</p>
+              <p className="text-xl font-semibold">{formatHours(project.hoursLogged)}</p>
+            </div>
+            <div>
+              <p className="text-xs uppercase text-slate-300">
+                {t('hero.scheduleVariance')}
               </p>
-              <p className="md:col-span-2">
-                <span className="font-medium">Description:</span>{' '}
-                {project.description}
+              <p className="text-xl font-semibold">
+                {scheduleVariance >= 0 ? '+' : ''}
+                {Math.round(scheduleVariance)}%
               </p>
             </div>
-          </SectionCard>
-        </TabsContent>
+          </div>
+        </div>
+      </div>
 
-        <TabsContent value="team">
-          <SectionCard title="Team Allocation">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Member</TableHead>
-                  <TableHead>Role</TableHead>
-                  <TableHead>Hour Rate</TableHead>
-                  <TableHead>Allocation %</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {team.map((member) => (
-                  <TableRow key={member.id}>
-                    <TableCell>{member.name}</TableCell>
-                    <TableCell>{member.role}</TableCell>
-                    <TableCell>{formatCurrency(member.hourlyRate)}</TableCell>
-                    <TableCell>{member.utilizationTarget}%</TableCell>
-                  </TableRow>
+      <StatsCards stats={stats} />
+
+      <Tabs defaultValue="overview" className="space-y-4">
+        <TabsList className="h-auto w-full flex-wrap justify-start gap-2 bg-transparent p-0">
+          <TabsTrigger value="overview">{t('tabs.overview')}</TabsTrigger>
+          <TabsTrigger value="execution">{t('tabs.execution')}</TabsTrigger>
+          <TabsTrigger value="team">{t('tabs.team')}</TabsTrigger>
+          <TabsTrigger value="finance">{t('tabs.finance')}</TabsTrigger>
+          <TabsTrigger value="timesheets">{t('tabs.timesheets')}</TabsTrigger>
+          <TabsTrigger value="governance">{t('tabs.governance')}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview">
+          <div className="grid gap-4 xl:grid-cols-5">
+            <SectionCard
+              className="xl:col-span-3"
+              title={t('sections.progressTrend')}
+              description={t('sections.progressTrendDescription')}
+            >
+              <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                  <LineChart data={monthlyForecast}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="month" />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Line
+                      type="monotone"
+                      dataKey="plannedProgress"
+                      name={t('charts.plannedProgress')}
+                      stroke="#0ea5e9"
+                      strokeWidth={2}
+                      dot={{ r: 3 }}
+                    />
+                    <Line
+                      type="monotone"
+                      dataKey="actualProgress"
+                      name={t('charts.actualProgress')}
+                      stroke="#22c55e"
+                      strokeWidth={2}
+                      dot={{ r: 3 }}
+                    />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              className="xl:col-span-2"
+              title={t('sections.health')}
+              description={t('sections.healthDescription')}
+            >
+              <div className="space-y-4">
+                {healthBars.map((item) => (
+                  <div key={item.key} className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="font-medium">{item.label}</span>
+                      <StatusBadge
+                        label={t(`healthStatus.${item.value}`)}
+                        className={healthClasses[item.value]}
+                      />
+                    </div>
+                    <Progress value={healthToProgress[item.value]} />
+                  </div>
                 ))}
-              </TableBody>
-            </Table>
-          </SectionCard>
-        </TabsContent>
+              </div>
+            </SectionCard>
 
-        <TabsContent value="tasks">
-          <SectionCard title="Kanban Preview">
-            <KanbanBoard tasks={projectTasks} users={users} />
-          </SectionCard>
-        </TabsContent>
+            <SectionCard
+              className="xl:col-span-3"
+              title={t('sections.milestones')}
+              description={t('sections.milestonesDescription')}
+            >
+              <div className="space-y-3">
+                {(project.milestones ?? []).map((milestone) => (
+                  <div key={milestone.id} className="rounded-lg border p-3">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <p className="font-medium">{milestone.title}</p>
+                      <StatusBadge
+                        label={t(`milestoneStatus.${milestone.status}`)}
+                        className={milestoneStatusClasses[milestone.status]}
+                      />
+                    </div>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      {formatDate(milestone.date)}
+                    </p>
+                    <p className="mt-2 text-sm text-muted-foreground">
+                      {milestone.description}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </SectionCard>
 
-        <TabsContent value="timesheets">
-          <SectionCard title="Project Timesheets">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Date</TableHead>
-                  <TableHead>User</TableHead>
-                  <TableHead>Hours</TableHead>
-                  <TableHead>Description</TableHead>
-                  <TableHead>Status</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {projectTimesheets.map((entry) => {
-                  const user = users.find((item) => item.id === entry.userId);
+            <SectionCard
+              className="xl:col-span-2"
+              title={t('sections.risks')}
+              description={t('sections.risksDescription')}
+            >
+              <div className="space-y-3">
+                {(project.risks ?? []).map((risk) => {
+                  const owner = users.find((item) => item.id === risk.ownerUserId);
 
                   return (
-                    <TableRow key={entry.id}>
-                      <TableCell>{formatDate(entry.date)}</TableCell>
-                      <TableCell>{user?.name}</TableCell>
-                      <TableCell>{formatHours(entry.hours)}</TableCell>
-                      <TableCell>{entry.description}</TableCell>
-                      <TableCell>
+                    <div key={risk.id} className="rounded-lg border p-3">
+                      <div className="mb-2 flex items-center gap-2">
+                        <ShieldAlert className="size-4 text-amber-600" />
+                        <p className="font-medium">{risk.title}</p>
+                      </div>
+                      <div className="mb-2 flex flex-wrap gap-2">
                         <StatusBadge
-                          label={getApprovalLabel(entry.status)}
-                          className={getApprovalBadgeClasses(entry.status)}
+                          label={t(`riskSeverity.${risk.severity}`)}
+                          className={riskSeverityClasses[risk.severity]}
                         />
-                      </TableCell>
-                    </TableRow>
+                        <StatusBadge
+                          label={t(`riskStatus.${risk.status}`)}
+                          className={
+                            risk.status === 'open'
+                              ? 'bg-rose-100 text-rose-700'
+                              : 'bg-emerald-100 text-emerald-700'
+                          }
+                        />
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        {t('labels.owner')}: {owner?.name ?? '-'}
+                      </p>
+                      <p className="mt-2 text-xs text-muted-foreground">
+                        <span className="font-medium text-foreground">
+                          {t('labels.impact')}:
+                        </span>{' '}
+                        {risk.impact}
+                      </p>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        <span className="font-medium text-foreground">
+                          {t('labels.mitigation')}:
+                        </span>{' '}
+                        {risk.mitigation}
+                      </p>
+                    </div>
                   );
                 })}
-              </TableBody>
-            </Table>
-          </SectionCard>
+              </div>
+            </SectionCard>
+          </div>
         </TabsContent>
 
-        <TabsContent value="costs">
-          <SectionCard title="Costs (Mock)">
-            <div className="grid gap-3 md:grid-cols-3">
-              <div className="rounded-lg border p-4">
-                <p className="text-sm text-muted-foreground">Budget</p>
-                <p className="text-xl font-semibold">
-                  {formatCurrency(project.budget)}
-                </p>
+        <TabsContent value="execution">
+          <div className="grid gap-4 xl:grid-cols-5">
+            <SectionCard
+              className="xl:col-span-2"
+              title={t('sections.taskDistribution')}
+              description={t('sections.taskDistributionDescription')}
+            >
+              <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={taskStatusData}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="status" />
+                    <YAxis allowDecimals={false} />
+                    <Tooltip />
+                    <Bar dataKey="total" radius={[6, 6, 0, 0]}>
+                      {taskStatusData.map((entry, index) => (
+                        <Cell
+                          key={`${entry.status}-${index}`}
+                          fill={chartColors[index % chartColors.length]}
+                        />
+                      ))}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
               </div>
-              <div className="rounded-lg border p-4">
-                <p className="text-sm text-muted-foreground">Logged Hours</p>
-                <p className="text-xl font-semibold">
-                  {formatHours(project.hoursLogged)}
+              <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
+                <p className="rounded-md bg-muted/50 p-2">
+                  {t('labels.totalTasks')}:{' '}
+                  <span className="font-semibold">{projectTasks.length}</span>
                 </p>
+                <p className="rounded-md bg-muted/50 p-2">
+                  {t('labels.estimatedHours')}:{' '}
+                  <span className="font-semibold">
+                    {formatHours(totalEstimatedHours)}
+                  </span>
+                </p>
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              className="xl:col-span-3"
+              title={t('sections.kanban')}
+              description={t('sections.kanbanDescription')}
+            >
+              <KanbanBoard tasks={projectTasks} users={users} />
+            </SectionCard>
+
+            <SectionCard
+              className="xl:col-span-5"
+              title={t('sections.taskTable')}
+              description={t('sections.taskTableDescription')}
+            >
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('table.task')}</TableHead>
+                    <TableHead>{t('table.assignee')}</TableHead>
+                    <TableHead>{t('table.dueDate')}</TableHead>
+                    <TableHead>{t('table.estimate')}</TableHead>
+                    <TableHead>{t('table.status')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {projectTasks.map((task) => {
+                    const assignee = users.find(
+                      (item) => item.id === task.assignedUserId
+                    );
+
+                    return (
+                      <TableRow key={task.id}>
+                        <TableCell>
+                          <div>
+                            <p className="font-medium">{task.title}</p>
+                            <p className="text-xs text-muted-foreground">
+                              {task.labels.join(', ')}
+                            </p>
+                          </div>
+                        </TableCell>
+                        <TableCell>{assignee?.name ?? '-'}</TableCell>
+                        <TableCell>{formatDate(task.dueDate)}</TableCell>
+                        <TableCell>{formatHours(task.estimatedHours)}</TableCell>
+                        <TableCell>
+                          <StatusBadge
+                            label={task.status}
+                            className={
+                              task.status === 'done'
+                                ? 'bg-emerald-100 text-emerald-700'
+                                : task.status === 'in-progress'
+                                  ? 'bg-blue-100 text-blue-700'
+                                  : 'bg-slate-100 text-slate-700'
+                            }
+                          />
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </SectionCard>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="team">
+          <div className="grid gap-4 xl:grid-cols-5">
+            <SectionCard
+              className="xl:col-span-3"
+              title={t('sections.teamAllocation')}
+              description={t('sections.teamAllocationDescription')}
+            >
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('table.member')}</TableHead>
+                    <TableHead>{t('table.role')}</TableHead>
+                    <TableHead>{t('table.hourRate')}</TableHead>
+                    <TableHead>{t('table.utilization')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {team.map((member) => (
+                    <TableRow key={member.id}>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <div className="flex size-8 items-center justify-center rounded-full bg-muted text-xs font-semibold">
+                            {member.name
+                              .split(' ')
+                              .map((part) => part[0])
+                              .slice(0, 2)
+                              .join('')
+                              .toUpperCase()}
+                          </div>
+                          <div>
+                            <p className="font-medium">{member.name}</p>
+                            <p className="text-xs text-muted-foreground">
+                              {member.department}
+                            </p>
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell>{member.role}</TableCell>
+                      <TableCell>{formatCurrency(member.hourlyRate)}</TableCell>
+                      <TableCell>
+                        <div className="space-y-2">
+                          <div className="text-xs">{member.utilizationTarget}%</div>
+                          <Progress value={member.utilizationTarget} />
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </SectionCard>
+
+            <SectionCard
+              className="xl:col-span-2"
+              title={t('sections.teamCost')}
+              description={t('sections.teamCostDescription')}
+            >
+              <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={team.map((member) => ({
+                        name: member.name.split(' ')[0],
+                        value: member.hourlyRate,
+                      }))}
+                      dataKey="value"
+                      nameKey="name"
+                      innerRadius={55}
+                      outerRadius={95}
+                      paddingAngle={2}
+                    >
+                      {team.map((member, index) => (
+                        <Cell
+                          key={`${member.id}-${index}`}
+                          fill={chartColors[index % chartColors.length]}
+                        />
+                      ))}
+                    </Pie>
+                    <Tooltip />
+                    <Legend />
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
+            </SectionCard>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="finance">
+          <div className="grid gap-4 xl:grid-cols-5">
+            <SectionCard
+              className="xl:col-span-2"
+              title={t('sections.budgetStatus')}
+              description={t('sections.budgetStatusDescription')}
+            >
+              <div className="space-y-4 text-sm">
+                <div className="rounded-lg border p-3">
+                  <p className="text-muted-foreground">{t('finance.totalBudget')}</p>
+                  <p className="text-xl font-semibold">
+                    {formatCurrency(project.budget)}
+                  </p>
+                </div>
+                <div className="rounded-lg border p-3">
+                  <p className="text-muted-foreground">{t('finance.actualCost')}</p>
+                  <p className="text-xl font-semibold">{formatCurrency(actualCost)}</p>
+                </div>
+                <div className="rounded-lg border p-3">
+                  <p className="text-muted-foreground">
+                    {t('finance.remainingBudget')}
+                  </p>
+                  <p className="text-xl font-semibold">
+                    {formatCurrency(remainingBudget)}
+                  </p>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-xs">
+                    <span>{t('finance.budgetConsumption')}</span>
+                    <span>{Math.round(budgetConsumption)}%</span>
+                  </div>
+                  <Progress value={budgetConsumption} />
+                </div>
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              className="xl:col-span-3"
+              title={t('sections.costForecast')}
+              description={t('sections.costForecastDescription')}
+            >
+              <div className="h-80">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={monthlyForecast}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="month" />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar
+                      dataKey="plannedCost"
+                      name={t('charts.plannedCost')}
+                      fill="#0ea5e9"
+                      radius={[6, 6, 0, 0]}
+                    />
+                    <Bar
+                      dataKey="actualCost"
+                      name={t('charts.actualCost')}
+                      fill="#22c55e"
+                      radius={[6, 6, 0, 0]}
+                    />
+                  </BarChart>
+                </ResponsiveContainer>
               </div>
-              <div className="rounded-lg border p-4">
-                <p className="text-sm text-muted-foreground">Projected End</p>
-                <p className="text-xl font-semibold">
-                  {formatDate(project.endDate)}
+            </SectionCard>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="timesheets">
+          <div className="grid gap-4 xl:grid-cols-5">
+            <SectionCard
+              className="xl:col-span-2"
+              title={t('sections.approvalsDistribution')}
+              description={t('sections.approvalsDistributionDescription')}
+            >
+              <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={approvalsData}
+                      dataKey="value"
+                      nameKey="name"
+                      innerRadius={55}
+                      outerRadius={95}
+                    >
+                      {approvalsData.map((entry, index) => (
+                        <Cell
+                          key={`${entry.name}-${index}`}
+                          fill={chartColors[index % chartColors.length]}
+                        />
+                      ))}
+                    </Pie>
+                    <Tooltip />
+                    <Legend />
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
+              <div className="mt-2 grid grid-cols-3 gap-2 text-xs">
+                <p className="rounded-md bg-emerald-50 p-2 text-emerald-700">
+                  {t('approvals.approved')}: {formatHours(approvedHours)}
+                </p>
+                <p className="rounded-md bg-amber-50 p-2 text-amber-700">
+                  {t('approvals.pending')}: {formatHours(pendingHours)}
+                </p>
+                <p className="rounded-md bg-rose-50 p-2 text-rose-700">
+                  {t('approvals.rejected')}: {formatHours(rejectedHours)}
                 </p>
               </div>
-            </div>
-          </SectionCard>
+            </SectionCard>
+
+            <SectionCard
+              className="xl:col-span-3"
+              title={t('sections.timesheets')}
+              description={t('sections.timesheetsDescription')}
+            >
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('table.date')}</TableHead>
+                    <TableHead>{t('table.user')}</TableHead>
+                    <TableHead>{t('table.task')}</TableHead>
+                    <TableHead>{t('table.hours')}</TableHead>
+                    <TableHead>{t('table.description')}</TableHead>
+                    <TableHead>{t('table.status')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {projectTimesheets.map((entry) => {
+                    const user = users.find((item) => item.id === entry.userId);
+                    const task = projectTasks.find((item) => item.id === entry.taskId);
+
+                    return (
+                      <TableRow key={entry.id}>
+                        <TableCell>{formatDate(entry.date)}</TableCell>
+                        <TableCell>{user?.name ?? '-'}</TableCell>
+                        <TableCell>{task?.title ?? '-'}</TableCell>
+                        <TableCell>{formatHours(entry.hours)}</TableCell>
+                        <TableCell>{entry.description}</TableCell>
+                        <TableCell>
+                          <StatusBadge
+                            label={getApprovalLabel(entry.status)}
+                            className={getApprovalBadgeClasses(entry.status)}
+                          />
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </SectionCard>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="governance">
+          <div className="grid gap-4 xl:grid-cols-5">
+            <SectionCard
+              className="xl:col-span-2"
+              title={t('sections.governance')}
+              description={t('sections.governanceDescription')}
+            >
+              <div className="space-y-3 text-sm">
+                <div className="rounded-lg border p-3">
+                  <p className="text-xs uppercase text-muted-foreground">
+                    {t('governance.client')}
+                  </p>
+                  <p className="font-medium">{project.client}</p>
+                </div>
+                <div className="rounded-lg border p-3">
+                  <p className="text-xs uppercase text-muted-foreground">
+                    {t('governance.contract')}
+                  </p>
+                  <p className="font-medium">{contract?.name ?? '-'}</p>
+                </div>
+                <div className="rounded-lg border p-3">
+                  <p className="text-xs uppercase text-muted-foreground">
+                    {t('governance.sla')}
+                  </p>
+                  <p className="font-medium text-muted-foreground">
+                    {contract?.sla ?? '-'}
+                  </p>
+                </div>
+                <div className="rounded-lg border p-3">
+                  <p className="text-xs uppercase text-muted-foreground">
+                    {t('governance.billingRules')}
+                  </p>
+                  <ul className="mt-2 space-y-1 text-muted-foreground">
+                    {(contract?.billingRules ?? []).map((rule) => (
+                      <li key={rule} className="flex items-start gap-2">
+                        <ArrowUpRight className="mt-0.5 size-3.5 text-sky-600" />
+                        <span>{rule}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              className="xl:col-span-3"
+              title={t('sections.dependencies')}
+              description={t('sections.dependenciesDescription')}
+            >
+              <div className="space-y-3">
+                {(project.dependencies ?? []).map((dependency) => (
+                  <div key={dependency.id} className="rounded-lg border p-3">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <p className="font-medium">{dependency.title}</p>
+                      <StatusBadge
+                        label={t(`dependencyStatus.${dependency.status}`)}
+                        className={dependencyStatusClasses[dependency.status]}
+                      />
+                    </div>
+                    <p className="mt-2 text-xs text-muted-foreground">
+                      {t('labels.owner')}: {dependency.owner}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('labels.type')}: {t(`dependencyType.${dependency.type}`)}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              className="xl:col-span-3"
+              title={t('sections.decisions')}
+              description={t('sections.decisionsDescription')}
+            >
+              <div className="space-y-3">
+                {(project.decisions ?? []).map((decision) => {
+                  const owner = users.find((item) => item.id === decision.ownerUserId);
+
+                  return (
+                    <div key={decision.id} className="rounded-lg border p-3">
+                      <p className="font-medium">{decision.title}</p>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        {formatDate(decision.date)} • {t('labels.owner')}:{' '}
+                        {owner?.name ?? '-'}
+                      </p>
+                      <p className="mt-2 text-sm text-muted-foreground">
+                        {decision.summary}
+                      </p>
+                    </div>
+                  );
+                })}
+              </div>
+            </SectionCard>
+
+            <SectionCard
+              className="xl:col-span-2"
+              title={t('sections.nextActions')}
+              description={t('sections.nextActionsDescription')}
+            >
+              <div className="space-y-2">
+                {(project.nextActions ?? []).map((item) => (
+                  <div
+                    key={item}
+                    className="flex items-start gap-2 rounded-lg border p-3 text-sm"
+                  >
+                    <CheckCircle2 className="mt-0.5 size-4 text-emerald-600" />
+                    <span>{item}</span>
+                  </div>
+                ))}
+              </div>
+            </SectionCard>
+          </div>
         </TabsContent>
       </Tabs>
     </Page>