@hed-hog/operations 0.0.329 → 0.0.331

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/_lib/types.ts.ejs

@@ -20,6 +20,19 @@ export type OperationsTaskComment = {
   updatedAt: string | null;
 };
 
+export type OperationsTaskActivity = {
+  id: number;
+  taskId: number;
+  actorCollaboratorId: number | null;
+  actorName: string | null;
+  actorUserPhotoId: number | null;
+  actorPersonAvatarId: number | null;
+  action: string | null;
+  fromStatus: string;
+  toStatus: string;
+  createdAt: string;
+};
+
 export type OperationsDashboard = {
   actor: {
     roleScope: 'self' | 'team' | 'full';
@@ -36,6 +49,48 @@ export type OperationsDashboard = {
     scheduleAdjustmentRequests: number;
     pendingApprovals: number;
   };
+  windowDays: number;
+  taskSummary: {
+    total: number;
+    backlog: number;
+    inProgress: number;
+    completed: number;
+  };
+  avgTaskCompletionHours: number;
+  completedTasksInWindow: number;
+  hoursInExecution: number;
+  timesheetHeatmap: Array<{
+    workDate: string;
+    weekday: number;
+    hours: number;
+  }>;
+  activeProjects: Array<{
+    id: number;
+    name: string;
+    code?: string | null;
+    taskBacklog: number;
+    taskInProgress: number;
+    taskCompleted: number;
+  }>;
+  recentTaskActivities: Array<{
+    taskId: number;
+    taskName: string;
+    taskStatus: string;
+    taskPriority?: string | null;
+    taskDueDate?: string | null;
+    taskEstimateHours?: number | null;
+    taskTags?: string | null;
+    taskAssigneeCollaboratorId?: number | null;
+    taskAssigneeName?: string | null;
+    projectId: number;
+    projectName: string;
+    projectCode?: string | null;
+    projectAssignmentId?: number | null;
+    action?: string | null;
+    fromStatus: string;
+    toStatus: string;
+    createdAt: string;
+  }>;
   recentTimesheets: Array<{
     id: number;
     collaboratorName: string;
@@ -260,6 +315,7 @@ export type OperationsCollaborator = {
   supervisorName?: string | null;
   contractId?: number | null;
   contractStatus?: string | null;
+  hasUser?: boolean | null;
   activeAssignments?: number;
   pendingApprovals?: number;
   pendingTimeOffRequests?: number;
@@ -354,18 +410,21 @@ export type OperationsTaskOption = {
   description?: string | null;
   status: string;
   priority?: string | null;
+  assigneeCollaboratorId?: number | null;
   projectId: number;
   projectAssignmentId: number | null;
   projectName: string;
-  projectCode?: string | null;
-  dueDate?: string | null;
-  estimateHours?: number | null;
-  tags?: string | null;
-  assigneeName?: string | null;
+  projectCode?: string | null;
+  dueDate?: string | null;
+  estimateHours?: number | null;
+  tags?: string | null;
+  assigneeName?: string | null;
   assigneeUserPhotoId?: number | null;
   assigneePersonAvatarId?: number | null;
   commentCount?: number | null;
   fileCount?: number | null;
+  doingStartedAt?: string | null;
+  totalDoingMinutes?: number | null;
   createdAt?: string | null;
   deletedAt?: string | null;
 };
@@ -659,6 +718,8 @@ export type OperationsMyProjectSummary = {
     assigneeUserPhotoId: number | null;
     assigneePersonAvatarId: number | null;
     projectAssignmentId: number | null;
+    doingStartedAt?: string | null;
+    totalDoingMinutes?: number | null;
     createdAt: string;
   }>;
 };

package/hedhog/frontend/app/_lib/utils/format.ts.ejs

@@ -222,8 +222,6 @@ export function getStatusBadgeClass(value?: string | null) {
     case 'inactive':
     case 'on_leave':
       return 'bg-slate-100 text-slate-800';
-    case 'at_risk':
-      return 'bg-orange-100 text-orange-900';
     default:
       return 'bg-sky-100 text-sky-800';
   }

package/hedhog/frontend/app/_lib/utils/task-ui.ts.ejs

@@ -0,0 +1,43 @@
+export function getTaskPriorityLabel(value?: string | null) {
+  const labels: Record<string, string> = {
+    low: 'Baixa',
+    medium: 'Média',
+    high: 'Alta',
+  };
+  return labels[value ?? ''] ?? String(value ?? '');
+}
+
+export function getInitials(value?: string | null) {
+  const parts = String(value ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+  if (!parts.length) return '??';
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
+}
+
+export function getElapsedDoingMinutes(
+  task?: {
+    status?: string | null;
+    doingStartedAt?: string | null;
+    totalDoingMinutes?: number | null;
+  } | null,
+  tick = 0
+) {
+  void tick;
+  const base = Number(task?.totalDoingMinutes ?? 0);
+  if (!task || task.status !== 'doing' || !task.doingStartedAt) return base;
+  const startedAt = new Date(task.doingStartedAt).getTime();
+  if (Number.isNaN(startedAt)) return base;
+  return base + Math.max(Math.floor((Date.now() - startedAt) / 60000), 0);
+}
+
+export function formatDurationMinutes(minutes?: number | null) {
+  const total = Math.max(Number(minutes ?? 0), 0);
+  const hours = Math.floor(total / 60);
+  const remainingMinutes = total % 60;
+  if (hours <= 0) return `${remainingMinutes}min`;
+  if (remainingMinutes <= 0) return `${hours}h`;
+  return `${hours}h ${remainingMinutes}min`;
+}

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

@@ -57,6 +57,7 @@ import {
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations } from '../_lib/api';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type { OperationsApproval, PaginatedResponse } from '../_lib/types';
 import {
@@ -146,10 +147,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 +170,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}
@@ -230,7 +233,11 @@ export default function OperationsApprovalsPage() {
     () => new Date().getMonth() + 1
   );
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-approvals:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<'table' | 'cards' | 'calendar'>(
     () => {
       if (typeof window === 'undefined') return 'table';
@@ -1176,6 +1183,7 @@ export default function OperationsApprovalsPage() {
                             days={selectedApproval.currentSchedule ?? []}
                             locale={currentLocaleCode}
                             emptyLabel={commonT('labels.notAssigned')}
+                            dayOffLabel={commonT('labels.dayOff')}
                           />
                         </div>
                       </div>
@@ -1188,6 +1196,7 @@ export default function OperationsApprovalsPage() {
                             days={selectedApproval.days ?? []}
                             locale={currentLocaleCode}
                             emptyLabel={commonT('labels.notAssigned')}
+                            dayOffLabel={commonT('labels.dayOff')}
                           />
                         </div>
                       </div>

package/hedhog/frontend/app/collaborator-types/page.tsx.ejs

@@ -55,6 +55,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type {
   OperationsCollaboratorType,
@@ -195,7 +196,11 @@ export default function OperationsCollaboratorTypesPage() {
     'all' | 'active' | 'inactive'
   >('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(100);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-collaborator-types:pageSize',
+    defaultValue: 100,
+    allowedValues: [25, 50, 100, 200],
+  });
   const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
     if (typeof window === 'undefined') return 'table';
     const saved = window.localStorage.getItem(

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,
@@ -45,6 +47,7 @@ import {
   UserCheck,
   UserRound,
   Users,
+  UserX,
   Wallet,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -55,7 +58,12 @@ import { CollaboratorFormScreen } from '../_components/collaborator-form-screen'
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import {
+  MASKED_VALUE,
+  useValuesVisibility,
+} from '../_lib/hooks/use-values-visibility';
 import type {
   OperationsCollaborator,
   OperationsCollaboratorStats,
@@ -115,7 +123,11 @@ export default function OperationsCollaboratorsPage() {
   const [statusFilter, setStatusFilter] = useState('all');
   const [typeFilter, setTypeFilter] = useState('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-collaborators:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<CollaboratorViewMode>(() => {
     if (typeof window === 'undefined') {
       return 'table';
@@ -128,6 +140,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 +358,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 +377,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 +396,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 +415,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 +434,7 @@ export default function OperationsCollaboratorsPage() {
     formatCurrency,
     getSettingValue,
     currentLocaleCode,
+    valuesVisible,
   ]);
 
   const handleViewModeChange = (value: string) => {
@@ -452,13 +474,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 +656,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>
@@ -653,6 +691,20 @@ export default function OperationsCollaboratorsPage() {
                     </div>
                   ) : null}
 
+                  <div className="flex items-center gap-2 text-xs">
+                    {collaborator.hasUser ? (
+                      <span className="inline-flex items-center gap-1 font-medium text-emerald-600 dark:text-emerald-400">
+                        <UserCheck className="size-3.5" />
+                        {t('columns.linkedUserYes')}
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center gap-1 font-medium text-muted-foreground">
+                        <UserX className="size-3.5" />
+                        {t('columns.linkedUserNo')}
+                      </span>
+                    )}
+                  </div>
+
                   <div className="flex items-center justify-end gap-1.5 border-t border-border/60 pt-3">
                     {access.isDirector ? (
                       <Button
@@ -718,14 +770,32 @@ export default function OperationsCollaboratorsPage() {
                   <TableHead className="hidden lg:table-cell">
                     {commonT('labels.supervisor')}
                   </TableHead>
-                  <TableHead className="hidden xl:table-cell">
-                    {commonT('labels.weeklyCapacity')}
+                  <TableHead className="hidden 2xl:table-cell">
+                    <span
+                      className="block truncate"
+                      title={commonT('labels.weeklyCapacity')}
+                    >
+                      {commonT('labels.weeklyCapacity')}
+                    </span>
+                  </TableHead>
+                  <TableHead className="hidden 2xl:table-cell">
+                    <span
+                      className="block truncate"
+                      title={formT('fields.compensationAmount')}
+                    >
+                      {formT('fields.compensationAmount')}
+                    </span>
                   </TableHead>
                   <TableHead className="hidden 2xl:table-cell">
-                    {formT('fields.compensationAmount')}
+                    <span
+                      className="block truncate"
+                      title={commonT('labels.startDate')}
+                    >
+                      {commonT('labels.startDate')}
+                    </span>
                   </TableHead>
-                  <TableHead className="hidden xl:table-cell">
-                    {commonT('labels.startDate')}
+                  <TableHead className="hidden md:table-cell">
+                    {t('columns.linkedUser')}
                   </TableHead>
                   <TableHead className="w-30 text-right sm:w-42.5">
                     {commonT('labels.actions')}
@@ -818,25 +888,40 @@ export default function OperationsCollaboratorsPage() {
                           commonT('labels.notAssigned')}
                       </div>
                     </TableCell>
-                    <TableCell className="hidden xl:table-cell">
+                    <TableCell className="hidden 2xl:table-cell">
                       {formatHours(collaborator.weeklyCapacityHours)}
                     </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">
+                    <TableCell className="hidden 2xl:table-cell">
                       {formatDate(
                         collaborator.joinedAt,
                         getSettingValue,
                         currentLocaleCode
                       )}
                     </TableCell>
+                    <TableCell className="hidden md:table-cell">
+                      {collaborator.hasUser ? (
+                        <span className="inline-flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">
+                          <UserCheck className="size-3.5" />
+                          {t('columns.linkedUserYes')}
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground">
+                          <UserX className="size-3.5" />
+                          {t('columns.linkedUserNo')}
+                        </span>
+                      )}
+                    </TableCell>
                     <TableCell>
                       <div className="flex items-center justify-end gap-1.5">
                         {access.isDirector ? (