@hed-hog/operations 0.0.330 → 0.0.331

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 {
@@ -232,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';

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

@@ -47,6 +47,7 @@ import {
   UserCheck,
   UserRound,
   Users,
+  UserX,
   Wallet,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -57,6 +58,7 @@ 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,
@@ -121,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';
@@ -685,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
@@ -750,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">
-                    {formT('fields.compensationAmount')}
+                    <span
+                      className="block truncate"
+                      title={formT('fields.compensationAmount')}
+                    >
+                      {formT('fields.compensationAmount')}
+                    </span>
                   </TableHead>
-                  <TableHead className="hidden xl:table-cell">
-                    {commonT('labels.startDate')}
+                  <TableHead className="hidden 2xl:table-cell">
+                    <span
+                      className="block truncate"
+                      title={commonT('labels.startDate')}
+                    >
+                      {commonT('labels.startDate')}
+                    </span>
+                  </TableHead>
+                  <TableHead className="hidden md:table-cell">
+                    {t('columns.linkedUser')}
                   </TableHead>
                   <TableHead className="w-30 text-right sm:w-42.5">
                     {commonT('labels.actions')}
@@ -850,7 +888,7 @@ 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">
@@ -864,13 +902,26 @@ export default function OperationsCollaboratorsPage() {
                           : 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 ? (

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

@@ -58,6 +58,7 @@ import { ContractFormScreen } from '../_components/contract-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 type {
   OperationsContract,
@@ -97,7 +98,11 @@ export default function OperationsContractsPage() {
   const [search, setSearch] = useState('');
   const [isActiveFilter, setIsActiveFilter] = useState('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-contracts:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
   const [contractToDelete, setContractToDelete] =
     useState<OperationsContract | null>(null);
@@ -159,7 +164,10 @@ export default function OperationsContractsPage() {
   const { data: stats } = useQuery<OperationsContractStats>({
     queryKey: ['operations-contracts-stats', currentLocaleCode],
     queryFn: () =>
-      fetchOperations<OperationsContractStats>(request, '/operations/contracts/stats'),
+      fetchOperations<OperationsContractStats>(
+        request,
+        '/operations/contracts/stats'
+      ),
   });
 
   const rows = contractsResponse?.data ?? [];
@@ -206,7 +214,11 @@ export default function OperationsContractsPage() {
       ) ?? null;
 
     if (document?.fileId) {
-      window.open(buildStoredFileUrl(document.fileId) || '', '_blank', 'noopener,noreferrer');
+      window.open(
+        buildStoredFileUrl(document.fileId) || '',
+        '_blank',
+        'noopener,noreferrer'
+      );
       return;
     }
 
@@ -288,7 +300,9 @@ export default function OperationsContractsPage() {
         </DropdownMenuItem>
         {access.isDirector ? <DropdownMenuSeparator /> : null}
         {access.isDirector ? (
-          <DropdownMenuItem onSelect={() => updateSheetQuery({ editId: contract.id })}>
+          <DropdownMenuItem
+            onSelect={() => updateSheetQuery({ editId: contract.id })}
+          >
             <Pencil className="size-4" />
             {commonT('actions.edit')}
           </DropdownMenuItem>
@@ -300,7 +314,9 @@ export default function OperationsContractsPage() {
             ) : (
               <ShieldCheck className="size-4" />
             )}
-            {contract.isActive ? detailT('labels.inactive') : detailT('labels.active')}
+            {contract.isActive
+              ? detailT('labels.inactive')
+              : detailT('labels.active')}
           </DropdownMenuItem>
         ) : null}
         {access.isDirector ? <DropdownMenuSeparator /> : null}
@@ -384,7 +400,9 @@ export default function OperationsContractsPage() {
                 <TableRow
                   key={contract.id}
                   className="cursor-pointer hover:bg-muted/30"
-                  onClick={() => router.push(`/operations/contracts/${contract.id}`)}
+                  onClick={() =>
+                    router.push(`/operations/contracts/${contract.id}`)
+                  }
                 >
                   <TableCell>
                     <div className="min-w-0">
@@ -401,7 +419,8 @@ export default function OperationsContractsPage() {
                   </TableCell>
                   <TableCell>
                     <span className="truncate text-sm text-muted-foreground">
-                      {contract.currentPdfFileName || commonT('labels.notAvailable')}
+                      {contract.currentPdfFileName ||
+                        commonT('labels.notAvailable')}
                     </span>
                   </TableCell>
                   <TableCell>
@@ -510,7 +529,9 @@ export default function OperationsContractsPage() {
         <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
           <SheetHeader className="sr-only">
             <SheetTitle>
-              {editingContractId ? commonT('actions.edit') : commonT('actions.create')}
+              {editingContractId
+                ? commonT('actions.edit')
+                : commonT('actions.create')}
             </SheetTitle>
             <SheetDescription>{t('description')}</SheetDescription>
           </SheetHeader>

package/hedhog/frontend/app/dashboard/widgets/CapacityDistribution.tsx.ejs

@@ -0,0 +1,84 @@
+'use client';
+
+import { PieChart } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface CapacityArea {
+  name: string;
+  capacity: number;
+  percentage: number;
+  color: string;
+  icon: string;
+}
+
+interface CapacityDistributionProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { areas: CapacityArea[]; totalCapacity: number };
+  style?: React.CSSProperties;
+}
+
+const CapacityDistribution: React.FC<CapacityDistributionProps> = ({
+  title,
+  data = { areas: [], totalCapacity: 0 },
+  style,
+}) => {
+  const t = useTranslations('operations.CapacityDistribution');
+  const colorMap = ['blue', 'purple', 'pink', 'green', 'yellow', 'red'];
+  return (
+    <div
+      className="bg-linear-to-br from-white to-teal-50 rounded-lg shadow-sm p-4 border border-teal-100"
+      style={style}
+    >
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        <PieChart className="w-4 h-4 text-teal-600" />
+      </div>
+      <div className="space-y-3">
+        {data.areas.length === 0 ? (
+          <div className="text-center py-6 text-gray-500">
+            <PieChart className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">{t('empty')}</p>
+          </div>
+        ) : (
+          <>
+            {data.areas.map((area, idx) => (
+              <div key={idx} className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">{area.icon}</span>
+                    <span className="text-xs font-medium text-gray-900 truncate">
+                      {area.name}
+                    </span>
+                  </div>
+                  <span className="text-xs font-bold text-gray-700">
+                    {area.percentage}%
+                  </span>
+                </div>
+                <div className="relative w-full h-3 bg-gray-100 rounded-full overflow-hidden">
+                  <div
+                    className={`h-full bg-${colorMap[idx % colorMap.length]}-500 transition-all`}
+                    style={{ width: `${area.percentage}%` }}
+                  />
+                </div>
+                <div className="text-xs text-gray-600">{area.capacity}h</div>
+              </div>
+            ))}
+            <div className="pt-3 border-t border-teal-100 bg-teal-50 rounded-lg p-3 text-center">
+              <p className="text-xs text-teal-700 mb-1">{t('total')}</p>
+              <p className="text-2xl font-bold text-teal-600">
+                {data.totalCapacity}h
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CapacityDistribution;

package/hedhog/frontend/app/dashboard/widgets/EffortByProject.tsx.ejs

@@ -0,0 +1,85 @@
+'use client';
+
+import { BarChart3 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface ProjectEffort {
+  name: string;
+  hours: number;
+  percent: number;
+  color: string;
+}
+
+interface EffortByProjectProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { projects: ProjectEffort[]; totalHours: number };
+  style?: React.CSSProperties;
+}
+
+const EffortByProject: React.FC<EffortByProjectProps> = ({
+  title,
+  data = { projects: [], totalHours: 0 },
+  style,
+}) => {
+  const t = useTranslations('operations.EffortByProject');
+  const colorMap = [
+    'bg-blue-500',
+    'bg-purple-500',
+    'bg-pink-500',
+    'bg-green-500',
+    'bg-orange-500',
+  ];
+  return (
+    <div
+      className="bg-linear-to-br from-white to-pink-50 rounded-lg shadow-sm p-4 border border-pink-100"
+      style={style}
+    >
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        <BarChart3 className="w-4 h-4 text-pink-600" />
+      </div>
+      <div className="space-y-3">
+        {data.projects.length === 0 ? (
+          <div className="text-center py-6 text-gray-500">
+            <BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">{t('empty')}</p>
+          </div>
+        ) : (
+          <>
+            {data.projects.slice(0, 5).map((project, idx) => (
+              <div key={idx} className="space-y-1">
+                <div className="flex justify-between items-center">
+                  <span className="text-xs font-medium text-gray-900 truncate">
+                    {project.name}
+                  </span>
+                  <span className="text-xs font-bold text-gray-700">
+                    {project.hours}h ({project.percent}%)
+                  </span>
+                </div>
+                <div className="relative w-full h-4 bg-gray-100 rounded-full overflow-hidden">
+                  <div
+                    className={`h-full ${colorMap[idx % colorMap.length]} transition-all`}
+                    style={{ width: `${project.percent}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+            <div className="pt-2 border-t border-pink-100 text-center">
+              <p className="text-xs text-gray-600 mb-1">{t('total')}</p>
+              <p className="text-2xl font-bold text-pink-600">
+                {data.totalHours}h
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EffortByProject;