@hed-hog/operations 0.0.330 → 0.0.332

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;

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;