@hed-hog/operations 0.0.330 → 0.0.332

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

@@ -0,0 +1,101 @@
+'use client';
+
+import { Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface DepartmentHeadcount {
+  name: string;
+  count: number;
+  percentage: number;
+  maxCapacity: number;
+  utilization: number;
+  icon: string;
+}
+
+interface HeadcountByAreaProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { departments: DepartmentHeadcount[]; totalHeadcount: number };
+  style?: React.CSSProperties;
+}
+
+const HeadcountByArea: React.FC<HeadcountByAreaProps> = ({
+  title,
+  data = { departments: [], totalHeadcount: 0 },
+  style,
+}) => {
+  const t = useTranslations('operations.HeadcountByArea');
+  const colorMap = [
+    'blue',
+    'indigo',
+    'purple',
+    'pink',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+  ];
+  return (
+    <div
+      className="bg-linear-to-br from-white to-blue-50 rounded-lg shadow-sm p-4 border border-blue-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-blue-600" />
+      </div>
+      <div className="space-y-3">
+        {data.departments.length === 0 ? (
+          <div className="text-center py-6 text-gray-500">
+            <Users className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">{t('empty')}</p>
+          </div>
+        ) : (
+          <>
+            {data.departments.map((dept, idx) => (
+              <div key={idx} className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 flex-1">
+                    <span className="text-lg">{dept.icon}</span>
+                    <span className="text-xs font-medium text-gray-900 truncate">
+                      {dept.name}
+                    </span>
+                  </div>
+                  <span className="text-xs font-bold text-gray-700 ml-2">
+                    {dept.count}
+                  </span>
+                </div>
+                <div className="relative w-full h-4 bg-gray-100 rounded-full overflow-hidden border border-gray-200">
+                  <div
+                    className={`h-full bg-${colorMap[idx % colorMap.length]}-500 transition-all`}
+                    style={{
+                      width: `${(dept.count / Math.max(...data.departments.map((d) => d.count))) * 100}%`,
+                    }}
+                  />
+                </div>
+                <div className="flex justify-between text-xs text-gray-600">
+                  <span>{dept.percentage}% total</span>
+                  <span>{dept.utilization}% capacidade</span>
+                </div>
+              </div>
+            ))}
+            <div className="pt-3 border-t border-blue-100 bg-blue-50 rounded-lg p-3 text-center">
+              <p className="text-xs text-blue-700 mb-1">
+                {t('totalCollaborators')}
+              </p>
+              <p className="text-3xl font-bold text-blue-600">
+                {data.totalHeadcount}
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HeadcountByArea;

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

@@ -0,0 +1,113 @@
+'use client';
+
+import { TrendingUp } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface ManagedProjectsStatusProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: {
+    onTrack: number;
+    atRisk: number;
+    delayed: number;
+    completed: number;
+  };
+  style?: React.CSSProperties;
+}
+
+const ManagedProjectsStatus: React.FC<ManagedProjectsStatusProps> = ({
+  title,
+  data = { onTrack: 0, atRisk: 0, delayed: 0, completed: 0 },
+  style,
+}) => {
+  const t = useTranslations('operations.ManagedProjectsStatus');
+  const total = data.onTrack + data.atRisk + data.delayed + data.completed;
+  const healthPercent =
+    total > 0 ? Math.round(((data.onTrack + data.completed) / total) * 100) : 0;
+
+  return (
+    <div
+      className="bg-linear-to-br from-white to-cyan-50 rounded-lg shadow-sm p-4 border border-cyan-100"
+      style={style}
+    >
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        <TrendingUp className="w-4 h-4 text-cyan-600" />
+      </div>
+      <div className="bg-linear-to-r from-cyan-500 to-blue-600 rounded-lg p-4 text-white mb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <div className="text-xs opacity-90">{t('title')}</div>
+            <div className="text-3xl font-bold">{healthPercent}%</div>
+          </div>
+          <div className="text-4xl">📊</div>
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-2 mb-3">
+        <div className="bg-green-50 rounded-lg p-3 border border-green-200">
+          <div className="text-2xl font-bold text-green-600">
+            {data.onTrack}
+          </div>
+          <div className="text-xs text-gray-600">{t('onSchedule')}</div>
+        </div>
+        <div className="bg-yellow-50 rounded-lg p-3 border border-yellow-200">
+          <div className="text-2xl font-bold text-yellow-600">
+            {data.atRisk}
+          </div>
+          <div className="text-xs text-gray-600">{t('atRisk')}</div>
+        </div>
+        <div className="bg-red-50 rounded-lg p-3 border border-red-200">
+          <div className="text-2xl font-bold text-red-600">{data.delayed}</div>
+          <div className="text-xs text-gray-600">{t('delayed')}</div>
+        </div>
+        <div className="bg-blue-50 rounded-lg p-3 border border-blue-200">
+          <div className="text-2xl font-bold text-blue-600">
+            {data.completed}
+          </div>
+          <div className="text-xs text-gray-600">{t('done')}</div>
+        </div>
+      </div>
+      <div className="space-y-2 bg-cyan-50 rounded-lg p-3 border border-cyan-200">
+        <div className="text-xs font-medium text-gray-700 mb-2">
+          {t('distribution')}
+        </div>
+        <div className="flex gap-1 h-8 rounded-lg overflow-hidden">
+          {data.onTrack > 0 && (
+            <div
+              className="bg-green-500 hover:brightness-110 transition-all"
+              style={{ width: `${(data.onTrack / total) * 100}%` }}
+            />
+          )}
+          {data.atRisk > 0 && (
+            <div
+              className="bg-yellow-500 hover:brightness-110 transition-all"
+              style={{ width: `${(data.atRisk / total) * 100}%` }}
+            />
+          )}
+          {data.delayed > 0 && (
+            <div
+              className="bg-red-500 hover:brightness-110 transition-all"
+              style={{ width: `${(data.delayed / total) * 100}%` }}
+            />
+          )}
+          {data.completed > 0 && (
+            <div
+              className="bg-blue-500 hover:brightness-110 transition-all"
+              style={{ width: `${(data.completed / total) * 100}%` }}
+            />
+          )}
+        </div>
+      </div>
+      <div className="text-center text-xs text-gray-600 pt-2 border-t border-cyan-100">
+        <span className="font-semibold text-gray-900">{total}</span>{' '}
+        {t('supervision')}
+      </div>
+    </div>
+  );
+};
+
+export default ManagedProjectsStatus;

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

@@ -0,0 +1,87 @@
+'use client';
+
+/**
+ * Widget KPI: Minhas Horas no Período
+ * Mostra horas aprovadas vs. planejadas
+ * Para: operations-collaborator
+ */
+
+import { AlertCircle, CheckCircle2 } from 'lucide-react';
+import React from 'react';
+
+interface MyHoursPeriodKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: {
+    plannedHours: number;
+    approvedHours: number;
+    pendingHours: number;
+  };
+  style?: React.CSSProperties;
+}
+
+const MyHoursPeriodKpi: React.FC<MyHoursPeriodKpiProps> = ({
+  title,
+  data = { plannedHours: 40, approvedHours: 32, pendingHours: 4 },
+  style,
+}) => {
+  const totalHours = data.approvedHours + data.pendingHours;
+  const completionPercent = Math.round((totalHours / data.plannedHours) * 100);
+
+  return (
+    <div
+      className="bg-white rounded-lg shadow-sm p-4 border border-gray-200 hover:shadow-md transition-shadow"
+      style={style}
+    >
+      <h3 className="text-sm font-medium text-gray-700 mb-3">{title}</h3>
+
+      <div className="space-y-3">
+        {/* Main metric */}
+        <div className="flex items-baseline gap-2">
+          <span className="text-3xl font-bold text-blue-600">{totalHours}</span>
+          <span className="text-sm text-gray-600">de {data.plannedHours}h</span>
+        </div>
+
+        {/* Progress bar */}
+        <div className="space-y-1">
+          <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
+            <div
+              className="bg-linear-to-r from-blue-500 to-blue-600 h-full rounded-full transition-all"
+              style={{ width: `${Math.min(completionPercent, 100)}%` }}
+            />
+          </div>
+          <div className="flex justify-between text-xs text-gray-600">
+            <span>{completionPercent}% completo</span>
+          </div>
+        </div>
+
+        {/* Breakdown */}
+        <div className="pt-2 border-t border-gray-200 space-y-1 text-xs">
+          <div className="flex justify-between">
+            <span className="text-gray-600 flex items-center gap-1">
+              <CheckCircle2 className="w-3 h-3 text-green-600" />
+              Aprovado:
+            </span>
+            <span className="font-medium text-green-600">
+              {data.approvedHours}h
+            </span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-gray-600 flex items-center gap-1">
+              <AlertCircle className="w-3 h-3 text-yellow-600" />
+              Pendente:
+            </span>
+            <span className="font-medium text-yellow-600">
+              {data.pendingHours}h
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyHoursPeriodKpi;

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

@@ -0,0 +1,97 @@
+'use client';
+
+import { AlertTriangle, MessageSquare } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface MyOpenRequestsKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: {
+    totalOpen: number;
+    vacationRequests: number;
+    scheduleAdjustments: number;
+    expenseRequests: number;
+    otherRequests: number;
+  };
+  style?: React.CSSProperties;
+}
+
+const MyOpenRequestsKpi: React.FC<MyOpenRequestsKpiProps> = ({
+  title,
+  data = {
+    totalOpen: 0,
+    vacationRequests: 0,
+    scheduleAdjustments: 0,
+    expenseRequests: 0,
+    otherRequests: 0,
+  },
+  style,
+}) => {
+  const t = useTranslations('operations.MyOpenRequestsKpi');
+  const hasUrgent = data.totalOpen > 5;
+  const requests = [
+    {
+      label: t('requests.vacation'),
+      count: data.vacationRequests,
+      color: 'blue',
+    },
+    {
+      label: t('requests.scheduleAdjust'),
+      count: data.scheduleAdjustments,
+      color: 'purple',
+    },
+    {
+      label: t('requests.expenses'),
+      count: data.expenseRequests,
+      color: 'green',
+    },
+    { label: t('requests.others'), count: data.otherRequests, color: 'gray' },
+  ];
+
+  return (
+    <div
+      className={`bg-linear-to-br from-white to-orange-50 rounded-lg shadow-sm p-4 border ${hasUrgent ? 'border-orange-300 border-2' : 'border-orange-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="flex items-center gap-1 px-2 py-1 bg-orange-100 rounded-full">
+            <AlertTriangle className="w-3 h-3 text-orange-600" />
+            <span className="text-xs font-semibold text-orange-600">
+              {t('alert')}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className="bg-white rounded-lg p-3 border border-orange-100 mb-3 flex items-center gap-2">
+        <MessageSquare className="w-5 h-5 text-orange-600" />
+        <div>
+          <div className="text-xs text-gray-600">{t('openRequests')}</div>
+          <div className="text-3xl font-bold text-orange-600">
+            {data.totalOpen}
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {requests.map((req) => (
+          <div
+            key={req.label}
+            className={`bg-${req.color}-50 rounded-lg p-3 border border-${req.color}-200`}
+          >
+            <div className="text-xs text-gray-600 mb-1">{req.label}</div>
+            <div className={`text-xl font-bold text-${req.color}-600`}>
+              {req.count}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MyOpenRequestsKpi;

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

@@ -0,0 +1,99 @@
+'use client';
+
+import { Clock, FileText, User } from 'lucide-react';
+import React from 'react';
+
+interface Request {
+  id: string;
+  type: string;
+  description: string;
+  submittedDate: string;
+  daysWaiting: number;
+  assignee?: string;
+}
+
+interface MyPendingRequestsListProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { requests: Request[] };
+  style?: React.CSSProperties;
+}
+
+const MyPendingRequestsList: React.FC<MyPendingRequestsListProps> = ({
+  title,
+  data = { requests: [] },
+  style,
+}) => {
+  const getTypeIcon = (type: string) => {
+    const icons: Record<string, string> = {
+      vacation: '🏖️',
+      schedule: '📅',
+      expense: '💰',
+      adjustment: '🔧',
+    };
+    return icons[type] || '📋';
+  };
+
+  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>
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-violet-100 text-violet-800">
+          {data.requests.length}
+        </span>
+      </div>
+      <div className="space-y-2 max-h-72 overflow-y-auto">
+        {data.requests.length === 0 ? (
+          <div className="text-center py-8">
+            <FileText className="w-8 h-8 text-gray-300 mx-auto mb-2" />
+            <p className="text-sm text-gray-600">
+              Nenhuma solicitação pendente
+            </p>
+          </div>
+        ) : (
+          data.requests.map((request) => (
+            <div
+              key={request.id}
+              className={`rounded-lg p-3 border transition-all ${request.daysWaiting > 14 ? 'bg-red-50 border-red-200' : request.daysWaiting > 7 ? 'bg-yellow-50 border-yellow-200' : 'bg-blue-50 border-blue-200'}`}
+            >
+              <div className="flex items-start gap-2 mb-2">
+                <span className="text-lg">{getTypeIcon(request.type)}</span>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-gray-900">
+                    {request.description}
+                  </p>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-2 text-xs">
+                <div className="flex items-center gap-1 text-gray-700">
+                  <Clock className="w-3 h-3" />
+                  <span>
+                    {request.daysWaiting === 0
+                      ? 'Hoje'
+                      : request.daysWaiting === 1
+                        ? 'Ontem'
+                        : `${request.daysWaiting}d atrás`}
+                  </span>
+                </div>
+                {request.assignee && (
+                  <div className="flex items-center gap-1 text-gray-700">
+                    <User className="w-3 h-3" />
+                    <span className="truncate">{request.assignee}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MyPendingRequestsList;

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

@@ -0,0 +1,78 @@
+'use client';
+
+import { Briefcase } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface MyProjectAllocationsKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: {
+    activeAllocations: number;
+    totalCapacity: number;
+    usedCapacity: number;
+    projects: Array<{ name: string; allocation: number; color: string }>;
+  };
+  style?: React.CSSProperties;
+}
+
+const MyProjectAllocationsKpi: React.FC<MyProjectAllocationsKpiProps> = ({
+  title,
+  data = {
+    activeAllocations: 0,
+    totalCapacity: 100,
+    usedCapacity: 0,
+    projects: [],
+  },
+  style,
+}) => {
+  const t = useTranslations('operations.MyProjectAllocationsKpi');
+  const capacityPercent = Math.round(
+    (data.usedCapacity / data.totalCapacity) * 100
+  );
+
+  return (
+    <div
+      className="bg-linear-to-br from-white to-indigo-50 rounded-lg shadow-sm p-4 border border-indigo-100"
+      style={style}
+    >
+      <h3 className="text-sm font-medium text-gray-700 mb-4">{title}</h3>
+      <div className="flex items-center gap-3 bg-indigo-50 rounded-lg p-3 mb-3">
+        <Briefcase className="w-5 h-5 text-indigo-600" />
+        <div>
+          <div className="text-xs text-gray-600">{t('activeProjects')}</div>
+          <div className="text-2xl font-bold text-indigo-600">
+            {data.activeAllocations}
+          </div>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <div className="flex justify-between items-center">
+          <span className="text-xs font-medium text-gray-700">
+            {t('capacity')}
+          </span>
+          <span
+            className={`text-xs font-bold px-2 py-1 rounded-full ${capacityPercent > 85 ? 'bg-red-100 text-red-700' : capacityPercent > 70 ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'}`}
+          >
+            {capacityPercent}%
+          </span>
+        </div>
+        <div className="relative w-full h-3 bg-gray-200 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-linear-to-r from-indigo-400 to-indigo-600 transition-all"
+            style={{ width: `${Math.min(capacityPercent, 100)}%` }}
+          />
+        </div>
+        <div className="flex justify-between text-xs text-gray-600">
+          <span>{data.usedCapacity}h usado</span>
+          <span>{data.totalCapacity}h total</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyProjectAllocationsKpi;