@hed-hog/operations 0.0.329 → 0.0.331

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

@@ -0,0 +1,112 @@
+'use client';
+
+import { DollarSign } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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 t = useTranslations('operations.PortfolioCostsKpi');
+  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">{t('label')}</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">
+            {t('budgetUtilization')}
+          </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>
+            {t('spent', { value: (data.totalCosts / 1000).toFixed(1) })}
+          </span>
+          <span>
+            {t('budgeted', { value: (data.budgetAmount / 1000).toFixed(1) })}
+          </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">{t('savings')}</div>
+          <div className="text-2xl font-bold text-green-600">
+            {data.savingsPercent}%
+          </div>
+        </div>
+        <div>
+          <div className="text-xs text-gray-600 mb-1">{t('trend')}</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'
+              ? t('decreasing')
+              : data.costTrend === 'up'
+                ? t('increasing')
+                : t('stable')}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PortfolioCostsKpi;

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

@@ -0,0 +1,93 @@
+'use client';
+
+import { Activity, Clock } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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,
+}) => {
+  const t = useTranslations('operations.PortfolioEffortKpi');
+  return (
+    <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">{t('label')}</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">
+            {t('utilizationRate')}
+          </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">{t('allocated')}</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">{t('available')}</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
+          ? t('highDemand')
+          : data.effortUtilization > 70
+            ? t('balanced')
+            : t('availableCapacity')}
+      </div>
+    </div>
+  );
+};
+
+export default PortfolioEffortKpi;

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;