@hed-hog/operations 0.0.329 → 0.0.331

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

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

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

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

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

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

package/hedhog/frontend/app/my-projects/page.tsx.ejs

@@ -6,6 +6,7 @@ import {
   PaginationFooter,
   SearchBar,
 } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
@@ -18,15 +19,16 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   CalendarDays,
+  CheckCircle2,
   Eye,
   FolderKanban,
   LayoutGrid,
   List,
   PlayCircle,
-  ShieldAlert,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
@@ -41,6 +43,22 @@ const MY_PROJECTS_VIEW_STORAGE_KEY = 'operations-my-projects-view-mode';
 
 type ProjectViewMode = 'table' | 'cards';
 
+function getPersonAvatarUrl(avatarId?: number | null): string {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : '/placeholder.png';
+}
+
+function getInitials(value?: string | null): string {
+  if (!value) return '?';
+  return value
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0]!.toUpperCase())
+    .join('');
+}
+
 export default function OperationsMyProjectsPage() {
   const t = useTranslations('operations.MyProjectsPage');
   const commonT = useTranslations('operations.Common');
@@ -56,7 +74,11 @@ export default function OperationsMyProjectsPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-my-projects:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<ProjectViewMode>(() => {
     if (typeof window === 'undefined') {
       return 'table';
@@ -124,13 +146,13 @@ export default function OperationsMyProjectsPage() {
         iconContainerClassName: 'bg-green-50 text-green-600',
       },
       {
-        key: 'atRisk',
-        title: t('cards.atRisk'),
-        description: t('cards.atRiskDescription'),
-        value: projects.filter((item) => item.status === 'at_risk').length,
-        icon: ShieldAlert,
-        accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
-        iconContainerClassName: 'bg-amber-50 text-amber-600',
+        key: 'completed',
+        title: t('cards.completed'),
+        description: t('cards.completedDescription'),
+        value: projects.filter((item) => item.status === 'completed').length,
+        icon: CheckCircle2,
+        accentClassName: 'from-sky-500/20 via-cyan-500/10 to-transparent',
+        iconContainerClassName: 'bg-sky-50 text-sky-600',
       },
       {
         key: 'upcomingDeliveries',
@@ -193,7 +215,6 @@ export default function OperationsMyProjectsPage() {
                   { value: 'all', label: commonT('filters.allStatuses') },
                   { value: 'planning', label: tProjectStatus('planning') },
                   { value: 'active', label: tProjectStatus('active') },
-                  { value: 'at_risk', label: tProjectStatus('at_risk') },
                   { value: 'paused', label: tProjectStatus('paused') },
                   { value: 'completed', label: tProjectStatus('completed') },
                   { value: 'archived', label: tProjectStatus('archived') },
@@ -266,11 +287,22 @@ export default function OperationsMyProjectsPage() {
                   </div>
 
                   <div className="grid gap-2 text-sm text-muted-foreground lg:grid-cols-2">
-                    <div>
-                      <span className="font-medium text-foreground">
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      <span className="shrink-0 font-medium text-foreground">
                         {commonT('labels.client')}:
-                      </span>{' '}
-                      {project.clientName || commonT('labels.notAvailable')}
+                      </span>
+                      <Avatar className="h-5 w-5 shrink-0">
+                        <AvatarImage
+                          src={getPersonAvatarUrl(project.clientAvatarId)}
+                          alt={project.clientName ?? ''}
+                        />
+                        <AvatarFallback className="text-[9px] font-medium">
+                          {getInitials(project.clientName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="truncate">
+                        {project.clientName || commonT('labels.notAvailable')}
+                      </span>
                     </div>
                     <div>
                       <span className="font-medium text-foreground">
@@ -367,8 +399,19 @@ export default function OperationsMyProjectsPage() {
                       </div>
                     </TableCell>
                     <TableCell>
-                      <div className="truncate">
-                        {project.clientName || commonT('labels.notAvailable')}
+                      <div className="flex min-w-0 items-center gap-1.5">
+                        <Avatar className="h-6 w-6 shrink-0">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            alt={project.clientName ?? ''}
+                          />
+                          <AvatarFallback className="text-[9px] font-medium">
+                            {getInitials(project.clientName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="truncate">
+                          {project.clientName || commonT('labels.notAvailable')}
+                        </span>
                       </div>
                     </TableCell>
                     <TableCell>