@hed-hog/operations 0.0.330 → 0.0.331

package/src/dashboard/components/DashboardLayout.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+/**
+ * Dashboard Principal - Renderiza widgets conforme role do usuário
+ * 
+ * Fluxo:
+ * 1. Detecta role do usuário (collaborator/supervisor/director)
+ * 2. Busca dados via GET /operations/dashboard
+ * 3. Renderiza widgets apropriados para a role
+ * 4. Cada widget é um componente reutilizável
+ */
+
+import React, { useMemo } from 'react';
+
+// Tipos de widgets por role
+interface WidgetDefinition {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width: number;
+  height: number;
+  xAxis: number;
+  yAxis: number;
+  componentPath: string;
+}
+
+// Mapear slugs aos componentes - importados dinamicamente do admin app
+// Os widgets estão em: apps/admin/src/app/(app)/(libraries)/operations/dashboard/widgets/
+const WIDGET_REGISTRY: Record<string, React.ComponentType<any>> = {};
+
+// Lazy loading de widgets - para evitar imports circulares
+const getWidget = (slug: string): React.ComponentType<any> | null => {
+  // Este mapa será populado em runtime via importação dinâmica
+  // Por enquanto, retorna null se widget não estiver pronto
+  return WIDGET_REGISTRY[slug] || null;
+};
+
+interface DashboardLayoutProps {
+  roleSlugs: string[];
+  dashboardSlug: string;
+  widgets: WidgetDefinition[];
+  data: any;
+  isLoading?: boolean;
+}
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+  roleSlugs,
+  dashboardSlug,
+  widgets,
+  data,
+  isLoading = false,
+}) => {
+  // Filtrar widgets para a role atual
+  const visibleWidgets = useMemo(() => {
+    return widgets.filter(widget => 
+      roleSlugs.includes(widget.roleSlug)
+    );
+  }, [widgets, roleSlugs]);
+
+  if (isLoading) {
+    return (
+      <div className="grid gap-4 w-full h-full">
+        {Array(4).fill(0).map((_, i) => (
+          <div 
+            key={i} 
+            className="bg-gray-200 rounded-lg animate-pulse"
+            style={{ minHeight: '200px' }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 w-full auto-rows-max" 
+         style={{
+           gridTemplateColumns: 'repeat(12, 1fr)',
+         }}>
+      {visibleWidgets.map(widget => {
+        const Component = WIDGET_REGISTRY[widget.slug];
+        
+        if (!Component) {
+          return (
+            <div 
+              key={widget.slug}
+              style={{
+                gridColumn: `span ${Math.min(widget.width, 12)}`,
+                gridRow: `auto / span ${widget.height}`,
+              }}
+              className="bg-red-50 border-2 border-red-200 rounded-lg p-4"
+            >
+              <p className="text-red-700 text-sm">
+                Component not found: {widget.slug}
+              </p>
+            </div>
+          );
+        }
+
+        return (
+          <React.Suspense 
+            key={widget.slug}
+            fallback={
+              <div 
+                style={{
+                  gridColumn: `span ${Math.min(widget.width, 12)}`,
+                  gridRow: `auto / span ${widget.height}`,
+                }}
+                className="bg-gray-200 rounded-lg animate-pulse"
+              />
+            }
+          >
+            <Component
+              slug={widget.slug}
+              title={widget.title}
+              roleSlug={roleSlugs[0]}
+              width={widget.width}
+              height={widget.height}
+              data={data?.[widget.slug]}
+              style={{
+                gridColumn: `span ${Math.min(widget.width, 12)}`,
+                gridRow: `auto / span ${widget.height}`,
+              }}
+            />
+          </React.Suspense>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DashboardLayout;

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;