@hed-hog/operations 0.0.328 → 0.0.330

package/hedhog/frontend/app/_components/task-file-attachments.tsx.ejs

@@ -17,6 +17,7 @@ import {
   Trash2,
   UploadCloud,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -117,6 +118,7 @@ type Props = {
 };
 
 export function TaskFileAttachments({ taskId }: Props) {
+  const t = useTranslations('operations.TaskFileAttachments');
   const { request } = useApp();
 
   const [files, setFiles] = useState<TaskFile[]>([]);
@@ -185,7 +187,7 @@ export function TaskFileAttachments({ taskId }: Props) {
       } catch {
         setUploading((prev) =>
           prev.map((u) =>
-            u.key === key ? { ...u, error: 'Erro no upload' } : u
+            u.key === key ? { ...u, error: t('uploadError') } : u
           )
         );
         setTimeout(() => {
@@ -254,7 +256,7 @@ export function TaskFileAttachments({ taskId }: Props) {
       <div
         role="button"
         tabIndex={0}
-        aria-label="Clique ou solte arquivos para anexar"
+        aria-label={t('dropzone.ariaLabel')}
         className={[
           'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-4 py-5 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
           isDraggingOver
@@ -275,8 +277,8 @@ export function TaskFileAttachments({ taskId }: Props) {
         <UploadCloud className="size-6 shrink-0 opacity-60" />
         <span className="text-center text-xs leading-relaxed">
           {isDraggingOver
-            ? 'Solte os arquivos aqui'
-            : 'Clique ou arraste arquivos para anexar'}
+            ? t('dropzone.dragging')
+            : t('dropzone.idle')}
         </span>
         <input
           ref={inputRef}
@@ -308,7 +310,7 @@ export function TaskFileAttachments({ taskId }: Props) {
             )}
           </div>
           <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
-            {u.error ? 'Erro' : `${u.progress}%`}
+            {u.error ? t('error') : `${u.progress}%`}
           </span>
         </div>
       ))}
@@ -329,7 +331,7 @@ export function TaskFileAttachments({ taskId }: Props) {
       {!loadingFiles && isEmpty ? (
         <div className="flex items-center gap-2 rounded-xl border border-dashed bg-muted/10 px-3 py-3 text-xs text-muted-foreground">
           <Paperclip className="size-3.5 shrink-0" />
-          Nenhum arquivo anexado
+          {t('empty')}
         </div>
       ) : null}
 
@@ -357,7 +359,7 @@ export function TaskFileAttachments({ taskId }: Props) {
                 variant="ghost"
                 size="icon"
                 className="size-7 rounded-lg"
-                title="Abrir em nova aba"
+                title={t('actions.openInNewTab')}
                 onClick={() =>
                   window.open(getFileOpenUrl(file.file_id), '_blank')
                 }
@@ -369,7 +371,7 @@ export function TaskFileAttachments({ taskId }: Props) {
                 variant="ghost"
                 size="icon"
                 className="size-7 rounded-lg text-destructive hover:bg-destructive/10 hover:text-destructive"
-                title="Remover arquivo"
+                title={t('actions.removeFile')}
                 disabled={isDeleting}
                 onClick={() => void handleDelete(file.id)}
               >

package/hedhog/frontend/app/_lib/hooks/use-values-visibility.ts.ejs

@@ -0,0 +1,61 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+/**
+ * Global sessionStorage key shared across all Operations screens.
+ * Changing this constant will reset everyone's saved preference.
+ */
+export const OPERATIONS_VALUES_VISIBILITY_KEY = 'operations-values-visible';
+
+/**
+ * Convenience helper — returns the masked placeholder string.
+ * Use wherever a monetary value should be hidden.
+ */
+export const MASKED_VALUE = '••••••';
+
+/**
+ * useValuesVisibility — toggles monetary-value visibility for Operations screens.
+ *
+ * State is stored in sessionStorage under OPERATIONS_VALUES_VISIBILITY_KEY so it
+ * persists across page navigations within the same browser tab but resets when the
+ * tab is closed (privacy-first default).
+ *
+ * Default: hidden (false).
+ *
+ * Usage:
+ *   const { valuesVisible, toggleValuesVisible } = useValuesVisibility();
+ *
+ *   // In JSX (eye button):
+ *   <Button size="icon" variant="ghost" onClick={toggleValuesVisible}>
+ *     {valuesVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+ *   </Button>
+ *
+ *   // Masking a value:
+ *   value={valuesVisible ? formatCurrency(amount, ...) : MASKED_VALUE}
+ */
+export function useValuesVisibility() {
+  const [valuesVisible, setValuesVisible] = useState<boolean>(() => {
+    try {
+      return (
+        sessionStorage.getItem(OPERATIONS_VALUES_VISIBILITY_KEY) === 'true'
+      );
+    } catch {
+      return false;
+    }
+  });
+
+  const toggleValuesVisible = useCallback(() => {
+    setValuesVisible((prev) => {
+      const next = !prev;
+      try {
+        sessionStorage.setItem(OPERATIONS_VALUES_VISIBILITY_KEY, String(next));
+      } catch {
+        // ignore — storage may be unavailable (e.g. private browsing restrictions)
+      }
+      return next;
+    });
+  }, []);
+
+  return { valuesVisible, toggleValuesVisible };
+}

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

@@ -146,10 +146,12 @@ function SchedulePanel({
   days,
   locale,
   emptyLabel,
+  dayOffLabel,
 }: {
   days: ScheduleDay[];
   locale: string;
   emptyLabel: string;
+  dayOffLabel: string;
 }) {
   const lines = groupScheduleLines(days, locale);
   if (!lines.length)
@@ -167,7 +169,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}
@@ -1176,6 +1178,7 @@ export default function OperationsApprovalsPage() {
                             days={selectedApproval.currentSchedule ?? []}
                             locale={currentLocaleCode}
                             emptyLabel={commonT('labels.notAssigned')}
+                            dayOffLabel={commonT('labels.dayOff')}
                           />
                         </div>
                       </div>
@@ -1188,6 +1191,7 @@ export default function OperationsApprovalsPage() {
                             days={selectedApproval.days ?? []}
                             locale={currentLocaleCode}
                             emptyLabel={commonT('labels.notAssigned')}
+                            dayOffLabel={commonT('labels.dayOff')}
                           />
                         </div>
                       </div>

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

@@ -35,6 +35,8 @@ import {
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   CalendarDays,
+  Eye,
+  EyeOff,
   FileText,
   Info,
   LayoutGrid,
@@ -56,6 +58,10 @@ 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 {
+  MASKED_VALUE,
+  useValuesVisibility,
+} from '../_lib/hooks/use-values-visibility';
 import type {
   OperationsCollaborator,
   OperationsCollaboratorStats,
@@ -128,6 +134,7 @@ export default function OperationsCollaboratorsPage() {
     return savedViewMode === 'cards' ? 'cards' : 'table';
   });
   const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
+  const { valuesVisible, toggleValuesVisible } = useValuesVisibility();
 
   const editParam = searchParams.get('edit');
   const editingCollaboratorId =
@@ -345,11 +352,13 @@ export default function OperationsCollaboratorsPage() {
           t('cards.totalSalaryDescription'),
           t('cards.totalSalaryTooltip')
         ),
-        value: formatCurrency(
-          collaboratorStats?.totalSalary ?? 0,
-          getSettingValue,
-          currentLocaleCode
-        ),
+        value: valuesVisible
+          ? formatCurrency(
+              collaboratorStats?.totalSalary ?? 0,
+              getSettingValue,
+              currentLocaleCode
+            )
+          : MASKED_VALUE,
         icon: Wallet,
         accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
         iconContainerClassName:
@@ -362,11 +371,13 @@ export default function OperationsCollaboratorsPage() {
           t('cards.totalCostsDescription'),
           t('cards.totalCostsTooltip')
         ),
-        value: formatCurrency(
-          collaboratorStats?.totalCosts ?? 0,
-          getSettingValue,
-          currentLocaleCode
-        ),
+        value: valuesVisible
+          ? formatCurrency(
+              collaboratorStats?.totalCosts ?? 0,
+              getSettingValue,
+              currentLocaleCode
+            )
+          : MASKED_VALUE,
         icon: TrendingUp,
         accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent',
         iconContainerClassName:
@@ -379,11 +390,13 @@ export default function OperationsCollaboratorsPage() {
           t('cards.avgSalaryPlusCostsDescription'),
           t('cards.avgSalaryPlusCostsTooltip')
         ),
-        value: formatCurrency(
-          collaboratorStats?.avgSalaryPlusCosts ?? 0,
-          getSettingValue,
-          currentLocaleCode
-        ),
+        value: valuesVisible
+          ? formatCurrency(
+              collaboratorStats?.avgSalaryPlusCosts ?? 0,
+              getSettingValue,
+              currentLocaleCode
+            )
+          : MASKED_VALUE,
         icon: Wallet,
         accentClassName: 'from-violet-500/20 via-purple-500/10 to-transparent',
         iconContainerClassName:
@@ -396,11 +409,13 @@ export default function OperationsCollaboratorsPage() {
           t('cards.avgSalaryPlusCostsPerCollaboratorDescription'),
           t('cards.avgSalaryPlusCostsPerCollaboratorTooltip')
         ),
-        value: formatCurrency(
-          collaboratorStats?.avgSalaryPlusCostsPerCollaborator ?? 0,
-          getSettingValue,
-          currentLocaleCode
-        ),
+        value: valuesVisible
+          ? formatCurrency(
+              collaboratorStats?.avgSalaryPlusCostsPerCollaborator ?? 0,
+              getSettingValue,
+              currentLocaleCode
+            )
+          : MASKED_VALUE,
         icon: TrendingUp,
         accentClassName: 'from-rose-500/20 via-pink-500/10 to-transparent',
         iconContainerClassName:
@@ -413,6 +428,7 @@ export default function OperationsCollaboratorsPage() {
     formatCurrency,
     getSettingValue,
     currentLocaleCode,
+    valuesVisible,
   ]);
 
   const handleViewModeChange = (value: string) => {
@@ -452,13 +468,27 @@ export default function OperationsCollaboratorsPage() {
         description={t('description')}
         current={t('breadcrumb')}
         actions={
-          access.isDirector ? (
-            <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={toggleValuesVisible}
+              title={commonT(
+                valuesVisible ? 'actions.hideValues' : 'actions.showValues'
+              )}
+            >
+              {valuesVisible ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </Button>
+            {access.isDirector ? (
               <Button size="sm" onClick={openCreateSheet}>
                 {commonT('actions.create')}
               </Button>
-            </div>
-          ) : undefined
+            ) : null}
+          </div>
         }
       />
 
@@ -620,11 +650,13 @@ export default function OperationsCollaboratorsPage() {
                         {formT('fields.compensationAmount')}:
                       </span>{' '}
                       {collaborator.compensationAmount != null
-                        ? formatCurrency(
-                            Number(collaborator.compensationAmount),
-                            getSettingValue,
-                            currentLocaleCode
-                          )
+                        ? valuesVisible
+                          ? formatCurrency(
+                              Number(collaborator.compensationAmount),
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : MASKED_VALUE
                         : commonT('labels.notAvailable')}
                     </div>
                     <div>
@@ -823,11 +855,13 @@ export default function OperationsCollaboratorsPage() {
                     </TableCell>
                     <TableCell className="hidden 2xl:table-cell">
                       {collaborator.compensationAmount != null
-                        ? formatCurrency(
-                            Number(collaborator.compensationAmount),
-                            getSettingValue,
-                            currentLocaleCode
-                          )
+                        ? valuesVisible
+                          ? formatCurrency(
+                              Number(collaborator.compensationAmount),
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : MASKED_VALUE
                         : commonT('labels.notAvailable')}
                     </TableCell>
                     <TableCell className="hidden xl:table-cell">

package/hedhog/frontend/app/my-projects/page.tsx.ejs

@@ -6,6 +6,7 @@ import {
   PaginationFooter,
   SearchBar,
 } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
@@ -41,6 +42,22 @@ const MY_PROJECTS_VIEW_STORAGE_KEY = 'operations-my-projects-view-mode';
 
 type ProjectViewMode = 'table' | 'cards';
 
+function getPersonAvatarUrl(avatarId?: number | null): string {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : '/placeholder.png';
+}
+
+function getInitials(value?: string | null): string {
+  if (!value) return '?';
+  return value
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0]!.toUpperCase())
+    .join('');
+}
+
 export default function OperationsMyProjectsPage() {
   const t = useTranslations('operations.MyProjectsPage');
   const commonT = useTranslations('operations.Common');
@@ -266,11 +283,22 @@ export default function OperationsMyProjectsPage() {
                   </div>
 
                   <div className="grid gap-2 text-sm text-muted-foreground lg:grid-cols-2">
-                    <div>
-                      <span className="font-medium text-foreground">
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      <span className="shrink-0 font-medium text-foreground">
                         {commonT('labels.client')}:
-                      </span>{' '}
-                      {project.clientName || commonT('labels.notAvailable')}
+                      </span>
+                      <Avatar className="h-5 w-5 shrink-0">
+                        <AvatarImage
+                          src={getPersonAvatarUrl(project.clientAvatarId)}
+                          alt={project.clientName ?? ''}
+                        />
+                        <AvatarFallback className="text-[9px] font-medium">
+                          {getInitials(project.clientName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="truncate">
+                        {project.clientName || commonT('labels.notAvailable')}
+                      </span>
                     </div>
                     <div>
                       <span className="font-medium text-foreground">
@@ -367,8 +395,19 @@ export default function OperationsMyProjectsPage() {
                       </div>
                     </TableCell>
                     <TableCell>
-                      <div className="truncate">
-                        {project.clientName || commonT('labels.notAvailable')}
+                      <div className="flex min-w-0 items-center gap-1.5">
+                        <Avatar className="h-6 w-6 shrink-0">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            alt={project.clientName ?? ''}
+                          />
+                          <AvatarFallback className="text-[9px] font-medium">
+                            {getInitials(project.clientName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="truncate">
+                          {project.clientName || commonT('labels.notAvailable')}
+                        </span>
                       </div>
                     </TableCell>
                     <TableCell>

package/hedhog/frontend/app/my-tasks/page.tsx.ejs

@@ -945,7 +945,7 @@ export default function OperationsMyTasksPage() {
 
                                     <div className="mt-3 space-y-1.5">
                                       <div className="flex items-center justify-between text-[11px] text-muted-foreground">
-                                        <span>Progresso</span>
+                                        <span>{t('labels.progress')}</span>
                                         <span>
                                           {getTaskProgress(task.status)}%
                                         </span>

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

@@ -32,6 +32,7 @@ import {
   ArchiveRestore,
   CalendarDays,
   Eye,
+  EyeOff,
   FileText,
   FolderKanban,
   LayoutGrid,
@@ -49,8 +50,16 @@ import { ProjectFormScreen } from '../_components/project-form-screen';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import {
+  MASKED_VALUE,
+  useValuesVisibility,
+} from '../_lib/hooks/use-values-visibility';
 import type { OperationsProject, PaginatedResponse } from '../_lib/types';
-import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
+import {
+  formatCurrency,
+  formatDate,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
 
 const PROJECT_VIEW_STORAGE_KEY = 'operations-projects-view-mode';
 
@@ -154,6 +163,8 @@ export default function OperationsProjectsPage() {
     updateSheetQuery({ editId: projectId });
   };
 
+  const { valuesVisible, toggleValuesVisible } = useValuesVisibility();
+
   const { data: projectsResponse, refetch } = useQuery<
     PaginatedResponse<OperationsProject>
   >({
@@ -269,11 +280,27 @@ export default function OperationsProjectsPage() {
         description={t('description')}
         current={t('breadcrumb')}
         actions={
-          access.isDirector ? (
-            <Button size="sm" onClick={openCreateSheet}>
-              {commonT('actions.create')}
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={toggleValuesVisible}
+              title={commonT(
+                valuesVisible ? 'actions.hideValues' : 'actions.showValues'
+              )}
+            >
+              {valuesVisible ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
             </Button>
-          ) : undefined
+            {access.isDirector ? (
+              <Button size="sm" onClick={openCreateSheet}>
+                {commonT('actions.create')}
+              </Button>
+            ) : null}
+          </div>
         }
       />
 
@@ -441,6 +468,20 @@ export default function OperationsProjectsPage() {
                         currentLocaleCode
                       )}
                     </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.budget')}:
+                      </span>{' '}
+                      {project.budgetAmount != null
+                        ? valuesVisible
+                          ? formatCurrency(
+                              project.budgetAmount,
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : MASKED_VALUE
+                        : commonT('labels.notAvailable')}
+                    </div>
                     <div className="flex items-center gap-2">
                       <span className="font-medium text-foreground">
                         {commonT('labels.contractStatus')}:
@@ -538,6 +579,9 @@ export default function OperationsProjectsPage() {
                   <TableHead className="hidden xl:table-cell">
                     {commonT('labels.endDate')}
                   </TableHead>
+                  <TableHead className="hidden xl:table-cell">
+                    {commonT('labels.budget')}
+                  </TableHead>
                   <TableHead className="hidden 2xl:table-cell">
                     {commonT('labels.contractStatus')}
                   </TableHead>
@@ -626,6 +670,17 @@ export default function OperationsProjectsPage() {
                         currentLocaleCode
                       )}
                     </TableCell>
+                    <TableCell className="hidden xl:table-cell">
+                      {project.budgetAmount != null
+                        ? valuesVisible
+                          ? formatCurrency(
+                              project.budgetAmount,
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : MASKED_VALUE
+                        : commonT('labels.notAvailable')}
+                    </TableCell>
                     <TableCell className="hidden 2xl:table-cell">
                       {project.contractStatus ? (
                         <StatusBadge