@hed-hog/operations 0.0.330 → 0.0.332

package/src/dashboard/widgets/ManagedProjectsStatus.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import { CheckCircle2, AlertCircle, Clock, TrendingUp } from 'lucide-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 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">Saúde dos Projetos</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">No Prazo</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">Em Risco</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">Atrasado</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">Concluído</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">Distribuição</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> projetos sob supervisão</div>
+    </div>
+  );
+};
+
+export default ManagedProjectsStatus;

package/src/dashboard/widgets/MyHoursPeriodKpi.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+/**
+ * Widget KPI: Minhas Horas no Período
+ * Mostra horas aprovadas vs. planejadas
+ * Para: operations-collaborator
+ */
+
+import React from 'react';
+import { Clock, CheckCircle2, AlertCircle } from 'lucide-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/src/dashboard/widgets/MyOpenRequestsKpi.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { MessageSquare, Clock, AlertTriangle } from 'lucide-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 hasUrgent = data.totalOpen > 5;
+  const requests = [
+    { label: 'Férias', count: data.vacationRequests, color: 'blue' },
+    { label: 'Ajuste Jornada', count: data.scheduleAdjustments, color: 'purple' },
+    { label: 'Despesas', count: data.expenseRequests, color: 'green' },
+    { label: 'Outros', 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">Atenção</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">Solicitações abertas</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/src/dashboard/widgets/MyPendingRequestsList.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { FileText, Clock, User } from 'lucide-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/src/dashboard/widgets/MyProjectAllocationsKpi.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import { Briefcase, TrendingUp } from 'lucide-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 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">Projetos ativos</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">Capacidade</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/src/dashboard/widgets/MyQuickActions.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import React from 'react';
+import { Plus, Send, Clock, FileText } from 'lucide-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 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">💡 Dicas úteis:</p>
+        <ul className="text-xs space-y-1 text-gray-700">
+          <li>✓ Complete seu timesheet toda semana</li>
+          <li>✓ Solicite férias com antecedência</li>
+          <li>✓ Registre despesas no prazo</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default MyQuickActions;

package/src/dashboard/widgets/MyRelevantDeadlines.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React from 'react';
+import { AlertCircle, CheckCircle2, Clock } from 'lucide-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 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">Nenhum prazo crítico</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 ? 'Vencido' : `${deadline.daysLeft}d`}
+                      </span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MyRelevantDeadlines;

package/src/dashboard/widgets/MyTimesheetStatusKpi.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import React from 'react';
+import { CheckCircle2, Clock, AlertCircle } from 'lucide-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/src/dashboard/widgets/MyWeeklyJourney.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import { Calendar } from 'lucide-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/src/dashboard/widgets/PortfolioCostsKpi.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React from 'react';
+import { DollarSign, TrendingDown } from 'lucide-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 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">Custos Totais</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">Utilização do Orçamento</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>R$ {(data.totalCosts / 1000).toFixed(1)}k gasto</span><span>R$ {(data.budgetAmount / 1000).toFixed(1)}k orçado</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">Economias</div><div className="text-2xl font-bold text-green-600">{data.savingsPercent}%</div></div>
+        <div><div className="text-xs text-gray-600 mb-1">Tendência</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' ? 'Reduzindo' : data.costTrend === 'up' ? 'Aumentando' : 'Estável'}
+        </div></div>
+      </div>
+    </div>
+  );
+};
+
+export default PortfolioCostsKpi;