@hed-hog/operations 0.0.294 → 0.0.296

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

@@ -1,936 +1,11 @@
-'use client';
-
-import {
-  Page,
-  StatsCards,
-  type StatCardConfig,
-} from '@/components/entity-list';
-import { Progress } from '@/components/ui/progress';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  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';
-import { StatusBadge } from '../../_components/status-badge';
-import { useOperationsData } from '../../_lib/hooks/use-operations-data';
-import {
-  formatCurrency,
-  formatDate,
-  formatHours,
-} from '../../_lib/utils/format';
-import { getProjectTeam } from '../../_lib/utils/metrics';
-import {
-  getApprovalBadgeClasses,
-  getApprovalLabel,
-  getProjectBadgeClasses,
-} 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>{t('notFound')}</Page>;
-  }
-
-  const contract = contracts.find((item) => item.id === project.contractId);
-  const team = getProjectTeam(project.id);
-  const projectTasks = tasks.filter((task) => task.projectId === project.id);
-  const projectTimesheets = timesheets.filter(
-    (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={t('description', { client: project.client })}
-        current={t('breadcrumb')}
-      />
-
-      <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" />
-
-        <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 className="inline-flex items-center gap-1.5">
-                <Users className="size-4" />
-                {t('labels.teamSize', { count: team.length })}
-              </p>
-              <p className="inline-flex items-center gap-1.5">
-                <Target className="size-4" />
-                {t('labels.contract')}: {contract?.name ?? '-'}
-              </p>
-            </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="text-xl font-semibold">
-                {scheduleVariance >= 0 ? '+' : ''}
-                {Math.round(scheduleVariance)}%
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <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>
-                ))}
-              </div>
-            </SectionCard>
-
-            <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>
-
-            <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 (
-                    <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={t(`riskSeverity.${risk.severity}`)}
-                          className={riskSeverityClasses[risk.severity]}
-                        />
-                        <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>
-                  );
-                })}
-              </div>
-            </SectionCard>
-          </div>
-        </TabsContent>
-
-        <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="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>
-            </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>
-            </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>
-  );
-}
+import { ProjectDetailsScreen } from '../../_components/project-details-screen';
+
+export default async function OperationsProjectDetailsPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return <ProjectDetailsScreen projectId={Number(id)} />;
+}