@hed-hog/operations 0.0.330 → 0.0.332

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;

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

@@ -0,0 +1,117 @@
+'use client';
+
+import { AlertTriangle, Clock, TrendingDown, Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface Alert {
+  id: string;
+  type: 'overload' | 'underload' | 'deadline' | 'absence';
+  severity: 'critical' | 'warning' | 'info';
+  title: string;
+  description: string;
+  affectedCount: number;
+}
+
+interface TeamWorkloadAlertsProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { alerts: Alert[]; criticalCount: number };
+  style?: React.CSSProperties;
+}
+
+const TeamWorkloadAlerts: React.FC<TeamWorkloadAlertsProps> = ({
+  title,
+  data = { alerts: [], criticalCount: 0 },
+  style,
+}) => {
+  const t = useTranslations('operations.TeamWorkloadAlerts');
+  const getAlertIcon = (type: string) =>
+    ({ overload: '⚠️', underload: '📉', deadline: '⏰', absence: '👤' })[
+      type
+    ] || '📋';
+  const getAlertColor = (severity: string) => {
+    switch (severity) {
+      case 'critical':
+        return 'bg-red-50 border-red-300 border-l-4';
+      case 'warning':
+        return 'bg-yellow-50 border-yellow-300 border-l-4';
+      default:
+        return 'bg-blue-50 border-blue-300 border-l-4';
+    }
+  };
+  const getSeverityDot = (severity: string) =>
+    severity === 'critical'
+      ? 'bg-red-500 animate-pulse'
+      : severity === 'warning'
+        ? 'bg-yellow-500'
+        : 'bg-blue-500';
+
+  return (
+    <div
+      className="bg-linear-to-br from-white to-yellow-50 rounded-lg shadow-sm p-4 border border-yellow-100"
+      style={style}
+    >
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        {data.criticalCount > 0 && (
+          <AlertTriangle className="w-5 h-5 text-red-600 animate-pulse" />
+        )}
+      </div>
+      <div className="space-y-3">
+        {data.alerts.length === 0 ? (
+          <div className="text-center py-6">
+            <TrendingDown className="w-8 h-8 text-green-400 mx-auto mb-2" />
+            <p className="text-sm text-gray-600">{t('empty')}</p>
+          </div>
+        ) : (
+          <>
+            {data.criticalCount > 0 && (
+              <div className="bg-red-100 rounded-lg p-3 border border-red-300 flex items-center gap-2">
+                <AlertTriangle className="w-4 h-4 text-red-600 flex-shrink-0" />
+                <span className="text-xs font-bold text-red-700">
+                  {data.criticalCount} alerta(s) crítico(s)
+                </span>
+              </div>
+            )}
+            <div className="space-y-2 max-h-64 overflow-y-auto">
+              {data.alerts.map((alert) => (
+                <div
+                  key={alert.id}
+                  className={`rounded-lg p-3 border ${getAlertColor(alert.severity)}`}
+                >
+                  <div className="flex items-start gap-2">
+                    <div
+                      className={`w-2 h-2 rounded-full ${getSeverityDot(alert.severity)} mt-1.5 flex-shrink-0`}
+                    />
+                    <div className="flex-1">
+                      <p className="text-sm font-medium text-gray-900">
+                        {alert.title}
+                      </p>
+                      <p className="text-xs text-gray-700 my-1">
+                        {alert.description}
+                      </p>
+                      <div className="flex items-center gap-1 text-xs text-gray-600">
+                        <Users className="w-3 h-3" />
+                        <span>{alert.affectedCount} envolvido(s)</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+        <div className="pt-2 border-t border-yellow-100 text-xs text-gray-600 flex items-center gap-1">
+          <Clock className="w-3 h-3" />
+          <span>{t('lastUpdated')}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamWorkloadAlerts;

package/hedhog/frontend/app/dashboard/widgets/index.ts.ejs

@@ -0,0 +1,26 @@
+// Dashboard Widgets - Exports
+export { default as MyHoursPeriodKpi } from './MyHoursPeriodKpi';
+export { default as MyOpenRequestsKpi } from './MyOpenRequestsKpi';
+export { default as MyPendingRequestsList } from './MyPendingRequestsList';
+export { default as MyProjectAllocationsKpi } from './MyProjectAllocationsKpi';
+export { default as MyQuickActions } from './MyQuickActions';
+export { default as MyRelevantDeadlines } from './MyRelevantDeadlines';
+export { default as MyTimesheetStatusKpi } from './MyTimesheetStatusKpi';
+export { default as MyWeeklyJourney } from './MyWeeklyJourney';
+
+export { default as ManagedProjectsStatus } from './ManagedProjectsStatus';
+export { default as TeamApprovalQueue } from './TeamApprovalQueue';
+export { default as TeamCapacityKpi } from './TeamCapacityKpi';
+export { default as TeamHoursKpi } from './TeamHoursKpi';
+export { default as TeamPendingApprovalsKpi } from './TeamPendingApprovalsKpi';
+export { default as TeamUtilizationOverview } from './TeamUtilizationOverview';
+export { default as TeamWorkloadAlerts } from './TeamWorkloadAlerts';
+
+export { default as CapacityDistribution } from './CapacityDistribution';
+export { default as EffortByProject } from './EffortByProject';
+export { default as HeadcountByArea } from './HeadcountByArea';
+export { default as PortfolioCostsKpi } from './PortfolioCostsKpi';
+export { default as PortfolioEffortKpi } from './PortfolioEffortKpi';
+export { default as PortfolioRiskKpi } from './PortfolioRiskKpi';
+export { default as ProjectStatusOverview } from './ProjectStatusOverview';
+export { default as StrategicDeadlines } from './StrategicDeadlines';

package/hedhog/frontend/app/departments/page.tsx.ejs

@@ -33,6 +33,7 @@ import { useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type { OperationsDepartment, PaginatedResponse } from '../_lib/types';
 import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
@@ -68,7 +69,11 @@ export default function OperationsDepartmentsPage() {
     'all' | 'active' | 'inactive'
   >('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-departments:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
     if (typeof window === 'undefined') return 'table';
     const saved = window.localStorage.getItem(