@hed-hog/operations 0.0.329 → 0.0.330

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