@hed-hog/operations 0.0.329 → 0.0.331

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;

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

@@ -0,0 +1,130 @@
+'use client';
+
+import { Clock, FileText, Plus, Send } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface QuickAction {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  color: string;
+  bgColor: string;
+  onClick?: () => void;
+}
+
+interface MyQuickActionsProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { actions?: QuickAction[] };
+  style?: React.CSSProperties;
+}
+
+const defaultActions: QuickAction[] = [
+  {
+    id: 'timesheet',
+    label: 'Registrar Timesheet',
+    icon: <Clock className="w-5 h-5" />,
+    color: 'text-blue-600',
+    bgColor: 'bg-blue-50 hover:bg-blue-100 border-blue-200',
+  },
+  {
+    id: 'request',
+    label: 'Nova Solicitação',
+    icon: <Plus className="w-5 h-5" />,
+    color: 'text-green-600',
+    bgColor: 'bg-green-50 hover:bg-green-100 border-green-200',
+  },
+  {
+    id: 'vacation',
+    label: 'Solicitar Férias',
+    icon: <Send className="w-5 h-5" />,
+    color: 'text-purple-600',
+    bgColor: 'bg-purple-50 hover:bg-purple-100 border-purple-200',
+  },
+  {
+    id: 'expense',
+    label: 'Lançar Despesa',
+    icon: <FileText className="w-5 h-5" />,
+    color: 'text-orange-600',
+    bgColor: 'bg-orange-50 hover:bg-orange-100 border-orange-200',
+  },
+];
+
+const MyQuickActions: React.FC<MyQuickActionsProps> = ({
+  title,
+  data,
+  style,
+}) => {
+  const t = useTranslations('operations.MyQuickActions');
+  const defaultActions: QuickAction[] = [
+    {
+      id: 'timesheet',
+      label: t('timesheetLabel'),
+      icon: <Clock className="w-5 h-5" />,
+      color: 'text-blue-600',
+      bgColor: 'bg-blue-50 hover:bg-blue-100 border-blue-200',
+    },
+    {
+      id: 'request',
+      label: t('requestLabel'),
+      icon: <Plus className="w-5 h-5" />,
+      color: 'text-green-600',
+      bgColor: 'bg-green-50 hover:bg-green-100 border-green-200',
+    },
+    {
+      id: 'vacation',
+      label: t('vacationLabel'),
+      icon: <Send className="w-5 h-5" />,
+      color: 'text-purple-600',
+      bgColor: 'bg-purple-50 hover:bg-purple-100 border-purple-200',
+    },
+    {
+      id: 'expense',
+      label: t('expenseLabel'),
+      icon: <FileText className="w-5 h-5" />,
+      color: 'text-orange-600',
+      bgColor: 'bg-orange-50 hover:bg-orange-100 border-orange-200',
+    },
+  ];
+  const actions = data?.actions ?? defaultActions;
+  return (
+    <div
+      className="bg-linear-to-br from-white to-emerald-50 rounded-lg shadow-sm p-4 border border-emerald-100"
+      style={style}
+    >
+      <h3 className="text-sm font-medium text-gray-700 mb-4">{title}</h3>
+      <div className="grid grid-cols-2 gap-2">
+        {actions.map((action) => (
+          <button
+            key={action.id}
+            onClick={action.onClick}
+            className={`${action.bgColor} border rounded-lg p-3 transition-all transform hover:scale-105 hover:shadow-md active:scale-95`}
+          >
+            <div
+              className={`${action.color} mb-2 transition-transform hover:scale-110`}
+            >
+              {action.icon}
+            </div>
+            <p className="text-xs font-medium text-gray-900 text-left">
+              {action.label}
+            </p>
+          </button>
+        ))}
+      </div>
+      <div className="mt-4 pt-4 border-t border-emerald-100">
+        <p className="text-xs text-gray-600 mb-2">{t('tipsTitle')}</p>
+        <ul className="text-xs space-y-1 text-gray-700">
+          <li>{t('tips.timesheet')}</li>
+          <li>{t('tips.vacation')}</li>
+          <li>{t('tips.expense')}</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default MyQuickActions;

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

@@ -0,0 +1,144 @@
+'use client';
+
+import { AlertCircle, CheckCircle2, Clock } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface Deadline {
+  id: string;
+  title: string;
+  dueDate: string;
+  daysLeft: number;
+  priority: 'high' | 'medium' | 'low';
+  status: 'on-track' | 'at-risk' | 'critical';
+}
+
+interface MyRelevantDeadlinesProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { deadlines: Deadline[] };
+  style?: React.CSSProperties;
+}
+
+const MyRelevantDeadlines: React.FC<MyRelevantDeadlinesProps> = ({
+  title,
+  data = { deadlines: [] },
+  style,
+}) => {
+  const t = useTranslations('operations.MyRelevantDeadlines');
+  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',
+          dot: 'bg-red-500 animate-pulse',
+          text: 'text-red-700',
+        };
+      case 'at-risk':
+        return {
+          bg: 'bg-yellow-50',
+          border: 'border-yellow-300',
+          dot: 'bg-yellow-500',
+          text: 'text-yellow-700',
+        };
+      default:
+        return {
+          bg: 'bg-green-50',
+          border: 'border-green-300',
+          dot: 'bg-green-500',
+          text: 'text-green-700',
+        };
+    }
+  };
+
+  return (
+    <div
+      className="bg-linear-to-br from-white to-red-50 rounded-lg shadow-sm p-4 border border-red-100"
+      style={style}
+    >
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        {(criticalCount > 0 || atRiskCount > 0) && (
+          <AlertCircle className="w-4 h-4 text-red-600 animate-pulse" />
+        )}
+      </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="grid grid-cols-2 gap-2 mb-3">
+                {criticalCount > 0 && (
+                  <div className="bg-red-100 rounded-lg p-2 border border-red-300">
+                    <div className="text-xs text-red-700 font-semibold">
+                      {criticalCount} crítico{criticalCount !== 1 ? 's' : ''}
+                    </div>
+                  </div>
+                )}
+                {atRiskCount > 0 && (
+                  <div className="bg-yellow-100 rounded-lg p-2 border border-yellow-300">
+                    <div className="text-xs text-yellow-700 font-semibold">
+                      {atRiskCount} em risco
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+            <div className="space-y-2 max-h-64 overflow-y-auto">
+              {data.deadlines.slice(0, 5).map((deadline) => {
+                const colors = getStatusColor(deadline.status);
+                return (
+                  <div
+                    key={deadline.id}
+                    className={`${colors.bg} rounded-lg p-3 border ${colors.border} hover:shadow-sm transition-all`}
+                  >
+                    <div className="flex items-start gap-2 mb-2">
+                      <div
+                        className={`w-3 h-3 rounded-full ${colors.dot} mt-1`}
+                      />
+                      <div className="flex-1">
+                        <p className="text-sm font-medium text-gray-900 truncate">
+                          {deadline.title}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between text-xs">
+                      <div className="flex items-center gap-1 text-gray-700">
+                        <Clock className="w-3 h-3" />
+                        <span>{deadline.dueDate}</span>
+                      </div>
+                      <span
+                        className={`font-semibold ${deadline.daysLeft <= 0 ? 'text-red-600' : deadline.daysLeft <= 3 ? 'text-orange-600' : 'text-gray-600'}`}
+                      >
+                        {deadline.daysLeft <= 0
+                          ? t('overdue')
+                          : `${deadline.daysLeft}d`}
+                      </span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MyRelevantDeadlines;

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

@@ -0,0 +1,78 @@
+'use client';
+
+import { AlertCircle, CheckCircle2, Clock } from 'lucide-react';
+import React from 'react';
+
+interface MyTimesheetStatusKpiProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { pendingCount: number; approvedCount: number; rejectedCount: number };
+  style?: React.CSSProperties;
+}
+
+const MyTimesheetStatusKpi: React.FC<MyTimesheetStatusKpiProps> = ({
+  title,
+  data = { pendingCount: 0, approvedCount: 0, rejectedCount: 0 },
+  style,
+}) => {
+  const total = data.pendingCount + data.approvedCount + data.rejectedCount;
+
+  return (
+    <div
+      className="bg-linear-to-br from-white to-blue-50 rounded-lg shadow-sm p-4 border border-blue-100 hover:shadow-md transition-shadow"
+      style={style}
+    >
+      <h3 className="text-sm font-medium text-gray-700 mb-4">{title}</h3>
+      <div className="grid grid-cols-3 gap-2">
+        <div className="bg-yellow-50 rounded-lg p-3 border border-yellow-200">
+          <div className="flex items-center gap-2 mb-2">
+            <Clock className="w-4 h-4 text-yellow-600" />
+            <span className="text-xs font-medium text-yellow-700">
+              Pendente
+            </span>
+          </div>
+          <div className="text-2xl font-bold text-yellow-600">
+            {data.pendingCount}
+          </div>
+        </div>
+        <div className="bg-green-50 rounded-lg p-3 border border-green-200">
+          <div className="flex items-center gap-2 mb-2">
+            <CheckCircle2 className="w-4 h-4 text-green-600" />
+            <span className="text-xs font-medium text-green-700">Aprovado</span>
+          </div>
+          <div className="text-2xl font-bold text-green-600">
+            {data.approvedCount}
+          </div>
+        </div>
+        <div className="bg-red-50 rounded-lg p-3 border border-red-200">
+          <div className="flex items-center gap-2 mb-2">
+            <AlertCircle className="w-4 h-4 text-red-600" />
+            <span className="text-xs font-medium text-red-700">Rejeitado</span>
+          </div>
+          <div className="text-2xl font-bold text-red-600">
+            {data.rejectedCount}
+          </div>
+        </div>
+      </div>
+      <div className="pt-2 border-t border-blue-100 mt-3 space-y-2 text-xs">
+        <div className="flex justify-between">
+          <span className="text-gray-600">Total:</span>
+          <span className="font-semibold text-gray-900">{total}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-gray-600">Taxa aprovação:</span>
+          <span
+            className={`font-semibold ${total > 0 && data.approvedCount / total > 0.8 ? 'text-green-600' : 'text-yellow-600'}`}
+          >
+            {total > 0 ? Math.round((data.approvedCount / total) * 100) : 0}%
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyTimesheetStatusKpi;

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

@@ -0,0 +1,99 @@
+'use client';
+
+import { Calendar } from 'lucide-react';
+import React from 'react';
+
+interface MyWeeklyJourneyProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: {
+    weekDays: Array<{
+      day: string;
+      hours: number;
+      status: 'completed' | 'pending' | 'off';
+    }>;
+    weekProgress: number;
+    targetHours: number;
+  };
+  style?: React.CSSProperties;
+}
+
+const MyWeeklyJourney: React.FC<MyWeeklyJourneyProps> = ({
+  title,
+  data = { weekDays: [], weekProgress: 60, targetHours: 40 },
+  style,
+}) => {
+  const totalHours = data.weekDays.reduce((sum, day) => sum + day.hours, 0);
+  const progressPercent = Math.min(
+    Math.round((totalHours / data.targetHours) * 100),
+    100
+  );
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return 'bg-gradient-to-t from-green-500 to-green-400';
+      case 'pending':
+        return 'bg-gradient-to-t from-gray-300 to-gray-200';
+      default:
+        return 'bg-gradient-to-t from-gray-100 to-gray-50';
+    }
+  };
+
+  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>
+        <Calendar className="w-4 h-4 text-cyan-600" />
+      </div>
+      <div className="space-y-2 mb-3">
+        <div className="flex justify-between items-center">
+          <span className="text-xs font-medium text-gray-700">
+            Progresso da Semana
+          </span>
+          <span className="text-xs font-bold text-cyan-600">
+            {progressPercent}%
+          </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-cyan-400 to-cyan-600 rounded-full transition-all"
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+        <div className="flex justify-between text-xs text-gray-600">
+          <span>{totalHours}h registradas</span>
+          <span>{data.targetHours}h meta</span>
+        </div>
+      </div>
+      <div className="text-xs font-medium text-gray-700 mb-2">
+        Horas por dia
+      </div>
+      <div className="flex items-end justify-between gap-1 h-24 bg-gradient-to-b from-cyan-50 to-white rounded-lg p-3 border border-cyan-100">
+        {data.weekDays.map((day, idx) => (
+          <div key={idx} className="flex flex-col items-center flex-1 gap-1">
+            <div
+              className={`w-full rounded-t transition-all ${getStatusColor(day.status)}`}
+              style={{
+                height:
+                  day.status === 'off'
+                    ? '8px'
+                    : `${Math.max((day.hours / 10) * 100, 8)}%`,
+                minHeight: day.status === 'off' ? '8px' : '12px',
+              }}
+            />
+            <div className="text-xs font-semibold text-gray-700">{day.day}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MyWeeklyJourney;