@hed-hog/operations 0.0.329 → 0.0.330

package/hedhog/frontend/app/_components/project-costs-section.tsx.ejs

@@ -93,6 +93,7 @@ import {
   updateProjectCost,
   type Currency,
 } from '../_lib/api';
+import { MASKED_VALUE } from '../_lib/hooks/use-values-visibility';
 import type {
   FullCostSummary,
   PaginatedResponse,
@@ -189,14 +190,23 @@ function costToForm(cost: ProjectCost): CostFormState {
 
 type Props = {
   projectId: number;
+  valuesVisible?: boolean;
 };
 
-export function ProjectCostsSection({ projectId }: Props) {
+export function ProjectCostsSection({
+  projectId,
+  valuesVisible = false,
+}: Props) {
   const t = useTranslations('operations.ProjectCostsSection');
   const commonT = useTranslations('operations.Common');
   const { request, showToastHandler, getSettingValue, currentLocaleCode } =
     useApp();
 
+  const fmtCurrency = (amount: number): string =>
+    valuesVisible
+      ? formatCurrency(amount, getSettingValue, currentLocaleCode)
+      : MASKED_VALUE;
+
   const queryClient = useQueryClient();
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [editingCost, setEditingCost] = useState<ProjectCost | null>(null);
@@ -415,11 +425,7 @@ export function ProjectCostsSection({ projectId }: Props) {
               <p className="text-xs text-muted-foreground">
                 {t('grandTotal')}:{' '}
                 <span className="font-medium text-foreground">
-                  {formatCurrency(
-                    grandTotal,
-                    getSettingValue,
-                    currentLocaleCode
-                  )}
+                  {fmtCurrency(grandTotal)}
                 </span>
               </p>
             ) : null}
@@ -457,11 +463,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.budget_amount,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.budget_amount)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -472,11 +474,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.extra_cost_total,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.extra_cost_total)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -487,11 +485,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.total_project_cost,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.total_project_cost)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -514,11 +508,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                   fullSummary.remaining_budget < 0 ? 'text-destructive' : ''
                 )}
               >
-                {formatCurrency(
-                  fullSummary.remaining_budget,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.remaining_budget)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -552,11 +542,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.realized_total,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.realized_total)}
               </p>
             </div>
           </div>
@@ -616,11 +602,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                           {entry.category_name}
                         </span>
                         <span className="ml-auto shrink-0 text-xs font-medium tabular-nums">
-                          {formatCurrency(
-                            entry.total,
-                            getSettingValue,
-                            currentLocaleCode
-                          )}
+                          {fmtCurrency(entry.total)}
                         </span>
                       </div>
                     ))}
@@ -846,11 +828,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                   </Badge>
                 </div>
                 <span className="text-xs font-medium text-muted-foreground">
-                  {formatCurrency(
-                    group.total_amount,
-                    getSettingValue,
-                    currentLocaleCode
-                  )}
+                  {fmtCurrency(group.total_amount)}
                 </span>
               </div>
 
@@ -920,20 +898,12 @@ export function ProjectCostsSection({ projectId }: Props) {
                         <TableCell className="text-right tabular-nums">
                           <span className="text-xs text-muted-foreground">
                             {Number(cost.quantity ?? 1)} ×{' '}
-                            {formatCurrency(
-                              Number(cost.amount),
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
+                            {fmtCurrency(Number(cost.amount))}
                           </span>
                         </TableCell>
                         <TableCell className="hidden text-right tabular-nums sm:table-cell">
                           <span className="font-medium">
-                            {formatCurrency(
-                              total,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
+                            {fmtCurrency(total)}
                           </span>
                         </TableCell>
                         <TableCell>
@@ -1026,25 +996,25 @@ export function ProjectCostsSection({ projectId }: Props) {
                     placeholder: t('fields.costTypeCodePlaceholder'),
                   },
                 ]}
-                mapSearchToCreateValues={(search) => ({ name: search })}
-                onCreate={async (values) => {
-                  const name = values.name?.trim() ?? '';
-                  const slug = name
-                    .toLowerCase()
-                    .replace(/\s+/g, '-')
-                    .replace(/[^a-z0-9-]/g, '');
-                  const code =
-                    values.code?.trim() ||
-                    name
-                      .toUpperCase()
-                      .replace(/\s+/g, '-')
-                      .replace(/[^A-Z0-9-]/g, '')
-                      .slice(0, 40);
-                  const created = await createProjectCostType(request, {
-                    name,
-                    code,
-                    slug,
-                  });
+                mapSearchToCreateValues={(search) => ({ name: search })}
+                onCreate={async (values) => {
+                  const name = values.name?.trim() ?? '';
+                  const slug = name
+                    .toLowerCase()
+                    .replace(/\s+/g, '-')
+                    .replace(/[^a-z0-9-]/g, '');
+                  const code =
+                    values.code?.trim() ||
+                    name
+                      .toUpperCase()
+                      .replace(/\s+/g, '-')
+                      .replace(/[^A-Z0-9-]/g, '')
+                      .slice(0, 40);
+                  const created = await createProjectCostType(request, {
+                    name,
+                    code,
+                    slug,
+                  });
                   return (created as ProjectCostType) ?? null;
                 }}
                 initialSelectedLabel={editingCost?.cost_type?.name}
@@ -1084,17 +1054,17 @@ export function ProjectCostsSection({ projectId }: Props) {
                     required: true,
                   },
                 ]}
-                mapSearchToCreateValues={(search) => ({ name: search })}
-                onCreate={async (values) => {
-                  const name = values.name?.trim() ?? '';
-                  const slug = name
-                    .toLowerCase()
-                    .replace(/\s+/g, '-')
-                    .replace(/[^a-z0-9-]/g, '');
-                  const created = await createProjectCostCategory(request, {
-                    name,
-                    slug,
-                  });
+                mapSearchToCreateValues={(search) => ({ name: search })}
+                onCreate={async (values) => {
+                  const name = values.name?.trim() ?? '';
+                  const slug = name
+                    .toLowerCase()
+                    .replace(/\s+/g, '-')
+                    .replace(/[^a-z0-9-]/g, '');
+                  const created = await createProjectCostCategory(request, {
+                    name,
+                    slug,
+                  });
                   return (created as ProjectCostCategory) ?? null;
                 }}
                 initialSelectedLabel={editingCost?.category?.name}

package/hedhog/frontend/app/_components/project-details-screen.tsx.ejs

@@ -80,6 +80,8 @@ import {
   CheckCircle2,
   ChevronRight,
   ClipboardList,
+  Eye,
+  EyeOff,
   FileText,
   FolderKanban,
   Gauge,
@@ -125,6 +127,10 @@ import {
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useMentionItems } from '../_lib/hooks/use-mention-items';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import {
+  MASKED_VALUE,
+  useValuesVisibility,
+} from '../_lib/hooks/use-values-visibility';
 import type {
   OperationsProjectDetails,
   OperationsTaskOption,
@@ -1100,6 +1106,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const access = useOperationsAccess();
   const mentionItems = useMentionItems(request);
   const isLimitedView = !access.isDirector && !access.isSupervisor;
+  const { valuesVisible, toggleValuesVisible } = useValuesVisibility();
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -2078,6 +2085,20 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             </div>
           </div>
           <div className="flex shrink-0 flex-wrap gap-1.5">
+            <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"
@@ -2492,11 +2513,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                     </dt>
                     <dd className="font-medium">
                       {project.budgetAmount
-                        ? formatCurrency(
-                            project.budgetAmount,
-                            getSettingValue,
-                            currentLocaleCode
-                          )
+                        ? valuesVisible
+                          ? formatCurrency(
+                              project.budgetAmount,
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : MASKED_VALUE
                         : commonT('labels.notAvailable')}
                     </dd>
                   </div>
@@ -2657,11 +2680,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                           </dt>
                           <dd className="font-medium">
                             {project.relatedContract.budgetAmount
-                              ? formatCurrency(
-                                  project.relatedContract.budgetAmount,
-                                  getSettingValue,
-                                  currentLocaleCode
-                                )
+                              ? valuesVisible
+                                ? formatCurrency(
+                                    project.relatedContract.budgetAmount,
+                                    getSettingValue,
+                                    currentLocaleCode
+                                  )
+                                : MASKED_VALUE
                               : commonT('labels.notAvailable')}
                           </dd>
                         </div>
@@ -4121,7 +4146,10 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             description={t('sections.costsDescription')}
             className="rounded-2xl border bg-card p-4 shadow-sm"
           >
-            <ProjectCostsSection projectId={projectId} />
+            <ProjectCostsSection
+              projectId={projectId}
+              valuesVisible={valuesVisible}
+            />
           </SectionCard>
         </TabsContent>
       </Tabs>

package/hedhog/frontend/app/_components/project-form-screen.tsx.ejs

@@ -111,6 +111,7 @@ type ProjectFormState = {
   managerCollaboratorId: string;
   code: string;
   name: string;
+  clientPersonId: string;
   clientName: string;
   summary: string;
   status: string;
@@ -173,6 +174,7 @@ function buildEmptyForm(
     managerCollaboratorId: 'none',
     code: '',
     name: '',
+    clientPersonId: '',
     clientName: '',
     summary: '',
     status: 'planning',
@@ -232,6 +234,9 @@ function toFormState(
       : 'none',
     code: project.code ?? '',
     name: project.name ?? '',
+    clientPersonId: project.clientPersonId
+      ? String(project.clientPersonId)
+      : '',
     clientName: project.clientName ?? '',
     summary: project.summary ?? '',
     status: project.status ?? 'planning',
@@ -651,6 +656,7 @@ export function ProjectFormScreen({
         managerCollaboratorId: z.string(),
         code: z.string().trim().min(1, t('messages.requiredFields')),
         name: z.string().trim().min(1, t('messages.requiredFields')),
+        clientPersonId: z.string(),
         clientName: z.string().trim().min(1, t('messages.requiredFields')),
         summary: z.string(),
         status: z.string(),
@@ -965,6 +971,9 @@ export function ProjectFormScreen({
         values.managerCollaboratorId === 'none'
           ? null
           : parseNumberInput(values.managerCollaboratorId),
+      clientPersonId: values.clientPersonId
+        ? parseNumberInput(values.clientPersonId)
+        : null,
       code: values.code.trim(),
       name: values.name.trim(),
       clientName: trimToNull(values.clientName),
@@ -1148,12 +1157,20 @@ export function ProjectFormScreen({
                       <PersonPicker
                         label=""
                         entityLabel={t('fields.clientName')}
-                        value={null}
+                        value={
+                          formMethods.watch('clientPersonId')
+                            ? Number(formMethods.watch('clientPersonId'))
+                            : null
+                        }
                         initialSelectedLabel={field.value}
                         selectPlaceholder={t('placeholders.clientName')}
-                        onChange={(_, personName) =>
-                          field.onChange(personName ?? '')
-                        }
+                        onChange={(personId, personName) => {
+                          field.onChange(personName ?? '');
+                          formMethods.setValue(
+                            'clientPersonId',
+                            personId ? String(personId) : ''
+                          );
+                        }}
                         personTypeFilter="all"
                         createType="company"
                       />

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>