@hed-hog/operations 0.0.329 → 0.0.331

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

@@ -58,6 +58,7 @@ import { ContractFormScreen } from '../_components/contract-form-screen';
 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 {
   OperationsContract,
@@ -97,7 +98,11 @@ export default function OperationsContractsPage() {
   const [search, setSearch] = useState('');
   const [isActiveFilter, setIsActiveFilter] = useState('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-contracts:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
   const [contractToDelete, setContractToDelete] =
     useState<OperationsContract | null>(null);
@@ -159,7 +164,10 @@ export default function OperationsContractsPage() {
   const { data: stats } = useQuery<OperationsContractStats>({
     queryKey: ['operations-contracts-stats', currentLocaleCode],
     queryFn: () =>
-      fetchOperations<OperationsContractStats>(request, '/operations/contracts/stats'),
+      fetchOperations<OperationsContractStats>(
+        request,
+        '/operations/contracts/stats'
+      ),
   });
 
   const rows = contractsResponse?.data ?? [];
@@ -206,7 +214,11 @@ export default function OperationsContractsPage() {
       ) ?? null;
 
     if (document?.fileId) {
-      window.open(buildStoredFileUrl(document.fileId) || '', '_blank', 'noopener,noreferrer');
+      window.open(
+        buildStoredFileUrl(document.fileId) || '',
+        '_blank',
+        'noopener,noreferrer'
+      );
       return;
     }
 
@@ -288,7 +300,9 @@ export default function OperationsContractsPage() {
         </DropdownMenuItem>
         {access.isDirector ? <DropdownMenuSeparator /> : null}
         {access.isDirector ? (
-          <DropdownMenuItem onSelect={() => updateSheetQuery({ editId: contract.id })}>
+          <DropdownMenuItem
+            onSelect={() => updateSheetQuery({ editId: contract.id })}
+          >
             <Pencil className="size-4" />
             {commonT('actions.edit')}
           </DropdownMenuItem>
@@ -300,7 +314,9 @@ export default function OperationsContractsPage() {
             ) : (
               <ShieldCheck className="size-4" />
             )}
-            {contract.isActive ? detailT('labels.inactive') : detailT('labels.active')}
+            {contract.isActive
+              ? detailT('labels.inactive')
+              : detailT('labels.active')}
           </DropdownMenuItem>
         ) : null}
         {access.isDirector ? <DropdownMenuSeparator /> : null}
@@ -384,7 +400,9 @@ export default function OperationsContractsPage() {
                 <TableRow
                   key={contract.id}
                   className="cursor-pointer hover:bg-muted/30"
-                  onClick={() => router.push(`/operations/contracts/${contract.id}`)}
+                  onClick={() =>
+                    router.push(`/operations/contracts/${contract.id}`)
+                  }
                 >
                   <TableCell>
                     <div className="min-w-0">
@@ -401,7 +419,8 @@ export default function OperationsContractsPage() {
                   </TableCell>
                   <TableCell>
                     <span className="truncate text-sm text-muted-foreground">
-                      {contract.currentPdfFileName || commonT('labels.notAvailable')}
+                      {contract.currentPdfFileName ||
+                        commonT('labels.notAvailable')}
                     </span>
                   </TableCell>
                   <TableCell>
@@ -510,7 +529,9 @@ export default function OperationsContractsPage() {
         <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
           <SheetHeader className="sr-only">
             <SheetTitle>
-              {editingContractId ? commonT('actions.edit') : commonT('actions.create')}
+              {editingContractId
+                ? commonT('actions.edit')
+                : commonT('actions.create')}
             </SheetTitle>
             <SheetDescription>{t('description')}</SheetDescription>
           </SheetHeader>

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

@@ -0,0 +1,84 @@
+'use client';
+
+import { PieChart } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface CapacityArea {
+  name: string;
+  capacity: number;
+  percentage: number;
+  color: string;
+  icon: string;
+}
+
+interface CapacityDistributionProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { areas: CapacityArea[]; totalCapacity: number };
+  style?: React.CSSProperties;
+}
+
+const CapacityDistribution: React.FC<CapacityDistributionProps> = ({
+  title,
+  data = { areas: [], totalCapacity: 0 },
+  style,
+}) => {
+  const t = useTranslations('operations.CapacityDistribution');
+  const colorMap = ['blue', 'purple', 'pink', 'green', 'yellow', 'red'];
+  return (
+    <div
+      className="bg-linear-to-br from-white to-teal-50 rounded-lg shadow-sm p-4 border border-teal-100"
+      style={style}
+    >
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        <PieChart className="w-4 h-4 text-teal-600" />
+      </div>
+      <div className="space-y-3">
+        {data.areas.length === 0 ? (
+          <div className="text-center py-6 text-gray-500">
+            <PieChart className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">{t('empty')}</p>
+          </div>
+        ) : (
+          <>
+            {data.areas.map((area, idx) => (
+              <div key={idx} className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">{area.icon}</span>
+                    <span className="text-xs font-medium text-gray-900 truncate">
+                      {area.name}
+                    </span>
+                  </div>
+                  <span className="text-xs font-bold text-gray-700">
+                    {area.percentage}%
+                  </span>
+                </div>
+                <div className="relative w-full h-3 bg-gray-100 rounded-full overflow-hidden">
+                  <div
+                    className={`h-full bg-${colorMap[idx % colorMap.length]}-500 transition-all`}
+                    style={{ width: `${area.percentage}%` }}
+                  />
+                </div>
+                <div className="text-xs text-gray-600">{area.capacity}h</div>
+              </div>
+            ))}
+            <div className="pt-3 border-t border-teal-100 bg-teal-50 rounded-lg p-3 text-center">
+              <p className="text-xs text-teal-700 mb-1">{t('total')}</p>
+              <p className="text-2xl font-bold text-teal-600">
+                {data.totalCapacity}h
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CapacityDistribution;

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

@@ -0,0 +1,85 @@
+'use client';
+
+import { BarChart3 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+
+interface ProjectEffort {
+  name: string;
+  hours: number;
+  percent: number;
+  color: string;
+}
+
+interface EffortByProjectProps {
+  slug: string;
+  title: string;
+  roleSlug: string;
+  width?: number;
+  height?: number;
+  data?: { projects: ProjectEffort[]; totalHours: number };
+  style?: React.CSSProperties;
+}
+
+const EffortByProject: React.FC<EffortByProjectProps> = ({
+  title,
+  data = { projects: [], totalHours: 0 },
+  style,
+}) => {
+  const t = useTranslations('operations.EffortByProject');
+  const colorMap = [
+    'bg-blue-500',
+    'bg-purple-500',
+    'bg-pink-500',
+    'bg-green-500',
+    'bg-orange-500',
+  ];
+  return (
+    <div
+      className="bg-linear-to-br from-white to-pink-50 rounded-lg shadow-sm p-4 border border-pink-100"
+      style={style}
+    >
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+        <BarChart3 className="w-4 h-4 text-pink-600" />
+      </div>
+      <div className="space-y-3">
+        {data.projects.length === 0 ? (
+          <div className="text-center py-6 text-gray-500">
+            <BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">{t('empty')}</p>
+          </div>
+        ) : (
+          <>
+            {data.projects.slice(0, 5).map((project, idx) => (
+              <div key={idx} className="space-y-1">
+                <div className="flex justify-between items-center">
+                  <span className="text-xs font-medium text-gray-900 truncate">
+                    {project.name}
+                  </span>
+                  <span className="text-xs font-bold text-gray-700">
+                    {project.hours}h ({project.percent}%)
+                  </span>
+                </div>
+                <div className="relative w-full h-4 bg-gray-100 rounded-full overflow-hidden">
+                  <div
+                    className={`h-full ${colorMap[idx % colorMap.length]} transition-all`}
+                    style={{ width: `${project.percent}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+            <div className="pt-2 border-t border-pink-100 text-center">
+              <p className="text-xs text-gray-600 mb-1">{t('total')}</p>
+              <p className="text-2xl font-bold text-pink-600">
+                {data.totalHours}h
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EffortByProject;

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;