@hed-hog/operations 0.0.322 → 0.0.325

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

@@ -0,0 +1,10 @@
+import { ProjectCostReportScreen } from '../../../_components/project-cost-report-screen';
+
+export default async function ProjectCostReportPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  return <ProjectCostReportScreen projectId={Number(id)} />;
+}

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

@@ -35,34 +35,11 @@ import {
   BriefcaseBusiness,
   CalendarClock,
   Clock3,
-  Route,
   Target,
   TrendingUp,
-  UserPlus,
   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,
-  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 {
@@ -71,30 +48,12 @@ 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',
-  free: '#94a3b8',
-  overload: '#e11d48',
-};
-
 const scenarioLabels: Record<OperationsReportScenario, string> = {
   base: 'Base',
   growth: 'Crescimento',
   conservative: 'Conservador',
 };
 
-const planningIcons: LucideIcon[] = [
-  UserPlus,
-  Route,
-  AlertTriangle,
-  TrendingUp,
-];
-
 function getDefaultRange() {
   const year = new Date().getFullYear();
   return { from: `${year}-01-01`, to: `${year}-12-31` };
@@ -127,64 +86,6 @@ function getAllocationStatus(allocation: number) {
   };
 }
 
-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 OperationsCollaboratorReportsPage() {
   const defaults = getDefaultRange();
   const { request } = useApp();
@@ -238,6 +139,8 @@ export default function OperationsCollaboratorReportsPage() {
     overloadCount: 0,
     hourlyCost: 0,
   };
+  const costHourReferenceLabel =
+    summary.allocatedHours > 0 ? 'por hora alocada' : 'por hora de capacidade';
 
   return (
     <Page>
@@ -355,7 +258,7 @@ export default function OperationsCollaboratorReportsPage() {
             key: 'cost',
             title: 'Custo total',
             value: formatCurrency(summary.cost),
-            description: `${formatCurrency(summary.hourlyCost)} por hora alocada`,
+            description: `${formatCurrency(summary.hourlyCost)} ${costHourReferenceLabel}`,
             icon: Banknote,
             accentClassName: 'from-rose-500/20 via-red-400/10 to-transparent',
             iconContainerClassName: 'bg-rose-50 text-rose-700',
@@ -384,18 +287,17 @@ export default function OperationsCollaboratorReportsPage() {
             key: 'utilization',
             title: 'Utilização',
             value: formatPercent(summary.utilization),
-            description: 'Horas faturáveis sobre capacidade',
+            description: 'Horas faturáveis comprometidas sobre capacidade',
             icon: Clock3,
             layout: 'compact',
-            accentClassName:
-              'from-cyan-500/20 via-blue-400/10 to-transparent',
+            accentClassName: 'from-cyan-500/20 via-blue-400/10 to-transparent',
             iconContainerClassName: 'bg-cyan-50 text-cyan-700',
           },
           {
             key: 'free',
             title: 'Capacidade livre',
             value: formatHours(summary.freeHours),
-            description: `${formatPercent(100 - summary.allocation)} disponível`,
+            description: `${formatPercent(Math.max(100 - summary.allocation, 0))} disponível`,
             icon: CalendarClock,
             layout: 'compact',
             accentClassName:
@@ -427,253 +329,12 @@ export default function OperationsCollaboratorReportsPage() {
         ]}
       />
 
-      <div className="grid gap-4 xl:grid-cols-[1.4fr_0.9fr]">
-        <Card>
-          <CardHeader>
-            <CardTitle>Projeção de custo, valor e margem</CardTitle>
-            <CardDescription>
-              Simulação mensal para planejamento de capacidade 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="Valor gerado"
-                  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 custo</CardTitle>
-            <CardDescription>
-              Distribuição dos custos usados no cálculo da margem.
-            </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.profit,
-                          CHART_COLORS.internal,
-                          CHART_COLORS.margin,
-                        ][index % 4]
-                      }
-                      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>Capacidade por departamento</CardTitle>
-            <CardDescription>
-              Horas faturáveis, internas, livres e acima da capacidade.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={320}>
-              <BarChart data={data?.capacityByDepartment ?? []}>
-                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-                <XAxis dataKey="department" tick={{ fontSize: 12 }} />
-                <YAxis tick={{ fontSize: 12 }} />
-                <Tooltip content={renderNumberTooltip} />
-                <Legend />
-                <Bar
-                  dataKey="Faturável"
-                  stackId="capacity"
-                  fill={CHART_COLORS.billable}
-                />
-                <Bar
-                  dataKey="Interno"
-                  stackId="capacity"
-                  fill={CHART_COLORS.internal}
-                />
-                <Bar
-                  dataKey="Livre"
-                  stackId="capacity"
-                  fill={CHART_COLORS.free}
-                />
-                <Bar
-                  dataKey="Sobrecarga"
-                  stackId="capacity"
-                  fill={CHART_COLORS.overload}
-                  radius={[6, 6, 0, 0]}
-                />
-              </BarChart>
-            </ResponsiveContainer>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Saúde por departamento</CardTitle>
-            <CardDescription>
-              Combina margem, alocação, utilização e risco operacional.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={320}>
-              <RadarChart data={data?.health ?? []}>
-                <PolarGrid />
-                <PolarAngleAxis dataKey="department" tick={{ fontSize: 12 }} />
-                <Tooltip content={renderNumberTooltip} />
-                <Legend />
-                <Radar
-                  dataKey="margem"
-                  name="Margem"
-                  stroke={CHART_COLORS.profit}
-                  fill={CHART_COLORS.profit}
-                  fillOpacity={0.18}
-                />
-                <Radar
-                  dataKey="alocacao"
-                  name="Alocação"
-                  stroke={CHART_COLORS.margin}
-                  fill={CHART_COLORS.margin}
-                  fillOpacity={0.12}
-                />
-                <Radar
-                  dataKey="saude"
-                  name="Saúde"
-                  stroke={CHART_COLORS.revenue}
-                  fill={CHART_COLORS.revenue}
-                  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>
-              Colaboradores ordenados por contribuição estimada no período.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={340}>
-              <BarChart
-                data={data?.ranking ?? []}
-                layout="vertical"
-                margin={{ left: 18, 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={72} />
-                <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>
-
-        <div className="grid gap-4 md:grid-cols-2">
-          {(data?.planningCards ?? []).map((card, index) => {
-            const Icon =
-              planningIcons[index % planningIcons.length] ?? UserPlus;
-            const colors = [
-              'bg-sky-50 text-sky-700',
-              'bg-emerald-50 text-emerald-700',
-              'bg-amber-50 text-amber-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>
-      </div>
-
       <Card>
         <CardHeader>
           <CardTitle>Detalhamento por colaborador</CardTitle>
           <CardDescription>
-            Custo, valor gerado, lucro, alocação e recomendação executiva.
+            Custo fixo do período, valor apontado, lucro, capacidade
+            comprometida e recomendação executiva.
           </CardDescription>
         </CardHeader>
         <CardContent className="overflow-x-auto">
@@ -718,12 +379,22 @@ export default function OperationsCollaboratorReportsPage() {
                         profit >= 0 ? 'text-emerald-700' : 'text-rose-700'
                       }
                     >
-                      {formatCurrency(profit)}
+                      <div>{formatCurrency(profit)}</div>
+                      <div className="text-xs">
+                        {formatPercent(
+                          row.billableValue
+                            ? (profit / row.billableValue) * 100
+                            : 0
+                        )}
+                      </div>
                     </TableCell>
                     <TableCell>
                       <div className="min-w-36 space-y-1">
                         <div className="flex items-center justify-between text-xs">
-                          <span>{formatHours(row.billableHours)} fat.</span>
+                          <span>
+                            {formatHours(row.billableHours)} fat. de{' '}
+                            {formatHours(row.allocatedHours)}
+                          </span>
                           <span>{formatPercent(utilization)}</span>
                         </div>
                         <Progress value={Math.min(utilization, 100)} />