@hed-hog/operations 0.0.330 → 0.0.332

package/src/dashboard/components/widget-registry.ts

@@ -0,0 +1,255 @@
+/**
+ * Widget Registry - Mapa de widgets do dashboard
+ * 
+ * Este arquivo centraliza todas as informações de widgets para o dashboard da operations.
+ * Os widgets são importados dinamicamente em runtime.
+ */
+
+export interface WidgetInfo {
+  slug: string;
+  title: string;
+  component: string;
+  roleSlug: string;
+  width: number;
+  height: number;
+  category: 'collaborator' | 'supervisor' | 'director';
+}
+
+// Widgets para Colaboradores (7)
+export const COLLABORATOR_WIDGETS: WidgetInfo[] = [
+  {
+    slug: 'my-hours-period-kpi',
+    title: 'Minhas Horas (Período)',
+    component: 'MyHoursPeriodKpi',
+    roleSlug: 'collaborator',
+    width: 6,
+    height: 2,
+    category: 'collaborator',
+  },
+  {
+    slug: 'my-timesheet-status-kpi',
+    title: 'Status do Timesheet',
+    component: 'MyTimesheetStatusKpi',
+    roleSlug: 'collaborator',
+    width: 6,
+    height: 2,
+    category: 'collaborator',
+  },
+  {
+    slug: 'my-project-allocations-kpi',
+    title: 'Minhas Alocações',
+    component: 'MyProjectAllocationsKpi',
+    roleSlug: 'collaborator',
+    width: 6,
+    height: 2,
+    category: 'collaborator',
+  },
+  {
+    slug: 'my-open-requests-kpi',
+    title: 'Requisições Abertas',
+    component: 'MyOpenRequestsKpi',
+    roleSlug: 'collaborator',
+    width: 6,
+    height: 2,
+    category: 'collaborator',
+  },
+  {
+    slug: 'my-weekly-journey',
+    title: 'Jornada Semanal',
+    component: 'MyWeeklyJourney',
+    roleSlug: 'collaborator',
+    width: 12,
+    height: 3,
+    category: 'collaborator',
+  },
+  {
+    slug: 'my-relevant-deadlines',
+    title: 'Prazos Relevantes',
+    component: 'MyRelevantDeadlines',
+    roleSlug: 'collaborator',
+    width: 6,
+    height: 3,
+    category: 'collaborator',
+  },
+  {
+    slug: 'my-pending-requests-list',
+    title: 'Requisições Pendentes',
+    component: 'MyPendingRequestsList',
+    roleSlug: 'collaborator',
+    width: 6,
+    height: 3,
+    category: 'collaborator',
+  },
+  {
+    slug: 'my-quick-actions',
+    title: 'Ações Rápidas',
+    component: 'MyQuickActions',
+    roleSlug: 'collaborator',
+    width: 12,
+    height: 2,
+    category: 'collaborator',
+  },
+];
+
+// Widgets para Supervisores (7)
+export const SUPERVISOR_WIDGETS: WidgetInfo[] = [
+  {
+    slug: 'team-pending-approvals-kpi',
+    title: 'Aprovações Pendentes',
+    component: 'TeamPendingApprovalsKpi',
+    roleSlug: 'supervisor',
+    width: 6,
+    height: 2,
+    category: 'supervisor',
+  },
+  {
+    slug: 'team-hours-kpi',
+    title: 'Horas do Time',
+    component: 'TeamHoursKpi',
+    roleSlug: 'supervisor',
+    width: 6,
+    height: 2,
+    category: 'supervisor',
+  },
+  {
+    slug: 'team-capacity-kpi',
+    title: 'Capacidade do Time',
+    component: 'TeamCapacityKpi',
+    roleSlug: 'supervisor',
+    width: 6,
+    height: 2,
+    category: 'supervisor',
+  },
+  {
+    slug: 'team-utilization-overview',
+    title: 'Utilização do Time',
+    component: 'TeamUtilizationOverview',
+    roleSlug: 'supervisor',
+    width: 6,
+    height: 2,
+    category: 'supervisor',
+  },
+  {
+    slug: 'team-workload-alerts',
+    title: 'Alertas de Carga',
+    component: 'TeamWorkloadAlerts',
+    roleSlug: 'supervisor',
+    width: 12,
+    height: 3,
+    category: 'supervisor',
+  },
+  {
+    slug: 'managed-projects-status',
+    title: 'Status dos Projetos',
+    component: 'ManagedProjectsStatus',
+    roleSlug: 'supervisor',
+    width: 6,
+    height: 3,
+    category: 'supervisor',
+  },
+  {
+    slug: 'team-approval-queue',
+    title: 'Fila de Aprovações',
+    component: 'TeamApprovalQueue',
+    roleSlug: 'supervisor',
+    width: 6,
+    height: 3,
+    category: 'supervisor',
+  },
+];
+
+// Widgets para Diretores (8)
+export const DIRECTOR_WIDGETS: WidgetInfo[] = [
+  {
+    slug: 'portfolio-costs-kpi',
+    title: 'Custos do Portfólio',
+    component: 'PortfolioCostsKpi',
+    roleSlug: 'director',
+    width: 6,
+    height: 2,
+    category: 'director',
+  },
+  {
+    slug: 'portfolio-effort-kpi',
+    title: 'Esforço do Portfólio',
+    component: 'PortfolioEffortKpi',
+    roleSlug: 'director',
+    width: 6,
+    height: 2,
+    category: 'director',
+  },
+  {
+    slug: 'portfolio-risk-kpi',
+    title: 'Risco do Portfólio',
+    component: 'PortfolioRiskKpi',
+    roleSlug: 'director',
+    width: 6,
+    height: 2,
+    category: 'director',
+  },
+  {
+    slug: 'project-status-overview',
+    title: 'Status dos Projetos',
+    component: 'ProjectStatusOverview',
+    roleSlug: 'director',
+    width: 6,
+    height: 2,
+    category: 'director',
+  },
+  {
+    slug: 'effort-by-project',
+    title: 'Esforço por Projeto',
+    component: 'EffortByProject',
+    roleSlug: 'director',
+    width: 12,
+    height: 3,
+    category: 'director',
+  },
+  {
+    slug: 'capacity-distribution',
+    title: 'Distribuição de Capacidade',
+    component: 'CapacityDistribution',
+    roleSlug: 'director',
+    width: 6,
+    height: 3,
+    category: 'director',
+  },
+  {
+    slug: 'headcount-by-area',
+    title: 'Headcount por Área',
+    component: 'HeadcountByArea',
+    roleSlug: 'director',
+    width: 6,
+    height: 3,
+    category: 'director',
+  },
+  {
+    slug: 'strategic-deadlines',
+    title: 'Prazos Estratégicos',
+    component: 'StrategicDeadlines',
+    roleSlug: 'director',
+    width: 12,
+    height: 3,
+    category: 'director',
+  },
+];
+
+// Registro completo de todos os widgets
+export const ALL_WIDGETS = [
+  ...COLLABORATOR_WIDGETS,
+  ...SUPERVISOR_WIDGETS,
+  ...DIRECTOR_WIDGETS,
+];
+
+// Acessores úteis
+export const getWidgetsByRole = (roleSlug: string): WidgetInfo[] => {
+  return ALL_WIDGETS.filter(w => w.roleSlug === roleSlug);
+};
+
+export const getWidgetBySlug = (slug: string): WidgetInfo | undefined => {
+  return ALL_WIDGETS.find(w => w.slug === slug);
+};
+
+export const getWidgetsByCategory = (category: 'collaborator' | 'supervisor' | 'director'): WidgetInfo[] => {
+  return ALL_WIDGETS.filter(w => w.category === category);
+};

package/src/dashboard/hooks/useDashboardData.ts

@@ -0,0 +1,29 @@
+/**
+ * Hook para buscar dados do dashboard de operations
+ * Cacheia dados por 60s usando react-query
+ * Filtra automaticamente por role do usuário
+ */
+
+import type { OperationsDashboardData } from '../types/widgets.types';
+
+type DashboardRequestFn = <T extends object>(config: {
+  url: string;
+  method: 'GET';
+}) => Promise<{ data: T }>;
+
+/**
+ * Loader enxuto para o payload agregado do dashboard.
+ * A camada de UI pode embrulhar isso em react-query sem repetir o contrato.
+ */
+export async function fetchDashboardData(request: DashboardRequestFn) {
+  const response = await request<OperationsDashboardData>({
+    url: '/operations/dashboard',
+    method: 'GET',
+  });
+
+  return response.data;
+}
+
+export async function useDashboardData(request: DashboardRequestFn) {
+  return fetchDashboardData(request);
+}

package/src/dashboard/types/widgets.types.ts

@@ -0,0 +1,237 @@
+/**
+ * Tipos para widgets do dashboard
+ */
+
+export interface OperationsDashboardData {
+  actor: {
+    roleScope: 'self' | 'team' | 'full';
+    collaboratorId: number | null;
+    collaboratorName: string | null;
+    teamSize: number;
+  };
+  cards: {
+    projectsTotal: number;
+    activeProjects: number;
+    visibleTimesheets: number;
+    pendingTimesheets: number;
+    timeOffRequests: number;
+    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;
+    weekStartDate: string;
+    weekEndDate: string;
+    totalHours: number | null;
+    status: string;
+  }>;
+}
+
+export interface DashboardWidgetProps {
+  slug: string;
+  title: string;
+  roleSlug: string; // operations-collaborator | admin-operations-supervisor | admin-operations-director
+}
+
+export interface CollaboratorLevelData {
+  myHoursPeriod: {
+    plannedHours: number;
+    approvedHours: number;
+    pendingHours: number;
+  };
+  timesheetStatus: {
+    submitted: number;
+    pending: number;
+    approved: number;
+  };
+  projectAllocations: {
+    active: number;
+    totalCapacity: number;
+    allocatedCapacity: number;
+  };
+  openRequests: {
+    totalOpen: number;
+    byType: Record<string, number>;
+  };
+  weeklyJourney: {
+    weekStartDate: string;
+    weekEndDate: string;
+    plannedHours: number;
+    workedHours: number;
+    dailyHours: Array<{
+      date: string;
+      planned: number;
+      worked: number;
+    }>;
+  };
+  relevantDeadlines: Array<{
+    id: number;
+    description: string;
+    dueDate: string;
+    type: 'delivery' | 'contract' | 'approval';
+    priority: 'high' | 'medium' | 'low';
+  }>;
+  pendingRequestsList: Array<{
+    id: number;
+    type: string;
+    title: string;
+    submittedAt: string;
+    status: string;
+  }>;
+  quickActions: {
+    timesheetLink: string;
+    requestsLink: string;
+    allocationsLink: string;
+  };
+}
+
+export interface SupervisorLevelData {
+  teamHeadcount: {
+    total: number;
+    active: number;
+    onLeave: number;
+  };
+  pendingApprovals: {
+    timesheets: number;
+    timeOff: number;
+    scheduleAdjustments: number;
+  };
+  teamHours: {
+    logged: number;
+    approved: number;
+    pending: number;
+  };
+  teamCapacity: {
+    total: number;
+    allocated: number;
+    available: number;
+  };
+  teamUtilizationOverview: {
+    byPeriod: Array<{
+      period: string;
+      allocation: number;
+      effort: number;
+      availability: number;
+    }>;
+  };
+  workloadAlerts: Array<{
+    collaboratorId: number;
+    collaboratorName: string;
+    alertType: 'overload' | 'underutilized' | 'conflict';
+    severity: 'high' | 'medium' | 'low';
+    message: string;
+  }>;
+  managedProjectsStatus: Array<{
+    projectId: number;
+    projectName: string;
+    status: string;
+    progress: number;
+    health: 'green' | 'yellow' | 'red';
+  }>;
+  approvalQueue: Array<{
+    id: number;
+    itemType: string;
+    itemTitle: string;
+    submittedBy: string;
+    submittedAt: string;
+    priority: 'high' | 'medium' | 'low';
+  }>;
+}
+
+export interface DirectorLevelData {
+  portfolioProjects: {
+    total: number;
+    active: number;
+    completed: number;
+  };
+  portfolioCosts: {
+    planned: number;
+    actual: number;
+    variance: number;
+  };
+  portfolioEffort: {
+    delivered: number;
+    inProgress: number;
+    planned: number;
+  };
+  portfolioRisk: Array<{
+    projectId: number;
+    projectName: string;
+    riskLevel: 'high' | 'medium' | 'low';
+    description: string;
+  }>;
+  projectStatusOverview: Array<{
+    projectId: number;
+    projectName: string;
+    status: string;
+    scheduleHealth: number; // 0-100
+    costHealth: number; // 0-100
+    deliveryHealth: number; // 0-100
+  }>;
+  effortByProject: Array<{
+    projectId: number;
+    projectName: string;
+    allocatedEffort: number;
+    percentOfTotal: number;
+  }>;
+  capacityDistribution: Array<{
+    teamName: string;
+    capacity: number;
+    utilized: number;
+    available: number;
+  }>;
+  headcountByArea: Array<{
+    areaName: string;
+    headcount: number;
+    percentOfTotal: number;
+  }>;
+  strategicDeadlines: Array<{
+    description: string;
+    dueDate: string;
+    impact: 'critical' | 'high' | 'medium' | 'low';
+    status: 'onTrack' | 'atRisk' | 'delayed';
+  }>;
+}

package/src/dashboard/widgets/CapacityDistribution.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+import { PieChart } from 'lucide-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 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">Nenhuma área com capacidade</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">Capacidade Total</p><p className="text-2xl font-bold text-teal-600">{data.totalCapacity}h</p></div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CapacityDistribution;

package/src/dashboard/widgets/EffortByProject.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { BarChart3 } from 'lucide-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 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">Nenhum projeto com esforço</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">Esforço Total</p><p className="text-2xl font-bold text-pink-600">{data.totalHours}h</p></div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EffortByProject;

package/src/dashboard/widgets/HeadcountByArea.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import { Users } from 'lucide-react';
+
+interface DepartmentHeadcount {
+  name: string;
+  count: number;
+  percentage: number;
+  maxCapacity: number;
+  utilization: number;
+  icon: string;
+}
+
+interface HeadcountByAreaProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { departments: DepartmentHeadcount[]; totalHeadcount: number };
+  style?: React.CSSProperties;
+}
+
+const HeadcountByArea: React.FC<HeadcountByAreaProps> = ({
+  title,
+  data = { departments: [], totalHeadcount: 0 },
+  style,
+}) => {
+  const colorMap = ['blue', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'green'];
+  return (
+    <div className="bg-linear-to-br from-white to-blue-50 rounded-lg shadow-sm p-4 border border-blue-100" style={style}>
+      <div className="flex items-center justify-between mb-4"><h3 className="text-sm font-medium text-gray-700">{title}</h3><Users className="w-4 h-4 text-blue-600" /></div>
+      <div className="space-y-3">
+        {data.departments.length === 0 ? (
+          <div className="text-center py-6 text-gray-500"><Users className="w-8 h-8 mx-auto mb-2 opacity-50" /><p className="text-sm">Nenhuma área com colaboradores</p></div>
+        ) : (
+          <>
+            {data.departments.map((dept, idx) => (
+              <div key={idx} className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 flex-1"><span className="text-lg">{dept.icon}</span><span className="text-xs font-medium text-gray-900 truncate">{dept.name}</span></div>
+                  <span className="text-xs font-bold text-gray-700 ml-2">{dept.count}</span>
+                </div>
+                <div className="relative w-full h-4 bg-gray-100 rounded-full overflow-hidden border border-gray-200"><div className={`h-full bg-${colorMap[idx % colorMap.length]}-500 transition-all`} style={{ width: `${(dept.count / Math.max(...data.departments.map(d => d.count))) * 100}%` }} /></div>
+                <div className="flex justify-between text-xs text-gray-600"><span>{dept.percentage}% total</span><span>{dept.utilization}% capacidade</span></div>
+              </div>
+            ))}
+            <div className="pt-3 border-t border-blue-100 bg-blue-50 rounded-lg p-3 text-center"><p className="text-xs text-blue-700 mb-1">Total de Colaboradores</p><p className="text-3xl font-bold text-blue-600">{data.totalHeadcount}</p></div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HeadcountByArea;