@hed-hog/operations 0.0.330 → 0.0.331

package/src/dashboard/widgets/MyWeeklyJourney.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import { Calendar } from 'lucide-react';
+
+interface MyWeeklyJourneyProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: {
+    weekDays: Array<{ day: string; hours: number; status: 'completed' | 'pending' | 'off' }>;
+    weekProgress: number;
+    targetHours: number;
+  };
+  style?: React.CSSProperties;
+}
+
+const MyWeeklyJourney: React.FC<MyWeeklyJourneyProps> = ({
+  title,
+  data = { weekDays: [], weekProgress: 60, targetHours: 40 },
+  style,
+}) => {
+  const totalHours = data.weekDays.reduce((sum, day) => sum + day.hours, 0);
+  const progressPercent = Math.min(Math.round((totalHours / data.targetHours) * 100), 100);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed': return 'bg-gradient-to-t from-green-500 to-green-400';
+      case 'pending': return 'bg-gradient-to-t from-gray-300 to-gray-200';
+      default: return 'bg-gradient-to-t from-gray-100 to-gray-50';
+    }
+  };
+
+  return (
+    <div className="bg-linear-to-br from-white to-cyan-50 rounded-lg shadow-sm p-4 border border-cyan-100" style={style}>
+      <div className="flex items-center justify-between mb-4"><h3 className="text-sm font-medium text-gray-700">{title}</h3><Calendar className="w-4 h-4 text-cyan-600" /></div>
+      <div className="space-y-2 mb-3">
+        <div className="flex justify-between items-center"><span className="text-xs font-medium text-gray-700">Progresso da Semana</span><span className="text-xs font-bold text-cyan-600">{progressPercent}%</span></div>
+        <div className="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden"><div className="h-full bg-linear-to-r from-cyan-400 to-cyan-600 rounded-full transition-all" style={{ width: `${progressPercent}%` }} /></div>
+        <div className="flex justify-between text-xs text-gray-600"><span>{totalHours}h registradas</span><span>{data.targetHours}h meta</span></div>
+      </div>
+      <div className="text-xs font-medium text-gray-700 mb-2">Horas por dia</div>
+      <div className="flex items-end justify-between gap-1 h-24 bg-gradient-to-b from-cyan-50 to-white rounded-lg p-3 border border-cyan-100">
+        {data.weekDays.map((day, idx) => (
+          <div key={idx} className="flex flex-col items-center flex-1 gap-1">
+            <div className={`w-full rounded-t transition-all ${getStatusColor(day.status)}`} style={{ height: day.status === 'off' ? '8px' : `${Math.max((day.hours / 10) * 100, 8)}%`, minHeight: day.status === 'off' ? '8px' : '12px' }} />
+            <div className="text-xs font-semibold text-gray-700">{day.day}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MyWeeklyJourney;

package/src/dashboard/widgets/PortfolioCostsKpi.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React from 'react';
+import { DollarSign, TrendingDown } from 'lucide-react';
+
+interface PortfolioCostsKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { totalCosts: number; budgetAmount: number; costsByCategoryCount: number; savingsPercent: number; costTrend: 'up' | 'down' | 'stable' };
+  style?: React.CSSProperties;
+}
+
+const PortfolioCostsKpi: React.FC<PortfolioCostsKpiProps> = ({
+  title,
+  data = { totalCosts: 0, budgetAmount: 0, costsByCategoryCount: 0, savingsPercent: 0, costTrend: 'stable' },
+  style,
+}) => {
+  const budgetUtilization = Math.round((data.totalCosts / data.budgetAmount) * 100);
+  const isBudgetHealth = budgetUtilization <= 85;
+  return (
+    <div className="bg-linear-to-br from-white to-green-50 rounded-lg shadow-sm p-4 border border-green-100" style={style}>
+      <div className="flex items-center justify-between mb-4"><h3 className="text-sm font-medium text-gray-700">{title}</h3><DollarSign className="w-4 h-4 text-green-600" /></div>
+      <div className="bg-linear-to-r from-green-500 to-emerald-600 rounded-lg p-4 text-white mb-3">
+        <div className="flex items-center justify-between">
+          <div><div className="text-xs opacity-90">Custos Totais</div><div className="text-3xl font-bold">{(data.totalCosts / 1000).toFixed(1)}k</div></div>
+          <DollarSign className="w-12 h-12 opacity-30" />
+        </div>
+      </div>
+      <div className="space-y-2">
+        <div className="flex justify-between items-center"><span className="text-xs font-medium text-gray-700">Utilização do Orçamento</span><span className={`text-sm font-bold px-2 py-1 rounded-full ${isBudgetHealth ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>{budgetUtilization}%</span></div>
+        <div className="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden"><div className={`h-full transition-all duration-500 ease-out rounded-full ${isBudgetHealth ? 'bg-linear-to-r from-green-400 to-green-600' : 'bg-linear-to-r from-yellow-400 to-yellow-600'}`} style={{ width: `${Math.min(budgetUtilization, 100)}%` }} /></div>
+        <div className="flex justify-between text-xs text-gray-600"><span>R$ {(data.totalCosts / 1000).toFixed(1)}k gasto</span><span>R$ {(data.budgetAmount / 1000).toFixed(1)}k orçado</span></div>
+      </div>
+      <div className="grid grid-cols-2 gap-2 bg-green-50 rounded-lg p-3 border border-green-200 mt-3">
+        <div><div className="text-xs text-gray-600 mb-1">Economias</div><div className="text-2xl font-bold text-green-600">{data.savingsPercent}%</div></div>
+        <div><div className="text-xs text-gray-600 mb-1">Tendência</div><div className={`text-sm font-bold flex items-center gap-1 ${data.costTrend === 'down' ? 'text-green-600' : data.costTrend === 'up' ? 'text-red-600' : 'text-gray-600'}`}>
+          {data.costTrend === 'down' && '📉'}{data.costTrend === 'up' && '📈'}{data.costTrend === 'stable' && '➡️'}
+          {data.costTrend === 'down' ? 'Reduzindo' : data.costTrend === 'up' ? 'Aumentando' : 'Estável'}
+        </div></div>
+      </div>
+    </div>
+  );
+};
+
+export default PortfolioCostsKpi;

package/src/dashboard/widgets/PortfolioEffortKpi.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import React from 'react';
+import { Activity, Clock } from 'lucide-react';
+
+interface PortfolioEffortKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { totalEffortHours: number; allocatedHours: number; availableHours: number; effortUtilization: number };
+  style?: React.CSSProperties;
+}
+
+const PortfolioEffortKpi: React.FC<PortfolioEffortKpiProps> = ({
+  title,
+  data = { totalEffortHours: 0, allocatedHours: 0, availableHours: 0, effortUtilization: 0 },
+  style,
+}) => (
+  <div className="bg-linear-to-br from-white to-orange-50 rounded-lg shadow-sm p-4 border border-orange-100" style={style}>
+    <div className="flex items-center justify-between mb-4"><h3 className="text-sm font-medium text-gray-700">{title}</h3><Activity className="w-4 h-4 text-orange-600" /></div>
+    <div className="bg-linear-to-r from-orange-500 to-amber-600 rounded-lg p-4 text-white mb-3">
+      <div className="flex items-center justify-between">
+        <div><div className="text-xs opacity-90">Esforço Total</div><div className="text-3xl font-bold">{data.totalEffortHours}</div><div className="text-xs opacity-90">horas</div></div>
+        <Clock className="w-12 h-12 opacity-30" />
+      </div>
+    </div>
+    <div className="space-y-2">
+      <div className="flex justify-between items-center"><span className="text-xs font-medium text-gray-700">Taxa de Utilização</span><span className="text-sm font-bold text-orange-600">{data.effortUtilization}%</span></div>
+      <div className="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden"><div className="h-full bg-linear-to-r from-orange-400 to-orange-600 transition-all" style={{ width: `${Math.min(data.effortUtilization, 100)}%` }} /></div>
+    </div>
+    <div className="grid grid-cols-2 gap-2 mt-3">
+      <div className="bg-orange-100 rounded-lg p-3 border border-orange-200"><div className="text-xs text-orange-700 mb-1">Alocado</div><div className="text-2xl font-bold text-orange-600">{data.allocatedHours}h</div></div>
+      <div className="bg-amber-100 rounded-lg p-3 border border-amber-200"><div className="text-xs text-amber-700 mb-1">Disponível</div><div className="text-2xl font-bold text-amber-600">{data.availableHours}h</div></div>
+    </div>
+    <div className="text-center text-xs text-gray-600 pt-2 border-t border-orange-100 mt-3">{data.effortUtilization > 90 ? '⚠️ Portfólio com alta demanda' : data.effortUtilization > 70 ? '✓ Utilização equilibrada' : '📊 Capacidade disponível'}</div>
+  </div>
+);
+
+export default PortfolioEffortKpi;

package/src/dashboard/widgets/PortfolioRiskKpi.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle, TrendingUp } from 'lucide-react';
+
+interface PortfolioRiskKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { totalRisks: number; criticalRisks: number; highRisks: number; mediumRisks: number; riskTrend: 'increasing' | 'stable' | 'decreasing' };
+  style?: React.CSSProperties;
+}
+
+const PortfolioRiskKpi: React.FC<PortfolioRiskKpiProps> = ({
+  title,
+  data = { totalRisks: 0, criticalRisks: 0, highRisks: 0, mediumRisks: 0, riskTrend: 'stable' },
+  style,
+}) => {
+  const hasHighRisk = data.criticalRisks > 0 || data.highRisks > 3;
+  return (
+    <div className={`bg-linear-to-br from-white to-red-50 rounded-lg shadow-sm p-4 border ${hasHighRisk ? 'border-red-400 border-2' : 'border-red-100'} transition-all`} style={style}>
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        {hasHighRisk && <div className="relative"><div className="absolute inset-0 bg-red-600 rounded-full animate-pulse" style={{ opacity: 0.25 }} /><AlertTriangle className="w-5 h-5 text-red-600 relative" /></div>}
+      </div>
+      <div className={`rounded-lg p-4 ${data.totalRisks > 10 ? 'bg-red-500 text-white' : data.totalRisks > 5 ? 'bg-yellow-500 text-white' : 'bg-green-500 text-white'}`}>
+        <div className="flex items-center justify-between">
+          <div><div className="text-xs opacity-90">Riscos Identificados</div><div className="text-3xl font-bold">{data.totalRisks}</div></div>
+          <AlertTriangle className="w-12 h-12 opacity-30" />
+        </div>
+      </div>
+      <div className="space-y-2 mt-3">
+        {data.criticalRisks > 0 && <div className="flex items-center justify-between bg-red-50 p-2 rounded-lg border border-red-200"><span className="text-xs font-medium text-red-700">🔴 Crítico</span><span className="text-sm font-bold text-red-600">{data.criticalRisks}</span></div>}
+        {data.highRisks > 0 && <div className="flex items-center justify-between bg-yellow-50 p-2 rounded-lg border border-yellow-200"><span className="text-xs font-medium text-yellow-700">🟠 Alto</span><span className="text-sm font-bold text-yellow-600">{data.highRisks}</span></div>}
+        {data.mediumRisks > 0 && <div className="flex items-center justify-between bg-blue-50 p-2 rounded-lg border border-blue-200"><span className="text-xs font-medium text-blue-700">🟡 Médio</span><span className="text-sm font-bold text-blue-600">{data.mediumRisks}</span></div>}
+      </div>
+      <div className="flex items-center gap-2 pt-2 border-t border-red-100 mt-3">
+        <TrendingUp className={`w-4 h-4 ${data.riskTrend === 'increasing' ? 'text-red-600' : data.riskTrend === 'decreasing' ? 'text-green-600' : 'text-gray-600'}`} />
+        <span className="text-xs font-medium text-gray-700">
+          Tendência: {data.riskTrend === 'increasing' && '📈 Aumentando'}{data.riskTrend === 'decreasing' && '📉 Reduzindo'}{data.riskTrend === 'stable' && '➡️ Estável'}
+        </span>
+      </div>
+      {hasHighRisk && <div className="bg-red-100 rounded-lg p-2 border border-red-300 text-xs text-red-700 font-semibold text-center mt-3">⚠️ Requer atenção imediata</div>}
+    </div>
+  );
+};
+
+export default PortfolioRiskKpi;

package/src/dashboard/widgets/ProjectStatusOverview.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React from 'react';
+import { CheckCircle2, AlertCircle, Clock } from 'lucide-react';
+
+interface ProjectStatusOverviewProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { planning: number; inProgress: number; review: number; completed: number; onHold: number };
+  style?: React.CSSProperties;
+}
+
+const ProjectStatusOverview: React.FC<ProjectStatusOverviewProps> = ({
+  title,
+  data = { planning: 0, inProgress: 0, review: 0, completed: 0, onHold: 0 },
+  style,
+}) => {
+  const total = data.planning + data.inProgress + data.review + data.completed + data.onHold;
+  const statuses = [
+    { label: 'Planejamento', count: data.planning, emoji: '📋', color: 'blue', width: total > 0 ? (data.planning / total) * 100 : 0 },
+    { label: 'Em Progresso', count: data.inProgress, emoji: '🚀', color: 'green', width: total > 0 ? (data.inProgress / total) * 100 : 0 },
+    { label: 'Em Revisão', count: data.review, emoji: '👀', color: 'yellow', width: total > 0 ? (data.review / total) * 100 : 0 },
+    { label: 'Concluído', count: data.completed, emoji: '✅', color: 'purple', width: total > 0 ? (data.completed / total) * 100 : 0 },
+    { label: 'Suspenso', count: data.onHold, emoji: '⏸️', color: 'gray', width: total > 0 ? (data.onHold / total) * 100 : 0 },
+  ];
+
+  return (
+    <div className="bg-linear-to-br from-white to-violet-50 rounded-lg shadow-sm p-4 border border-violet-100" style={style}>
+      <div className="flex items-center justify-between mb-4"><h3 className="text-sm font-medium text-gray-700">{title}</h3><CheckCircle2 className="w-4 h-4 text-violet-600" /></div>
+      <div className="flex gap-1 h-8 rounded-lg overflow-hidden bg-gray-100 border border-gray-200 mb-3">
+        {statuses.map((status) => status.width > 0 && <div key={status.label} className={`bg-${status.color}-500 hover:brightness-110 transition-all`} style={{ width: `${status.width}%` }} />)}
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {statuses.map((status) => (
+          <div key={status.label} className={`bg-${status.color}-50 rounded-lg p-3 border border-${status.color}-200`}>
+            <div className="text-lg mb-1">{status.emoji}</div>
+            <div className={`text-2xl font-bold text-${status.color}-600`}>{status.count}</div>
+            <div className="text-xs text-gray-600 truncate">{status.label}</div>
+          </div>
+        ))}
+      </div>
+      <div className="pt-2 border-t border-violet-100 mt-3">
+        <div className="flex items-center justify-between text-xs"><span className="text-gray-700 font-medium">Total de Projetos</span><span className="text-lg font-bold text-violet-600">{total}</span></div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectStatusOverview;

package/src/dashboard/widgets/StrategicDeadlines.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React from 'react';
+import { Flag, AlertTriangle, CheckCircle2 } from 'lucide-react';
+
+interface StrategicDeadline {
+  id: string;
+  title: string;
+  deadline: string;
+  daysLeft: number;
+  status: 'on-track' | 'at-risk' | 'critical';
+  priority: 'high' | 'critical';
+  impact: string;
+}
+
+interface StrategicDeadlinesProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { deadlines: StrategicDeadline[] };
+  style?: React.CSSProperties;
+}
+
+const StrategicDeadlines: React.FC<StrategicDeadlinesProps> = ({
+  title,
+  data = { deadlines: [] },
+  style,
+}) => {
+  const criticalCount = data.deadlines.filter(d => d.status === 'critical').length;
+  const atRiskCount = data.deadlines.filter(d => d.status === 'at-risk').length;
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'critical': return { bg: 'bg-red-50', border: 'border-red-300 border-l-4', dot: 'bg-red-600 animate-pulse' };
+      case 'at-risk': return { bg: 'bg-yellow-50', border: 'border-yellow-300 border-l-4', dot: 'bg-yellow-600' };
+      default: return { bg: 'bg-green-50', border: 'border-green-300 border-l-4', dot: 'bg-green-600' };
+    }
+  };
+
+  return (
+    <div className={`bg-linear-to-br from-white to-rose-50 rounded-lg shadow-sm p-4 border ${criticalCount > 0 ? 'border-rose-400 border-2' : 'border-rose-100'} transition-all`} style={style}>
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        <Flag className="w-4 h-4 text-rose-600" />
+      </div>
+      <div className="space-y-3">
+        {data.deadlines.length === 0 ? (
+          <div className="text-center py-8"><CheckCircle2 className="w-8 h-8 text-green-500 mx-auto mb-2" /><p className="text-sm text-gray-600">Nenhum prazo crítico</p></div>
+        ) : (
+          <>
+            {(criticalCount > 0 || atRiskCount > 0) && (
+              <div className="flex gap-2 mb-2">
+                {criticalCount > 0 && <div className="bg-red-100 rounded-lg px-3 py-1 text-xs font-bold text-red-700 flex items-center gap-1"><AlertTriangle className="w-3 h-3" />{criticalCount} crítico{criticalCount !== 1 ? 's' : ''}</div>}
+                {atRiskCount > 0 && <div className="bg-yellow-100 rounded-lg px-3 py-1 text-xs font-bold text-yellow-700">{atRiskCount} em risco</div>}
+              </div>
+            )}
+            <div className="space-y-2 max-h-72 overflow-y-auto">
+              {data.deadlines.map((deadline) => {
+                const colors = getStatusColor(deadline.status);
+                return (
+                  <div key={deadline.id} className={`${colors.bg} rounded-lg p-3 border ${colors.border} hover:shadow-md transition-all`}>
+                    <div className="flex items-start gap-2">
+                      <div className={`w-3 h-3 rounded-full ${colors.dot} flex-shrink-0 mt-1`} />
+                      <div className="flex-1">
+                        <div className="flex items-start justify-between gap-2 mb-1">
+                          <p className="text-sm font-bold text-gray-900 truncate">{deadline.title}</p>
+                          <span className={`text-xs font-bold px-2 py-1 rounded-full flex-shrink-0 ${deadline.priority === 'critical' ? 'bg-red-100 text-red-700' : 'bg-orange-100 text-orange-700'}`}>
+                            {deadline.priority === 'critical' ? '🔴' : '🟠'}
+                          </span>
+                        </div>
+                        <p className="text-xs text-gray-700 mb-2">{deadline.impact}</p>
+                        <div className="flex items-center justify-between text-xs">
+                          <span className="text-gray-600">{deadline.deadline}</span>
+                          <span className={`font-bold ${deadline.daysLeft <= 0 ? 'text-red-600' : deadline.daysLeft <= 7 ? 'text-orange-600' : 'text-gray-600'}`}>
+                            {deadline.daysLeft <= 0 ? '❌ Vencido' : `⏱️ ${deadline.daysLeft}d`}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StrategicDeadlines;

package/src/dashboard/widgets/TeamApprovalQueue.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { Clock, CheckCircle2, User, Calendar } from 'lucide-react';
+
+interface ApprovalItem {
+  id: string;
+  type: string;
+  submittedBy: string;
+  submittedDate: string;
+  daysWaiting: number;
+  priority: 'high' | 'normal';
+}
+
+interface TeamApprovalQueueProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { queue: ApprovalItem[]; totalPending: number };
+  style?: React.CSSProperties;
+}
+
+const TeamApprovalQueue: React.FC<TeamApprovalQueueProps> = ({
+  title,
+  data = { queue: [], totalPending: 0 },
+  style,
+}) => {
+  const getTypeIcon = (type: string) => ({ timesheet: '⏱️', expense: '💰', vacation: '🏖️', schedule: '📅' }[type] || '📋');
+  const getTypeLabel = (type: string) => ({ timesheet: 'Timesheet', expense: 'Despesa', vacation: 'Férias', schedule: 'Ajuste' }[type] || type);
+
+  return (
+    <div className="bg-linear-to-br from-white to-purple-50 rounded-lg shadow-sm p-4 border border-purple-100" style={style}>
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-800">{data.totalPending}</span>
+      </div>
+      <div className="space-y-2 max-h-80 overflow-y-auto">
+        {data.queue.length === 0 ? (
+          <div className="text-center py-8"><CheckCircle2 className="w-8 h-8 text-green-500 mx-auto mb-2" /><p className="text-sm text-gray-600">Fila de aprovações vazia</p></div>
+        ) : (
+          data.queue.map((item) => (
+            <div key={item.id} className={`rounded-lg p-3 border transition-all ${item.priority === 'high' ? 'bg-red-50 border-red-300 border-l-4' : 'bg-blue-50 border-blue-200'}`}>
+              <div className="flex items-start gap-2 mb-2">
+                <span className="text-lg">{getTypeIcon(item.type)}</span>
+                <div className="flex-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="text-sm font-medium text-gray-900 truncate">{getTypeLabel(item.type)}</p>
+                    {item.priority === 'high' && <span className="text-xs font-bold bg-red-100 text-red-700 px-2 py-1 rounded">🔴 Alta</span>}
+                  </div>
+                </div>
+              </div>
+              <div className="space-y-1 text-xs">
+                <div className="flex items-center gap-1 text-gray-700"><User className="w-3 h-3" /><span className="truncate">{item.submittedBy}</span></div>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-1 text-gray-700"><Calendar className="w-3 h-3" /><span>{item.submittedDate}</span></div>
+                  <div className={`font-semibold ${item.daysWaiting > 14 ? 'text-red-600' : item.daysWaiting > 7 ? 'text-yellow-600' : 'text-blue-600'}`}>{item.daysWaiting}d</div>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+      <div className="mt-3 pt-3 border-t border-purple-100"><p className="text-xs text-gray-600">💡 <span className="font-semibold">Dica:</span> Itens com 🔴 Alta prioridade precisam de atenção imediata</p></div>
+    </div>
+  );
+};
+
+export default TeamApprovalQueue;

package/src/dashboard/widgets/TeamCapacityKpi.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+import { Users, Zap } from 'lucide-react';
+
+interface TeamCapacityKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { totalCapacity: number; allocatedCapacity: number; availableCapacity: number; utilizationPercent: number };
+  style?: React.CSSProperties;
+}
+
+const TeamCapacityKpi: React.FC<TeamCapacityKpiProps> = ({
+  title,
+  data = { totalCapacity: 100, allocatedCapacity: 0, availableCapacity: 100, utilizationPercent: 0 },
+  style,
+}) => {
+  const getUtilizationColor = () => {
+    if (data.utilizationPercent > 95) return 'from-red-500 to-red-600';
+    if (data.utilizationPercent > 85) return 'from-yellow-500 to-yellow-600';
+    if (data.utilizationPercent > 70) return 'from-green-500 to-green-600';
+    return 'from-blue-500 to-blue-600';
+  };
+
+  return (
+    <div className="bg-linear-to-br from-white to-indigo-50 rounded-lg shadow-sm p-4 border border-indigo-100" style={style}>
+      <div className="flex items-center justify-between mb-4"><h3 className="text-sm font-medium text-gray-700">{title}</h3><Zap className="w-4 h-4 text-indigo-600" /></div>
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="flex justify-between items-center"><span className="text-xs font-medium text-gray-700">Utilização</span><span className="text-sm font-bold text-indigo-600">{data.utilizationPercent}%</span></div>
+          <div className="relative w-full h-5 bg-gray-200 rounded-full overflow-hidden">
+            <div className={`h-full bg-linear-to-r ${getUtilizationColor()} transition-all duration-500 rounded-full`} style={{ width: `${Math.min(data.utilizationPercent, 100)}%` }} />
+          </div>
+          <div className="flex justify-between text-xs text-gray-600"><span>{data.allocatedCapacity}h alocado</span><span>{data.totalCapacity}h total</span></div>
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <div className="bg-indigo-100 rounded-lg p-3 border border-indigo-300"><div className="text-xs text-indigo-700 mb-1">Disponível</div><div className="text-2xl font-bold text-indigo-600">{data.availableCapacity}h</div></div>
+          <div className="bg-purple-100 rounded-lg p-3 border border-purple-300"><div className="text-xs text-purple-700 mb-1">Status</div><div className={`text-sm font-bold ${data.utilizationPercent > 95 ? 'text-red-600' : data.utilizationPercent > 85 ? 'text-yellow-600' : 'text-green-600'}`}>
+            {data.utilizationPercent > 95 ? 'Crítica' : data.utilizationPercent > 85 ? 'Alta' : data.utilizationPercent > 70 ? 'Ótima' : 'Normal'}
+          </div></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamCapacityKpi;

package/src/dashboard/widgets/TeamHoursKpi.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Clock, TrendingUp } from 'lucide-react';
+
+interface TeamHoursKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { totalHours: number; targetHours: number; teamMembers: number; avgHoursPerMember: number; variance: number };
+  style?: React.CSSProperties;
+}
+
+const TeamHoursKpi: React.FC<TeamHoursKpiProps> = ({
+  title,
+  data = { totalHours: 0, targetHours: 0, teamMembers: 0, avgHoursPerMember: 0, variance: 0 },
+  style,
+}) => {
+  const hoursPercent = Math.round((data.totalHours / data.targetHours) * 100);
+  const isAboveTarget = data.totalHours > data.targetHours;
+  const varianceSign = data.variance >= 0 ? '+' : '';
+  return (
+    <div className="bg-linear-to-br from-white to-blue-50 rounded-lg shadow-sm p-4 border border-blue-100" style={style}>
+      <h3 className="text-sm font-medium text-gray-700 mb-4">{title}</h3>
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="flex justify-between items-center">
+            <span className="text-xs font-medium text-gray-700">Horas Registradas</span>
+            <span className={`text-sm font-bold px-2 py-1 rounded-full ${isAboveTarget ? 'bg-green-100 text-green-700' : hoursPercent >= 90 ? 'bg-blue-100 text-blue-700' : 'bg-yellow-100 text-yellow-700'}`}>{hoursPercent}%</span>
+          </div>
+          <div className="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
+            <div className={`h-full transition-all duration-500 ease-out rounded-full ${isAboveTarget ? 'bg-linear-to-r from-green-400 to-green-600' : 'bg-linear-to-r from-blue-400 to-blue-600'}`} style={{ width: `${Math.min(hoursPercent, 100)}%` }} />
+          </div>
+          <div className="flex justify-between text-xs text-gray-600"><span>{data.totalHours}h registrado</span><span>{data.targetHours}h meta</span></div>
+        </div>
+        <div className="grid grid-cols-2 gap-2 bg-blue-50 rounded-lg p-3 border border-blue-100">
+          <div><div className="text-xs text-gray-600 mb-1">Colaboradores</div><div className="text-2xl font-bold text-blue-600">{data.teamMembers}</div></div>
+          <div><div className="text-xs text-gray-600 mb-1">Média/Pessoa</div><div className="text-2xl font-bold text-blue-600">{data.avgHoursPerMember}h</div></div>
+        </div>
+        <div className="flex items-center gap-2 p-3 bg-linear-to-r from-blue-100 to-blue-50 rounded-lg border border-blue-200">
+          <TrendingUp className={`w-5 h-5 ${isAboveTarget ? 'text-green-600' : 'text-blue-600'}`} />
+          <div><div className="text-xs text-gray-600">Variação da Meta</div><div className={`text-sm font-bold ${isAboveTarget ? 'text-green-600' : 'text-blue-600'}`}>{varianceSign}{data.variance}%</div></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamHoursKpi;

package/src/dashboard/widgets/TeamPendingApprovalsKpi.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import { CheckCircle2, Clock, AlertTriangle } from 'lucide-react';
+
+interface TeamPendingApprovalsKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { totalPending: number; urgent: number; timesheets: number; expenses: number; requests: number; avgWaitingDays: number };
+  style?: React.CSSProperties;
+}
+
+const TeamPendingApprovalsKpi: React.FC<TeamPendingApprovalsKpiProps> = ({
+  title,
+  data = { totalPending: 0, urgent: 0, timesheets: 0, expenses: 0, requests: 0, avgWaitingDays: 0 },
+  style,
+}) => {
+  const hasUrgent = data.urgent > 0;
+  return (
+    <div className={`bg-linear-to-br from-white to-red-50 rounded-lg shadow-sm p-4 border ${hasUrgent ? 'border-red-400 border-2' : 'border-red-100'} transition-all`} style={style}>
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        {hasUrgent && <div className="relative inline-block"><div className="absolute inset-0 bg-red-600 rounded-full animate-pulse" style={{ opacity: 0.25 }} /><AlertTriangle className="w-5 h-5 text-red-600 relative" /></div>}
+      </div>
+      <div className="bg-linear-to-r from-red-500 to-red-600 rounded-lg p-4 text-white mb-3">
+        <div className="flex items-center justify-between">
+          <div><div className="text-sm opacity-90">Aguardando Aprovação</div><div className="text-4xl font-bold">{data.totalPending}</div></div>
+          <CheckCircle2 className="w-12 h-12 opacity-30" />
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-2 mb-3">
+        <div className="bg-blue-50 rounded-lg p-2 border border-blue-200"><div className="text-2xl font-bold text-blue-600">{data.timesheets}</div><div className="text-xs text-gray-600">Timesheets</div></div>
+        <div className="bg-green-50 rounded-lg p-2 border border-green-200"><div className="text-2xl font-bold text-green-600">{data.expenses}</div><div className="text-xs text-gray-600">Despesas</div></div>
+        <div className="bg-purple-50 rounded-lg p-2 border border-purple-200"><div className="text-2xl font-bold text-purple-600">{data.requests}</div><div className="text-xs text-gray-600">Solicitações</div></div>
+      </div>
+      <div className="space-y-2 text-xs border-t border-red-100 pt-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2"><AlertTriangle className="w-4 h-4 text-red-600" /><span className="text-gray-600">Urgentes:</span></div>
+          <span className={`font-bold px-2 py-1 rounded ${data.urgent > 5 ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700'}`}>{data.urgent}</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2"><Clock className="w-4 h-4 text-gray-400" /><span className="text-gray-600">Tempo médio:</span></div>
+          <span className="font-semibold text-gray-900">{data.avgWaitingDays} dias</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamPendingApprovalsKpi;

package/src/dashboard/widgets/TeamUtilizationOverview.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import React from 'react';
+import { BarChart3, AlertCircle } from 'lucide-react';
+
+interface TeamUtilizationOverviewProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { overUtilized: number; wellUtilized: number; underUtilized: number; idle: number };
+  style?: React.CSSProperties;
+}
+
+const TeamUtilizationOverview: React.FC<TeamUtilizationOverviewProps> = ({
+  title,
+  data = { overUtilized: 0, wellUtilized: 0, underUtilized: 0, idle: 0 },
+  style,
+}) => {
+  const total = data.overUtilized + data.wellUtilized + data.underUtilized + data.idle;
+  const categories = [
+    { label: 'Sobre-utilizado', count: data.overUtilized, emoji: '🔴', percent: total > 0 ? Math.round((data.overUtilized / total) * 100) : 0, color: 'bg-red-500' },
+    { label: 'Bem utilizado', count: data.wellUtilized, emoji: '🟢', percent: total > 0 ? Math.round((data.wellUtilized / total) * 100) : 0, color: 'bg-green-500' },
+    { label: 'Sub-utilizado', count: data.underUtilized, emoji: '🟡', percent: total > 0 ? Math.round((data.underUtilized / total) * 100) : 0, color: 'bg-yellow-500' },
+    { label: 'Inativo', count: data.idle, emoji: '⚪', percent: total > 0 ? Math.round((data.idle / total) * 100) : 0, color: 'bg-gray-400' },
+  ];
+
+  return (
+    <div className="bg-linear-to-br from-white to-lime-50 rounded-lg shadow-sm p-4 border border-lime-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-lime-600" /></div>
+      <div className="space-y-4">
+        <div className="space-y-3">
+          {categories.map((cat) => (
+            <div key={cat.label} className="space-y-1">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium text-gray-700">{cat.emoji} {cat.label}</span>
+                <span className="text-xs font-bold text-gray-900">{cat.count} ({cat.percent}%)</span>
+              </div>
+              <div className="relative w-full h-3 bg-gray-100 rounded-full overflow-hidden"><div className={`h-full ${cat.color} transition-all duration-500 ease-out`} style={{ width: `${cat.percent}%` }} /></div>
+            </div>
+          ))}
+        </div>
+        {data.overUtilized > 0 && (
+          <div className="bg-red-50 border border-red-300 rounded-lg p-3 flex gap-2">
+            <AlertCircle className="w-4 h-4 text-red-600 flex-shrink-0 mt-0.5" />
+            <div className="text-xs text-red-700">
+              <p className="font-semibold">{data.overUtilized} colaborador(es) sobre-utilizado(s)</p>
+              <p className="text-red-600 mt-1">Considere rebalanceamento de projetos</p>
+            </div>
+          </div>
+        )}
+        <div className="bg-linear-to-r from-lime-50 to-lime-100 rounded-lg p-3 border border-lime-200 text-center">
+          <p className="text-xs text-gray-600 mb-1">Total de Colaboradores</p>
+          <p className="text-2xl font-bold text-lime-700">{total}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamUtilizationOverview;