@hed-hog/operations 0.0.329 → 0.0.331

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;

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { Users } from 'lucide-react';
+import React from 'react';
+
+interface TeamHeadcountKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: {
+    totalHeadcount: number;
+    activeCollaborators: number;
+    onLeave: number;
+    newThisMonth: number;
+    growthPercent: number;
+  };
+  style?: React.CSSProperties;
+}
+
+const TeamHeadcountKpi: React.FC<TeamHeadcountKpiProps> = ({
+  title,
+  data = {
+    totalHeadcount: 0,
+    activeCollaborators: 0,
+    onLeave: 0,
+    newThisMonth: 0,
+    growthPercent: 0,
+  },
+  style,
+}) => {
+  const activePercent =
+    data.totalHeadcount > 0
+      ? Math.round((data.activeCollaborators / data.totalHeadcount) * 100)
+      : 0;
+  const isGrowth = data.growthPercent >= 0;
+
+  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>
+        <Users className="w-4 h-4 text-teal-600" />
+      </div>
+      <div className="bg-linear-to-r from-teal-500 to-cyan-600 rounded-lg p-4 text-white mb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <div className="text-xs opacity-90">Headcount Total</div>
+            <div className="text-3xl font-bold">{data.totalHeadcount}</div>
+          </div>
+          <Users 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">
+            Colaboradores Ativos
+          </span>
+          <span className="text-sm font-bold px-2 py-1 rounded-full bg-teal-100 text-teal-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-teal-400 to-teal-600"
+            style={{ width: `${activePercent}%` }}
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-2 bg-teal-50 rounded-lg p-3 border border-teal-200 mt-3">
+        <div>
+          <div className="text-xs text-gray-600 mb-1">Ativos</div>
+          <div className="text-xl font-bold text-teal-600">
+            {data.activeCollaborators}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs text-gray-600 mb-1">Afastados</div>
+          <div className="text-xl font-bold text-yellow-600">
+            {data.onLeave}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs text-gray-600 mb-1">Crescimento</div>
+          <div
+            className={`text-xl font-bold ${isGrowth ? 'text-green-600' : 'text-red-600'}`}
+          >
+            {isGrowth ? '+' : ''}
+            {data.growthPercent}%
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamHeadcountKpi;

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

@@ -0,0 +1,104 @@
+'use client';
+
+import { TrendingUp } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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 ? '+' : '';
+  const t = useTranslations('operations.TeamHoursKpi');
+  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">
+              {t('registeredHours')}
+            </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>{t('registered', { hours: data.totalHours })}</span>
+            <span>{t('goal', { hours: data.targetHours })}</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">
+              {t('collaborators')}
+            </div>
+            <div className="text-2xl font-bold text-blue-600">
+              {data.teamMembers}
+            </div>
+          </div>
+          <div>
+            <div className="text-xs text-gray-600 mb-1">
+              {t('averagePerPerson')}
+            </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">{t('goalVariation')}</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/hedhog/frontend/app/dashboard/widgets/TeamPendingApprovalsKpi.tsx.ejs

@@ -0,0 +1,110 @@
+'use client';
+
+import { AlertTriangle, CheckCircle2, Clock } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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;
+  const t = useTranslations('operations.TeamPendingApprovalsKpi');
+  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">{t('label')}</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">{t('requests')}</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">{t('urgent')}</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">{t('avgTime')}</span>
+          </div>
+          <span className="font-semibold text-gray-900">
+            {t('days', { count: data.avgWaitingDays })}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamPendingApprovalsKpi;

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

@@ -0,0 +1,115 @@
+'use client';
+
+import { AlertCircle, BarChart3 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from '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 t = useTranslations('operations.TeamUtilizationOverview');
+  const total =
+    data.overUtilized + data.wellUtilized + data.underUtilized + data.idle;
+  const categories = [
+    {
+      label: t('categories.overUtilized'),
+      count: data.overUtilized,
+      emoji: '🔴',
+      percent: total > 0 ? Math.round((data.overUtilized / total) * 100) : 0,
+      color: 'bg-red-500',
+    },
+    {
+      label: t('categories.wellUtilized'),
+      count: data.wellUtilized,
+      emoji: '🟢',
+      percent: total > 0 ? Math.round((data.wellUtilized / total) * 100) : 0,
+      color: 'bg-green-500',
+    },
+    {
+      label: t('categories.underUtilized'),
+      count: data.underUtilized,
+      emoji: '🟡',
+      percent: total > 0 ? Math.round((data.underUtilized / total) * 100) : 0,
+      color: 'bg-yellow-500',
+    },
+    {
+      label: t('categories.idle'),
+      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">
+                {t('overUtilizedAlert', { count: data.overUtilized })}
+              </p>
+              <p className="text-red-600 mt-1">
+                {t('rebalanceRecommendation')}
+              </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">
+            {t('totalCollaborators')}
+          </p>
+          <p className="text-2xl font-bold text-lime-700">{total}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamUtilizationOverview;