@hed-hog/operations 0.0.319 → 0.0.322

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

@@ -1,809 +1,809 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  Banknote,
-  CalendarClock,
-  Clock3,
-  FolderKanban,
-  Gauge,
-  Handshake,
-  Route,
-  Target,
-  TrendingUp,
-  UsersRound,
-} from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
-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 {
-  OperationsProjectsReport,
-  OperationsReportScenario,
-} 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',
-  late: 'Atrasado',
-  paused: 'Pausado',
-};
-
-const statusClasses: Record<string, string> = {
-  on_track: 'border-emerald-200 bg-emerald-50 text-emerald-700',
-  attention: 'border-amber-200 bg-amber-50 text-amber-700',
-  late: 'border-rose-200 bg-rose-50 text-rose-700',
-  paused: 'border-slate-200 bg-slate-100 text-slate-700',
-};
-
-const contractLabels: Record<string, string> = {
-  fixed_price: 'Preço fechado',
-  time_materials: 'Hora / Material',
-  retainer: 'Recorrente',
-};
-
-const scenarioLabels: Record<OperationsReportScenario, string> = {
-  base: 'Base',
-  growth: 'Crescimento',
-  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` };
-}
-
-function formatPercent(value: number) {
-  return `${Math.round(Number(value || 0))}%`;
-}
-
-function renderCurrencyTooltip({
-  active,
-  payload,
-  label,
-}: TooltipProps<number, string>) {
-  if (!active || !payload?.length) return null;
-
-  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>
-  );
-}
-
-function renderNumberTooltip({
-  active,
-  payload,
-  label,
-}: TooltipProps<number, string>) {
-  if (!active || !payload?.length) return null;
-
-  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>
-  );
-}
-
-export default function OperationsProjectReportsPage() {
-  const defaults = getDefaultRange();
-  const { request } = useApp();
-  const [startDate, setStartDate] = useState(defaults.from);
-  const [endDate, setEndDate] = useState(defaults.to);
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [clientFilter, setClientFilter] = useState('all');
-  const [scenario, setScenario] = useState<OperationsReportScenario>('base');
-
-  const { data } = useQuery<OperationsProjectsReport>({
-    queryKey: [
-      'operations-projects-report',
-      startDate,
-      endDate,
-      statusFilter,
-      clientFilter,
-      scenario,
-    ],
-    queryFn: () => {
-      const params = new URLSearchParams({
-        from: startDate,
-        to: endDate,
-        status: statusFilter,
-        client: clientFilter,
-        scenario,
-      });
-      return fetchOperations<OperationsProjectsReport>(
-        request,
-        `/operations/reports/projects?${params.toString()}`
-      );
-    },
-  });
-
-  const summary = data?.summary ?? {
-    contractedRevenue: 0,
-    recognizedRevenue: 0,
-    realizedCost: 0,
-    forecastCost: 0,
-    profit: 0,
-    margin: 0,
-    plannedHours: 0,
-    actualHours: 0,
-    billableHours: 0,
-    reworkHours: 0,
-    backlogValue: 0,
-    avgDeadline: 0,
-    avgAllocation: 0,
-    atRisk: 0,
-    burnRate: 0,
-  };
-  const clients = data?.filters.clients ?? [];
-
-  return (
-    <Page>
-      <OperationsHeader
-        title="Relatório de Projetos"
-        description="Dashboard executivo com receita, custo, lucro, prazo, risco e planejamento dos próximos 12 meses."
-        current="Relatórios / Projetos"
-      />
-
-      <div className="grid gap-3 rounded-lg border bg-card p-3 md:grid-cols-[1fr_1fr_180px_180px_180px_auto]">
-        <div className="space-y-1">
-          <span className="text-xs font-medium text-muted-foreground">
-            Início
-          </span>
-          <Input
-            type="date"
-            value={startDate}
-            onChange={(event) => setStartDate(event.target.value)}
-          />
-        </div>
-        <div className="space-y-1">
-          <span className="text-xs font-medium text-muted-foreground">Fim</span>
-          <Input
-            type="date"
-            value={endDate}
-            onChange={(event) => setEndDate(event.target.value)}
-          />
-        </div>
-        <div className="space-y-1">
-          <span className="text-xs font-medium text-muted-foreground">
-            Status
-          </span>
-          <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">Todos</SelectItem>
-              <SelectItem value="on_track">No prazo</SelectItem>
-              <SelectItem value="attention">Atenção</SelectItem>
-              <SelectItem value="late">Atrasado</SelectItem>
-              <SelectItem value="paused">Pausado</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-1">
-          <span className="text-xs font-medium text-muted-foreground">
-            Cliente
-          </span>
-          <Select value={clientFilter} onValueChange={setClientFilter}>
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">Todos</SelectItem>
-              {clients.map((client) => (
-                <SelectItem key={client} value={client}>
-                  {client}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-1">
-          <span className="text-xs font-medium text-muted-foreground">
-            Cenário
-          </span>
-          <Select
-            value={scenario}
-            onValueChange={(value) =>
-              setScenario(value as OperationsReportScenario)
-            }
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="base">Base</SelectItem>
-              <SelectItem value="growth">Crescimento</SelectItem>
-              <SelectItem value="conservative">Conservador</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex items-end">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => {
-              setStartDate(defaults.from);
-              setEndDate(defaults.to);
-              setStatusFilter('all');
-              setClientFilter('all');
-              setScenario('base');
-            }}
-          >
-            Limpar
-          </Button>
-        </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`}
-                />
-                <Tooltip content={renderCurrencyTooltip} />
-                <Legend />
-                <Area
-                  dataKey="revenue"
-                  name="Receita"
-                  stroke={CHART_COLORS.revenue}
-                  strokeWidth={3}
-                  fill={CHART_COLORS.revenue}
-                  fillOpacity={0.12}
-                />
-                <Area
-                  dataKey="cost"
-                  name="Custo"
-                  stroke={CHART_COLORS.cost}
-                  strokeWidth={3}
-                  fill={CHART_COLORS.cost}
-                  fillOpacity={0.08}
-                />
-                <Area
-                  dataKey="profit"
-                  name="Lucro"
-                  stroke={CHART_COLORS.profit}
-                  strokeWidth={2}
-                  fill="transparent"
-                />
-              </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}
-                />
-                <Bar
-                  dataKey="Interno"
-                  stackId="hours"
-                  fill={CHART_COLORS.internal}
-                />
-                <Bar
-                  dataKey="Retrabalho"
-                  stackId="hours"
-                  fill={CHART_COLORS.rework}
-                />
-                <Bar
-                  dataKey="Livre"
-                  stackId="hours"
-                  fill={CHART_COLORS.free}
-                  radius={[6, 6, 0, 0]}
-                />
-              </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>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Detalhamento por projeto</CardTitle>
-          <CardDescription>
-            Receita, custo, lucro, horas, prazo, risco e recomendação executiva.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="overflow-x-auto">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Projeto</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Receita</TableHead>
-                <TableHead>Custo</TableHead>
-                <TableHead>Lucro</TableHead>
-                <TableHead>Horas</TableHead>
-                <TableHead>Prazo</TableHead>
-                <TableHead>Risco</TableHead>
-                <TableHead>Recomendação</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
-                  : 0;
-                return (
-                  <TableRow key={row.id}>
-                    <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]}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={statusClasses[row.status]}
-                      >
-                        {statusLabels[row.status]}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>{formatCurrency(row.recognizedRevenue)}</TableCell>
-                    <TableCell>{formatCurrency(row.realizedCost)}</TableCell>
-                    <TableCell
-                      className={
-                        profit >= 0 ? 'text-emerald-700' : 'text-rose-700'
-                      }
-                    >
-                      <div>{formatCurrency(profit)}</div>
-                      <div className="text-xs">{formatPercent(margin)}</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>
-                    </TableCell>
-                    <TableCell>
-                      <div className="min-w-32 space-y-1">
-                        <div className="flex items-center justify-between text-xs">
-                          <span>Físico</span>
-                          <span>{formatPercent(row.physicalProgress)}</span>
-                        </div>
-                        <Progress value={row.physicalProgress} />
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={
-                          row.risk === 'alto'
-                            ? 'border-rose-200 bg-rose-50 text-rose-700'
-                            : row.risk === 'médio'
-                              ? 'border-amber-200 bg-amber-50 text-amber-700'
-                              : 'border-emerald-200 bg-emerald-50 text-emerald-700'
-                        }
-                      >
-                        {row.risk}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="min-w-72 text-sm text-muted-foreground">
-                      {row.recommendation}
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-    </Page>
-  );
-}
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Banknote,
+  CalendarClock,
+  Clock3,
+  FolderKanban,
+  Gauge,
+  Handshake,
+  Route,
+  Target,
+  TrendingUp,
+  UsersRound,
+} from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+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 {
+  OperationsProjectsReport,
+  OperationsReportScenario,
+} 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',
+  late: 'Atrasado',
+  paused: 'Pausado',
+};
+
+const statusClasses: Record<string, string> = {
+  on_track: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+  attention: 'border-amber-200 bg-amber-50 text-amber-700',
+  late: 'border-rose-200 bg-rose-50 text-rose-700',
+  paused: 'border-slate-200 bg-slate-100 text-slate-700',
+};
+
+const contractLabels: Record<string, string> = {
+  fixed_price: 'Preço fechado',
+  time_materials: 'Hora / Material',
+  retainer: 'Recorrente',
+};
+
+const scenarioLabels: Record<OperationsReportScenario, string> = {
+  base: 'Base',
+  growth: 'Crescimento',
+  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` };
+}
+
+function formatPercent(value: number) {
+  return `${Math.round(Number(value || 0))}%`;
+}
+
+function renderCurrencyTooltip({
+  active,
+  payload,
+  label,
+}: TooltipProps<number, string>) {
+  if (!active || !payload?.length) return null;
+
+  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>
+  );
+}
+
+function renderNumberTooltip({
+  active,
+  payload,
+  label,
+}: TooltipProps<number, string>) {
+  if (!active || !payload?.length) return null;
+
+  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>
+  );
+}
+
+export default function OperationsProjectReportsPage() {
+  const defaults = getDefaultRange();
+  const { request } = useApp();
+  const [startDate, setStartDate] = useState(defaults.from);
+  const [endDate, setEndDate] = useState(defaults.to);
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [clientFilter, setClientFilter] = useState('all');
+  const [scenario, setScenario] = useState<OperationsReportScenario>('base');
+
+  const { data } = useQuery<OperationsProjectsReport>({
+    queryKey: [
+      'operations-projects-report',
+      startDate,
+      endDate,
+      statusFilter,
+      clientFilter,
+      scenario,
+    ],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        from: startDate,
+        to: endDate,
+        status: statusFilter,
+        client: clientFilter,
+        scenario,
+      });
+      return fetchOperations<OperationsProjectsReport>(
+        request,
+        `/operations/reports/projects?${params.toString()}`
+      );
+    },
+  });
+
+  const summary = data?.summary ?? {
+    contractedRevenue: 0,
+    recognizedRevenue: 0,
+    realizedCost: 0,
+    forecastCost: 0,
+    profit: 0,
+    margin: 0,
+    plannedHours: 0,
+    actualHours: 0,
+    billableHours: 0,
+    reworkHours: 0,
+    backlogValue: 0,
+    avgDeadline: 0,
+    avgAllocation: 0,
+    atRisk: 0,
+    burnRate: 0,
+  };
+  const clients = data?.filters.clients ?? [];
+
+  return (
+    <Page>
+      <OperationsHeader
+        title="Relatório de Projetos"
+        description="Dashboard executivo com receita, custo, lucro, prazo, risco e planejamento dos próximos 12 meses."
+        current="Relatórios / Projetos"
+      />
+
+      <div className="grid gap-3 rounded-lg border bg-card p-3 md:grid-cols-[1fr_1fr_180px_180px_180px_auto]">
+        <div className="space-y-1">
+          <span className="text-xs font-medium text-muted-foreground">
+            Início
+          </span>
+          <Input
+            type="date"
+            value={startDate}
+            onChange={(event) => setStartDate(event.target.value)}
+          />
+        </div>
+        <div className="space-y-1">
+          <span className="text-xs font-medium text-muted-foreground">Fim</span>
+          <Input
+            type="date"
+            value={endDate}
+            onChange={(event) => setEndDate(event.target.value)}
+          />
+        </div>
+        <div className="space-y-1">
+          <span className="text-xs font-medium text-muted-foreground">
+            Status
+          </span>
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Todos</SelectItem>
+              <SelectItem value="on_track">No prazo</SelectItem>
+              <SelectItem value="attention">Atenção</SelectItem>
+              <SelectItem value="late">Atrasado</SelectItem>
+              <SelectItem value="paused">Pausado</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1">
+          <span className="text-xs font-medium text-muted-foreground">
+            Cliente
+          </span>
+          <Select value={clientFilter} onValueChange={setClientFilter}>
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Todos</SelectItem>
+              {clients.map((client) => (
+                <SelectItem key={client} value={client}>
+                  {client}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1">
+          <span className="text-xs font-medium text-muted-foreground">
+            Cenário
+          </span>
+          <Select
+            value={scenario}
+            onValueChange={(value) =>
+              setScenario(value as OperationsReportScenario)
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="base">Base</SelectItem>
+              <SelectItem value="growth">Crescimento</SelectItem>
+              <SelectItem value="conservative">Conservador</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-end">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              setStartDate(defaults.from);
+              setEndDate(defaults.to);
+              setStatusFilter('all');
+              setClientFilter('all');
+              setScenario('base');
+            }}
+          >
+            Limpar
+          </Button>
+        </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`}
+                />
+                <Tooltip content={renderCurrencyTooltip} />
+                <Legend />
+                <Area
+                  dataKey="revenue"
+                  name="Receita"
+                  stroke={CHART_COLORS.revenue}
+                  strokeWidth={3}
+                  fill={CHART_COLORS.revenue}
+                  fillOpacity={0.12}
+                />
+                <Area
+                  dataKey="cost"
+                  name="Custo"
+                  stroke={CHART_COLORS.cost}
+                  strokeWidth={3}
+                  fill={CHART_COLORS.cost}
+                  fillOpacity={0.08}
+                />
+                <Area
+                  dataKey="profit"
+                  name="Lucro"
+                  stroke={CHART_COLORS.profit}
+                  strokeWidth={2}
+                  fill="transparent"
+                />
+              </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}
+                />
+                <Bar
+                  dataKey="Interno"
+                  stackId="hours"
+                  fill={CHART_COLORS.internal}
+                />
+                <Bar
+                  dataKey="Retrabalho"
+                  stackId="hours"
+                  fill={CHART_COLORS.rework}
+                />
+                <Bar
+                  dataKey="Livre"
+                  stackId="hours"
+                  fill={CHART_COLORS.free}
+                  radius={[6, 6, 0, 0]}
+                />
+              </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>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Detalhamento por projeto</CardTitle>
+          <CardDescription>
+            Receita, custo, lucro, horas, prazo, risco e recomendação executiva.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Projeto</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Receita</TableHead>
+                <TableHead>Custo</TableHead>
+                <TableHead>Lucro</TableHead>
+                <TableHead>Horas</TableHead>
+                <TableHead>Prazo</TableHead>
+                <TableHead>Risco</TableHead>
+                <TableHead>Recomendação</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
+                  : 0;
+                return (
+                  <TableRow key={row.id}>
+                    <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]}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant="outline"
+                        className={statusClasses[row.status]}
+                      >
+                        {statusLabels[row.status]}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>{formatCurrency(row.recognizedRevenue)}</TableCell>
+                    <TableCell>{formatCurrency(row.realizedCost)}</TableCell>
+                    <TableCell
+                      className={
+                        profit >= 0 ? 'text-emerald-700' : 'text-rose-700'
+                      }
+                    >
+                      <div>{formatCurrency(profit)}</div>
+                      <div className="text-xs">{formatPercent(margin)}</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>
+                    </TableCell>
+                    <TableCell>
+                      <div className="min-w-32 space-y-1">
+                        <div className="flex items-center justify-between text-xs">
+                          <span>Físico</span>
+                          <span>{formatPercent(row.physicalProgress)}</span>
+                        </div>
+                        <Progress value={row.physicalProgress} />
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant="outline"
+                        className={
+                          row.risk === 'alto'
+                            ? 'border-rose-200 bg-rose-50 text-rose-700'
+                            : row.risk === 'médio'
+                              ? 'border-amber-200 bg-amber-50 text-amber-700'
+                              : 'border-emerald-200 bg-emerald-50 text-emerald-700'
+                        }
+                      >
+                        {row.risk}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="min-w-72 text-sm text-muted-foreground">
+                      {row.recommendation}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}