@hed-hog/operations 0.0.328 → 0.0.330

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

@@ -39,6 +39,7 @@ import {
   TrendingUp,
   UsersRound,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { OperationsHeader } from '../../_components/operations-header';
 import { fetchOperations } from '../../_lib/api';
@@ -49,9 +50,9 @@ import type {
 import { formatCurrency, formatHours } from '../../_lib/utils/format';
 
 const scenarioLabels: Record<OperationsReportScenario, string> = {
-  base: 'Base',
-  growth: 'Crescimento',
-  conservative: 'Conservador',
+  base: 'scenario.base',
+  growth: 'scenario.growth',
+  conservative: 'scenario.conservative',
 };
 
 function getDefaultRange() {
@@ -70,23 +71,24 @@ function getTotalCost(row: OperationsCollaboratorsReport['rows'][number]) {
 function getAllocationStatus(allocation: number) {
   if (allocation >= 98) {
     return {
-      label: 'Sobrecarga',
+      labelKey: 'allocationStatus.overload',
       className: 'border-rose-200 bg-rose-50 text-rose-700',
     };
   }
   if (allocation < 75) {
     return {
-      label: 'Ocioso',
+      labelKey: 'allocationStatus.idle',
       className: 'border-amber-200 bg-amber-50 text-amber-700',
     };
   }
   return {
-    label: 'Saudável',
+    labelKey: 'allocationStatus.healthy',
     className: 'border-emerald-200 bg-emerald-50 text-emerald-700',
   };
 }
 
 export default function OperationsCollaboratorReportsPage() {
+  const t = useTranslations('operations.ReportsCollaboratorsPage');
   const defaults = getDefaultRange();
   const { request } = useApp();
   const [startDate, setStartDate] = useState(defaults.from);
@@ -140,20 +142,22 @@ export default function OperationsCollaboratorReportsPage() {
     hourlyCost: 0,
   };
   const costHourReferenceLabel =
-    summary.allocatedHours > 0 ? 'por hora alocada' : 'por hora de capacidade';
+    summary.allocatedHours > 0
+      ? t('cards.cost.perAllocatedHour')
+      : t('cards.cost.perCapacityHour');
 
   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"
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
       />
 
       <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
+            {t('filters.start')}
           </span>
           <Input
             type="date"
@@ -162,7 +166,9 @@ export default function OperationsCollaboratorReportsPage() {
           />
         </div>
         <div className="space-y-1">
-          <span className="text-xs font-medium text-muted-foreground">Fim</span>
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('filters.end')}
+          </span>
           <Input
             type="date"
             value={endDate}
@@ -171,14 +177,14 @@ export default function OperationsCollaboratorReportsPage() {
         </div>
         <div className="space-y-1">
           <span className="text-xs font-medium text-muted-foreground">
-            Departamento
+            {t('filters.department')}
           </span>
           <Select value={departmentFilter} onValueChange={setDepartmentFilter}>
             <SelectTrigger className="w-full">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">Todos</SelectItem>
+              <SelectItem value="all">{t('filters.all')}</SelectItem>
               {(data?.filters.departments ?? []).map((department) => (
                 <SelectItem key={department} value={department}>
                   {department}
@@ -189,14 +195,14 @@ export default function OperationsCollaboratorReportsPage() {
         </div>
         <div className="space-y-1">
           <span className="text-xs font-medium text-muted-foreground">
-            Vínculo
+            {t('filters.contract')}
           </span>
           <Select value={contractFilter} onValueChange={setContractFilter}>
             <SelectTrigger className="w-full">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">Todos</SelectItem>
+              <SelectItem value="all">{t('filters.all')}</SelectItem>
               {(data?.filters.contractTypes ?? []).map((contractType) => (
                 <SelectItem key={contractType} value={contractType}>
                   {contractType}
@@ -207,7 +213,7 @@ export default function OperationsCollaboratorReportsPage() {
         </div>
         <div className="space-y-1">
           <span className="text-xs font-medium text-muted-foreground">
-            Cenário
+            {t('filters.scenario')}
           </span>
           <Select
             value={scenario}
@@ -219,9 +225,11 @@ export default function OperationsCollaboratorReportsPage() {
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="base">Base</SelectItem>
-              <SelectItem value="growth">Crescimento</SelectItem>
-              <SelectItem value="conservative">Conservador</SelectItem>
+              <SelectItem value="base">{t('scenario.base')}</SelectItem>
+              <SelectItem value="growth">{t('scenario.growth')}</SelectItem>
+              <SelectItem value="conservative">
+                {t('scenario.conservative')}
+              </SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -237,7 +245,7 @@ export default function OperationsCollaboratorReportsPage() {
               setScenario('base');
             }}
           >
-            Limpar
+            {t('actions.clear')}
           </Button>
         </div>
       </div>
@@ -247,16 +255,16 @@ export default function OperationsCollaboratorReportsPage() {
         items={[
           {
             key: 'headcount',
-            title: 'Headcount',
+            title: t('cards.headcount.title'),
             value: data?.rows.length ?? 0,
-            description: 'Colaboradores no recorte',
+            description: t('cards.headcount.description'),
             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',
+            title: t('cards.cost.title'),
             value: formatCurrency(summary.cost),
             description: `${formatCurrency(summary.hourlyCost)} ${costHourReferenceLabel}`,
             icon: Banknote,
@@ -265,9 +273,11 @@ export default function OperationsCollaboratorReportsPage() {
           },
           {
             key: 'revenue',
-            title: 'Valor gerado',
+            title: t('cards.revenue.title'),
             value: formatCurrency(summary.billableValue),
-            description: `${formatHours(summary.billableHours)} faturáveis`,
+            description: t('cards.revenue.description', {
+              hours: formatHours(summary.billableHours),
+            }),
             icon: BriefcaseBusiness,
             accentClassName:
               'from-emerald-500/20 via-green-400/10 to-transparent',
@@ -275,7 +285,7 @@ export default function OperationsCollaboratorReportsPage() {
           },
           {
             key: 'margin',
-            title: 'Margem',
+            title: t('cards.margin.title'),
             value: formatPercent(summary.margin),
             description: formatCurrency(summary.profit),
             icon: Target,
@@ -285,9 +295,9 @@ export default function OperationsCollaboratorReportsPage() {
           },
           {
             key: 'utilization',
-            title: 'Utilização',
+            title: t('cards.utilization.title'),
             value: formatPercent(summary.utilization),
-            description: 'Horas faturáveis comprometidas sobre capacidade',
+            description: t('cards.utilization.description'),
             icon: Clock3,
             layout: 'compact',
             accentClassName: 'from-cyan-500/20 via-blue-400/10 to-transparent',
@@ -295,9 +305,11 @@ export default function OperationsCollaboratorReportsPage() {
           },
           {
             key: 'free',
-            title: 'Capacidade livre',
+            title: t('cards.freeCapacity.title'),
             value: formatHours(summary.freeHours),
-            description: `${formatPercent(Math.max(100 - summary.allocation, 0))} disponível`,
+            description: t('cards.freeCapacity.description', {
+              percent: formatPercent(Math.max(100 - summary.allocation, 0)),
+            }),
             icon: CalendarClock,
             layout: 'compact',
             accentClassName:
@@ -306,9 +318,11 @@ export default function OperationsCollaboratorReportsPage() {
           },
           {
             key: 'overtime',
-            title: 'Horas extras',
+            title: t('cards.overtime.title'),
             value: formatHours(summary.overtimeHours),
-            description: `${summary.overloadCount} pessoas em sobrecarga`,
+            description: t('cards.overtime.description', {
+              count: summary.overloadCount,
+            }),
             icon: AlertTriangle,
             layout: 'compact',
             accentClassName:
@@ -317,9 +331,9 @@ export default function OperationsCollaboratorReportsPage() {
           },
           {
             key: 'scenario',
-            title: 'Cenário 12 meses',
-            value: scenarioLabels[scenario],
-            description: 'Projeção calculada no backend',
+            title: t('cards.scenario.title'),
+            value: t(scenarioLabels[scenario]),
+            description: t('cards.scenario.description'),
             icon: TrendingUp,
             layout: 'compact',
             accentClassName:
@@ -331,24 +345,21 @@ export default function OperationsCollaboratorReportsPage() {
 
       <Card>
         <CardHeader>
-          <CardTitle>Detalhamento por colaborador</CardTitle>
-          <CardDescription>
-            Custo fixo do período, valor apontado, lucro, capacidade
-            comprometida e recomendação executiva.
-          </CardDescription>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</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>
+                <TableHead>{t('table.headers.collaborator')}</TableHead>
+                <TableHead>{t('table.headers.cost')}</TableHead>
+                <TableHead>{t('table.headers.generatedValue')}</TableHead>
+                <TableHead>{t('table.headers.profit')}</TableHead>
+                <TableHead>{t('table.headers.hours')}</TableHead>
+                <TableHead>{t('table.headers.allocation')}</TableHead>
+                <TableHead>{t('table.headers.risk')}</TableHead>
+                <TableHead>{t('table.headers.recommendation')}</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -392,8 +403,10 @@ export default function OperationsCollaboratorReportsPage() {
                       <div className="min-w-36 space-y-1">
                         <div className="flex items-center justify-between text-xs">
                           <span>
-                            {formatHours(row.billableHours)} fat. de{' '}
-                            {formatHours(row.allocatedHours)}
+                            {t('table.hoursBillableOf', {
+                              billable: formatHours(row.billableHours),
+                              allocated: formatHours(row.allocatedHours),
+                            })}
                           </span>
                           <span>{formatPercent(utilization)}</span>
                         </div>
@@ -404,7 +417,7 @@ export default function OperationsCollaboratorReportsPage() {
                       <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}
+                            {t(status.labelKey)}
                           </Badge>
                           <span className="text-xs">
                             {formatPercent(allocation)}