@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/src/app/(app)/(libraries)/operations/reports/collaborators/page.tsx

@@ -0,0 +1,430 @@
+'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 {
+  AlertTriangle,
+  Banknote,
+  BriefcaseBusiness,
+  CalendarClock,
+  Clock3,
+  Target,
+  TrendingUp,
+  UsersRound,
+} from 'lucide-react';
+import { useState } from 'react';
+import { OperationsHeader } from '../../_components/operations-header';
+import { fetchOperations } from '../../_lib/api';
+import type {
+  OperationsCollaboratorsReport,
+  OperationsReportScenario,
+} from '../../_lib/types';
+import { formatCurrency, formatHours } from '../../_lib/utils/format';
+
+const scenarioLabels: Record<OperationsReportScenario, string> = {
+  base: 'Base',
+  growth: 'Crescimento',
+  conservative: 'Conservador',
+};
+
+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 getTotalCost(row: OperationsCollaboratorsReport['rows'][number]) {
+  return row.salaryCost + row.benefitsCost + row.taxesCost + row.toolsCost;
+}
+
+function getAllocationStatus(allocation: number) {
+  if (allocation >= 98) {
+    return {
+      label: 'Sobrecarga',
+      className: 'border-rose-200 bg-rose-50 text-rose-700',
+    };
+  }
+  if (allocation < 75) {
+    return {
+      label: 'Ocioso',
+      className: 'border-amber-200 bg-amber-50 text-amber-700',
+    };
+  }
+  return {
+    label: 'Saudável',
+    className: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+  };
+}
+
+export default function OperationsCollaboratorReportsPage() {
+  const defaults = getDefaultRange();
+  const { request } = useApp();
+  const [startDate, setStartDate] = useState(defaults.from);
+  const [endDate, setEndDate] = useState(defaults.to);
+  const [departmentFilter, setDepartmentFilter] = useState('all');
+  const [contractFilter, setContractFilter] = useState('all');
+  const [scenario, setScenario] = useState<OperationsReportScenario>('base');
+
+  const { data } = useQuery<OperationsCollaboratorsReport>({
+    queryKey: [
+      'operations-collaborators-report',
+      startDate,
+      endDate,
+      departmentFilter,
+      contractFilter,
+      scenario,
+    ],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        from: startDate,
+        to: endDate,
+        department: departmentFilter,
+        contractType: contractFilter,
+        scenario,
+      });
+      return fetchOperations<OperationsCollaboratorsReport>(
+        request,
+        `/operations/reports/collaborators?${params.toString()}`
+      );
+    },
+  });
+
+  const summary = data?.summary ?? {
+    cost: 0,
+    salary: 0,
+    benefits: 0,
+    taxes: 0,
+    tools: 0,
+    billableValue: 0,
+    profit: 0,
+    margin: 0,
+    availableHours: 0,
+    allocatedHours: 0,
+    billableHours: 0,
+    internalHours: 0,
+    overtimeHours: 0,
+    freeHours: 0,
+    allocation: 0,
+    utilization: 0,
+    overloadCount: 0,
+    hourlyCost: 0,
+  };
+
+  return (
+    <Page>
+      <OperationsHeader
+        title="Relatório de Colaboradores"
+        description="Dashboard executivo com custo, lucro, capacidade atual e planejamento dos próximos 12 meses."
+        current="Relatórios / Colaboradores"
+      />
+
+      <div className="grid gap-3 rounded-lg border bg-card p-3 md:grid-cols-[1fr_1fr_180px_160px_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">
+            Departamento
+          </span>
+          <Select value={departmentFilter} onValueChange={setDepartmentFilter}>
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Todos</SelectItem>
+              {(data?.filters.departments ?? []).map((department) => (
+                <SelectItem key={department} value={department}>
+                  {department}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1">
+          <span className="text-xs font-medium text-muted-foreground">
+            Vínculo
+          </span>
+          <Select value={contractFilter} onValueChange={setContractFilter}>
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Todos</SelectItem>
+              {(data?.filters.contractTypes ?? []).map((contractType) => (
+                <SelectItem key={contractType} value={contractType}>
+                  {contractType}
+                </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);
+              setDepartmentFilter('all');
+              setContractFilter('all');
+              setScenario('base');
+            }}
+          >
+            Limpar
+          </Button>
+        </div>
+      </div>
+
+      <KpiCardsGrid
+        columns={4}
+        items={[
+          {
+            key: 'headcount',
+            title: 'Headcount',
+            value: data?.rows.length ?? 0,
+            description: 'Colaboradores no recorte',
+            icon: UsersRound,
+            accentClassName: 'from-sky-500/20 via-cyan-400/10 to-transparent',
+            iconContainerClassName: 'bg-sky-50 text-sky-700',
+          },
+          {
+            key: 'cost',
+            title: 'Custo total',
+            value: formatCurrency(summary.cost),
+            description: `${formatCurrency(summary.hourlyCost)} por hora alocada`,
+            icon: Banknote,
+            accentClassName: 'from-rose-500/20 via-red-400/10 to-transparent',
+            iconContainerClassName: 'bg-rose-50 text-rose-700',
+          },
+          {
+            key: 'revenue',
+            title: 'Valor gerado',
+            value: formatCurrency(summary.billableValue),
+            description: `${formatHours(summary.billableHours)} faturáveis`,
+            icon: BriefcaseBusiness,
+            accentClassName:
+              'from-emerald-500/20 via-green-400/10 to-transparent',
+            iconContainerClassName: 'bg-emerald-50 text-emerald-700',
+          },
+          {
+            key: 'margin',
+            title: 'Margem',
+            value: formatPercent(summary.margin),
+            description: formatCurrency(summary.profit),
+            icon: Target,
+            accentClassName:
+              'from-violet-500/20 via-fuchsia-400/10 to-transparent',
+            iconContainerClassName: 'bg-violet-50 text-violet-700',
+          },
+          {
+            key: 'utilization',
+            title: 'Utilização',
+            value: formatPercent(summary.utilization),
+            description: 'Horas faturáveis sobre capacidade',
+            icon: Clock3,
+            layout: 'compact',
+            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`,
+            icon: CalendarClock,
+            layout: 'compact',
+            accentClassName:
+              'from-slate-500/20 via-slate-400/10 to-transparent',
+            iconContainerClassName: 'bg-slate-100 text-slate-700',
+          },
+          {
+            key: 'overtime',
+            title: 'Horas extras',
+            value: formatHours(summary.overtimeHours),
+            description: `${summary.overloadCount} pessoas em sobrecarga`,
+            icon: AlertTriangle,
+            layout: 'compact',
+            accentClassName:
+              'from-amber-500/20 via-orange-400/10 to-transparent',
+            iconContainerClassName: 'bg-amber-50 text-amber-700',
+          },
+          {
+            key: 'scenario',
+            title: 'Cenário 12 meses',
+            value: scenarioLabels[scenario],
+            description: 'Projeção calculada no backend',
+            icon: TrendingUp,
+            layout: 'compact',
+            accentClassName:
+              'from-indigo-500/20 via-blue-400/10 to-transparent',
+            iconContainerClassName: 'bg-indigo-50 text-indigo-700',
+          },
+        ]}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Detalhamento por colaborador</CardTitle>
+          <CardDescription>
+            Custo, valor gerado, lucro, alocação e recomendação executiva.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Colaborador</TableHead>
+                <TableHead>Custo</TableHead>
+                <TableHead>Valor gerado</TableHead>
+                <TableHead>Lucro</TableHead>
+                <TableHead>Horas</TableHead>
+                <TableHead>Alocação</TableHead>
+                <TableHead>Risco</TableHead>
+                <TableHead>Recomendação</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {(data?.rows ?? []).map((row) => {
+                const cost = getTotalCost(row);
+                const profit = row.billableValue - cost;
+                const allocation = row.availableHours
+                  ? (row.allocatedHours / row.availableHours) * 100
+                  : 0;
+                const utilization = row.availableHours
+                  ? (row.billableHours / row.availableHours) * 100
+                  : 0;
+                const status = getAllocationStatus(allocation);
+
+                return (
+                  <TableRow key={row.id}>
+                    <TableCell className="min-w-64">
+                      <div className="font-medium">{row.name}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {row.role} · {row.seniority} · {row.department} ·{' '}
+                        {row.contractType}
+                      </div>
+                    </TableCell>
+                    <TableCell>{formatCurrency(cost)}</TableCell>
+                    <TableCell>{formatCurrency(row.billableValue)}</TableCell>
+                    <TableCell
+                      className={
+                        profit >= 0 ? 'text-emerald-700' : 'text-rose-700'
+                      }
+                    >
+                      {formatCurrency(profit)}
+                    </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>{formatPercent(utilization)}</span>
+                        </div>
+                        <Progress value={Math.min(utilization, 100)} />
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="min-w-32 space-y-1">
+                        <div className="flex items-center justify-between gap-2">
+                          <Badge variant="outline" className={status.className}>
+                            {status.label}
+                          </Badge>
+                          <span className="text-xs">
+                            {formatPercent(allocation)}
+                          </span>
+                        </div>
+                        <Progress value={Math.min(allocation, 100)} />
+                      </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>
+  );
+}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/reports/projects/page.d.ts

@@ -0,0 +1,2 @@
+export default function OperationsProjectReportsPage(): import("react").JSX.Element;
+//# sourceMappingURL=page.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/reports/projects/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["page.tsx"],"names":[],"mappings":"AAsFA,MAAM,CAAC,OAAO,UAAU,4BAA4B,gCAqVnD"}