@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/app/reports/projects/page.tsx.ejs

@@ -28,43 +28,27 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   Banknote,
-  CalendarClock,
+  CircleDollarSign,
   Clock3,
+  ExternalLink,
   FolderKanban,
   Gauge,
-  Handshake,
-  Route,
-  Target,
+  Info,
+  Receipt,
+  TimerOff,
   TrendingUp,
-  UsersRound,
 } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
+import Link from 'next/link';
 import { useState } from 'react';
-import type { TooltipProps } from 'recharts';
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  Legend,
-  Line,
-  LineChart,
-  Pie,
-  PieChart,
-  PolarAngleAxis,
-  PolarGrid,
-  Radar,
-  RadarChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
 import { OperationsHeader } from '../../_components/operations-header';
 import { fetchOperations } from '../../_lib/api';
 import type {
@@ -73,19 +57,6 @@ import type {
 } from '../../_lib/types';
 import { formatCurrency, formatHours } from '../../_lib/utils/format';
 
-const CHART_COLORS = {
-  revenue: '#2563eb',
-  cost: '#dc2626',
-  profit: '#16a34a',
-  margin: '#7c3aed',
-  billable: '#0891b2',
-  internal: '#f59e0b',
-  rework: '#e11d48',
-  free: '#94a3b8',
-  planned: '#0f766e',
-  actual: '#ea580c',
-};
-
 const statusLabels: Record<string, string> = {
   on_track: 'No prazo',
   attention: 'Atenção',
@@ -112,13 +83,6 @@ const scenarioLabels: Record<OperationsReportScenario, string> = {
   conservative: 'Conservador',
 };
 
-const planningIcons: LucideIcon[] = [
-  CalendarClock,
-  Handshake,
-  Route,
-  Target,
-];
-
 function getDefaultRange() {
   const year = new Date().getFullYear();
   return { from: `${year}-01-01`, to: `${year}-12-31` };
@@ -128,63 +92,33 @@ function formatPercent(value: number) {
   return `${Math.round(Number(value || 0))}%`;
 }
 
-function renderCurrencyTooltip({
-  active,
-  payload,
-  label,
-}: TooltipProps<number, string>) {
-  if (!active || !payload?.length) return null;
+function getStatusLabel(status: string) {
+  return statusLabels[status] ?? status;
+}
 
+function getStatusClass(status: string) {
   return (
-    <div className="min-w-52 rounded-md border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-xl">
-      <p className="mb-1 font-semibold">{label}</p>
-      {payload.map((entry) => (
-        <div
-          key={String(entry.dataKey ?? entry.name)}
-          className="flex items-center justify-between gap-3 py-0.5"
-        >
-          <span className="flex items-center gap-2 text-muted-foreground">
-            <span
-              className="size-2.5 rounded-full"
-              style={{ backgroundColor: entry.color }}
-            />
-            {entry.name}
-          </span>
-          <span className="font-semibold">
-            {formatCurrency(Number(entry.value ?? 0))}
-          </span>
-        </div>
-      ))}
-    </div>
+    statusClasses[status] ?? 'border-slate-200 bg-slate-100 text-slate-700'
   );
 }
 
-function renderNumberTooltip({
-  active,
-  payload,
-  label,
-}: TooltipProps<number, string>) {
-  if (!active || !payload?.length) return null;
+function getContractLabel(contractType: string) {
+  return contractLabels[contractType] ?? contractType.replace(/_/g, ' ');
+}
 
+function KpiLabel({ text, tooltip }: { text: string; tooltip: string }) {
   return (
-    <div className="min-w-44 rounded-md border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-xl">
-      <p className="mb-1 font-semibold">{label}</p>
-      {payload.map((entry) => (
-        <div
-          key={String(entry.dataKey ?? entry.name)}
-          className="flex items-center justify-between gap-3 py-0.5"
-        >
-          <span className="flex items-center gap-2 text-muted-foreground">
-            <span
-              className="size-2.5 rounded-full"
-              style={{ backgroundColor: entry.color }}
-            />
-            {entry.name}
-          </span>
-          <span className="font-semibold">{Number(entry.value ?? 0)}</span>
-        </div>
-      ))}
-    </div>
+    <span className="flex items-center gap-1">
+      {text}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Info className="size-3 cursor-help text-muted-foreground/60" />
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-64">
+          {tooltip}
+        </TooltipContent>
+      </Tooltip>
+    </span>
   );
 }
 
@@ -226,6 +160,9 @@ export default function OperationsProjectReportsPage() {
     recognizedRevenue: 0,
     realizedCost: 0,
     forecastCost: 0,
+    allocatedCost: 0,
+    consumedHoursCost: 0,
+    plannedProfit: 0,
     profit: 0,
     margin: 0,
     plannedHours: 0,
@@ -235,6 +172,8 @@ export default function OperationsProjectReportsPage() {
     backlogValue: 0,
     avgDeadline: 0,
     avgAllocation: 0,
+    idlenessRate: 0,
+    idlenessCost: 0,
     atRisk: 0,
     burnRate: 0,
   };
@@ -339,376 +278,142 @@ export default function OperationsProjectReportsPage() {
         </div>
       </div>
 
-      <KpiCardsGrid
-        columns={4}
-        items={[
-          {
-            key: 'active',
-            title: 'Projetos',
-            value: data?.rows.length ?? 0,
-            description: `${summary.atRisk} em risco operacional`,
-            icon: FolderKanban,
-            accentClassName: 'from-sky-500/20 via-cyan-400/10 to-transparent',
-            iconContainerClassName: 'bg-sky-50 text-sky-700',
-          },
-          {
-            key: 'revenue',
-            title: 'Receita reconhecida',
-            value: formatCurrency(summary.recognizedRevenue),
-            description: `${formatCurrency(summary.contractedRevenue)} contratado`,
-            icon: Banknote,
-            accentClassName:
-              'from-emerald-500/20 via-green-400/10 to-transparent',
-            iconContainerClassName: 'bg-emerald-50 text-emerald-700',
-          },
-          {
-            key: 'cost',
-            title: 'Custo realizado',
-            value: formatCurrency(summary.realizedCost),
-            description: `${formatPercent(summary.burnRate)} de burn rate`,
-            icon: Gauge,
-            accentClassName: 'from-rose-500/20 via-red-400/10 to-transparent',
-            iconContainerClassName: 'bg-rose-50 text-rose-700',
-          },
-          {
-            key: 'profit',
-            title: 'Lucro',
-            value: formatCurrency(summary.profit),
-            description: `${formatPercent(summary.margin)} de margem`,
-            icon: TrendingUp,
-            accentClassName:
-              'from-violet-500/20 via-fuchsia-400/10 to-transparent',
-            iconContainerClassName: 'bg-violet-50 text-violet-700',
-          },
-          {
-            key: 'hours',
-            title: 'Horas consumidas',
-            value: formatHours(summary.actualHours),
-            description: `${formatHours(summary.billableHours)} faturáveis`,
-            icon: Clock3,
-            layout: 'compact',
-            accentClassName:
-              'from-cyan-500/20 via-blue-400/10 to-transparent',
-            iconContainerClassName: 'bg-cyan-50 text-cyan-700',
-          },
-          {
-            key: 'deadline',
-            title: 'Avanço médio',
-            value: formatPercent(summary.avgDeadline),
-            description: 'Progresso físico dos projetos',
-            icon: CalendarClock,
-            layout: 'compact',
-            accentClassName:
-              'from-amber-500/20 via-yellow-400/10 to-transparent',
-            iconContainerClassName: 'bg-amber-50 text-amber-700',
-          },
-          {
-            key: 'allocation',
-            title: 'Alocação média',
-            value: formatPercent(summary.avgAllocation),
-            description: 'Acima de 95% exige atenção',
-            icon: UsersRound,
-            layout: 'compact',
-            accentClassName:
-              'from-indigo-500/20 via-blue-400/10 to-transparent',
-            iconContainerClassName: 'bg-indigo-50 text-indigo-700',
-          },
-          {
-            key: 'backlog',
-            title: 'Backlog futuro',
-            value: formatCurrency(summary.backlogValue),
-            description: `Cenário ${scenarioLabels[scenario]}`,
-            icon: Target,
-            layout: 'compact',
-            accentClassName:
-              'from-slate-500/20 via-slate-400/10 to-transparent',
-            iconContainerClassName: 'bg-slate-100 text-slate-700',
-          },
-        ]}
-      />
-
-      <div className="grid gap-4 xl:grid-cols-[1.4fr_0.9fr]">
-        <Card>
-          <CardHeader>
-            <CardTitle>Projeção de receita, custo e lucro</CardTitle>
-            <CardDescription>
-              Simulação mensal para planejamento de portfólio nos próximos 12
-              meses.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={360}>
-              <AreaChart data={data?.forecast ?? []}>
-                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                <XAxis dataKey="month" tick={{ fontSize: 12 }} />
-                <YAxis
-                  tick={{ fontSize: 12 }}
-                  tickFormatter={(value) => `${Number(value) / 1000}k`}
+      <TooltipProvider>
+        <KpiCardsGrid
+          columns={4}
+          items={[
+            {
+              key: 'active',
+              title: (
+                <KpiLabel
+                  text="Projetos"
+                  tooltip="Número total de projetos ativos no período filtrado, incluindo os que estão em risco operacional."
                 />
-                <Tooltip content={renderCurrencyTooltip} />
-                <Legend />
-                <Area
-                  dataKey="revenue"
-                  name="Receita"
-                  stroke={CHART_COLORS.revenue}
-                  strokeWidth={3}
-                  fill={CHART_COLORS.revenue}
-                  fillOpacity={0.12}
+              ),
+              value: data?.rows.length ?? 0,
+              description: `${summary.atRisk} em risco operacional`,
+              icon: FolderKanban,
+              accentClassName: 'from-sky-500/20 via-cyan-400/10 to-transparent',
+              iconContainerClassName: 'bg-sky-50 text-sky-700',
+            },
+            {
+              key: 'budget',
+              title: (
+                <KpiLabel
+                  text="Orçamento"
+                  tooltip="Soma dos campos de orçamento (budget_amount) de todos os projetos no período filtrado."
                 />
-                <Area
-                  dataKey="cost"
-                  name="Custo"
-                  stroke={CHART_COLORS.cost}
-                  strokeWidth={3}
-                  fill={CHART_COLORS.cost}
-                  fillOpacity={0.08}
+              ),
+              value: formatCurrency(summary.contractedRevenue),
+              description: `${data?.rows.length ?? 0} projetos no período`,
+              icon: Banknote,
+              accentClassName:
+                'from-emerald-500/20 via-green-400/10 to-transparent',
+              iconContainerClassName: 'bg-emerald-50 text-emerald-700',
+            },
+            {
+              key: 'allocated-cost',
+              title: (
+                <KpiLabel
+                  text="Custo alocado"
+                  tooltip="Custo calculado a partir das alocações: horas semanais planejadas × custo mensal do colaborador × meses do período ÷ capacidade semanal."
                 />
-                <Area
-                  dataKey="profit"
-                  name="Lucro"
-                  stroke={CHART_COLORS.profit}
-                  strokeWidth={2}
-                  fill="transparent"
+              ),
+              value: formatCurrency(summary.allocatedCost),
+              description: `vs ${formatCurrency(summary.consumedHoursCost)} consumido`,
+              icon: Gauge,
+              accentClassName: 'from-rose-500/20 via-red-400/10 to-transparent',
+              iconContainerClassName: 'bg-rose-50 text-rose-700',
+            },
+            {
+              key: 'planned-profit',
+              title: (
+                <KpiLabel
+                  text="Lucro planejado"
+                  tooltip="Diferença entre o orçamento total dos projetos e o custo alocado dos colaboradores no período."
                 />
-              </AreaChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Composição de custos</CardTitle>
-            <CardDescription>
-              Equipe, infraestrutura, licenças, terceiros e retrabalho.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={300}>
-              <PieChart>
-                <Pie
-                  data={(data?.costComposition ?? []).filter(
-                    (item) => item.value > 0
-                  )}
-                  dataKey="value"
-                  nameKey="name"
-                  innerRadius={58}
-                  outerRadius={98}
-                  paddingAngle={3}
-                >
-                  {(data?.costComposition ?? []).map((entry, index) => (
-                    <Cell
-                      key={entry.name}
-                      fill={
-                        [
-                          CHART_COLORS.revenue,
-                          CHART_COLORS.internal,
-                          CHART_COLORS.margin,
-                          CHART_COLORS.billable,
-                          CHART_COLORS.rework,
-                        ][index % 5]
-                      }
-                      stroke="hsl(var(--background))"
-                      strokeWidth={2}
-                    />
-                  ))}
-                </Pie>
-                <Legend iconType="circle" wrapperStyle={{ fontSize: 12 }} />
-                <Tooltip content={renderCurrencyTooltip} />
-              </PieChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-[1fr_1fr]">
-        <Card>
-          <CardHeader>
-            <CardTitle>Horas por projeto</CardTitle>
-            <CardDescription>
-              Separação entre horas faturáveis, internas, retrabalho e saldo.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={330}>
-              <BarChart data={data?.hoursByProject ?? []}>
-                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                <XAxis dataKey="project" tick={{ fontSize: 12 }} />
-                <YAxis tick={{ fontSize: 12 }} />
-                <Tooltip content={renderNumberTooltip} />
-                <Legend />
-                <Bar
-                  dataKey="Faturável"
-                  stackId="hours"
-                  fill={CHART_COLORS.billable}
+              ),
+              value: formatCurrency(summary.plannedProfit),
+              description: `${formatPercent(summary.contractedRevenue > 0 ? (summary.plannedProfit / summary.contractedRevenue) * 100 : 0)} de margem`,
+              icon: TrendingUp,
+              accentClassName:
+                'from-violet-500/20 via-fuchsia-400/10 to-transparent',
+              iconContainerClassName: 'bg-violet-50 text-violet-700',
+            },
+            {
+              key: 'hours',
+              title: (
+                <KpiLabel
+                  text="Horas consumidas"
+                  tooltip="Total de horas lançadas e aprovadas nos timesheets dentro do período selecionado."
                 />
-                <Bar
-                  dataKey="Interno"
-                  stackId="hours"
-                  fill={CHART_COLORS.internal}
+              ),
+              value: formatHours(summary.actualHours),
+              description: `${formatHours(summary.billableHours)} faturáveis`,
+              icon: Clock3,
+              layout: 'compact',
+              accentClassName:
+                'from-cyan-500/20 via-blue-400/10 to-transparent',
+              iconContainerClassName: 'bg-cyan-50 text-cyan-700',
+            },
+            {
+              key: 'consumed-hours-cost',
+              title: (
+                <KpiLabel
+                  text="Custo das horas consumidas"
+                  tooltip="Custo real das horas entregues: horas do timesheet × taxa horária do colaborador (custo mensal ÷ capacidade semanal)."
                 />
-                <Bar
-                  dataKey="Retrabalho"
-                  stackId="hours"
-                  fill={CHART_COLORS.rework}
+              ),
+              value: formatCurrency(summary.consumedHoursCost),
+              description: `${formatHours(summary.actualHours)} de horas entregues`,
+              icon: Receipt,
+              layout: 'compact',
+              accentClassName:
+                'from-amber-500/20 via-yellow-400/10 to-transparent',
+              iconContainerClassName: 'bg-amber-50 text-amber-700',
+            },
+            {
+              key: 'idleness-rate',
+              title: (
+                <KpiLabel
+                  text="Taxa de ociosidade"
+                  tooltip="Percentual de tempo ocioso: diferença entre a carga horária semanal planejada (alocada) e as horas efetivamente submetidas via timesheet, em relação à capacidade total."
                 />
-                <Bar
-                  dataKey="Livre"
-                  stackId="hours"
-                  fill={CHART_COLORS.free}
-                  radius={[6, 6, 0, 0]}
+              ),
+              value: formatPercent(summary.idlenessRate),
+              description: `${formatCurrency(summary.idlenessCost)} de custo ocioso`,
+              icon: TimerOff,
+              layout: 'compact',
+              accentClassName:
+                'from-indigo-500/20 via-blue-400/10 to-transparent',
+              iconContainerClassName: 'bg-indigo-50 text-indigo-700',
+            },
+            {
+              key: 'idleness-cost',
+              title: (
+                <KpiLabel
+                  text="Custo de ociosidade"
+                  tooltip="Quanto foi gasto com tempo ocioso: custo alocado menos o custo das horas efetivamente consumidas nos timesheets aprovados."
                 />
-              </BarChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Saúde dos projetos</CardTitle>
-            <CardDescription>
-              Combina margem, prazo, alocação e risco por projeto.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={330}>
-              <RadarChart data={data?.health ?? []}>
-                <PolarGrid />
-                <PolarAngleAxis dataKey="project" tick={{ fontSize: 12 }} />
-                <Tooltip content={renderNumberTooltip} />
-                <Legend />
-                <Radar
-                  dataKey="margem"
-                  name="Margem"
-                  stroke={CHART_COLORS.profit}
-                  fill={CHART_COLORS.profit}
-                  fillOpacity={0.16}
-                />
-                <Radar
-                  dataKey="prazo"
-                  name="Prazo"
-                  stroke={CHART_COLORS.revenue}
-                  fill={CHART_COLORS.revenue}
-                  fillOpacity={0.12}
-                />
-                <Radar
-                  dataKey="saude"
-                  name="Saúde"
-                  stroke={CHART_COLORS.margin}
-                  fill={CHART_COLORS.margin}
-                  fillOpacity={0.1}
-                />
-              </RadarChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-[1fr_1fr]">
-        <Card>
-          <CardHeader>
-            <CardTitle>Ranking de lucro e custo</CardTitle>
-            <CardDescription>
-              Projetos ordenados por contribuição estimada no período.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={340}>
-              <BarChart
-                data={data?.ranking ?? []}
-                layout="vertical"
-                margin={{ left: 56, right: 16 }}
-              >
-                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                <XAxis
-                  type="number"
-                  tick={{ fontSize: 12 }}
-                  tickFormatter={(value) => `${Number(value) / 1000}k`}
-                />
-                <YAxis dataKey="name" type="category" width={120} />
-                <Tooltip content={renderCurrencyTooltip} />
-                <Legend />
-                <Bar dataKey="Lucro" fill={CHART_COLORS.profit} radius={6} />
-                <Bar dataKey="Custo" fill={CHART_COLORS.cost} radius={6} />
-              </BarChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Planejado vs realizado</CardTitle>
-            <CardDescription>
-              Tendência mensal de consumo de horas frente ao plano.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={340}>
-              <LineChart data={data?.progress ?? []}>
-                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                <XAxis dataKey="month" tick={{ fontSize: 12 }} />
-                <YAxis tick={{ fontSize: 12 }} />
-                <Tooltip content={renderNumberTooltip} />
-                <Legend />
-                <Line
-                  type="monotone"
-                  dataKey="Planejado"
-                  stroke={CHART_COLORS.planned}
-                  strokeWidth={3}
-                  dot={false}
-                />
-                <Line
-                  type="monotone"
-                  dataKey="Realizado"
-                  stroke={CHART_COLORS.actual}
-                  strokeWidth={3}
-                  dot={false}
-                />
-              </LineChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-        {(data?.planningCards ?? []).map((card, index) => {
-          const Icon =
-            planningIcons[index % planningIcons.length] ?? CalendarClock;
-          const colors = [
-            'bg-amber-50 text-amber-700',
-            'bg-sky-50 text-sky-700',
-            'bg-emerald-50 text-emerald-700',
-            'bg-violet-50 text-violet-700',
-          ];
-          return (
-            <Card key={card.title}>
-              <CardContent className="space-y-3 p-4">
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <p className="text-sm font-medium text-muted-foreground">
-                      {card.title}
-                    </p>
-                    <p className="mt-1 text-2xl font-semibold">
-                      {card.value}
-                    </p>
-                  </div>
-                  <div className={`rounded-xl p-2 ${colors[index % colors.length]}`}>
-                    <Icon className="size-5" />
-                  </div>
-                </div>
-                <p className="text-sm leading-relaxed text-muted-foreground">
-                  {card.description}
-                </p>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
+              ),
+              value: formatCurrency(summary.idlenessCost),
+              description: `${formatPercent(summary.idlenessRate)} de ociosidade`,
+              icon: CircleDollarSign,
+              layout: 'compact',
+              accentClassName:
+                'from-slate-500/20 via-slate-400/10 to-transparent',
+              iconContainerClassName: 'bg-slate-100 text-slate-700',
+            },
+          ]}
+        />
+      </TooltipProvider>
 
       <Card>
         <CardHeader>
           <CardTitle>Detalhamento por projeto</CardTitle>
           <CardDescription>
-            Receita, custo, lucro, horas, prazo, risco e recomendação executiva.
+            Orçamento, custo alocado, lucro planejado, horas consumidas,
+            ociosidade e risco por projeto.
           </CardDescription>
         </CardHeader>
         <CardContent className="overflow-x-auto">
@@ -717,69 +422,81 @@ export default function OperationsProjectReportsPage() {
               <TableRow>
                 <TableHead>Projeto</TableHead>
                 <TableHead>Status</TableHead>
-                <TableHead>Receita</TableHead>
-                <TableHead>Custo</TableHead>
-                <TableHead>Lucro</TableHead>
-                <TableHead>Horas</TableHead>
-                <TableHead>Prazo</TableHead>
+                <TableHead>Orçamento</TableHead>
+                <TableHead>Custo alocado</TableHead>
+                <TableHead>Lucro planejado</TableHead>
+                <TableHead>Horas consumidas</TableHead>
+                <TableHead>Custo das horas consumidas</TableHead>
+                <TableHead>Taxa de ociosidade</TableHead>
+                <TableHead>Custo de ociosidade</TableHead>
                 <TableHead>Risco</TableHead>
                 <TableHead>Recomendação</TableHead>
+                <TableHead />
               </TableRow>
             </TableHeader>
             <TableBody>
               {(data?.rows ?? []).map((row) => {
-                const profit = row.recognizedRevenue - row.realizedCost;
-                const margin = row.recognizedRevenue
-                  ? (profit / row.recognizedRevenue) * 100
-                  : 0;
-                const hourUsage = row.plannedHours
-                  ? (row.actualHours / row.plannedHours) * 100
+                const plannedProfit = row.contractedRevenue - row.allocatedCost;
+                const plannedMargin = row.contractedRevenue
+                  ? (plannedProfit / row.contractedRevenue) * 100
                   : 0;
                 return (
-                  <TableRow key={row.id}>
+                  <TableRow
+                    key={row.id}
+                    className="cursor-pointer"
+                    onDoubleClick={() =>
+                      window.open(`/operations/projects/${row.id}`, '_self')
+                    }
+                  >
                     <TableCell className="min-w-72">
                       <div className="font-medium">{row.name}</div>
                       <div className="text-xs text-muted-foreground">
                         {row.client} · {row.manager} · {row.squad} ·{' '}
-                        {contractLabels[row.contractType]}
+                        {getContractLabel(row.contractType)}
                       </div>
                     </TableCell>
                     <TableCell>
                       <Badge
                         variant="outline"
-                        className={statusClasses[row.status]}
+                        className={getStatusClass(row.status)}
                       >
-                        {statusLabels[row.status]}
+                        {getStatusLabel(row.status)}
                       </Badge>
                     </TableCell>
-                    <TableCell>{formatCurrency(row.recognizedRevenue)}</TableCell>
-                    <TableCell>{formatCurrency(row.realizedCost)}</TableCell>
+                    <TableCell>
+                      {formatCurrency(row.contractedRevenue)}
+                    </TableCell>
+                    <TableCell>{formatCurrency(row.allocatedCost)}</TableCell>
                     <TableCell
                       className={
-                        profit >= 0 ? 'text-emerald-700' : 'text-rose-700'
+                        plannedProfit >= 0
+                          ? 'text-emerald-700'
+                          : 'text-rose-700'
                       }
                     >
-                      <div>{formatCurrency(profit)}</div>
-                      <div className="text-xs">{formatPercent(margin)}</div>
+                      <div>{formatCurrency(plannedProfit)}</div>
+                      <div className="text-xs">
+                        {formatPercent(plannedMargin)}
+                      </div>
                     </TableCell>
                     <TableCell>
-                      <div className="min-w-36 space-y-1">
-                        <div className="flex items-center justify-between text-xs">
-                          <span>{formatHours(row.actualHours)}</span>
-                          <span>{formatPercent(hourUsage)}</span>
-                        </div>
-                        <Progress value={Math.min(hourUsage, 100)} />
+                      <div>{formatHours(row.actualHours)}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {formatHours(row.billableHours)} faturáveis
                       </div>
                     </TableCell>
                     <TableCell>
-                      <div className="min-w-32 space-y-1">
+                      {formatCurrency(row.consumedHoursCost)}
+                    </TableCell>
+                    <TableCell>
+                      <div className="min-w-28 space-y-1">
                         <div className="flex items-center justify-between text-xs">
-                          <span>Físico</span>
-                          <span>{formatPercent(row.physicalProgress)}</span>
+                          <span>{formatPercent(row.idlenessRate)}</span>
                         </div>
-                        <Progress value={row.physicalProgress} />
+                        <Progress value={Math.min(row.idlenessRate, 100)} />
                       </div>
                     </TableCell>
+                    <TableCell>{formatCurrency(row.idlenessCost)}</TableCell>
                     <TableCell>
                       <Badge
                         variant="outline"
@@ -797,6 +514,21 @@ export default function OperationsProjectReportsPage() {
                     <TableCell className="min-w-72 text-sm text-muted-foreground">
                       {row.recommendation}
                     </TableCell>
+                    <TableCell>
+                      <Link
+                        href={`/operations/projects/${row.id}`}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="size-8"
+                          title="Ver detalhes"
+                        >
+                          <ExternalLink className="size-4" />
+                        </Button>
+                      </Link>
+                    </TableCell>
                   </TableRow>
                 );
               })}