@hed-hog/operations 0.0.329 → 0.0.331

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

@@ -48,6 +48,7 @@ import {
   TrendingUp,
 } from 'lucide-react';
 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { OperationsHeader } from '../../_components/operations-header';
 import { fetchOperations } from '../../_lib/api';
@@ -57,13 +58,6 @@ import type {
 } from '../../_lib/types';
 import { formatCurrency, formatHours } from '../../_lib/utils/format';
 
-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',
@@ -71,12 +65,6 @@ const statusClasses: Record<string, string> = {
   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',
@@ -92,20 +80,12 @@ function formatPercent(value: number) {
   return `${Math.round(Number(value || 0))}%`;
 }
 
-function getStatusLabel(status: string) {
-  return statusLabels[status] ?? status;
-}
-
 function getStatusClass(status: string) {
   return (
     statusClasses[status] ?? 'border-slate-200 bg-slate-100 text-slate-700'
   );
 }
 
-function getContractLabel(contractType: string) {
-  return contractLabels[contractType] ?? contractType.replace(/_/g, ' ');
-}
-
 function KpiLabel({ text, tooltip }: { text: string; tooltip: string }) {
   return (
     <span className="flex items-center gap-1">
@@ -123,6 +103,7 @@ function KpiLabel({ text, tooltip }: { text: string; tooltip: string }) {
 }
 
 export default function OperationsProjectReportsPage() {
+  const t = useTranslations('operations.ReportsProjectsPage');
   const defaults = getDefaultRange();
   const { request } = useApp();
   const [startDate, setStartDate] = useState(defaults.from);
@@ -182,15 +163,15 @@ export default function OperationsProjectReportsPage() {
   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"
+        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_180px_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"
@@ -199,7 +180,7 @@ export default function OperationsProjectReportsPage() {
           />
         </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}
@@ -208,31 +189,31 @@ export default function OperationsProjectReportsPage() {
         </div>
         <div className="space-y-1">
           <span className="text-xs font-medium text-muted-foreground">
-            Status
+            {t('filters.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>
+              <SelectItem value="all">{t('filters.all')}</SelectItem>
+              <SelectItem value="on_track">{t('status.on_track')}</SelectItem>
+              <SelectItem value="attention">{t('status.attention')}</SelectItem>
+              <SelectItem value="late">{t('status.late')}</SelectItem>
+              <SelectItem value="paused">{t('status.paused')}</SelectItem>
             </SelectContent>
           </Select>
         </div>
         <div className="space-y-1">
           <span className="text-xs font-medium text-muted-foreground">
-            Cliente
+            {t('filters.client')}
           </span>
           <Select value={clientFilter} onValueChange={setClientFilter}>
             <SelectTrigger className="w-full">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">Todos</SelectItem>
+              <SelectItem value="all">{t('filters.all')}</SelectItem>
               {clients.map((client) => (
                 <SelectItem key={client} value={client}>
                   {client}
@@ -243,7 +224,7 @@ export default function OperationsProjectReportsPage() {
         </div>
         <div className="space-y-1">
           <span className="text-xs font-medium text-muted-foreground">
-            Cenário
+            {t('filters.scenario')}
           </span>
           <Select
             value={scenario}
@@ -255,9 +236,9 @@ export default function OperationsProjectReportsPage() {
               <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>
@@ -273,7 +254,7 @@ export default function OperationsProjectReportsPage() {
               setScenario('base');
             }}
           >
-            Limpar
+            {t('actions.clear')}
           </Button>
         </div>
       </div>
@@ -286,12 +267,12 @@ export default function OperationsProjectReportsPage() {
               key: 'active',
               title: (
                 <KpiLabel
-                  text="Projetos"
-                  tooltip="Número total de projetos ativos no período filtrado, incluindo os que estão em risco operacional."
+                  text={t('cards.projects.title')}
+                  tooltip={t('cards.projects.tooltip')}
                 />
               ),
               value: data?.rows.length ?? 0,
-              description: `${summary.atRisk} em risco operacional`,
+              description: t('cards.projects.description', { count: summary.atRisk }),
               icon: FolderKanban,
               accentClassName: 'from-sky-500/20 via-cyan-400/10 to-transparent',
               iconContainerClassName: 'bg-sky-50 text-sky-700',
@@ -300,12 +281,12 @@ export default function OperationsProjectReportsPage() {
               key: 'budget',
               title: (
                 <KpiLabel
-                  text="Orçamento"
-                  tooltip="Soma dos campos de orçamento (budget_amount) de todos os projetos no período filtrado."
+                  text={t('cards.budget.title')}
+                  tooltip={t('cards.budget.tooltip')}
                 />
               ),
               value: formatCurrency(summary.contractedRevenue),
-              description: `${data?.rows.length ?? 0} projetos no período`,
+              description: t('cards.budget.description', { count: data?.rows.length ?? 0 }),
               icon: Banknote,
               accentClassName:
                 'from-emerald-500/20 via-green-400/10 to-transparent',
@@ -315,12 +296,14 @@ export default function OperationsProjectReportsPage() {
               key: 'allocated-cost',
               title: (
                 <KpiLabel
-                  text="Custo alocado"
-                  tooltip="Custo calculado a partir das alocações: horas semanais planejadas × custo mensal do colaborador × meses do período ÷ capacidade semanal."
+                  text={t('cards.allocatedCost.title')}
+                  tooltip={t('cards.allocatedCost.tooltip')}
                 />
               ),
               value: formatCurrency(summary.allocatedCost),
-              description: `vs ${formatCurrency(summary.consumedHoursCost)} consumido`,
+              description: t('cards.allocatedCost.description', {
+                value: formatCurrency(summary.consumedHoursCost),
+              }),
               icon: Gauge,
               accentClassName: 'from-rose-500/20 via-red-400/10 to-transparent',
               iconContainerClassName: 'bg-rose-50 text-rose-700',
@@ -329,12 +312,18 @@ export default function OperationsProjectReportsPage() {
               key: 'planned-profit',
               title: (
                 <KpiLabel
-                  text="Lucro planejado"
-                  tooltip="Diferença entre o orçamento total dos projetos e o custo alocado dos colaboradores no período."
+                  text={t('cards.plannedProfit.title')}
+                  tooltip={t('cards.plannedProfit.tooltip')}
                 />
               ),
               value: formatCurrency(summary.plannedProfit),
-              description: `${formatPercent(summary.contractedRevenue > 0 ? (summary.plannedProfit / summary.contractedRevenue) * 100 : 0)} de margem`,
+              description: t('cards.plannedProfit.description', {
+                value: formatPercent(
+                  summary.contractedRevenue > 0
+                    ? (summary.plannedProfit / summary.contractedRevenue) * 100
+                    : 0
+                ),
+              }),
               icon: TrendingUp,
               accentClassName:
                 'from-violet-500/20 via-fuchsia-400/10 to-transparent',
@@ -344,12 +333,14 @@ export default function OperationsProjectReportsPage() {
               key: 'hours',
               title: (
                 <KpiLabel
-                  text="Horas consumidas"
-                  tooltip="Total de horas lançadas e aprovadas nos timesheets dentro do período selecionado."
+                  text={t('cards.hours.title')}
+                  tooltip={t('cards.hours.tooltip')}
                 />
               ),
               value: formatHours(summary.actualHours),
-              description: `${formatHours(summary.billableHours)} faturáveis`,
+              description: t('cards.hours.description', {
+                value: formatHours(summary.billableHours),
+              }),
               icon: Clock3,
               layout: 'compact',
               accentClassName:
@@ -360,12 +351,14 @@ export default function OperationsProjectReportsPage() {
               key: 'consumed-hours-cost',
               title: (
                 <KpiLabel
-                  text="Custo das horas consumidas"
-                  tooltip="Custo real das horas entregues: horas do timesheet × taxa horária do colaborador (custo mensal ÷ capacidade semanal)."
+                  text={t('cards.consumedHoursCost.title')}
+                  tooltip={t('cards.consumedHoursCost.tooltip')}
                 />
               ),
               value: formatCurrency(summary.consumedHoursCost),
-              description: `${formatHours(summary.actualHours)} de horas entregues`,
+              description: t('cards.consumedHoursCost.description', {
+                value: formatHours(summary.actualHours),
+              }),
               icon: Receipt,
               layout: 'compact',
               accentClassName:
@@ -376,12 +369,14 @@ export default function OperationsProjectReportsPage() {
               key: 'idleness-rate',
               title: (
                 <KpiLabel
-                  text="Taxa de ociosidade"
-                  tooltip="Percentual de tempo ocioso: diferença entre a carga horária semanal planejada (alocada) e as horas efetivamente submetidas via timesheet, em relação à capacidade total."
+                  text={t('cards.idlenessRate.title')}
+                  tooltip={t('cards.idlenessRate.tooltip')}
                 />
               ),
               value: formatPercent(summary.idlenessRate),
-              description: `${formatCurrency(summary.idlenessCost)} de custo ocioso`,
+              description: t('cards.idlenessRate.description', {
+                value: formatCurrency(summary.idlenessCost),
+              }),
               icon: TimerOff,
               layout: 'compact',
               accentClassName:
@@ -392,12 +387,14 @@ export default function OperationsProjectReportsPage() {
               key: 'idleness-cost',
               title: (
                 <KpiLabel
-                  text="Custo de ociosidade"
-                  tooltip="Quanto foi gasto com tempo ocioso: custo alocado menos o custo das horas efetivamente consumidas nos timesheets aprovados."
+                  text={t('cards.idlenessCost.title')}
+                  tooltip={t('cards.idlenessCost.tooltip')}
                 />
               ),
               value: formatCurrency(summary.idlenessCost),
-              description: `${formatPercent(summary.idlenessRate)} de ociosidade`,
+              description: t('cards.idlenessCost.description', {
+                value: formatPercent(summary.idlenessRate),
+              }),
               icon: CircleDollarSign,
               layout: 'compact',
               accentClassName:
@@ -410,27 +407,26 @@ export default function OperationsProjectReportsPage() {
 
       <Card>
         <CardHeader>
-          <CardTitle>Detalhamento por projeto</CardTitle>
+          <CardTitle>{t('table.title')}</CardTitle>
           <CardDescription>
-            Orçamento, custo alocado, lucro planejado, horas consumidas,
-            ociosidade e risco por projeto.
+            {t('table.description')}
           </CardDescription>
         </CardHeader>
         <CardContent className="overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Projeto</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Orçamento</TableHead>
-                <TableHead>Custo alocado</TableHead>
-                <TableHead>Lucro planejado</TableHead>
-                <TableHead>Horas consumidas</TableHead>
-                <TableHead>Custo das horas consumidas</TableHead>
-                <TableHead>Taxa de ociosidade</TableHead>
-                <TableHead>Custo de ociosidade</TableHead>
-                <TableHead>Risco</TableHead>
-                <TableHead>Recomendação</TableHead>
+                <TableHead>{t('table.columns.project')}</TableHead>
+                <TableHead>{t('table.columns.status')}</TableHead>
+                <TableHead>{t('table.columns.budget')}</TableHead>
+                <TableHead>{t('table.columns.allocatedCost')}</TableHead>
+                <TableHead>{t('table.columns.plannedProfit')}</TableHead>
+                <TableHead>{t('table.columns.hours')}</TableHead>
+                <TableHead>{t('table.columns.consumedHoursCost')}</TableHead>
+                <TableHead>{t('table.columns.idlenessRate')}</TableHead>
+                <TableHead>{t('table.columns.idlenessCost')}</TableHead>
+                <TableHead>{t('table.columns.risk')}</TableHead>
+                <TableHead>{t('table.columns.recommendation')}</TableHead>
                 <TableHead />
               </TableRow>
             </TableHeader>
@@ -452,7 +448,7 @@ export default function OperationsProjectReportsPage() {
                       <div className="font-medium">{row.name}</div>
                       <div className="text-xs text-muted-foreground">
                         {row.client} · {row.manager} · {row.squad} ·{' '}
-                        {getContractLabel(row.contractType)}
+                        {t(`contractType.${row.contractType}`)}
                       </div>
                     </TableCell>
                     <TableCell>
@@ -460,7 +456,7 @@ export default function OperationsProjectReportsPage() {
                         variant="outline"
                         className={getStatusClass(row.status)}
                       >
-                        {getStatusLabel(row.status)}
+                        {t(`status.${row.status}`)}
                       </Badge>
                     </TableCell>
                     <TableCell>
@@ -482,7 +478,9 @@ export default function OperationsProjectReportsPage() {
                     <TableCell>
                       <div>{formatHours(row.actualHours)}</div>
                       <div className="text-xs text-muted-foreground">
-                        {formatHours(row.billableHours)} faturáveis
+                        {t('table.billableHours', {
+                          value: formatHours(row.billableHours),
+                        })}
                       </div>
                     </TableCell>
                     <TableCell>
@@ -508,7 +506,7 @@ export default function OperationsProjectReportsPage() {
                               : 'border-emerald-200 bg-emerald-50 text-emerald-700'
                         }
                       >
-                        {row.risk}
+                        {t(`risk.${row.risk}`)}
                       </Badge>
                     </TableCell>
                     <TableCell className="min-w-72 text-sm text-muted-foreground">
@@ -523,7 +521,7 @@ export default function OperationsProjectReportsPage() {
                           size="icon"
                           variant="ghost"
                           className="size-8"
-                          title="Ver detalhes"
+                          title={t('actions.viewDetails')}
                         >
                           <ExternalLink className="size-4" />
                         </Button>

package/hedhog/frontend/app/schedule-adjustments/page.tsx.ejs

@@ -52,6 +52,7 @@ import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import type {
   OperationsScheduleAdjustmentDay,
   OperationsScheduleAdjustmentRequest,
@@ -163,10 +164,12 @@ function SchedulePanel({
   days,
   locale,
   emptyLabel,
+  dayOffLabel,
 }: {
   days: ScheduleDay[];
   locale: string;
   emptyLabel: string;
+  dayOffLabel: string;
 }) {
   const lines = groupScheduleLines(days, locale);
   if (!lines.length)
@@ -182,7 +185,7 @@ function SchedulePanel({
             {line.dayLabel}
           </span>
           {line.isOff ? (
-            <span className="text-muted-foreground">Folga</span>
+            <span className="text-muted-foreground">{dayOffLabel}</span>
           ) : (
             <span className="text-foreground">
               {line.time}
@@ -235,7 +238,11 @@ export default function OperationsScheduleAdjustmentsPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-schedule-adjustments:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
     if (typeof window === 'undefined') return 'cards';
     const saved = window.localStorage.getItem(
@@ -539,6 +546,7 @@ export default function OperationsScheduleAdjustmentsPage() {
                       days={requestItem.currentSchedule ?? []}
                       locale={currentLocaleCode}
                       emptyLabel={commonT('labels.notAssigned')}
+                      dayOffLabel={commonT('labels.dayOff')}
                     />
                   </div>
                   <div className="bg-card px-4 py-3">
@@ -552,6 +560,7 @@ export default function OperationsScheduleAdjustmentsPage() {
                       }
                       locale={currentLocaleCode}
                       emptyLabel={commonT('labels.notAssigned')}
+                      dayOffLabel={commonT('labels.dayOff')}
                     />
                   </div>
                 </div>
@@ -946,6 +955,7 @@ export default function OperationsScheduleAdjustmentsPage() {
                       days={selectedRequest.currentSchedule ?? []}
                       locale={currentLocaleCode}
                       emptyLabel={commonT('labels.notAssigned')}
+                      dayOffLabel={commonT('labels.dayOff')}
                     />
                   </div>
                 </div>
@@ -961,6 +971,7 @@ export default function OperationsScheduleAdjustmentsPage() {
                       }
                       locale={currentLocaleCode}
                       emptyLabel={commonT('labels.notAssigned')}
+                      dayOffLabel={commonT('labels.dayOff')}
                     />
                   </div>
                 </div>

package/hedhog/frontend/app/time-off/page.tsx.ejs

@@ -43,6 +43,7 @@ import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import type {
   OperationsTimeOffRequest,
   PaginatedResponse,
@@ -106,7 +107,11 @@ export default function OperationsTimeOffPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-time-off:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
     if (typeof window === 'undefined') return 'table';
     const saved = window.localStorage.getItem('operations-time-off-view-mode');

package/hedhog/frontend/app/timesheets/page.tsx.ejs

@@ -80,6 +80,7 @@ import {
   mutateOperations,
 } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import type {
   OperationsCollaborator,
   OperationsProjectOption,
@@ -242,7 +243,11 @@ export default function OperationsTimesheetsPage() {
     () => new Date().getMonth() + 1
   );
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-timesheets:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<'table' | 'cards' | 'calendar'>(
     () => {
       if (typeof window === 'undefined') return 'table';
@@ -733,8 +738,7 @@ export default function OperationsTimesheetsPage() {
                 status: entry.status ?? 'submitted',
                 projectId: entry.projectId,
                 projectAssignmentId: entry.projectAssignmentId ?? 0,
-                projectName:
-                  entry.projectName || commonT('labels.unassigned'),
+                projectName: entry.projectName || commonT('labels.unassigned'),
               },
             ]
           : []
@@ -1188,7 +1192,9 @@ export default function OperationsTimesheetsPage() {
                             {canSubmitTimesheet(timesheet) ? (
                               <Button
                                 size="icon"
-                                onClick={() => void submitTimesheet(timesheet.id)}
+                                onClick={() =>
+                                  void submitTimesheet(timesheet.id)
+                                }
                               >
                                 <Send className="size-4" />
                               </Button>