@hed-hog/operations 0.0.330 → 0.0.332

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

@@ -0,0 +1,96 @@
+'use client';
+
+import { Briefcase } from 'lucide-react';
+import React from 'react';
+
+interface PortfolioProjectsKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: {
+    totalProjects: number;
+    activeProjects: number;
+    completedProjects: number;
+    onHoldProjects: number;
+    healthyPercent: number;
+  };
+  style?: React.CSSProperties;
+}
+
+const PortfolioProjectsKpi: React.FC<PortfolioProjectsKpiProps> = ({
+  title,
+  data = {
+    totalProjects: 0,
+    activeProjects: 0,
+    completedProjects: 0,
+    onHoldProjects: 0,
+    healthyPercent: 0,
+  },
+  style,
+}) => {
+  const activePercent =
+    data.totalProjects > 0
+      ? Math.round((data.activeProjects / data.totalProjects) * 100)
+      : 0;
+
+  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>
+        <Briefcase className="w-4 h-4 text-indigo-600" />
+      </div>
+      <div className="bg-linear-to-r from-indigo-500 to-purple-600 rounded-lg p-4 text-white mb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <div className="text-xs opacity-90">Total de Projetos</div>
+            <div className="text-3xl font-bold">{data.totalProjects}</div>
+          </div>
+          <Briefcase 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">
+            Projetos Ativos
+          </span>
+          <span className="text-sm font-bold px-2 py-1 rounded-full bg-indigo-100 text-indigo-700">
+            {activePercent}%
+          </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 bg-linear-to-r from-indigo-400 to-indigo-600"
+            style={{ width: `${activePercent}%` }}
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-2 bg-indigo-50 rounded-lg p-3 border border-indigo-200 mt-3">
+        <div>
+          <div className="text-xs text-gray-600 mb-1">Ativos</div>
+          <div className="text-xl font-bold text-indigo-600">
+            {data.activeProjects}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs text-gray-600 mb-1">Concluídos</div>
+          <div className="text-xl font-bold text-green-600">
+            {data.completedProjects}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs text-gray-600 mb-1">Em Espera</div>
+          <div className="text-xl font-bold text-yellow-600">
+            {data.onHoldProjects}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PortfolioProjectsKpi;

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

@@ -0,0 +1,115 @@
+'use client';
+
+import { AlertTriangle, TrendingUp } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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 t = useTranslations('operations.PortfolioRiskKpi');
+  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">{t('label')}</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">
+              {t('critical')}
+            </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">
+              {t('high')}
+            </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">
+              {t('medium')}
+            </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">
+          {t('trendLabel')} {data.riskTrend === 'increasing' && t('increasing')}
+          {data.riskTrend === 'decreasing' && t('decreasing')}
+          {data.riskTrend === 'stable' && t('stable')}
+        </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">
+          {t('urgentAttention')}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PortfolioRiskKpi;

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

@@ -0,0 +1,120 @@
+'use client';
+
+import { CheckCircle2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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 t = useTranslations('operations.ProjectStatusOverview');
+  const total =
+    data.planning +
+    data.inProgress +
+    data.review +
+    data.completed +
+    data.onHold;
+  const statuses = [
+    {
+      label: t('statuses.planning'),
+      count: data.planning,
+      emoji: '📋',
+      color: 'blue',
+      width: total > 0 ? (data.planning / total) * 100 : 0,
+    },
+    {
+      label: t('statuses.inProgress'),
+      count: data.inProgress,
+      emoji: '🚀',
+      color: 'green',
+      width: total > 0 ? (data.inProgress / total) * 100 : 0,
+    },
+    {
+      label: t('statuses.review'),
+      count: data.review,
+      emoji: '👀',
+      color: 'yellow',
+      width: total > 0 ? (data.review / total) * 100 : 0,
+    },
+    {
+      label: t('statuses.completed'),
+      count: data.completed,
+      emoji: '✅',
+      color: 'purple',
+      width: total > 0 ? (data.completed / total) * 100 : 0,
+    },
+    {
+      label: t('statuses.onHold'),
+      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">
+            {t('totalProjects')}
+          </span>
+          <span className="text-lg font-bold text-violet-600">{total}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectStatusOverview;

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

@@ -0,0 +1,146 @@
+'use client';
+
+import { AlertTriangle, CheckCircle2, Flag } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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 t = useTranslations('operations.StrategicDeadlines');
+  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">{t('empty')}</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/hedhog/frontend/app/dashboard/widgets/TeamApprovalQueue.tsx.ejs

@@ -0,0 +1,108 @@
+'use client';
+
+import { Calendar, CheckCircle2, User } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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 t = useTranslations('operations.TeamApprovalQueue');
+  const getTypeIcon = (type: string) =>
+    ({ timesheet: '⏱️', expense: '💰', vacation: '🏖️', schedule: '📅' })[
+      type
+    ] || '📋';
+  const getTypeLabel = (type: string) =>
+    (t.raw('typeLabels') as Record<string, string>)[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">{t('empty')}</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/hedhog/frontend/app/dashboard/widgets/TeamCapacityKpi.tsx.ejs

@@ -0,0 +1,97 @@
+'use client';
+
+import { Zap } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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 t = useTranslations('operations.TeamCapacityKpi');
+  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">
+              {t('utilization')}
+            </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>{t('allocated', { hours: data.allocatedCapacity })}</span>
+            <span>{t('total', { hours: data.totalCapacity })}</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">{t('available')}</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">{t('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
+                ? t('critical')
+                : data.utilizationPercent > 85
+                  ? t('high')
+                  : data.utilizationPercent > 70
+                    ? t('great')
+                    : t('normal')}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamCapacityKpi;